@extends('layouts.header')
@section('content')
<div class="ob-mian-content">
    @include('layouts.navbar')
    <div class="ob-mian-container">

                @if(session()->has('error'))

                <div class="alert alert-danger">
                    {{ session()->get('error') }}
                </div>
               @endif
                <div class="section-head">
                    <a href="{{route('availability',$businessslug)}}" class="back-btn"><img src="{{ asset('images/back-btn.svg') }}" alt="back" width="6" height="12"> Back to Date + Time</a>
                    <h2 class="h2-head">Review</h2>
                    <p>You’re almost done! Review the details below before finalizing your booking, and click “Book Appointment” to complete your booking.</p>
                </div>
                <div class="ob-mian-container-inner">
                    <div class="ob-review-main-card">
                        <form id="review_form" method="post" action="{{ route('book',$businessslug)}}">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            @if ($agent->isDesktop())
                            <input type="hidden" value="2" name="booked_from">
                            @else
                            <input type="hidden" value="1" name="booked_from">
                            @endif

                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-8">
                                <div class="card-review-left">
                                    <div class="row">
                                        <div class="col-12 col-md-6">
                                            <div class="card-info-col">
                                                <h3 class="heading_20">Card Information</h3>
                                                <div class="credit-card-info-box" id="review_card_info">
                                                    
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label for="" class="form-label">Note to the studio</label>
                                                    <textarea class="form-control" name="notes" id="notes" rows="4" placeholder="Is there anything special you want us to know to make your experience more amazing?"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="before-service-card">
                                                <h3 class="heading_20 ps-md-3">Before your service…</h3>
                                                <div class="before-service-inner">
                                                    <div class="form-group form-check blue-color mb-1">
                                                        <input type="checkbox" class="form-check-input" id="before_service_check_1" name="before_service_check_1" >
                                                        <label class="form-check-label" for="before_service_check_1">I will not have any of the following services 48 hours before my appointment: botox, chemical peels, facial waxing, microdermabrasion, or derma planing.</label>
                                                    </div>
                                                    <div class="form-group form-check blue-color mb-1">
                                                        <input type="checkbox" class="form-check-input" id="before_service_check_2" name="before_service_check_2" >
                                                        <label class="form-check-label" for="before_service_check_2">I will not have any of the following services 2 weeks before my appointment: permanent makeup, microblading.</label>
                                                    </div>
                                                    <div class="form-group form-check blue-color mb-1">
                                                        <input type="checkbox" class="form-check-input" id="before_service_check_3" name="before_service_check_3" >
                                                        <label class="form-check-label" for="before_service_check_3">I understand that any Patch Tests need to be completed at least 24 hours prior to the appointment.</label>
                                                    </div>
                                                    <div class="form-group form-check blue-color mb-1">
                                                        <input type="checkbox" class="form-check-input" id="terms_check" name="terms_check" >
                                                        <label class="form-check-label" for="terms_check">I agree to the 
                                                            <!-- <a href="#termsConditionModal" data-bs-toggle="modal" class="text-black"> Terms and Conditions</a> -->
                                                            <a href="https://www.amazinglashstudio.com/about-us/terms-and-conditions" target="_blank" class="text-black"> Terms and Conditions</a>
                                                        </label>
                                                    </div>
                                                    <div class="form-group form-check blue-color mb-1">
                                                        <input type="checkbox" name="cancellation_check" class="form-check-input" id="cancellation_check">
                                                        <label class="form-check-label" for="cancellation_check">I agree to the <a href="#cancellationModal" data-bs-toggle="modal" class="text-black"> Cancellation Policy,</a> and I understand that I will be charged if I do not show up for my appointment.</label>
                                                    </div>

                                                </div>
                                                <div class="invalid-feedback" id="all_checkbox_error">
                                                    Please review and acknowledge all checkboxes.
                                                </div>
                                                <div class="invalid-feedback" id="card_error">
                                                    Please add a credit card to complete your booking.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-4">
                                <div class="review-right-services-card">
                                    <div class="review-service-inner">
                                        <h3 class="heading_20">Services Selected</h3>
                                        <div class="px-0 px-md-2">
                                            <div class="services-selected-min">
                                                <div class="review-selected-services">
                                                    <ul>
                                                        @if(isset($get_service_names) && !empty($get_service_names))
                                                            @foreach($get_service_names as $k=>$s_name)
                                                            <li>{{ $s_name }}</li>
                                                            @endforeach
                                                        @endif
                                                        
                                                    </ul>
                                                    @if($data['is_master_stylist']==1)
                                                    <span><img src="{{ asset('images/slot-icon.svg') }}" width="13" height="17" alt="master provider"> </span> <span style="font-size:10px;">Master</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <input type="hidden" name="is_master_stylist" value="{{$data['is_master_stylist']}}">
                                            <div class="review-service-details-card">
                                                <div class="review-service-details-inner">
                                                    <ul>
                                                        <li>
                                                            <div class="service-daytime-lft">
                                                                Day:
                                                            </div>
                                                            <div class="service-daytime-rgt">
                                                                {{ ($data['start_date']) ?? "" }}
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="service-daytime-lft">
                                                                Start Time:
                                                            </div>
                                                            <div class="service-daytime-rgt">
                                                               {{ ($data['start_time']) ?? "" }}
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <div class="service-daytime-lft">
                                                                Provider:
                                                            </div>
                                                            <div class="service-daytime-rgt">
                                                                @if(isset($data['staff_name']) && !empty($data['staff_name']))
                                                                 @foreach(array_unique($data['staff_name']) as $a_key=>$staff_id)
                                                               <div class="service-provider">
                                                              
                                                                @if($staff[$staff_id]['is_master_stylist']==1)
                                                                 <span><img src="{{ asset('images/slot-icon.svg') }}" width="13" height="17" alt="master provider"> </span> 
                                                                 @endif

                                                                 {{ ($staff[$staff_id]['name']) ?? "" }}
                                                               </div>
                                                               @endforeach
                                                               @endif
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="estimated-price">
                                                    <span>Estimated Total (Non-Member Rate):</span>
                                                    <strong>${{ (number_format($data['non_member_price'], 2, '.', '')) ?? "" }}</strong>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="memberprice-txt">Are you a member? Great! Your membership benefit pricing will be reflected when you check out at your studio.</p>
                                    </div>
                                    <div class="review-book-btn login-mob-btn">
                                        <button id="book_appointment" type="button" class="btn btn-primary d-block">Book Appointment</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    </div>


                </div>
            </div>

