@extends('layouts.front.app')
@section('meta')
    <title>Contact Us | {{ env('APP_NAME') }}</title>
@endsection

@section('css')
    <style>
        #owl.owl-carousel .owl-nav {
            text-align: center;
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
        }

        #owl.owl-carousel .owl-nav button.owl-prev,
        #owl.owl-carousel .owl-nav button.owl-next {
            color: gray;
            border: #fff solid 1px;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            background-color: #f7f9fc5c;
            margin: 0 5px;
        }

        #owl.owl-carousel .owl-nav button i {
            display: flex !important;
            justify-content: center !important;
            color: #fff;
        }


        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            font-weight: bold;
            color: #185691 !important;
            background-color: unset !important;
            border-left: #208de8 solid 7px !important;
        }


        @media (max-width: 767.98px) {
            .border-end {
                border: unset !important;
            }
        }

        .hp:hover {
            filter: grayscale(0) !important;
            cursor: pointer;
            box-shadow: 0px 0px 13px 1px #00000026;
        }

        .hp:hover img {
            filter: grayscale(0) !important;
        }

        .hp img {
            filter: grayscale(1)
        }
    </style>
@endsection

@section('content')
    <div class="py-5"
        style="background-image: url('{{ asset('images/banners/banner.jpg') }}'); background-repeat: no-repeat; background-size: cover; background-position-y: top;">
        <div class="container py-sm-5 py-0">
            <div class="row py-5">
                <div class="col text-center">
                    <h1 class="text-white text-uppercase ">Contact Us</h1>
                    <p class="text-white">Home / Contact Us</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-6 mb-3 text-center">
                <div class="p-3">
                    <img class="img-fluid" src="{{ asset('images/contact/icon-phone.png') }}" alt="">
                </div>
                <a href="tel:(082) 226-8665" class="text-black text-decoration-none">
                    <p>(082) 226-8665 |
                </a> <a href="tel:09338502082" class="text-black text-decoration-none">0933 850 2082</p></a>
            </div>
            <div class="col-lg-3 col-md-6 col-6 mb-3 text-center">
                <a href="mailto:service@serbisking.ph?subject=Website Inquiry" class="text-black text-decoration-none">
                    <div class="p-3">
                        <img class="img-fluid" src="{{ asset('images/contact/icon-mail.png') }}" alt="">
                    </div>
                    <p class="text-break">service@serbisking.ph</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-6 mb-3 text-center">
                <a href="https://goo.gl/maps/N5uqbK9eJDR75Axy8" class="text-black text-decoration-none">
                    <div class="p-3">
                        <img class="img-fluid" src="{{ asset('images/contact/icon-address.png') }}" alt="">
                    </div>
                    <p>Door#3 FAB Bldg F.S. Dizon Road Bacaca, Davao City</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-6 col-6 mb-3 text-center">
                <div class="p-3">
                    <img class="img-fluid" src="{{ asset('images/contact/icon-time.png') }}" alt="">
                </div>
                <p>Mon - Fri 8:00am - 5:00pm</p>
            </div>

        </div>
    </div>

    <div class="container pb-4">
        <div class="my-xl-5 ">
            <h1 class="text-center fw-bolder text-secondary display-5">Get in touch with us</h1>
            {{-- <div class="line-6-50 bg-primary mx-auto"></div> --}}
        </div>

        <form class="needs-validation" action="{{ url('send/contact') }}" method="post">@csrf
            <div class="row text-white mb-3">
                <div class="col-lg-6">
                    <div class="col-md-12 mb-3">
                        {{-- <label for="validationCustom01" class="form-label">First name</label> --}}
                        <input name="name" type="text" class="form-control rounded-1" id="validationCustom01"
                            placeholder="Name" required>
                        @error('name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-12 mb-3">
                        {{-- <label for="validationCustom01" class="form-label">First name</label> --}}
                        <input name="email" type="email" class="form-control rounded-1" id="validationCustom01"
                            placeholder="Email" required>
                        @error('email')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-12 mb-3">
                        {{-- <label for="validationCustom02" class="form-label">Last name</label> --}}
                        <input name="phone" type="number" class="form-control rounded-1" id="validationCustom02"
                            placeholder="Phone Number" required>
                        @error('phone')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="col-md-12 mb-3">
                        {{-- <label for="validationCustom03" class="form-label">City</label> --}}
                        <textarea name="message" style="height: 145px" type="text" class="form-control rounded-1" id="validationCustom03"
                            required placeholder="Message"></textarea>
                        @error('message')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-primary rounded-pill btn-sm text-white py-2 px-5" type="submit">Submit</button>
            </div>

        </form>
    </div>
@endsection

@section('js')
    <script>
        //Gets the video src from the data-src on each button    
        // let $videoSrc;  
        // $('.play-btn').click(function() {
        // 	$videoSrc = $(this).data( "src" );      
        // });
        // //console.log($videoSrc);  
        // // when the modal is opened autoplay it  
        // $('#modalVideo').on('shown.bs.modal', function (e) {
        // 	// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
        // 	$("#iframe").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1" ); 
        // })

        // // stop playing the youtube video when I close the modal
        // $('#modalVideo').on('hide.bs.modal', function (e) {
        // 	$("#iframe").attr('src',$videoSrc); 
        // })

        $(document).ready(function() {
            let owl = $("#owl").owlCarousel({
                loop: true,
                nav: true, // Show next and prev buttons
                navText: [
                    "<i class='fa-solid fa-arrow-left'></i>",
                    "<i class='fa-solid fa-arrow-right'></i></i>"
                ],
                dots: false,
                // dataDots: true,
                // slideSpeed : 300,
                // paginationSpeed : 400,
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 2,
                        autoplay: true,
                        autoplayTimeout: 2000,
                        autoplayHoverPause: true,
                    },
                    576: {
                        items: 2,
                        autoplay: true,
                        autoplayTimeout: 2000,
                        autoplayHoverPause: true,
                    },
                    991.98: {
                        items: 3,
                        autoplay: true,
                        autoplayTimeout: 2000,
                        autoplayHoverPause: true,
                    },


                }
            });
            let owl3 = $("#owl3").owlCarousel({
                loop: true,
                autoPlay: true,
                nav: false, // Show next and prev buttons
                navText: [
                    "<i class='fa-solid fa-arrow-left'></i>",
                    "<i class='fa-solid fa-arrow-right'></i></i>"
                ],
                dots: false,
                dataDots: true,
                slideSpeed: 300,
                paginationSpeed: 400,
                responsive: {
                    0: {
                        items: 1
                    },
                    576: {
                        items: 2
                    },
                    991.98: {
                        items: 3
                    },
                    1199.98: {
                        items: 4
                    },
                    1399.98: {
                        items: 5
                    }
                }
            });
        });
    </script>
@endsection