@extends('web.home.layout.master')

@section('content')

<div id="page-content" style="padding-left: 5%;padding-right:5%">

    <div class="map-section map" >
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d495.1069776334746!2d79.85278117940881!3d6.907838159315157!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae25981dba47e21%3A0x402e035ad1601fb0!2sAmerican%20Plastics%20Pvt%20Ltd!5e0!3m2!1sen!2slk!4v1723458025533!5m2!1sen!2slk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        <div class="container" >

        </div>
    </div>
    <div class="bredcrumbWrap">
        <div class="container-fluid breadcrumbs">
            <a href="{{ route('american.plastic.web') }}" title="Back to the home page">Home</a><span aria-hidden="true"></span><span>Contact Us</span>
        </div>
    </div>
@if(session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Show your modal here
            // For example, if you're using Bootstrap:
            $('#successModal').modal('show');

            // You can also set the message content
            document.getElementById('modal-message').innerHTML = "{{ session('success') }}";
        });
    </script>
@endif
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successModalLabel">Success!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="modal-message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>


    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-8 col-lg-8 mb-4">
                <h2 style="font-family: 'Montserrat', sans-serif;font-weight: bold">Drop Us A Line</h2>
                <p style="font-size: 16px;">Have questions about our plastic products? Contact us for expert advice and personalized assistance. We’re here to help you find the perfect solution.</p>
                <div class="formFeilds contact-form form-vertical">
                  <form action="{{route('american.plastic.web.contact.us.form')}}" method="post"  id="contact_form" class="contact-form">
                    @csrf
                  <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                          <input type="text" id="ContactFormName" name="name" placeholder="Name" value="" required="">
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                        <input type="email" id="ContactFormEmail" name="email" placeholder="Email" value="" required="">
                        </div>
                    </div>
                  </div>
                  <div class="row">
                      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                          <div class="form-group">
                        <input required="" type="tel" id="ContactFormPhone" name="phone" pattern="[0-9\-]*" placeholder="Phone Number" value="">
                        </div>
                      </div>
                      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                          <div class="form-group">
                        <input required="" type="text" id="ContactSubject" name="subject" placeholder="Subject" value="">
                        </div>
                      </div>
                  </div>
                  <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="form-group">
                        <textarea required="" rows="10" id="ContactFormMessage" name="message" placeholder="Your Message"></textarea>
                        </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <input type="submit" class="btn" value="Send Message">
                    </div>
                 </div>
                 </form>
                </div>
            </div>
         <div class="col-12 col-md-4">
    <div class="card border-0 shadow-lg mb-4" style="border-radius: 16px; overflow: hidden;">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="card-title mb-0" style="font-weight: 600; color: #2c3e50; font-family: 'Montserrat', sans-serif;font-weight: bold" >Opening Hours</h5>
                <div style="width: 40px; height: 40px; background: #f8f9fa; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                    <i class="far fa-clock" style="color: #3498db;"></i>
                </div>
            </div>

            <div class="mb-4 p-3" style="background: #f8f9fa; border-radius: 12px;">
                <div class="d-flex justify-content-between mb-2">
                    <span style="font-weight: 500; color: #7f8c8d;">Weekdays</span>
                    <span style="font-weight: 600; color: #2c3e50;">8:30am - 5:00pm</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span style="font-weight: 500; color: #7f8c8d;">Saturday</span>
                    <span style="font-weight: 600; color: #2c3e50;">8:30am - 1:30pm</span>
                </div>
            </div>

            <div class="mb-4">
                <h6 class="mb-3" style="font-weight: 600; color: #2c3e50;font-family: 'Montserrat', sans-serif;font-weight: bold">Our Locations</h6>

                <div class="contact-item d-flex align-items-start mb-3">
                    <div class="me-3" style="min-width: 24px;">
                        <i class="fas fa-building" style="color: #e74c3c;"></i>
                    </div>
                    <div>
                        <p class="mb-0" style="font-weight: 500; color: #34495e;">Head office</p>
                        <p class="mb-0 small" style="color: #7f8c8d;font-size:14px;">No 281-1/6 R.A.De Mel Mawatha, Colombo 9, Sri Lanka</p>
                    </div>
                </div>

                <div class="contact-item d-flex align-items-start mb-3">
                    <div class="me-3" style="min-width: 24px;">
                        <i class="fas fa-industry" style="color: #3498db;"></i>
                    </div>
                    <div>
                        <p class="mb-0" style="font-weight: 500; color: #34495e;">Corporate office</p>
                        <p class="mb-0 small" style="color: #7f8c8d;font-size:14px;">120, UDA Industrial Zone, Katuwana, Homagama</p>
                    </div>
                </div>

                <div class="contact-item d-flex align-items-start mb-3">
                    <div class="me-3" style="min-width: 24px;">
                        <i class="fas fa-store" style="color: #2ecc71;"></i>
                    </div>
                    <div>
                        <p class="mb-0" style="font-weight: 500; color: #34495e;">Showroom</p>
                        <p class="mb-0 small" style="color: #7f8c8d;font-size:14px;">273 Puttalam Rd, Kurunegala</p>
                    </div>
                </div>

                <div class="contact-item d-flex align-items-start mb-3">
                    <div class="me-3" style="min-width: 24px;">
                        <i class="fas fa-store" style="color: #f39c12;"></i>
                    </div>
                    <div>
                        <p class="mb-0" style="font-weight: 500; color: #34495e;">Factory</p>
                        <p class="mb-0 small" style="color: #7f8c8d;font-size:14px;">No.44/1, Artigala Road, Panaluwa, Padukka</p>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <h6 class="mb-3" style="font-weight: 600; color: #2c3e50;font-family: 'Montserrat', sans-serif;font-weight: bold">Contact Info</h6>

                <div class="contact-item d-flex align-items-center mb-3">
                    <div class="me-3" style="min-width: 24px;">
                        <i class="fas fa-phone-alt" style="color: #9b59b6;"></i>
                    </div>
                    <div>
                        <a href="tel:+94 77 286 4877 " style="font-weight: 500; color: #34495e; text-decoration: none;font-size:14px;">+94 77 286 4877 </a>
                    </div>
                </div>

                <div class="contact-item d-flex align-items-center mb-3">
                    <div class="me-3" style="min-width: 24px;">
                        <i class="fas fa-envelope" style="color: #e74c3c;"></i>
                    </div>
                    <div>
                        <a href="mailto:americanplasticslk@gmail.com" style="font-weight: 500; color: #34495e; text-decoration: none;font-size:14px;">info@americanplastic.lk</a>
                    </div>
                </div>
            </div>

            <div class="mt-4 pt-3">
                <h6 class="mb-3" style="font-weight: 600; color: #2c3e50;font-family: 'Montserrat', sans-serif;font-weight: bold">Follow Us</h6>
                <div class="d-flex">
                    <a href="https://www.facebook.com/AmericanPlastics.lk/" target="_blank" class="social-icon me-2" style="width: 40px; height: 40px; background: #3b5998; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="https://vt.tiktok.com/ZS2h2Eu2A/" target="_blank" class="social-icon me-2" style="width: 40px; height: 40px; background: #000; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fab fa-tiktok"></i>
                    </a>
                    <a href="https://www.instagram.com/american_premium_plastics?igsh=MXpnMHMxbDR6MTZy" target="_blank" class="social-icon me-2" style="width: 40px; height: 40px; background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://youtube.com/@american_plastics?si=5kn735rDc9lTrfhy" target="_blank" class="social-icon" style="width: 40px; height: 40px; background: #ff0000; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i class="fab fa-youtube"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

        </div>
    </div>

</div>

@endsection