<!doctype html>
<html lang="en">


@include('users.layout.head')

<body>
    @include('users.layout.header')
    @if ($errors->any())
        <div class="alert alert-danger w-100">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('success'))
        <div class="alert alert-success w-100">
            {{ session('success') }}
        </div>
    @endif
    @yield('content')
    <footer class="footer pt-lg-5 pt-3 pb-3" style="background-image: url('{{ asset('eye/images/banner-inner.jpg') }}');    background-repeat: no-repeat;
    background-size: fill;
    object-fit: fill;
    background-position: center;
    background-size: cover;">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="footer__heading pt-lg-4">
                        <strong>Connect with us:</strong>
                        <ul class="d-flex justify-content-start align-items-center gap-3 pt-3">

                            <li><a href="{{ $contactInfo->facebook }}"><i class="fa-brands fa-facebook-f"></i></a></li>
                            <li><a href="{{ $contactInfo->twitter }}"><i class="fa-brands fa-twitter"></i></a></li>
                            <li><a href="{{ $contactInfo->instagram }}"><i class="fa-brands fa-instagram"></i></a></li>
                            <li><a href="{{ $contactInfo->linkedin }}"><i class="fa-brands fa-linkedin-in"></i></a></li>
                        
                        </ul>

                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="row">
                        <div class="col-lg-4">
                            <ul class="f-link-list__items">
                                <strong>Quick Links</strong>
                                <li class="f-link-list__item">
                                    <a href="/" class="a-link" target="">
                                        <span aria-hidden="true">Home</span>
                                    </a>
                                </li>
                                <li class="f-link-list__item">
                                    <a href="{{route('about')}}" class="a-link" target="">
                                        <span aria-hidden="true">About Us</span>
                                    </a>
                                </li>
                                {{-- <li class="f-link-list__item">
                                    <a href="{{route('men')}}" class="a-link" target="">
                                        <span aria-hidden="true">Medium Grain Rice</span>
                                    </a>
                                </li> --}}
                                {{-- <li class="f-link-list__item">
                                    <a href="{{route('women')}}" class="a-link" target="">
                                        <span aria-hidden="true">Long Grain Rice</span>
                                    </a>
                                </li>
                                <li class="f-link-list__item">
                                    <a href="{{route('child')}}" class="a-link" target="">
                                        <span aria-hidden="true">Short Grain Rice</span>
                                    </a>
                                </li>
                                <li class="f-link-list__item">
                                    <a href="{{route('all')}}" class="a-link" target="">
                                        <span aria-hidden="true">All Product</span>
                                    </a>
                                </li> --}}
                                
                            </ul>
                        </div>
                        <div class="col-lg-8">
                            <ul class="f-link-list__items text-white">
                                <strong>contact us</strong>
                            @php
                                $about = \App\Models\AboutUs::orderBy('id')->first();
                            @endphp
                            
                            @if ($about)
                                {{ \Illuminate\Support\Str::words(strip_tags($about->description), 20, '...') }}
                            @endif

                                <p>{{ $contactInfo->address }}</p>
                                <p>{{ $contactInfo->email }}</p>
                                <p>{{ $contactInfo->phone }}</p>
                               
                            </ul>
                        </div>
                   
                    </div>
                </div>
                <div class="col-lg-12">
                  <div class="d-flex flex-wrap justify-content-between border-top-blue align-items-center">
                        <p class="text-white pt-4">Copyright © 2025 Water Foundation Pool</p>
                        <p class="pb-0 text-white">Designed and Developed by: <a href="https://nehantechsolution.com/" target="_blank">Nehan Tech Solution</a></p>
                    </div>

                   
                </div>
            </div>
        </div>

    </footer>
    <div class="modal fade" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content modal-bg p-4">
                <div class="modal-header">
                    <h5 class="modal-title text-white fs-3 fw-bold" id="appointmentModalLabel">Make an Appointment
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form class="modal-body row g-3" method="POST" action="{{ route('appointment.submit') }}">
                    @csrf
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="full_name" placeholder="Full Name" required>
                    </div>
                    <div class="col-md-6">
                        <input type="email" class="form-control" name="email" placeholder="Email Address" required>
                    </div>
                    <div class="col-md-6">
                        <input type="tel" class="form-control" name="phone" placeholder="Phone Number" required>
                    </div>
                    <div class="col-md-3">
                        <input type="date" class="form-control" name="date" required>
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="time" required>
                    </div>
                    <div class="col-12">
                        <textarea class="form-control" name="message" rows="4" placeholder="Your Message (Optional)"></textarea>
                    </div>
                    <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">
                        <p class="mb-0 text-white">You can book Doctor through Phone Call : {{ $contactInfo->phone }}</p>
                        <button type="submit" class="btn btn-success px-4">Submit</button>
                    </div>
                </form>
                
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="{{ asset('eye/OwlCarousel/dist/owl.carousel.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous">
    </script>
            <script>
            $('.owl-banner').owlCarousel({
            loop: true,
            nav: true,
            dots:false,
            navText: [
                '<i class="fa fa-chevron-left"></i>',
                '<i class="fa fa-chevron-right"></i>'
            ],
            margin: 10,
            autoplay: true,
            autoplaySpeed: 3000,
            autoplayHoverPause: true,
            responsive: {
                0: { items: 1 },
                600: { items: 1 },
                1000: { items: 1 }
            }
        });


        $('.owl-services').owlCarousel({
            loop: false,
            nav: false,
            dots: false,
            autoplay: true,
            margin: 20,
            autoplaySpeed: 3000,
            autoplayHoverPause: true,

            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                }
            }
        })
        $('.owl-doctor').owlCarousel({
            loop: false,
            nav: false,
            dots: false,
            autoplay: true,
            margin: 20,
            autoplaySpeed: 3000,
            autoplayHoverPause: true,

            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                },
                1200: {
                    items: 4
                }
            }
        })
    </script>
    <script>
        $(document).ready(function(){
          $('#testimonial-carousel').owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            dots: true,
            autoplay: true,
            responsive:{
              0:{ items:1 },
              768:{ items:2 }
            }
          });
        });
        </script>
        
</body>

</html>
