@php
    $contactData = resolve('App\Http\Controllers\FrontendController')->getContactDetails();
@endphp

<section class="footer-section">
    <div class="container">
        <div class="footer-top">
            <div class="row">
                <div class="col-md-5">
                    <h4 class="footer-title">About Proxima</h4>
                    <p class="footer-para">At Proxima, we bring innovation to both personal and professional spaces through our range of advanced digital solutions.</p>
                    <div class="social_link pt-4">
                        <ul class="p-0 m-0 d-flex">
                            <Li class="pe-4"><a href="#" class="text-white fs-3"><i
                                        class="fa-brands fa-x-twitter"></i></a></Li>
                            <Li class="pe-4"><a href="#" class="text-white fs-3"><i
                                        class="fa-brands fa-facebook"></i></a></Li>
                            <Li class="pe-4"><a href="#" class="text-white fs-3"><i
                                        class="fa-brands fa-instagram"></i></a></Li>
                            <Li class="pe-4"><a href="#" class="text-white fs-3"><i
                                        class="fa-brands fa-github"></i></a>
                            </Li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <h4 class="footer-title">Useful links</h4>
                    <ul>
                        <li class="pb-2"><a href="{{route('frontend.about-us.index')}}" class="footer-link"> About </a></li>
                        <li class="pb-2"><a href="{{route('frontend.contact-us.index')}}" class="footer-link"> Customer Support </a></li>
                        <li class="pb-2"><a href="#" class="footer-link"> Term &Conditions </a></li>
                        <li class="pb-2"><a href="#" class="footer-link"> Policy </a></li>
                         <li class="pb-2"><a href="{{route('frontend.blog.index')}}" class="footer-link"> How to - Blog </a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h4 class="footer-title">Contact address</h4>
                    <p class="text-white">Address : {{$contactData['address']}}</p>
                    <p class="text-white">Email : {{$contactData['email']}}</p>
                    <p class="text-white">Phone : {{$contactData['mobile']}}</p>
                </div>
            </div>
        </div>
        <div class="row pt-4">
        <div class="col-md-12">
        <div class="d-flex justify-content-center">
        <h6 class="copy-text">  2024 All rights reserved . Design by  <a href="https://samadhandigitech.com/" target="_blank" class="text-decoration-none">Samadhan digitech </h6>
        </div>
        </div>
        </div>
    </div>
</section>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal-enquire" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Enquire Now</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form role="form" id="enqueryForm">
                    <div class="modal-body">
                        <div class="col-lg-12">
                            <div class="contact-form-inner">
                                <form id="contactForm" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-outline">
                                                <input type="text" id="name" class="form-control form-control-lg"
                                                    name="name" placeholder="Name" required />
                                                <label class="form-label" for="name"> </label>
                                            </div>
                                        </div>
                                        {{-- <div class="col-lg-6">
                                            <div class="form-outline">
                                                <input type="text" id="email" class="form-control form-control-lg"
                                                    name="email" placeholder="Email" required />
                                                <label class="form-label" for="email"></label>
                                            </div>
                                        </div> --}}
                                        <div class="col-lg-6">
                                            <div class="form-outline">
                                                <input type="tel" maxlength="10" class="form-control form-control-lg"
                                                    name="number" placeholder="Mobile" id="number"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '');" />
                                                <label class="form-label" for="number"></label>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <span class="wpcf7-form-control-wrap" data-name="your-message">
                                                <textarea type="text" cols="60" rows="10" class="wpcf7-form-control wpcf7-textarea"
                                                    aria-invalid="false" placeholder="Your Message" name="message" id="message" style="padding: 10px;"></textarea>
                                            </span>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="text-center" id="responseMsg"></div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--<div class="modal-footer">-->
                    <!--    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>-->
                    <!--    <button type="button" class="btn btn-primary" id="enqueryForm1">Submit</button>-->
                    <!--</div>-->
                    <div class="modal-footer">
                            <button type="button" class="get-started mt-0" id="enqueryForm1">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>








<!-----footer end here -->
<script src="{{ asset('frontend/assets/js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ asset('frontend/assets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('frontend/assets/js/slick.min.js') }}"></script>
<script src="{{ asset('frontend/assets/js/owl.carousel.min.js') }}"></script>
<script>
    document.getElementById('category-select').addEventListener('change', function() {
        var selectedCategory = this.value;
        if (selectedCategory) {
            // Redirect to the selected category's route
            window.location.href = '{{ route('frontend.product.ProductByCategory', '') }}/' + selectedCategory;
        }
    });
</script>
<script type="text/javascript">


const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {

    const button = event.relatedTarget
    
    const title = button.getAttribute('data-bs-title')
    const description = button.getAttribute('data-bs-description')
   
    const modalTitle = exampleModal.querySelector('#exampleModalLabel')
    const modalBodyInput = exampleModal.querySelector('#exampleModalDescription')

    modalTitle.textContent = title
    modalBodyInput.innerHTML = description
  })
}
    $(document).ready(function () {
        $('.single-item').slick({
            autoplay: true,
            autoplaySpeed: 2500,
            infinite: true,
            arrows: true,
        });
    });
</script>
<script>
$('.home-owl ').owlCarousel({
    loop:true,
    margin:10,
    slidesToShow: 4,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:2,
            nav:false
        },
        1000:{
            items:4,
            nav:true,
            loop:false
        }
    }
})
</script>
<script>
    $('.product-owl').owlCarousel({
        loop:true,
        margin:10,
        slidesToShow: 4,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
                nav:true
            },
            600:{
                items:3,
                nav:false
            },
            1000:{
                items:4,
                nav:true,
                loop:false
            }
        }
    })
    </script>
