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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    @yield('meta')
    @yield('title')
    <title>Second-Innings</title>
    @yield('css')
    <link rel="icon" href="images/Recurt_img/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- slick_style -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    <!-- Google_font_link -->
    <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Libre+Baskerville:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Font_awosome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- swiper_css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css" integrity="sha512-okkLcBJE+U19Dpd0QdHA1wn4YY6rW3CwaxeLJT3Jmj9ZcNSbln/VYw8UdqXRIwLX7J8PmtHs0I/FPAhozFvXKg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    @include('layouts.header')
    @yield('content')
    @include('layouts.footer')
    @yield('js')

    <!-- JS_link -->
    <script src="{{asset('js/_jquery.min.js')}}"></script>
    <script src="{{asset('js/popper.min.js')}}"></script>
    <script src="{{asset('js/bootstrap.min.js')}}"></script>
    <script src="{{asset('js/jquery.nivo.slider.js')}}"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <!-- slick_js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    <!-- swiper_js -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script> -->

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->



    <script>
        var nav = document.querySelector('nav'); // Identify target

        window.addEventListener('scroll', function(event) { // To listen for event
            event.preventDefault();

            if (window.scrollY <= 150) { // Just an example
                nav.style.backgroundColor = '#fff'; // or default color
            } else {
                nav.style.backgroundColor = '#fff';
            }
        });
    </script>
    <script>
        AOS.init();
    </script>
    <script>
        $('.center').slick({
            dots: true,
            infinite: true,
            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>
    <!-- slick_script -->
    <script>
        $('.slider').slick({
            dots: true,
            infinite: true,
            speed: 300,
            autoplay: false,
            arrows: true,
            slidesToShow: 5,
            slidesToScroll: 5,
            responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 4,
                        infinite: true,
                        dots: true
                    }
                }, {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }, {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }, {
                    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>
        $('.coustomer_slider').slick({
            dots: true,
            infinite: true,
            speed: 300,
            autoplay: false,
            slidesToShow: 2,
            slidesToScroll: 2,
            responsive: [{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 4,
                        infinite: true,
                        dots: true
                    }
                }, {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                    }
                }, {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                        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>
        const menuHamburger = document.querySelector(".menu_humberger")
        const navlink = document.querySelector(".navlink")
        menuHamburger.addEventListener('click', () => {
            navlink.classList.toggle('mobele-menu')
        })
    </script>

    <!-- <script>
    AOS.init();
</script> -->

    <script>
        $(document).ready(function() {

            var counters = $(".count");
            var countersQuantity = counters.length;
            var counter = [];

            for (i = 0; i < countersQuantity; i++) {
                counter[i] = parseInt(counters[i].innerHTML);
            }

            var count = function(start, value, id) {
                var localStart = start;
                setInterval(function() {
                    if (localStart < value) {
                        localStart++;
                        counters[id].innerHTML = localStart;
                    }
                }, 40);
            }

            for (j = 0; j < countersQuantity; j++) {
                count(0, counter[j], j);
            }
        });
        // Image Slider Demo:
        // https://codepen.io/vone8/pen/gOajmOo
    </script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function savecontact() {
            // alert(3);
            var subject = $('.subject').val();
            // alert(8);
            var phone = $('.phone').val();
            var message = $('.message').val();
            var email = $('.email').val();
            var domain = email.split('@')[1];
            //  console.log(message, subject);
            // alert(name);
            if (email == '') {
                $('#errorEmail').text("Please Enter Valid Email");
                setTimeout(function() {
                    $('#errorEmail').text(" ");
                }, 2000);
            } else if (phone == '') {
                $('#errorPh').text("Please Enter Valid Phone Number");
                setTimeout(function() {
                    $('#errorPh').text(" ");
                }, 2000);
            } else if (subject == '') {
                $('#errorSub').text("Please Select One Option");
                setTimeout(function() {
                    $('#errorSub').text(" ");
                }, 2000);
            } else if (message == '') {
                $('#errorMsg').text("Please Enter Message");
                setTimeout(function() {
                    $('#errorMsg').text(" ");
                }, 2000);
            } else if (validateEmail(email)) {
                // console.log('A');
                if (domain.toLowerCase().includes('xyz')) {
                    // console.log('B');
                    $('#errorEmail').text("Email address with .xyz domain is not allowed");
                    setTimeout(function() {
                        $('#errorEmail').text(" ");
                    }, 2000);
                } else {
                    $.ajax({
                        url: "{{ route('contact-form-submit') }}",
                        data: {
                            _token: "{{ csrf_token() }}",
                            subject: subject,
                            phone: phone,
                            email: email,
                            message: message
                        },
                        type: "POST",
                        success: function(result) {

                            if ($.isEmptyObject(result.error)) {
                                $('.email').val('');
                                $('.phone').val('');
                                $('.message').val('');
                                $('.subject').val('');
                                /*alert(res.success);  */
                                $('#msgSuccess').html(result);
                                setTimeout(function() {
                                    $('#msgSuccess').text(" ");
                                }, 3000);

                            } else {
                                printErrorMsg(result.error);
                            }
                        }
                    });

                    function printErrorMsg(msg) {
                        $(".print-error-msg").find("ul").html('');
                        $(".print-error-msg").css('display', 'block');
                        $.each(msg, function(key, value) {
                            console.log(value);
                            if (value == 'The phone must be 10 digits.') {
                                $('#errorPh').text("The phone must be 10 digits.");
                                setTimeout(function() {
                                    $('#errorPh').text(" ");
                                }, 2000);
                            }
                            if (value == 'The email must be a valid email address.') {
                                $('#errorEmail').text("The email must be a valid email address.");
                                setTimeout(function() {
                                    $('#errorEmail').text(" ");
                                }, 2000);
                            }
                        });
                    }
                }
            } else {
                $('#errorEmail').text("Invalid email address");
                setTimeout(function() {
                    $('#errorEmail').text(" ");
                }, 2000);

            }

            function validateEmail(email) {
                var re = /\S+@\S+\.\S+/;
                return re.test(email);
            }


        }

        function subscribeNewslatters() {
            var email = $('.email').val();
            if (email == '') {
                $('#errormail').text("Please Enter valid email");
                setTimeout(function() {
                    $('#errormail').text(" ");
                }, 3000);
            }
            $.ajax({
                url: "{{ route('subscribeFormSubmit') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    email: email

                },
                type: "POST",
                success: function(res) {

                    if ($.isEmptyObject(res.error)) {
                        /*alert(res.success);  */
                        $('#errormail').html(res);
                        $('.email').val(" ");
                        setTimeout(function() {
                            $('#errormail').text(" ");
                        }, 3000);



                    } else {
                        printErrorMsg(res.error);
                    }
                }

            });

            function printErrorMsg(msg) {
                $(".print-error-msg").find("ul").html('');
                $(".print-error-msg").css('display', 'block');
                $.each(msg, function(key, value) {
                    $(".print-error-msg").find("ul").append('<li>' + value + '</li>');
                    $('.print-error-msg').delay(5000).fadeOut();
                });
            }
        }

        function callSubmit() {
            // alert(3);
            var subject = $('.jobType').val();
            var name = $('.name').val();
            var phone = $('.mobile').val();
            var company = $('.cpName').val();
            var address = $('.add').val();
            var message = $('.msg').val();

            console.log();
            // alert(name);

            if (!$('input[name="jobType"]').is(':checked')) {
                $('#errorSub').text("Select An Option");
                setTimeout(function() {
                    $('#errorSub').text(" ");
                }, 2000);
            } else if (name == '') {
                $('#errorName').text("Please Enter Your Name");
                setTimeout(function() {
                    $('#errorName').text(" ");
                }, 2000);
            } else if (phone == '') {
                $('#errorMob').text("Please Enter Valid Phone Number");
                setTimeout(function() {
                    $('#errorMob').text(" ");
                }, 2000);
            } else if (company == '') {
                $('#errorCompany').text("Enter Company Name");
                setTimeout(function() {
                    $('#errorCompany').text(" ");
                }, 2000);
            } else if (address == '') {
                $('#errorAdd').text("Please Enter Your Address ");
                setTimeout(function() {
                    $('#errorAdd').text(" ");
                }, 2000);
            } else if (message == '') {
                $('#errorMsg').text("Please Enter Message");
                setTimeout(function() {
                    $('#errorMsg').text(" ");
                }, 2000);
            } else {
                $.ajax({
                    url: "{{ route('callSubmit') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        subject: subject,
                        name: name,
                        phone: phone,
                        company: company,
                        address: address,
                        message: message
                    },
                    type: "POST",
                    success: function(result) {

                        if ($.isEmptyObject(result.error)) {
                            $('.jobType').prop('checked', false);
                            $('.name').val('');
                            $('.mobile').val('');
                            $('.cpName').val('');
                            $('.add').val('');
                            $('.msg').val('');
                            /*alert(res.success);  */
                            $('#msgCall').html(result);
                            setTimeout(function() {
                                $('#msgCall').text(" ");
                            }, 3000);

                        } else {
                            printErrorMsg(result.error);
                        }
                    }
                });

                function printErrorMsg(msg) {
                    $(".print-error-msg").find("ul").html('');
                    $(".print-error-msg").css('display', 'block');
                    $.each(msg, function(key, value) {
                        console.log(value);
                        if (value == 'The phone must be 10 digits.') {
                            $('#errorMob').text("The phone must be 10 digits.");
                            setTimeout(function() {
                                $('#errorMob').text(" ");
                            }, 2000);
                        }

                    });
                }
            }
        }
    </script>
    <script>
        $(".slick-slider").slick({
            slidesToShow: 1,
            infinite: false,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            // dots: false, Boolean
            // arrows: false, Boolean
            
            responsive: [{
                breakpoint: 992,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                },
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 2
                }
            }, {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }]
        });
    </script>
</body>

</html>