</div>


  <!-- Credit card Modal -->
    <div class="modal fade hide" id="CreditCardModal" tabindex="-1" aria-labelledby="CreditCardModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 345px;">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="creditcard-modal-cont">
                        <h2 class="heading_20">Card Information</h2>
                        <form id="card_information" method="POST">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group mb-3 mb-md-4">
                                <label for="" class="form-label required-label">Name On Card</label>
                                <input type="text" class="form-control" name="name" id="name" value="{{$client->name}}" placeholder="Enter Name on Card">
                                <div class="invalid-feedback" id="error_namecard"></div>
                            </div>
                            <div class="form-group mb-3 mb-md-4">
                                <label for="" class="form-label required-label">Card Number</label>
                                <input type="text" maxlength="16" class="form-control" name="number" id="number" value="" placeholder="Enter Card Number">
                                <div class="invalid-feedback" id="error_cardnumber" ></div>
                            </div>
                            <div class="row gx-3">
                                <div class="col-4 col-md-4 form-group mb-3 mb-md-4">
                                    <label for="" class="form-label required-label">Exp Date</label>
                                    <input maxlength="7" type="text" class="form-control" name="expiration" id="expiration" value="" placeholder="MM/YYYY" >
                                    <div class="invalid-feedback" id="error_expdate" ></div>
                                </div>
                                <div class="col-3 col-md-3 form-group mb-3 mb-md-4">
                                    <label for="" class="form-label required-label">CVV</label>
                                    <input maxlength="4" type="text" class="form-control" name= "cvv" id="cvv" value="" placeholder="CVV" >
                                    <div class="invalid-feedback" id="error_cvv" ></div>
                                </div>
                                <div class="col-5 col-md-5 form-group mb-3 mb-md-4">
                                    <label for="" class="form-label required-label">Billing ZIP Code</label>
                                    <input type="text" class="form-control" name="zip_code" id="zip_code" value="" maxlength="7" placeholder="ZIP Code">
                                     <div class="invalid-feedback" id="error_zipcode"></div>
                                </div>
                            </div>
                            
                            <div class="pb-4 pt-2">
                                <p class="already-memtxt">Already a member here? We’ll update your membership with this new card.</p>
                                <button id="card_btn" type="button" class="btn btn-primary w-100">Save Card</button>
                            </div>
                        </form>
                        <div class="alert alert-danger" id="error_payment" style="display: none;"></div>
                        <div class="alert alert-success" id="error_sucess" style="display: none;"></div>

                        <div class="cc-btm-info">
                            <p><span> You will not be charged at this time.</span> Your credit card information is being collected to hold your appointment. For more information, please see our <a href="#cancellationModalCard" data-bs-toggle="modal"> Cancellation Policy.</a> </p>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
    <!-- Credit card Modal -->

        <!-- Terms and Conditions Modal -->
    <div class="modal fade" id="termsConditionModal" tabindex="-1" aria-labelledby="termsConditionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 735px;">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="termscondition-modal-cont">
                        <h2 class="heading_20 text-center pb-3">Terms and Conditions</h2>
                        <div class="termscondition-scroll-box">
                            <div class="terms-desc-cont">
                                <p>{!! $salon['onlinebooking_terms'] !!}</p>
                               
                            </div>
                        </div>

                        <div class="pt-2 text-end">
                            <button type="button" onclick="return enableTerms('terms');" class="btn btn-primary" data-bs-dismiss="modal">Accept</button>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
   <!-- Terms and Conditions Modal -->

        <!-- cancellation Modal -->
    <div class="modal fade" id="cancellationModal" tabindex="-1" aria-labelledby="cancellationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 735px;">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="termscondition-modal-cont">
                        <h2 class="heading_20 text-center pb-3">Cancellation Policy</h2>
                        <div class="termscondition-scroll-box">
                            <div class="terms-desc-cont">
                                <p>{!! $policies['cancellation_policy'] !!}</p>
                               
                            </div>
                        </div>

                        <div class="pt-2 text-end">
                            <button type="button" class="btn btn-primary" onclick="return enableTerms('cancel');" data-bs-dismiss="modal">Accept</button>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>

    <div class="modal fade" id="cancellationModalCard" tabindex="-1" aria-labelledby="cancellationModalLabelCard" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 735px;">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <a type="button"  href="#CreditCardModal" data-bs-toggle="modal"  class="btn-close" data-bs-dismiss="modal" aria-label="Close"></a>
                </div>
                <div class="modal-body pt-2">
                    <div class="termscondition-modal-cont">
                        <h2 class="heading_20 text-center pb-3">Cancellation Policy</h2>
                        <div class="termscondition-scroll-box">
                            <div class="terms-desc-cont">
                                <p>{!! $policies['cancellation_policy'] !!}</p>
                               
                            </div>
                        </div>

                        <div class="pt-2 text-end">
                            <a href="#CreditCardModal" data-bs-toggle="modal" type="button" class="btn btn-primary" data-bs-dismiss="modal">Accept</a>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
   <!-- Terms and Conditions Modal -->