<script type="text/javascript">
    $('.responsive').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,

        // nextArrow: '<i class="fa fa-arrow-right"></i>',
        // prevArrow: '<i class="fa fa-arrow-left"></i>',
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });  
</script>
<script type="text/javascript">
    $('.responsive_new').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });  
</script>
<script type="text/javascript">
    $('.responsive_block').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });  
</script>
<script type="text/javascript">
    $('.responsive_block_new').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 4,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });  
</script>
<script type="text/javascript">
    $('.responsive_block_courses_by_iid').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });  
</script>
<script>
    function getTimeRemaining(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor((t / 1000) % 60);
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
        var days = Math.floor(t / (1000 * 60 * 60 * 24));
        return {
            total: t,
            days: days,
            hours: hours,
            minutes: minutes,
            seconds: seconds
        };
    }

    function initializeClock(id, endtime) {
        var clock = document.getElementById(id);
        var daysSpan = clock.querySelector(".days");
        var hoursSpan = clock.querySelector(".hours");
        var minutesSpan = clock.querySelector(".minutes");
        var secondsSpan = clock.querySelector(".seconds");

        function updateClock() {
            var t = getTimeRemaining(endtime);

            if (t.total <= 0) {
                clearInterval(timeinterval);

                var newTime = Date.parse(endtime);
                var nowTime = Date.parse(new Date());

                while (newTime <= nowTime) {
                    newTime = newTime + 1 * 24 * 60 * 60 * 1000; // add 24hours
                }

                var deadline = new Date(newTime);
                initializeClock('countdown', deadline);
            } else {
                daysSpan.innerHTML = t.days;
                hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
                minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
                secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
            }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
    }

    var deadline = "february 4 2024 00:00:00 GMT+0200";
    initializeClock("countdown", deadline);
</script>
<script>
    $(document).ready(function () {
        $('.owl-carousel').owlCarousel({
            loop: true,
            items: 5,
            margin: 30,
            nav: false,
            dots: false,
            autoplay: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 2
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        })
    });
</script>
<script>
 document.addEventListener('DOMContentLoaded', function() {
  var readMoreBtn = document.getElementById('readMoreBtn');
  var extraContent = document.querySelector('.extra-content');

  readMoreBtn.addEventListener('click', function() {
    if (extraContent.style.display === 'none' || extraContent.style.display === '') {
      extraContent.style.display = 'inline'; // Display the extra content
      readMoreBtn.textContent = 'Read Less';
    } else {
      extraContent.style.display = 'none'; // Hide the extra content
      readMoreBtn.textContent = 'Read More';
    }
  });
});
</script>
<!-- Modal -->



</body>

</html>

 {{-- new nav bar enquire now btn moddal  --}}

 {{-- @push('scripts')
    <script>

        $(document).ready(function() {
            $('.enquireBtn').on('click', function() {
                $('#exampleModal-enquire').modal('show');
            });
            $('#enqueryForm1').on('click', function() {
                var name = $('#name').val();
                // var email = $('#email').val();
                var number = $('#number').val();
                var message = $('#message').val();
                var submitType = $('#submitType').val();
                console.log(message);
                $.ajax({
                    url: "{{ route('contact.store') }}",
                    type: 'POST',
                    data: {
                        'name': name,
                        // 'email': email,
                        'number': number,
                        'message': message,
                        'submitType': submitType
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function(response) {
                        
                   
                        if (response.success == true) {

                            $('#responseMsg').html('<sapn class="text-success">' + response
                                .message + '</span>');
                            setTimeout($('#exampleModal-enquire').modal('hide'), 1000);
                        } else {
                            
                            $('#responseMsg').html('<sapn class="text-danger">' + response
                                .message + '</span>');
                        }
                    },
                    error: function(response) {
                        console.log(response);
                        $('#responseMsg').html(
                            '<sapn class="text-danger">Error Sending message!</span>');
                    }
                });
            });


            $('.chooseUsBtn').on('click', function() {
                var youtubeUrl = $(this).data('url');
                $('#chooseHeading').text($(this).data('heading'));
                $('#chooseUsModalVideo').attr('src', 'https://www.youtube.com/embed/' + youtubeUrl);
                $('#chooseUsModal').modal('show');
            });
        });
    </script>
@endpush --}}

<script>
    $(document).ready(function() {
        $('#enqueryForm1').click(function(e) {
            e.preventDefault(); // Prevent the default form submission
            
            // Collect form data
            var formData = {
                // _token: $('input[name="_token"]').val(), // CSRF token
                name: $('#name').val(),
                number: $('#number').val(),
                message: $('#message').val()
            };
           
            // AJAX request
            $.ajax({
                url: "{{ route('contact.store') }}",
                type: 'POST',
                data: formData,
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                success: function(response) {
                    // Handle success response
                    $('#responseMsg').html('<div class="alert alert-success">' + response.message + '</div>');
                },
                error: function(xhr) {
                    // Handle error response
                    var errorMessage = xhr.responseJSON ? xhr.responseJSON.message : 'An error occurred';
                    $('#responseMsg').html('<div class="alert alert-danger">' + errorMessage + '</div>');
                }
            });
        });
    });
</script>