HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/vantastic-barber/resources/views/frontend/book-now/
Current File : /home/htlwork.com/www/dev/vantastic-barber/resources/views/frontend/book-now/book_now.blade.php
@extends('frontend.main')

@section('main_content')
<section class="banner-inner" id="Home">
    <div class="textblock">
        <div class="block">
            <div class="container">
                <div class="page-title">
                    <div class="holder">
                        <h1>Make An Appointment</h1>
                    </div>
                </div>
                <!-- breadcrumb -->
                <ol class="breadcrumb text-capitalize">
                    <li><a href="{{ route('home') }}"><span class="fa fa-home"></span> Home</a></li>
                    <li>Make Appointment</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="mid-inner">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <section class="contact-wrap make-appointment">
                    <div class="row">
                        <div class="col-sm-6 contact-left aos-init aos-animate" data-aos="zoom-in">
                            <h2>Let’s Make <br>Something Great <br>Together</h2>
                            <h5>Vantastic Barber is a mobile Barbershop. Which comes to you by appointment. We provide
                                all kind of men’s/kid’s haircuts with affordable prices.</h5>
                            <p>Get your haircut done at your doorstep without wasting your time. Book your next haircut
                                online.</p>

                            <address>
                                <div class="contact-box">
                                    <div class="icon"><i class="fa fa fa-phone" aria-hidden="true"></i></div>
                                    <div class="content">
                                        <p><span>Our Phone Number</span> <a href="tel:1800265807">1800265807</a></p>
                                    </div>
                                </div>

                                <div class="contact-box">
                                    <div class="icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
                                    <div class="content">
                                        <p><span>Our Contact Mail</span> <a
                                                href="mailto:info@vantasticbarber.com.au">info@vantasticbarber.com.au</a>
                                        </p>
                                    </div>
                                </div>
                            </address>
                        </div>

                        <div class="col-sm-6 contact-right aos-init aos-animate" data-aos="zoom-in">
                            <div class="contact-padd mrb-30 check-pin">
                                <h3>Lets Begin With Your Post Code</h3>   
                                <form action="{{ route('check-zipcode') }}" method="POST" id="check-pin">
                                    @csrf
                                    <div class="form-group col-sm-12 post-code-form" >
                                        <label>Enter Post Code*</label>
                                        <input class="form-control" name="zipcode" id="zipcode" placeholder="Post Code :"
                                            type="text">
                                    </div>
                                    <div class="form-group col-sm-12 post-code-form">
                                        <button type="submit" class="btn" id="submitButton"> Check Availability <span class="kt-spinner kt-spinner--sm kt-spinner--right kt-spinner--light"></span></button>
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <div id="message"></div>
                                    </div>
                                  
                                    <div class="form-group col-sm-12">
                                        <button type="button" class="btn" id="submitButton87" style="display: none;"> Next</button>
                                    </div>               
                                </form>
                            </div>


                            <div class="contact-padd book-now" style="display:none;">
                                <h3>Step 1</h3>
                                <form action="{{ route('save-step1') }}" method="POST" id="book-now">
                                    @csrf
                                    <input type="hidden" name="booking_id" id="bookingId" value="">		
                                    <div class="form-group col-sm-12 num_person">		
                                        <label><i class="fa fa-user" aria-hidden="true"></i> Number of Person</label>
                                        <select id="no_person" name="number_of_person" class="form-control select-new" tabindex="-98">
                                            <!-- <option value="" selected disabled>Select Number of Person</option> -->
											<option value="">Select</option>   				
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>				
                                        </select>
                                    </div>

                                    <div class="form-group col-sm-12" id="servicesContainer">
                                        <div class="service1">
                                            <label><i class="fa fa-scissors" aria-hidden="true"></i> Select Services (Person 1)</label>
                                            <select id="services" name="services[]" class="form-control select-new services" tabindex="-98" multiple aria-label="Default select example" data-live-search="true">
                                                <!-- <option value=""> Select Services</option> -->
                                                @foreach($services as $service)
                                                    <option value="{{ $service['service_id'] }}" data-price="{{ $service['service_price'] }}"> {{ $service['service_name'] }} - ${{ $service['service_price'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mt-4 service2" style="display:none;">
                                            <label><i class="fa fa-scissors" aria-hidden="true"></i> Select Services (Person 2)</label>
                                            <select id="services2" name="services2[]" class="form-control select-new services" tabindex="-98" multiple aria-label="Default select example" data-live-search="true">
                                                <!-- <option value=""> Select Services</option> -->
                                                @foreach($services as $service)
                                                    <option value="{{ $service['service_id'] }}" data-price="{{ $service['service_price'] }}"> {{ $service['service_name'] }} - ${{ $service['service_price'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mt-4 service3" style="display:none;">
                                            <label><i class="fa fa-scissors" aria-hidden="true"></i> Select Services (Person 3)</label>
                                            <select id="services3" name="services3[]" class="form-control select-new services" tabindex="-98" multiple aria-label="Default select example" data-live-search="true">
                                                <!-- <option value=""> Select Services</option> -->
                                                @foreach($services as $service)
                                                    <option value="{{ $service['service_id'] }}" data-price="{{ $service['service_price'] }}"> {{ $service['service_name'] }} - ${{ $service['service_price'] }}</option>
                                                @endforeach
                                            </select>		
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-12"><button type="submit" class="btn" id="submitButton2" > Next <span class="kt-spinner kt-spinner--sm kt-spinner--right kt-spinner--light"></span></button>   
                                    </div>
                                    <div class="form-group col-sm-12">	
                                        <div id="message2"></div>
                                    </div>
                                </form>
                            </div>

                            <div class="contact-padd time-slot" style="display:none;">   
                                <h3>Step 2</h3>
                                <form action="{{ route('save-step2') }}" method="POST" id="time-slot">  
                                    @csrf
                                    <input type="hidden" name="regis_id" id="regis_id" value="">	 	
                                    <div class="form-group col-sm-12">
                                        <label><i class="fa fa-calendar" aria-hidden="true"></i> Select Date</label>
                                        <input type="date" id="datepicker" class="form-control"  name="booking_date">
				                    </div>

                                    <div class="form-group col-sm-12">
                                        <label><i class="fa fa-clock" aria-hidden="true"></i> Total Time Duration (in minutes)</label>
                                        <input type="text" id="duration" class="form-control"  name="duration" value="" readonly>
				                    </div>

                                    <div class="form-group col-sm-12 select-slot">
                                        <label><i class="fa fa-clock-o" aria-hidden="true"></i> Select Timeslot</label>
                                        <ul id="timeslotList" class="row slotlist"></ul>

                                        <!-- <ul class="row">
                                        @foreach($time as $tim)
                                            <li class="col-md-4 timeslot {{ $tim['timeslot_id'] }}" data-timeslot-id="{{ $tim['timeslot_id'] }}">{{ $tim['time_start'] }} to {{ $tim['time_end'] }}</li>
                                        @endforeach
                                        </ul> -->
										<input type="hidden" name="time_set" id="time_set" value=""/>    
                                    </div>

                                    <div class="form-group col-sm-12"><button type="submit" class="btn" id="submitButton3" disabled> Next <span class="kt-spinner kt-spinner--sm kt-spinner--right kt-spinner--light"></span></button>
                                    </div>
                                    <div class="form-group col-sm-12">	
                                        <div id="message3"></div>
                                    </div>
                                </form>
                            </div>			
							
							<div class="contact-padd client-detail" style="display:none;">   		 
                                <h3>Step 3</h3>    
                                <form action="{{ route('save-step3') }}" method="POST" id="client_info">   
									@csrf    
									<input type="hidden" name="insert_id" id="insert_id" value=""/>	
									
									<div class="form-group col-sm-6">
										<label><i class="fa fa-user" aria-hidden="true"></i> First
											Name</label> 										
										<input type="text" id="firstname" class="form-control"  name="firstname" value="">
									</div>

									<div class="form-group col-sm-6">
										<label><i class="fa fa-map-marker" aria-hidden="true"></i> Last
											Name</label>
										<input type="text" id="lastname" class="form-control"  name="lastname" value="">  
									</div>  	
									
									<div class="form-group col-sm-6">
										<label><i class="fa fa-user" aria-hidden="true"></i> City</label>
										<input type="text" id="city" class="form-control"  name="city" value="">   
									</div>   
									
									<div class="form-group col-sm-6">
										<label><i class="fa fa-user" aria-hidden="true"></i> Post		
											Code</label> 										
										<input type="text" id="postalcode" class="form-control" name="postalcode" value="" readonly>   		
									</div>
									
									<div class="form-group col-sm-12">
										<label><i class="fa fa-clock" aria-hidden="true"></i> Street</label>  
										<input type="text" id="street" class="form-control" name="street" value=""/>   
									</div>  

									<div class="form-group col-sm-6">
										<label><i class="fa fa-user" aria-hidden="true"></i> Your
											Phone</label> 										
										<input type="text" id="phone" class="form-control" name="phone" value="">
									</div>

									<div class="form-group col-sm-6">
										<label><i class="fa fa-map-marker" aria-hidden="true"></i> Your
											Email</label>  
										<input type="email" id="email" class="form-control" name="email" value="">  
									</div>  	

									<div class="form-group col-sm-4">		
										<label><i class="fa fa-clock" aria-hidden="true"></i> Amount</label>   
										<input type="text" id="price_sum" class="form-control" name="amount" value="" readonly>  
									</div>		
									
									<div class="form-group col-sm-8">  
										<label>Have a coupon?</label>
										<div class="input-group"> 
											<input type="text" class="form-control" name="coupon" placeholder="Coupon code"> <button id="apply_now" class="promocode">Apply</button>  
										</div>	
										<span id="app_coupon"></span>  	
									</div>
									<div class="form-group col-sm-12">   			
										<div class="checkbox">
										  <label><input type="checkbox" name="privacy" value="1">Yes, I have read and agree to <a class="pay-link" target="blank" href="{{ route('term-and-condition') }}" style="color:#add8e6;">terms and conditions</a> and <a class="pay-link" target="blank" href="{{ route('privacy-policy') }}" style="color:#add8e6;">privacy policy</a>.</label>  		 
										</div>	
										<div class="checkbox">		
										  <label><input type="checkbox" name="parking" value="1">Yes, there is safe parking available for van at my address.</label>		
										</div>	
									</div>		
									
									<div class="form-group col-sm-12"><button type="submit" class="btn" id="submitButton4"> Next <span class="kt-spinner kt-spinner--sm kt-spinner--right kt-spinner--light"></span></button>		
									</div>
									<div class="form-group col-sm-12">				
										<div id="message4"></div> 			
									</div>
								</form>    
								<div class="btn-group btn-pay">
								  <form action="{{ route('paypal') }}" method="post" id="pay_pal" style="display:none;">   
									@csrf  									
									<input type="hidden" name="pay_id" id="pay_id" value=""/>	
									<input type="submit" class="btn btn-info mx-2" name="submit" value="Pay with PayPal" />
									</form>   
                                    
                                    
                                    <form method="get" id="pay_com_form" style="display:none;">   
                                        @csrf  									
                                       
                                        <input type="submit" class="btn btn-info mx-2" name="submit" value="Pay with CommBank" />
                                        </form> 
								  {{-- <a href="#" id="pay_com" class="btn btn-primary mx-2" style="display:none;">Pay with CommBank</a> 
								</div>		 --}}
                            </div>
								<div id="message5"></div> 	    	   
									
                            </div>
							
                        </div>

                    </div> 
					
					<div id="agree_now" class="popup">  
						<div class="popup-content">  			
							<p class="note">Please note, Barber will come to you anytime in your selected time slot. For example, For time slot 9am – 10am, Barber will come to you anytime between 9am to 10am.</p>
							<button id="close_now" class="btn">
                                <i class="fa fa-angle-double-right" aria-hidden="true"></i>  
								Agree 		  
							</button>	
						</div>
					</div>
					
                    <!--/ row -->
                </section>
                <!--/ contact-wrap -->

            </div>
            <!--/ col-sm-12 -->
        </div>
        <!--/ row -->
    </div>
</section>

@endsection

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" integrity="sha512-mR/b5Y7FRsKqrYZou7uysnOdCIJib/7r5QeJMFvLNHNhtye3xJp1TdJVPLtetkukFn227nKpXD9OjUc09lx97Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
ul.slotlist li {     
    display: inline-block;		
    background: #fff;
    color: #212121;
    padding: 7px 10px 7px 30px;
    margin: 0;
    font-weight: 500;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 12px;
    text-align: left;   
	box-shadow: 1px 1px 1px #666;    	
}
ul.slotlist li:hover {
  background-color: #eee;
}	

ul.slotlist li:hover:before {
  border-left-color: #777;
}

ul.slotlist li:active {
  background: #eee;
  box-shadow: inset 0 1px 1px #666;  
}   

ul.slotlist li.slotactive {background-color: #D3D3D3;}       

.promocode {   
   border:2px solid #e7e7e7;	
   color: black;
} 
.popup {
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
	display: none;
}
/* .popup-content {
	background-color: white;
	margin: 10% auto;
	padding: 20px;
	border: 1px solid #888888;
	width: 400px;   
	font-weight: bolder;
} */
.popup-content button {
	display: block;
	margin: 0 auto;
}
.popup-show {
	display: block;		
}
/* p.note {
	font-size: 17px;		
	font-family: "Times New Roman", Times, serif;
	color: #000000;  		
}		 */
a.pay-link:hover {
  color: white;   
  text-decoration: underline;		
}	
.mes{
	color:#d3d3d3;    
}






















.popup-content {   color: #fff;   margin: 10% auto;   padding: 40px;   width: 530px;   font-weight: bolder;   position: relative;   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   border-radius: 5px;   background: #000000;   background: -moz-linear-gradient(top, #000000 0%, #fe0000 100%);   background: -webkit-linear-gradient(top, #000000 0%,#fe0000 100%);   background: linear-gradient(to bottom, #000000 0%,#fe0000 100%);   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#fe0000',GradientType=0 );     border: 3px solid #909090; text-align: center;  z-index: ; }

.popup-content::after {   content: "";   background-image: url(../images/front/bg-02.jpg);   background-repeat: no-repeat;   background-attachment: scroll;   background-position: center center;   background-size: cover;   height: 100%;   width: 100%;   margin: 0;   position: absolute;   left: 0;   top: 0;   right: 0;   opacity: 0.3;   z-index: 1;   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   border-radius: 5px; }

p.note {   font-size: 16px;   color: #fff;   font-family: 'Orbitron', sans-serif;   text-transform: capitalize;   font-weight: 600;   margin: 0 0 10px;   letter-spacing: 1px;   text-align: center;   line-height: 30px;   position: relative;   z-index: 2; }
.popup-content button {   position: relative;   z-index: 2; }

.popup-content .btn{background: #fff; border: 0; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: relative; display: inline-block; text-align: center; font-size: 18px; font-family: 'Orbitron', sans-serif; font-weight: 600; color: #000; margin: 15px 0 0; padding: 11px 10px 13px 40px; min-width: 240px; overflow: hidden; text-shadow: none; text-transform: capitalize; -webkit-box-shadow: 0 0px 10px 5px rgba(0,0,0,.1); box-shadow: 0 0px 10px 5px rgba(0,0,0,.1);} 

.popup-content .btn i{font-size: 16px; margin: 0 0 0 7px; background: #fe0000; font-weight: normal; position: absolute; left: 0; top: 7px; height: 35px; width: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; line-height: 35px; color: #fff;}

 .popup-content .btn:after{content: ''; position: absolute; height: 100%; left: 0; top: 0; width: 0; -webkit-transition: all .3s; -moz-transition: all .3s;-o-transition: all .3s; transition: all .3s; background-color: #fe0000; z-index:-1;} 

.popup-content .btn:hover:after{width:100%;} .slide-text .btn:hover{color:#fff; -webkit-transition: all .3s; -moz-transition: all .3s;-o-transition: all .3s; transition: all .3s;} 

.popup-content .btn:hover i{color:#fe0000; background:#fff; -webkit-transition: all .3s; -moz-transition: all .3s;-o-transition: all .3s; transition: all .3s;}

@media screen and (max-width: 821px) {
  .btn-pay {
    display: block !important;
  }
  .contact-wrap .contact-right form#pay_com_form{
    padding-left: 34px !important;
  }
  .contact-wrap .contact-right form#pay_pal{
    padding-left: 39px !important;
  }
  .popup-content{
    width: 407px !important;
  }
}


</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {

    
    if ($(window).width() < 768) {

        $("html, body").animate({
                        scrollTop: $(".mid-inner").offset().top +  400
                    }, 2000);
                }else{
    $("html, body").animate({
                        scrollTop: $(".mid-inner").offset().top - 150
                    }, 1000);
                }
    $('.services').selectpicker();

    $("#check-pin").submit(function(e) {
        e.preventDefault();
        $('#submitButton87').hide();
		var zip=$('input[name=zipcode]').val();				
        // Disable the submit button
        $('#submitButton').prop('disabled', true);
        $('.kt-spinner').show();

        $("input,select,textarea").css('border', '1px solid green');
        $('.mes').remove();
        var url = $(this).attr('action');
        var formData = new FormData($(this)[0]);

        $.ajax({
            type: "POST",
            url: url,
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function(data) {  
			
                if (data.status == false) {

                    $('#message').html(data.message);
                    $('.kt-spinner').hide();
                    $('#submitButton').prop('disabled', false);
                    $('.book-now').hide();

                    var a = data['errors'];
                    $.each(data.errors, function(key, value) {
                        $("input[name='" + key + "'],select[name='" + key + "'],textarea[name='" + key + "']").css('border', '1px solid red');
                        $("input[name='" + key + "'],select[name='" + key + "'],textarea[name='" + key + "']").after("<small class='mes'>" + value + "</small>");
                    });
                }
                if (data.status == true) {

                    $("input,select,textarea").css('border', '1px solid #1abb9c').delay(
                        2000).css('border', '1px solid #e2e2e4');
                    $('#message').html(data.message);	
					$('input[name=postalcode]').val(zip);				
                    var bookingId = data.book;
                    $('#bookingId').val(bookingId);
                    $("#message").fadeIn(100);
                    // $("html, body").animate({
                    //     scrollTop: $("#message").offset().top - 100
                    // }, 1000);
                    $(".kt-spinner").hide();
                    $('#submitButton87').show();
                    $(".post-code-form").hide();

                   // $("#message").delay(3000);
                   // $("#message").fadeOut(100);
                    //$('.kt-spinner').hide();
                    $('#submitButton').prop('disabled', false);
                    setTimeout(function() {
                      //  $('.check-pin').hide();
                       // $('.book-now').show();
                      //  $('#submitButton87').show();
                    }, 2000);	
                    
                    var element = $('.mid-inner'); // Replace 'your-element' with the ID or selector of your element
var middle = element.scrollTop() + (element.height() / 2);

element.animate({ scrollTop: middle }, 'slow');

    //                 $([document.documentElement, document.body]).animate({
    //     scrollTop: $(".book-now").offset().top
    // }, 2000);
                }
            }
        }); 

    });      

    $('#no_person').on('change', function() {
        var numberOfPersons = parseInt($(this).val());

        if(numberOfPersons == 1){
            $('.service2').css('display','none');
            $('.service3').css('display','none');
        }

        if(numberOfPersons == 2){
            $('.service2').css('display','block');
            $('.service3').css('display','none');
        }
        if(numberOfPersons == 3){
            $('.service2').css('display','block');
            $('.service3').css('display','block');
        }

    });

    $('#book-now input, #book-now select#area, #book-now select#services, #book-now select#services2, #book-now select#services3').on('change', function() {
        var isFormValid = validateForm();
        $('#submitButton2').prop('disabled', !isFormValid);
    });

    function validateForm() {
        var isValid = true;

        // Check if each required field has a value
        $('#book-now select[required]').each(function() {
            if ($(this).val() === '') {
                isValid = false;
                return false; // Stop the loop if a required field is empty
            }
        });

        return isValid;
    }

    $("#book-now").submit(function(e) {
        e.preventDefault();

        // Disable the submit button
        $('#submitButton2').prop('disabled', true);
        $('.kt-spinner').show();

        $("input,select,textarea").css('border', '1px solid green');
        $('.mes').remove();
        var url = $(this).attr('action');
        var formData = new FormData($(this)[0]);

        $.ajax({
            type: "POST",
            url: url,
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function(data) {    				

                if (data.status == false) {

                    $('#message2').html(data.message);
                    $('.kt-spinner').hide();
                    $('#submitButton2').prop('disabled', false);

                    var a = data['errors'];
                    $.each(data.errors, function(key, value) {
                        $("input[name='" + key + "'],select[name='" + key +
                            "'],textarea[name='" + key + "']").css('border',
                            '1px solid red');
                        $("input[name='" + key + "'],select[name='" + key +
                            "'],textarea[name='" + key + "']").after(
                            "<small class='mes'>" +
                            value + "</small>");
                    });
                }
                if (data.status == true) {

                    var bookingId = data.book;  
                    $('#booking-slot').val(bookingId);	
					$('input#regis_id').val(bookingId);	   
                    var duration = data.duration;
                    $('#duration').val(duration);

                    $("input,select,textarea").css('border', '1px solid #1abb9c').delay(
                        2000).css('border', '1px solid #e2e2e4');
                    $('#message2').html(data.message);
                    $("#message2").fadeIn(100);
                    // $("html, body").animate({
                    //     scrollTop: $("#message2").offset().top - 100
                    // }, 1000);
                    $("#message2").delay(3000);
                    $("#message2").fadeOut(100);
                    $('.kt-spinner').hide();
                    $('#submitButton').prop('disabled', false);
                    setTimeout(function() {
                        $('.check-pin').hide();
                        $('.book-now').hide();
						$("#agree_now").addClass('popup-show');  								
                        $('.time-slot').show();
                    }, 2000);
                }
            }			
        });	

    });

    // step 2 time-slot start

    var today = new Date().toISOString().split('T')[0];
    $('#datepicker').attr('min', today);

    $('#datepicker').on('change', function() {
        var bookingDate = $(this).val();
		var zipcode = $('input[name=postalcode]').val();		

        $.ajax({
            type: 'POST',
            url: '{{ route('fetch-timeslots') }}',		
            data: {
                '_token': '{{ csrf_token() }}',
                'booking_date': bookingDate,
				'zip_code': zipcode  		
            },
            success: function(data) {  
				
                $('#timeslotList').empty();

                $.each(data, function(index, timeslot) {
                    var li = $('<li>').addClass('col-md-4 timeslot ' + timeslot.timeslot_id)
                        .attr('data-timeslot-id', timeslot.timeslot_id)
                        .text(timeslot.time_start + ' to ' + timeslot.time_end);

                    $('#timeslotList').append(li);
                });
            }
        });
    });

	$(document).on("click","li.timeslot",function() {
			
		var slot_id = $(this).data('timeslot-id');  
		var duration=parseInt($('#duration').val());   	
		var check=duration;  	
		var interval = 60;    
		var count=0;	
		const slots=[]; 
		
		$("ul.slotlist li").each(function(index) {
			var sibling_id=$(this).data('timeslot-id');   
			if(parseInt(sibling_id)>=parseInt(slot_id) && check >0)
			{				
				check = parseInt(check-interval);						
				count++;  				
			} 			
		});	
		
		if(parseInt(count*interval)>=duration)
		{
			$("ul.slotlist li").each(function(index) {
				var sibling_id=$(this).data('timeslot-id');   
				if(parseInt(sibling_id)>=parseInt(slot_id) && duration >0)
				{
					$(this).addClass('slotactive');	 
					duration = parseInt(duration-interval);	 	
					slots.push(parseInt(sibling_id));			
				} 
				else
				{
					$(this).removeClass('slotactive');	 					
				}				
			});	 
			
			$("button#submitButton3").prop("disabled",false);  	
			$("input#time_set").val(slots.join(",")); 
		}
		else
		{
			$("ul.slotlist li").each(function(index) {
				$(this).removeClass('slotactive');	      	
			});	 
			
			$("button#submitButton3").prop("disabled",true);  
			$("input#time_set").val(''); 	
		}			
		
	});		
	
	$(document).on("submit","form#time-slot",function(e) {
		e.preventDefault();		 		
		
		// Disable the submit button
        $('#submitButton3').prop('disabled',true);		
        $('.kt-spinner').show();		

        $("input,select,textarea").css('border', '1px solid green');
        $('.mes').remove();
        var url = $(this).attr('action');
        var formData = new FormData($(this)[0]);

		$.ajax({
            type: "POST",
            url: url,
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function(response) {		

                if (response.status == false) {

                    $('#message3').html(response.message);
                    $('.kt-spinner').hide();
                    $('#submitButton3').prop('disabled', false);  
                    
                    $.each(response.errors, function(key, value) {
                        $("input[name='" + key + "'],select[name='" + key +
                            "'],textarea[name='" + key + "']").css('border',
                            '1px solid red');
                        $("input[name='" + key + "'],select[name='" + key +
                            "'],textarea[name='" + key + "']").after(
                            "<small class='mes'>" +
                            value + "</small>");
                    });
                }
                if (response.status == true) {  
                   
					var bookingId = response.booking_data[0].booking_id;
					var service_price = response.booking_data[0].total_price;    
					
                    $('input#insert_id').val(bookingId);	                    
                    $('input#price_sum').val(service_price);   

                    $("input,select,textarea").css('border', '1px solid #1abb9c').delay(
                        2000).css('border', '1px solid #e2e2e4');
                    $('#message3').html(response.message);
                    $("#message3").fadeIn(100);
                    // $("html, body").animate({
                    //     scrollTop: $("#message3").offset().top - 100
                    // }, 1000);
                    $("#message3").delay(3000);
                    $("#message3").fadeOut(100);
                    $('.kt-spinner').hide();
                    $('#submitButton3').prop('disabled', false);
                    setTimeout(function() {
                        $('.check-pin').hide();
                        $('.book-now').hide();
                        $('.time-slot').hide();  
						$('.client-detail').show();      
                        
                        
                        if ($(window).width() < 768) {

$("html, body").animate({
                scrollTop: $(".mid-inner").offset().top +  400
            }, 1000);
        }else{
$("html, body").animate({
                scrollTop: $(".mid-inner").offset().top - 150
            }, 1000);
        }
                    }, 2000);
                }
            }
        });

		//	
	
	});	  				
	
	$(document).on("submit","form#client_info",function(e) {
		e.preventDefault();		 		
		// Disable the submit button
        $('#submitButton4').prop('disabled',true);		
        $('.kt-spinner').show();		

        $("input,select,textarea").css('border', '1px solid green');
        $('.mes').remove();
        var url = $(this).attr('action');
        var formData = new FormData($(this)[0]);

		$.ajax({
            type: "POST",
            url: url,
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function(response) {	
				console.log(response);		

                if (response.status == false) {

                    $('#message4').html(response.message);
                    $('.kt-spinner').hide();
                    $('#submitButton4').prop('disabled', false);  
                    
                    $.each(response.errors, function(key, value) {
                        $("input[name='" + key + "'],select[name='" + key +
                            "'],textarea[name='" + key + "']").css('border',
                            '1px solid red');
                        $("input[name='" + key + "'],select[name='" + key +
                            "'],textarea[name='" + key + "']").after(
                            "<small class='mes'>" +		
                            value + "</small>");   
                    });
                }
                if (response.status == true) {                      
					
                    $('input#pay_id').val(response.booking_data[0].booking_id);	    		                  
                    //$('input#price_sum').val(); 

                    $("#pay_com_form").attr('action',"{{route('paynow')}}?pay_id="+response.booking_data[0].booking_id);
					//$("#pay_com").attr('href',"{{route('paynow')}}?pay_id="+response.booking_data[0].booking_id);  

					$("form#client_info")[0].reset();  		
					$("form#client_info").hide();			
					$("form#pay_pal").show();

					$("#pay_com").show();	
                    $("#pay_com_form").show();  
                    $("input,select,textarea").css('border', '1px solid #1abb9c').delay(
                        2000).css('border', '1px solid #e2e2e4');
                    $('#message4').html(response.message);
                    $("#message4").fadeIn(100);		
                    if ($(window).width() < 768) {

$("html, body").animate({
                scrollTop: $(".mid-inner").offset().top +  400
            }, 1000);
        }else{
$("html, body").animate({
                scrollTop: $(".mid-inner").offset().top - 150
            }, 1000);
        }
                    $("#message4").delay(3000);
                    $("#message4").fadeOut(100);
                    $('.kt-spinner').hide();
                    $('#submitButton4').prop('disabled', false);
                    setTimeout(function() {                       
                        //$('.time-slot').hide();  
						//$('.client-detail').hide();   
						$('#message5').html("<div class='alert red-info green-info'>Pay Now to complete the booking.</div>");				
						
                    }, 2000);
                }
            }
        });
		//		
	});		 	

	$(document).on("click","button#close_now",function(e) {	
		e.preventDefault();
		$("#agree_now").removeClass('popup-show');  				 				
	});		
	
	$(document).on("click","button#apply_now",function(e) {	
		e.preventDefault();  		
		var coupon=$("input[name=coupon]").val();	 
		var booking=$("input[name=insert_id]").val();  
		
		$.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
		type:'get',  
        url:"{{ route('apply-coupon') }}",   
        data:{'coupon':coupon,'booking':booking},		
        dataType:'json',
        success:function(response){ 
		console.log(response);	
			if (response.status == true) { 
				$("input#price_sum").val(response.data);   
				$("input[name='coupon']").css('border','2px solid #32cd32');  
				$("span#app_coupon").html("<small style='color:#90ee90'>"+response.message+"</small>");   	
			}		
			else {		
				$("input[name='coupon']").css('border','1px solid red'); 						
				$("span#app_coupon").html("<small class='mes'>"+response.message+"</small>");   
			}  			
        }
		});
		
	});	

    // Hide message on input focus
    $("input,select,textarea").focus(function() {
        $(".mes").remove();
        $("input,select,textarea").css('border', '1px solid #c5ccd6');		
    });     	





    
	$(document).on("click","#submitButton87",function(e) {	
		e.preventDefault();
      
                       $('.check-pin').hide();
                       $('.book-now').show();
                      // $('#submitButton87').show();
                      if ($(window).width() < 768) {

$("html, body").animate({
                scrollTop: $(".mid-inner").offset().top +  400
            }, 1000);
        }else{
$("html, body").animate({
                scrollTop: $(".mid-inner").offset().top - 150
            }, 1000);
        }
                 
						 				
	});	

    $(document).on("submit","#pay_com_form",function(e) {	
		e.preventDefault();

        var href=$(this).attr('action');
        window.location.href=href;
      
                       
                      // $('#submitButton87').show();
                 
						 				
	});	
	
});		
</script>
@endpush