@section('title', 'PYPA - Contact Us')
@extends('frontend.layout.main')
@section('main-section')
    <!--  Preloader Start -->
    <x-frontend.preloader></x-frontend.preloader>

    <!--  Preloader End -->

    <!-- Theme Switcher Start -->
    <div class="switch-theme-mode">
        <label id="switch" class="switch">
            <input type="checkbox" onchange="toggleTheme()" id="slider">
            <span class="slider round"></span>
        </label>
    </div>
    <!-- Theme Switcher End -->

    <!-- Custom Cursor -->
    <div class="cursor style-one"></div>
    <div class="cursor-inner style-one"></div>

    <!-- Navbaar Top Start -->
    <x-frontend.navbar></x-frontend.navbar>
    <!-- Navbar Area End-->

    <!-- Breadcrumb Section Start -->
    <x-frontend.bread-crumb>
        <x-slot name="image">images/br-bg-4.jpg</x-slot>
        <x-slot name="title">Contact Us</x-slot>
        <li class="position-relative fs-xx-14 d-inline-block">Contact</li>
    </x-frontend.bread-crumb>
    <!-- Breadcrumb Section End -->
    <!-- Contact Us Section Start -->
    <div class="container style-one pt-120">
        <div class="row justify-content-center pb-90 gx-xxl-18">
            <div class="col-xl-4 col-md-6">
                <div class="contact-info-card text-center bg-mauve round-20 mb-30">
                    <h3 class="fs-24 fw-extrabold text-title">Telephone Support</h3>
                    <p class="text-title text-center px-xxl-4 mx-xxl-3">Call us Mon. – Fri., 8 am – 5 pm and our
                        representatives will help you make an appointment that’s convenient for you.</p>
                    <a href="tel:{{$infoSection->phone}}"
                        class="btn style-one font-secondary fw-semibold position-relative z-1 round-10">
                        <span>Call Support: {{$infoSection->phone}}
                            <img src="{{ asset('images/phone-icon-white.svg') }}" alt="Icon"
                                class="transition icon-left style-one">
                        </span>
                        <img src="{{ asset('images/phone-icon-white.svg') }}" alt="Icon"
                            class="transition icon-right style-one">
                    </a>
                </div>
            </div>
            <div class="col-xl-4 col-md-6">
                <div class="contact-info-card text-center bg-jordyBlue round-20 mb-30">
                    <h3 class="fs-24 fw-extrabold text-title">Virtual Visits</h3>
                    <p class="text-title text-center px-xxl-4 mx-xxl-3">You can have your appointment without leaving
                        your home. It’s the easiest way to get the care you need to stay healthy.</p>
                    <a href="{{route('contactus')}}" class="btn style-two font-secondary fw-semibold position-relative z-1 round-10">
                        <span>Contact Us
                            <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                class="transition icon-left">
                        </span>
                        <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon" class="transition icon-right">
                    </a>
                </div>
            </div>
            <div class="col-xl-4 col-md-6">
                <div class="contact-info-card text-center bg-chard round-20 mb-30">
                    <h3 class="fs-24 fw-extrabold text-title">Book An Appointment</h3>
                    <p class="text-title text-center px-xxl-5 mx-xxl-4">Make an appointment with us at
                        the nearest facility help to directly examine your health.</p>
                    <a href="{{route('contactus')}}"
                        class="btn style-one font-secondary fw-semibold position-relative z-1 round-10">
                        <span>Book An Appointment
                            <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon"
                                class="transition icon-left">
                        </span>
                        <img src="{{ asset('images/right-arrow-white.svg') }}" alt="Icon" class="transition icon-right">
                    </a>
                </div>
            </div>
        </div>
        <div class="text-center">
            <h6
                class="section-subtitle fw-medium font-primary d-inline-block text_secondary text-center position-relative mb-15">
                Get In Touch</h6>
            <h2 class="section-title fw-black text-title text-center mb-35">Don't Hesitate To Contact Us</h2>
        </div>
        <div class="row pb-90">
            <div class="col-xxl-7 col-xl-6 pe-xxl-4">
                <div class="form-box style-one round-20 mb-30">
                    <form action="{{ route('savecontactus') }}" method="POST" class="contact-form form-wrapper">
                        @csrf
                        <div class="row gx-xl-3">
                            <div class="col-md-6">
                                <div class="form-group position-relative mb-20">
                                    <input type="text" name="username" required
                                        class="w-100 ht-60 round-10 bg-ash text-para border-0" placeholder="Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-20">
                                    <input type="email" name="email" placeholder="Email" required
                                        class="w-100 ht-60 round-10 bg-ash text-para border-0">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-20">
                                    <input type="number" name="phone" placeholder="Phone" required
                                        class="w-100 ht-60 round-10 bg-ash text-para border-0">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-20">
                                    <input type="text" name="subject" placeholder="Subject"
                                        class="w-100 ht-60 round-10 bg-ash text-para border-0">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group mb-20">
                                    <textarea name="message" id="messages" cols="30" rows="10" placeholder="Write A Message"
                                        class="w-100 round-10 bg-ash text-para border-0 resize-0"></textarea>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check checkbox style-two mb-25">
                                    <input name="gridCheck" value="I agree to the terms and privacy policy."
                                        class="form-check-input" type="checkbox" id="gridCheck" required>
                                    <label class="form-check-label" for="gridCheck">
                                        I agree to the <a href="{{route('privacy-policy')}}"
                                            class="text-secondary link-hover-primary">Privacy Policy</a> and <a
                                            href="{{route('terms-and-conditions')}}" class="text-secondary link-hover-primary">Terms
                                            &amp; Conditions</a>
                                    </label>
                                    <div class="help-block with-errors gridCheck-error"></div>
                                </div>
                                <button type="submit"
                                    class="btn style-two font-secondary fw-semibold position-relative z-1 round-10">
                                    <span>Send Message
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-xxl-5 col-xl-6 ps-xxl-0">
                <div class="comp-map style-two w-100 round-20 mb-30">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3005.81013150941!2d73.07094217515905!3d33.64347013920508!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38df95f29ed30f3d%3A0x803009e52e7c76e8!2sPAK%20YOUNG%20PSYCHOLOGISTS%20ACADEMY%20%5BPYPA%5D%20Psychotherapy%7C%20Speech%20therapy%7C%20ABA%20Therapy%20%7C%20Autism%20%7C%20ADHD!5e1!3m2!1sen!2s!4v1771928300053!5m2!1sen!2s"
                        class="round-20">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact Us Section End -->

    <!-- Moving Text Start -->
    <div class="move-text mb-120">
        <ul class="list-unstyled mb-0">
            <li>Home Visits</li>
            <li>Online Consultation</li>
            <li>Quality Healthcare</li>
            <li>Home Visits</li>
            <li>Online Consultation</li>
            <li>Quality Healthcare</li>
        </ul>
    </div>
    <!-- Moving Text End -->

    <!-- Footer Start -->
    <x-frontend.footer></x-frontend.footer>
    <!-- Footer End -->

    <!-- Back to Top -->
    <div id="progress-wrap" class="progress-wrap style-one">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path id="progress-path" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
@endsection