@endsection
@section('customJs')
<script type="text/javascript">
    /*$("#terms_check").click(function () {
        $("#terms_check").prop("checked",false);
        $('#termsConditionModal').modal("show");
    });*/
     $("#cancellation_check").click(function () {
        $("#cancellation_check").prop("checked",false);
        $('#cancellationModal').modal("show");
    });

    function enableTerms(type){
        if(type == 'terms'){
         $("#terms_check").prop("checked",true);
        }else{
         $('#cancellation_check').prop("checked", true);
         //$("#cancellation_check").attr("checked","checked");
        }
    }

    function hide_msg(){
        $('#card_information').trigger("reset");
        $('#error_payment').html("");
        $('#error_sucess').html("");
        $('#error_payment').css("display","none");
        $('#error_sucess').css("display","none");
        $('.invalid-feedback').css("display","none");
        $('.form-control').css({"border-color":""});
    }

     $(document).ready(function() {

        //$('.invalid-feedback').delay(5000).fadeOut('slow');
            $('.alert-success').delay(5000).fadeOut('slow');
            $('#error_payment').delay(5000).fadeOut('slow');
            $('#error_sucess').delay(5000).fadeOut('slow');
            $('.alert-danger').delay(5000).fadeOut('slow');
           // Regex pattern for mm/yyyy
            var pattern = /^(0[1-9]|1[0-2])\/\d{4}$/;
            // Allow only numbers and forward slash in the input
            $('#expiration').on('keypress', function(event) {
                  
                var charCode = event.which ? event.which : event.keyCode;
                if (charCode !== 47 && (charCode < 48 || charCode > 57)) { // Allow only numbers and "/"
                    return false;
                }
            });

             $('#cvv').on('keypress', function(event) {
                  
                var charCode = event.which ? event.which : event.keyCode;
                if (charCode !== 47 && (charCode < 48 || charCode > 57)) { // Allow only numbers and "/"
                    return false;
                }
            });
             $('#number').on('keypress', function(event) {
                  
                var charCode = event.which ? event.which : event.keyCode;
                if (charCode !== 47 && (charCode < 48 || charCode > 57)) { // Allow only numbers and "/"
                    return false;
                }
            });

             $('#zip_code').on('keypress', function(event) {
                 const char = String.fromCharCode(event.which);
                const regex = /^[A-Za-z0-9]+$/; 
                var charCode = event.which ? event.which : event.keyCode;
                if (!regex.test(char)) { // Allow only numbers and "/"
                    return false;
                }
            });

            // Automatically format the value as mm/yyyy when typing
            $('#expiration').on('keyup', function(event) {
                
                var value = $(this).val().replace(/[^0-9]/g, '');
                if (value.length >= 2) {
                    value = value.slice(0, 2) + '/' + value.slice(2, 6);
                }
                $(this).val(value);
            });
       });
    $(document).ready(function () {
        // $('.loader').show();
         $('#book_appointment').attr("disabled","disabled");
           get_card_data();
          

        });
    

   
   $("#book_appointment").click(function () {
    
        $('.loader').show();
        var error=2;
        var is_credit_card=0;
        var before_service_check_1=$("#before_service_check_1").is(":checked");
        console.log(before_service_check_1);
        var before_service_check_2=$("#before_service_check_2").is(":checked");
        var before_service_check_3=$("#before_service_check_3").is(":checked");
        var terms_check=$("#terms_check").is(":checked");
        var cancellation_check=$("#cancellation_check").is(":checked");
         is_credit_card=$("#is_credit_card").val();
        if(before_service_check_1==''){  error=1 }
        if(before_service_check_2==''){  error=1 }
        if(before_service_check_3==''){  error=1 }
        if(terms_check==''){  error=1 }
        if(cancellation_check==''){  error=1 ;}
        if(is_credit_card==0 || is_credit_card=="undefined" || is_credit_card==undefined) {  
                error=1 ;
         }
        if(error==2){
            $('#review_form').submit();
             return true;
        }else{
            $('.before-service-inner').css("border","solid 1px #b8c2cc");
            $('.loader').hide();
            if(is_credit_card==0 || is_credit_card=="undefined" || is_credit_card==undefined) {
                $("#card_error").css("display","block");
                $(".credit-card-info-box").css({"border-color":"#0b9bf1"});
                $('#all_checkbox_error').css("display","none");

            }else{
                $('#card_error').css("display","none");
                $('#all_checkbox_error').css("display","block");
                $('.before-service-inner').css("border","solid 1px #c20000");
            }
            
            
            return false;
        }
    });
    function get_card_data(){
         $('.loader').show();
             $('#review_card_info').html("Loading...");
             $.ajax({
                  url: "{{ route('get-card-info', $businessslug) }}",
                  type: "GET",
                  success: function(data1){
                   // console.log(data1);
                    $('.loader').hide();
                    if(data1!=""){
                         $('.loader').hide();
                         $('#review_card_info').html(data1);
                         var v=$("#is_credit_card").val();
                         if(v==0){
                            $(".credit-card-info-box").css({"border-color":"#0b9bf1"});
                         }

                         $('#book_appointment').removeAttr("disabled");

                    }
                  }
                });
        }
