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

@section('css')
    <style>
        .hp:hover{
            background-color: #208de8b3;
        }
        .hp:hover a{
            color: white !important;
        }
        .hp:hover a img{
            filter: brightness(0);
        }

        

    </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 ">Our Services - Washing Machine Checkup</h1>
                <p class="text-white">Home / Washing Machine Checkup</p>
            </div>
        </div>
    </div>
</div>

<div class="container my-5">
    <div class="row">
        <div class="col-xl-3">
            <div class="row mb-4">
                @include('layouts.front.subnav')
            </div>
            <div class="d-none d-xl-block">
                <h3 class="text-secondary text-uppercase">Contact Us</h3>
                <ul class="list-unstyled">
                    <li class="d-flex">
                        <div class="me-2">
                            <img style="width: 15px;" src="{{asset('images/services/globe.png')}}" alt=""> 
                        </div>
                        <p><a href="#" class="text-decoration-none text-black">Door#3 FAB Bldg F.S. Dizon Road Bacaca, Davao City</a></p>
                    </li>
                    <li class="d-flex">
                        <div class="me-2">
                            <img style="width: 15px;" src="{{asset('images/services/phone.png')}}" alt=""> 
                        </div>
                        <p>(082) 226-8665 | 0933 850 2082</p>
                    </li>
                    <li class="d-flex">
                        <div class="me-2">
                            <img style="width: 15px;" src="{{asset('images/services/email.png')}}" alt=""> 
                        </div>
                        <p>service@serbisking.ph</p>
                    </li>
                    <li class="d-flex">
                        <div class="me-2">
                            <img style="width: 15px;" src="{{asset('images/services/clock.png')}}" alt=""> 
                        </div>
                        <p>Mon - Fri 8:00am - 5:00pm</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xl-9">
            <div class="text-center mb-5">
                <img class="w-100" style="max-height: 400px" src="{{asset('images/services/washing.jpg')}}" alt="">
            </div>

            <div class="mb-3">
                <h3 class="fw-bolder text-secondary ">Washing Machine Checkup</h3>
                <div class="line-6-50 bg-secondary"></div>
            </div>

            <div class="mb-3">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quae harum, quidem, accusantium, magni amet maxime molestiae nihil et laborum veritatis quo. Sit optio distinctio facere fugit, delectus quibusdam necessitatibus.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quae harum, quidem, accusantium, magni amet maxime molestiae nihil et laborum veritatis quo. Sit optio distinctio facere fugit, delectus quibusdam necessitatibus.</p>
            </div>

            {{-- <div class="mb-3">
                <h3 class="fw-bolder text-secondary ">Rates</h3>
                <div class="line-6-50 bg-secondary"></div>
            </div>
            

            <div class="table-responsive col-lg-6">
                <table class="table table-bordered table-responsive">
                    <thead class="">
                        <tr>
                            <th><p class="text-secondary mb-0">Washing Machine Brand</p> </th>
                            <th><p class="text-secondary mb-0">Checkup Rates</p> </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><p class="mb-0">Panasonic - Washing Machine</p> </td>
                            <td><p class="text-primary mb-0">₱500.00</p> </td>
                        </tr>
                    </tbody>
                </table>
            </div> --}}

            <hr class="my-5">
            
            <div class="mb-3">
                <h3 class="fw-bolder text-secondary ">Booking (Panasonic Only)</h3>
                <div class="line-6-50 bg-secondary"></div>
            </div>
            
            <form class="row g-3 needs-validation" action="{{url('booking')}}" method="post">@csrf
                <input type="hidden" name="booking_type" value="Website Booking">
                {{-- <input type="hidden" name="booking_name" value="Aircon Cleaning"> --}}
                <div class="col-md-6">
                    <label for="validationCustom04" class="form-label">Select a Service *</label>
                    <input type="text" name="service" class="form-control rounded-1" value="Washing Machine Checkup" id="validationCustom01" readonly>
                  </div>
                {{-- <div class="col-md-6">
                    <label for="validationCustom04" class="form-label">Select Brand *</label>
                    <input type="text" name="brand" class="form-control rounded-1" value="Panasonic" id="validationCustom01" readonly>
                </div> --}}
                <div class="col-md-6">
                    <label for="type" class="form-label">Select Brand *</label>
                    <select class="form-select mb-3" name="brand" id="type" required>
                      <option selected disabled value="">Choose...</option>
                      <option {{old('brand') == 'Panasonic' ? 'selected' : null}} value="Panasonic">Panasonic</option>
                    </select>
                    @error('type')
                      <span class="text-danger">{{$message}}</span>
                    @enderror
                    <span class="text-primary" id="rates_span"></span>
                </div>
                <div class="col-md-12">
                    <label for="type" class="form-label">Select Type *</label>
                    <select class="form-select mb-3" name="type" id="type" required>
                      <option selected disabled value="">Choose...</option>
                      <option {{old('type') == 'Front Load' ? 'selected' : null}} value="Front Load">Front Load</option>
                      <option {{old('type') == 'Top Load' ? 'selected' : null}} value="Top Load">Top Load</option>
                    </select>
                    @error('type')
                      <span class="text-danger">{{$message}}</span>
                    @enderror
                    <span class="text-primary" id="rates_span"></span>
                </div>

                <div class="col-md-6">
                  <label for="validationCustom01" class="form-label">Model </label>
                  <input value="{{old('model')}}" type="text" name="model" class="form-control rounded-1" id="validationCustom01">
                  @error('model')
                    <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
                
                <div class="col-md-6">
                  <label for="validationCustom01" class="form-label">Serial Number (For Warranty Units)</label>
                  <input value="{{old('serial')}}" type="text" name="serial" class="form-control rounded-1" id="validationCustom01">
                  @error('serial')
                    <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>

                <div class="col-md-6">
                  <label for="validationCustom01" class="form-label">Name *</label>
                  <input value="{{old('name')}}" type="text" name="name" class="form-control rounded-1" id="validationCustom01" required>
                  @error('name')
                    <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
              
                <div class="col-md-6">
                    <label for="validationCustom02" class="form-label">Contact No. *</label>
                    <input value="{{old('contact')}}" type="number" name="contact" class="form-control rounded-1" id="validationCustom02" required>
                    @error('contact')
                    <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
              
                <div class="col-md-6">
                    <label for="validationCustom02" class="form-label">Email. *</label>
                    <input value="{{old('email')}}" type="email" name="email" class="form-control rounded-1" id="validationCustom02" required>
                    @error('email')
                    <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
                
                <div class="col-md-6">
                    <label for="validationCustom02" class="form-label">Preferred Date & Time *</label>
                    <input value="{{old('preferred_date')}}" type="datetime-local" placeholder="yyyy-mm-dd" name="preferred_date" class="form-control rounded-1" id="validationCustom02" required>
                    @error('preferred_date')
                    <span class="text-danger">{{$message}}</span>
                    @enderror
                </div>
                
                <div class="col-md-12">
                  <label for="validationCustom01" class="form-label">Address *</label>
                  <input value="{{old('address')}}" type="text" name="address" class="form-control rounded-1" id="validationCustom01" required>
                  @error('address')
                    <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
              
                <div class="col-md-12">
                  <label for="validationCustom03" class="form-label">Detailed Information *</label>
                  <textarea style="height: 250px" name="message" type="text" class="form-control rounded-1" id="validationCustom03" required>{{old('message')}}</textarea>
                  @error('message')
                    <span class="text-danger">{{$message}}</span>
                  @enderror
                </div>
              
                <div class="col-12 text-end">
                  <button class="btn btn-primary rounded-pill btn-sm text-white py-2 px-5 text-uppercase" type="submit">Book now</button>
                </div>

            </form>

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

@include('layouts.front.contact-footer')

@endsection

@section('js')
	<script>

        let types = [
            {
                'name' : 'Panasonic',
                'price' : '₱500.00',
            },

        ]
        $('#type').change(function(){
            types.forEach(e => {
                e.name == $(this).val() ? $('#rates_span').text(`Price: ${e.price} `) : null
            });
        })
        
		//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