$('#card_btn').on('click', function () {
   
           //$('.loader').show();
            $("#card_btn").attr("disabled","disabled");
            var name_on_Card=$('#name').val();
            var card_number=$('#number').val();
            var exp_date=$('#expiration').val();
            var cvv=$('#cvv').val();
            var zip_code=$('#zip_code').val();
            var msg="";
            var error=2;
            var regex = /^(0[1-9]|1[0-2])\/\d{4}$/;
            
            const regex_zip = /^[A-Za-z0-9]{1,7}$/;

            var parts = exp_date.split('/');
            var expMonth = parseInt(parts[0], 10);
            var expYear = parseInt(parts[1], 10);

            // Get current month and year
            var today = new Date();
            var currentMonth = today.getMonth() + 1; 
            var currentYear = today.getFullYear();
            var maxYear = currentYear + 20; 

            if(name_on_Card==''){ 
                $('#error_namecard').html("Please enter billing name");
                error=1;
                $("#error_namecard").css({"display":"block"});
                $("#name").css({"border-color":"#C40C0C"});
            }else{ 
                $('#error_namecard').html("");
                $("#error_namecard").css({"display":"none"});
                $("#name").css({"border-color":""});
            }
            if(card_number==''){ 
                $('#error_cardnumber').html("Please enter credit card number");
                error=1;
                $("#error_cardnumber").css({"display":"block"});
                $("#number").css({"border-color":"#C40C0C"});
            }else if(card_number.length < 16){ 
                error=1;
                $('#error_cardnumber').html("card accepts only 16 digits");error=1
                 $("#error_cardnumber").css({"display":"block"});
                $("#number").css({"border-color":"#C40C0C"});
            }else{ 
                $('#error_cardnumber').html("");
                $("#error_cardnumber").css({"display":"none"});
                $("#number").css({"border-color":""});
            }
            if(exp_date==''){ 
                $('#error_expdate').html("Please enter expiration date");
                error=1;
                $("#error_expdate").css({"display":"block"});
                $("#expiration").css({"border-color":"#C40C0C"});
            }else{ 
                if (!regex.test(exp_date)) {
                 error=1;
                    $('#error_expdate').html("Please enter a valid date in MM/YYYY format");
            }else{ 
                if (expMonth < 1 || expMonth > 12) {
                    error=1;
                    $('#error_expdate').html("Month must be between 01 and 12.");
                    $("#error_expdate").css({"display":"block"});
                    $("#expiration").css({"border-color":"#C40C0C"});
                }else if(expYear < currentYear || (expYear === currentYear && expMonth < currentMonth)){
                    error=1;
                    $('#error_expdate').html("The expiration date cannot be in the past.");
                    $("#error_expdate").css({"display":"block"});
                    $("#expiration").css({"border-color":"#C40C0C"});
                }else if(expYear > maxYear){
                    error=1;
                    $('#error_expdate').html("The expiration date must be within the next 20 years.");
                    $("#error_expdate").css({"display":"block"});
                    $("#expiration").css({"border-color":"#C40C0C"});
                }else{
                    $('#error_expdate').html("");
                    $("#error_expdate").css({"display":"none"});
                    $("#expiration").css({"border-color":""});
                }
            }
            }
            if(cvv==''){ 
                $('#error_cvv').html("Please enter cvv");
                error=1;
                $("#error_cvv").css({"display":"block"});
                $("#cvv").css({"border-color":"#C40C0C"});
            }else{ 

                if(cvv.length<3){
                    $('#error_cvv').html("Please enter valid cvv");
                    $("#error_cvv").css({"display":"block"});
                    $("#cvv").css({"border-color":"#C40C0C"});
                    error=1;
                }else{
                    $('#error_cvv').html("");
                    $("#error_cvv").css({"display":"none"});
                    $("#cvv").css({"border-color":""});
                }

            }
            if(zip_code==''){ 
                $('#error_zipcode').html("Please enter zipcode");
                error=1;
                $("#error_zipcode").css({"display":"block"});
                $("#zip_code").css({"border-color":"#C40C0C"});
            }else{ 

                if( zip_code.length < 5){
                
                $('#error_zipcode').html("Please enter valid zipcode");
                error=1;
                $("#error_zipcode").css({"display":"block"});
                $("#zip_code").css({"border-color":"#C40C0C"});
                }else{
                $('#error_zipcode').html("");
                $("#error_zipcode").css({"display":"none"});
                $("#zip_code").css({"border-color":""});
                }
            }
            //console.log(error);return false;
            if(error==2){
               var form_data=$("#card_information").serialize()
                $.ajax({
                      url: "{{ route('update-client', $businessslug) }}",
                      type: "POST",
                       data: form_data,
                      success: function(data1){
                        $("#card_btn").removeAttr("disabled","disabled");  
                        if(data1=="success"){
                            $('.loader').hide();
                            $("#error_sucess").css("display","block");
                            $("#error_sucess").html("Card added successfully!");
                            $('#card_information').trigger("reset");
                             get_card_data();
                             setTimeout(function() {
                              $('#CreditCardModal').modal("hide");
                             }, 3000);
                            
                        }else{  
                            $('.loader').hide();
                             $("#error_payment").css("display","block");
                            $("#error_payment").html(data1);
                            setTimeout(function() {
                                $('#error_payment').css("display","none");
                             }, 4000);

                        }
                      }
                    });
            }else{
              $("#card_btn").removeAttr("disabled","disabled");  
            }


             
        });
</script>
@endsection