@extends('front.practitioner.import.template.import')
@section('content')

<link rel="stylesheet" href="{{asset('assets/patient/css/book-rechedule.css')}}">
<style>

    .invoice-confirmation .nav-item .nav-link.active {
        color: #24303F;
        letter-spacing: 1.5px;
        font-size: 15px;
}

.invoice-confirmation li a {
    color: #898989;
    font-size: 15px;
    letter-spacing: 1.5px;
}

.note_textbox{
    max-width: 420px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.note_textbox::placeholder {

    /* Firefox, Chrome, Opera */
    text-align: center;
}
.select2-search--dropdown:before {
    left: 14px !important;
    top: 12px !important;
}

.block-display {
    pointer-events: none;
}
</style>

<div id="bookingDiv" >
    <!-- <div class="topheader-area  book-appointment-content">
    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-expand-lg bg-light invoice-page-menu  notes-menu invoice-confirmation">
                <a class=" p-0" href="{{ URL::previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>

                <ul class="nav mx-auto">
                    <li class="nav-item">
                        <a href="{{ URL::previous() }}" class="nav-link">SELECT YOUR SERVICE</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">CHOOSE YOUR DATE & TIME</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active">CONFIRMATION</a>
                    </li>
                </ul>
            </nav>
            <div class="brdr-bttm w-100 mb-0"></div>
        </div>
    </div>
    </div> -->
    <div class="topheader-area  book-appointment-content">
        <div class="container-fluid">
            <div class="row">


                <div class="col-sm-1">
                <a class=" p-0 back_button select_service"  href="{{ URL::previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px;width: 40px !important"></a>

                </div>

                <div class="col-sm-10 d-flex align-items-center">
                    <p class="text-center"><a href="{{ URL::previous() }}" class=" select_service " id="select_service">SELECT YOUR SERVICE</a> <a href="#" class="" id="select_date"> CHOOSE YOUR DATE & TIME </a> <a href="#" class="active " id="confirmation"> CONFIRMATION </a> </p>

                </div>


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


    <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="booking-details mx-auto ">


                @if(isset($data['appointment']) && $data['appointment']['id'] !='')
                <form id="reschedule-form" method="POST">
                <input type="hidden" name="appId" value="{{$data['appointment']['id'] ?? ''}}">
                <input type="hidden" name="appType" value="{{$data['appointment']['appointment_type_id'] ?? ''}}">
                <input type="hidden" name="appLocation" value="{{$data['appointment']['location'] ?? ''}}">
                <input type="hidden" name="appDate" value="{{$data['appointment']['date'] ?? ''}}">
                <input type="hidden" name="rescheduleAppointment" value="1">
                <input type="hidden" name="timezone" value="{{$data['timezone']}}">

                @else
                <form id="addbookingappt" method="POST">
                @endif
                    <div class="card text-center">
                        @if($data['businessProfile']->logo !='')
                            <img src="{{$data['businessProfile']->logo}}" alt="" class="img-fluid" />
                        @endif
                        <h5>{{$data['getPrepaymentOrDeposite']['text']}}:</h5>
                        <div class="form-group  marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none">
                            <select name="client_id" id="client_id" class="form-control single-select2 w-100 ">
                                @foreach($data['family_member'] as $val)
                                    <option value="{{$val['client_id']}}">{{$val['name']}}</option>
                                @endforeach
                            </select>
                        </div>


                        <h5 class="font-bold"> {{$data['appointment_name']}}</h5>
                        <!-- <p class="mb-4">Mobile - Deep tissue massage</p> -->
                        <p>{{$data['date']}}<br />@isset($data['displayTime']) {{$data['displayTime']}} @endisset</p>

                        <p>{{$data['practitioner']->first_name}} {{$data['practitioner']->last_name}}<br />{{$data['businessProfile']->name}}
                        @if($data['appointmentType']->appt_type == 'In-person')
                        <br />
                            @if($data['hide_address']->hide_address_online_booking == 0)
                                {{$data['address'] ?? ""}}<br />
                            @endif
                        @endif
                        </p>
                        <p>${{$data['fee'] ?? ""}}</p>

                        <div class="@if($data['appointmentType']->appt_type == 'Mobile' || $data['appointmentType']->appt_type == 'Mobile visit') @else d-none @endif">
                            <div class="form-group">
                                <input type="text" id="address" name="address" class="text-center google_address" value="{{$data['client']->address}}" placeholder="Your address line 1" />
                            </div>
                            <div class="form-group">
                                <input type="text" id="address2" name="address2" class="text-center" value="{{$data['client']->address2}}" placeholder="Your address line 2" />
                            </div>
                            <div class="form-group">
                                <input type="text" id="suburb" name="suburb" class="text-center" value="{{$data['client']->suburb}}" placeholder="Suburb" />
                            </div>
                            <div class="form-group mb-5">
                                <input type="text" id="state" name="state" class="text-center" value="{{$data['client']->state}}" placeholder="State" />
                            </div>
                        </div>

                        <input type="hidden" name="date" value="{{$data['date']}}">
                        <input type="hidden" name="time" value="{{$data['time']}}">
                        <input type="hidden" name="practitioner_id" value="{{$data['practitioner']->id}}">
                        <input type="hidden" name="appointment_type_id" value="{{$data['appointment_type_id']}}">
                        <input type="hidden" name="name" value="{{$data['practitioner']->first_name}}">
                        <input type="hidden" name="location" value="{{$data['location']}}">
                        <input type="hidden" name="timezone" value="{{$data['timezone']}}">

                        @if( isset( $data['cancel_msg'] ) && $data['cancel_msg'] != '' )
                        <h5 class="font-bold" style="margin-bottom: 0px !important"> Cancellation Policy</h5>

                        <h5>{{$data['cancel_msg']}}</h5>
                        @endif

                        <textarea oninput="auto_grow(this)"  name="note_textbox" class="note_textbox  autosizetextarianote " placeholder="Send a note to your service provider (optional)"></textarea>
                        <br>
                        @if(isset($practitioneronlineBookings->authorisation_card) && $practitioneronlineBookings->authorisation_card == 1)
                            @if(isset($cardauthservice) && (in_array($data['appointment_type_id'], $cardauthservice) || in_array('All', $cardauthservice) ))
                            <h5>A credit card is required to secure this booking</h5>
                                <input type="hidden" name="card_authentication" id="card_authentication" value="1">
                                <button type="submit" id="submitButton" disabled  class="btn-fill text-center slot-booking-btn">Continue</button>
                            @else
                                <input type="hidden" name="card_authentication" id="card_authentication" value="0">
                                <button type="submit" id="submitButton" disabled class="btn-fill text-center slot-booking-btn">{{$data['buttonText']}}</button>
                            @endif
                        @else
                            <input type="hidden" name="card_authentication" id="card_authentication" value="0">
                            <button type="submit" id="submitButton" disabled  class="btn-fill text-center slot-booking-btn">{{$data['buttonText']}}</button>
                        @endif                        
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment section design start -->

<div id="paymentDiv" class="d-none">
    <div class="container-fluid">
        <div class="row">

            <div class="brdr-bttm w-100 mb-0"></div>
        </div>
    </div>
    <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
        <div class="book-emded-appointment">
            <div class="container-fluid">
                <div class="row justify-content-center">

                    <div class="AddCardModalPopup w-100" id="PayNowNew" tabindex="-1" role="dialog">
                        <div class="payment-content">
                            <div>
                                <a class=" p-0 back payment_back_button" href="{{ URL::previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>

                                    <div id="payment-meth-main" class="">
                                        <div class="shipping-method-area comm-form">
                                            <div class=" ">
                                                <p class="payment-amount">Payment amount $22.00</p>

                                                <h2 class="sub-title mb-1 mt-30 payment_des_title">Secured payment</h2>

                                                <p class="payment-title-15 mb-3 font-weight-normal">All transactions are secured & encrypted</p>
                                                <hr />
                                            </div>
                                            <input type="hidden" name="flaglatpay">
                                            <div class="payment-card-main" style="display:none" id="ifNoCardFound">
                                                <form id="latpay_from">
                                                    <input type="hidden" name="latpayAmount">
                                                    <input type="hidden" name="latpayUserFirstName">
                                                    <input type="hidden" name="latpayUserLastName">
                                                    <input type="hidden" name="latpayUserEmail">
                                                    <input type="hidden" name="merchant_id">
                                                    <input type="hidden" name="merchant_password">
                                                    <input type="hidden" name="merchant_public_key">
                                                    <input type="hidden" name="payment_type">
                                                    <input type="hidden" name="notes">
                                                    <input type="hidden" name="appointment_id">
                                                    <input type="hidden" name="invoice_id">
                                                    <input type="hidden" name="invoice_number">
                                                    <input type="hidden" name="cardHolderName">
                                                    <input type="hidden" name="deposit">
                                                    <input type="hidden" name="pre_id" id="pre_id">
                                                    <input type="hidden" name="sendConfirmationEmail">
                                                    <input type="hidden" name="total">
                                                    <input type="hidden" name="diposit_type">
                                                    <input type="hidden" name="deposit_amount_value">
                                                    <input type="hidden" name="isNewBooking" value="1">
                                                    <input type="hidden" name="practitioner_id">
                                                    <input type="hidden" name="client_card_authentication" value="0">

                                                    @csrf
                                                    <div id="latpay-element"></div>
                                                    <center><input style="display: none;" type="submit" id="button-confirm" class="btn btn-success" value="Pay"></center>

                                                    <div id="custom-store-label" class="popup-more-filter my-0 p-0 save_card_section">
                                                        <div class="popup-label">
                                                            <div class="custom-control custom-checkbox border-0">
                                                                <input type="checkbox" class="custom-control-input" value="1" name="save_card" id="save_card">
                                                                <label class="custom-control-label" for="save_card">Save my card for a faster check out next time?</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="choose-payment-method">
                                                <div class="choose-saved-card " style="display:none" id="ifCardFound">
                                                    <p class="removeforinvoice">Choose payment method</p>
                                                    <div id="appendPaymentCard">
                                                    </div>
                                                    <span class="invalid-feedback d-block" id="displayError"></span>
                                                    <br>
                                                </div>
                                            </div>
                                            <input type="hidden" name="paymentTypeNotSelected" value="0">
                                            <a href="#" class="add-new-cart-link px-2" role="button">Add a new card</a>
                                        </div>
                                    </div>

                            </div>
                            <div class="w-100 py-4">
                                <button id="customButton" type="button" class="btn btn-fill w-100">Process payment</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment section design end-->

<footer class="paynow-fotter pt-3 pb-0 d-none">
    <nav class="navbar navbar-light bg-white  w-100">
    <a class="navbar-brand p-0"><img src='{{asset("assets/images/find-my-appointments-tm.png")}}' alt="" class="img-flude" style="max-width: 177px"></a>
    <ul class="list-inline nav ml-sm-auto my-auto ">
        <li class="mr-3"><a target="new" href="https://myappointments.app/terms-and-conditions-client/" class="" title="Terms &amp; Conditions">Terms &amp; Conditions</a></li>
        <li><a target="new" href="https://myappointments.app/privacy-policy-client/" class="" title="Privacy Policy">Privacy Policy</a></li>
    </ul>
    </nav>
</footer>

 <!-- booked popup --->
    <div class="login-modal booked-modal">
        <div class="modal fade bookedModal" id="bookedModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content input-box-area">
                    <!-- <button type="button" class="close closeBackdrop" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="{{ asset("assets/images/close-img.png")}}" alt=""></span>
                    </button> -->
                    <div class="modal-body booking-info-area">
                        <div class="row">
                            <div class="col-md-6 col-sm-6 order-last order-sm-first order-lg-first">
                                <div class="img-iphone">
                                    <img style="" src="{{ asset("assets/images/embed_code_booked.png")}}" alt="" class="img-fluid">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 order-first order-sm-last order-lg-last">
                                <div class="booked-area">
                                    <h2>Booked!</h2>
                                    <p id="bookedMessage">Thanks {{$user->name ?? ''}}, we have emailed you a copy of your booking confirmation.</p>
                                </div>
                                <div class="booked-area">
                                    <!-- <h2>Get mobile</h2>
                                        <p>Download the free My Appointments app and search and manage your wellness
                                            appointments anywhere, anytime.</p> -->
                                    <div class="row mb-3 btn-width">
                                        <div class="col-md-6 col-sm-6 pr-xl-0 col-6">
                                            <div class="store-top mt-10">
                                                <!-- <a href="javascript:"><img src="{{ asset("assets/images/app-store.png")}}" class="img-fluid" alt=""></a> -->
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6 pr-xl-0 col-6">
                                            <div class="store-top mt-10">
                                                <!-- <a href="javascript:"><img src="{{ asset("assets/images/play-store.png")}}" class="img-fluid" alt=""></a> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row justify-content-end ">
                            <div class="col-md-7 col-7">
                                <div class="download-link mb-0 mob-download">
                                    <a class="appointment-btn green-lg-btn mb-0 mt-0 cursor-pointer" href="{{route('patient.appointment.index')}}">View My Appointment</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- booked popup --->


 <!-- Waiting popup --->
<div class="modal fade payment-methods-modal payment-methods-modal-v1" id="waitingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
        <div class="modal-content">
            <div class="modal-body text-center waiting-loader-body">
                <p class="pt-5 text-bold">Please wait while we complete your booking</p>

                <img height="100" width="100" src='{{asset("assets/images/hourglass.gif")}}'  alt="waiting-gif" />

                <p class="pt-3 pb-5 waiting-loader-text">It can take up to 60 seconds. Please do not refresh, click back or close the page.</p>
            </div>
        </div>
    </div>
 </div>
<!-- Waiting popup --->

@endsection

@section('css')
<link rel="stylesheet" href="{{asset('assets/patient/css/default.css')}}">
<!-- <link rel="stylesheet" href="{{asset('assets/patient/css/developer.css')}}"> -->
<link rel="stylesheet" href="{{asset('assets/patient/css/media.css')}}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<style>
    body{
        position: relative;
        min-height: 100vh !important;
    }
    .paynow-fotter{
        margin-top:20px;
        border:none !important;
    }
    .invoice-confirmation {
        width: 100%;
    }

    .invoice-confirmation li {
        padding: 0 28px;
        position: relative;
    }

    .invoice-confirmation li:after {
        content: '\f105';
        position: absolute;
        right: 0;
        top: 10px;
        font: normal normal normal 21px/1 FontAwesome;
    }

    .invoice-confirmation li:last-of-type:after {
        display: none;
    }

    .invoice-confirmation li a {
        color: #898989;
        font-size: 15px;
    }

    .invoice-confirmation .nav-item .nav-link.active {
        color: #000000;
    }

    .booking-details .select-dropdown {
        max-width: 260px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 35px;
    }

    .select2-container--default .select2-selection--single {
        border: 1px solid #ccc !important;
    }

    .shipping-method-area .popup-more-filter .custom-checkbox .custom-control-input:checked~.custom-control-label::after{
        top:5px;
        left: 5px;
    }
    .choose-saved-card .popup-more-filter .popup-label .custom-control-label::before{
        top:0;
    }
    #latpay-element{
        position: relative;
    }
    #latpay-element div#latpay-card-element.latpay-elements-field::before{
        display: none;
    }

    i.latpay-credit-card-brand{
        left: 4%;
        right: auto;
        width: 25px !important;
        margin-top: -34px !important;
        background: url(../public/assets/images/usercard-icon.png) no-repeat !important;
        background-size: 100% !important;

    }
    #latpay-element div.latpay-elements-field::before{
        top: 45px ;
    }
    #latpay-element #latpay-cvc-element.latpay-elements-field::before{
        top: 47px;
    }

    .modal-footer {
        max-width: 515px;
        margin: auto;
        display: block;
        width: 100%;
    }

    #PayNowNew .payment-amount {
        border: 1px solid #ccc;
        border-radius: 8px;
    }
    #appendPaymentCard button.close{

        position: absolute;
        right: 8px;
    }

    #waitingModal .modal-dialog {
        max-width:580px;
    }
    #waitingModal .modal-content {
        border: none;
    }
    #latpay-cvc-element label::before{
        background-color: white;
        content: 'CVV';
    }
    .waiting-loader-body {
        background-color: #fbfbfb;
        background-color: #ffffff;
        border-radius: 8px;
        padding: 26px;
    }
    .waiting-loader-body p {
        letter-spacing: 1px;
    }
    .waiting-loader-text {
        font-size: 11px;
        font-weight: 600;
        font-family: "europa", sans-serif;
        font-size: 14px;
        font-weight: normal;
        /* font-family: monospace; */
        color: #203040;
    }
    @media (max-width:767px) {
        .booking-details {
            margin-top: 40px !important;
            margin-bottom: 200px !important;
        }
    }
</style>
@endsection



@section('import-scripts')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src='{{ asset("assets/js/colorPick.js")}}'></script>
<script src='{{ asset("assets/js/touch-punch.js")}}'></script>

<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>
{{-- <script src="https://maps.google.com/maps/api/js?key=AIzaSyCjtdxXehCp88pH_w-aQ84QFn-LfRX-3Pg&amp;libraries=places" type="text/javascript"></script> --}}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCthc-S3bNXYCC2J6mun-z1qQ2maA_yV-E&amp;libraries=places"></script>
<script>
    $(document).ready(function() {

        $('#submitButton').removeAttr('disabled');
        
        $("body").on('input load', '.google_address1', function() {
         var input = $(this);
         var options = {
            types: ['geocode'] //    componentRestrictions: { country: 'uk' } //Turkey only
         };
         var autocomplete = new google.maps.places.Autocomplete(input[0]);
         google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            input.parent().find("#latitude").val(place.geometry.location.lat());
            input.parent().find("#longitude").val(place.geometry.location.lng());

            var address1 = "";
            var address2 = "";
            $.each(place.address_components, function(key, value) {
               if ($.inArray("street_number", value.types) !== -1) {
                  address1 += value.long_name + " ";
               }
               if ($.inArray("route", value.types) !== -1 || $.inArray("premise", value.types) !== -1) {
                  address1 += value.long_name + " ";
               }
               if ($.inArray("sublocality_level_2", value.types) !== -1) {
                  address2 += value.long_name + " ";
               }
    
               if ($.inArray("locality", value.types) !== -1) {
                //   input.parent().next('div').next('div').children('div:first').find('input:text').val(value.long_name);
                $("#suburb").val(value.long_name);
               } 
               if ($.inArray("administrative_area_level_1", value.types) !== -1) {
                //   input.parent().next('div').next('div').children('div:last').find('input:text').val(value.long_name);
                  $("#state").val(value.long_name);
               }
            });
            $("#address").val(address1);
            $("#address2").val(address2);
            // input.parent().next('div').find('input:text').val(address2);
         });
        });

        var input = $('select[name="name_prefix"]');
        $(input).each(function() {
            var option = $('option:selected', this).val();
            input.val(option);
            input.siblings('.select-styled1').remove();
            input.siblings('ul').remove();
            input.parent('.select').prop('class', '');
            regenerateSelect(input);
        });

        $(".browsebox-open").click(function() {
            $("#browsebox-show").toggle();
            $('.notestresultstoshow').hide();
        });
        $(".attend-text").hover(function() {
            $(".attend-h-text").toggle();
        });

        $(".misssedd-text").hover(function() {
            $(".misssedd-h-text").toggle();
        });

        $(".cancell-text").hover(function() {
            $(".cancell-h-text").toggle();
        });

        $('body').addClass('newClass');

    });

    $(document).ready(function() {
        $("#bookedModal").modal({
            show: false,
            backdrop: 'static'
        });
        // $("#click-me").click(function() {
        //    $("#popup").modal("show");
        // });
    });

    $(document).ready(function() {
        $('.autosizetextaria').each(function() {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');

        }).on('z', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

        $(".recommendationBtn").hover(
            function() {
                $(this).append($("<div class='media rechover'> <p class='m-0'>Button will enable you to share your recommendations with your client </p> <div>"));
            },
            function() {
                $(this).find(".media").last().remove();
            }
        );
        $("#file-upload-btn").hover(
            function() {
                $(this).append($("<div class='media rechover'> <p>Button will enable you to send attachments to your client</p> <div>"));
            },
            function() {
                $(this).find(".media").last().remove();
            }
        );
        $(".written-section-hover").hover(
            function() {
                $(this).append($("<div class='media rechover'> <p>You’ll have the ability to type freely in this section when taking your notes</p> <div>"));
            },
            function() {
                $(this).find(".media").last().remove();
            }
        );
    });

    $(document).ready(function() {
        $('#client_id').select2({
            placeholder: "Select appointment types",
            tokenSeparators: [",", " "],
        });
    });

    /// book appointment
    $("#addbookingappt").submit(function(event) {
        event.preventDefault();
        // $(".loading").css("display", 'block');
        var formData = new FormData();
        formData.append('date', $("input[name='date']").val());
        formData.append('time', $("input[name='time']").val());
        formData.append('practitioner_id',$("input[name='practitioner_id']").val());
        formData.append('name', $("input[name='name']").val());
        formData.append('appointment_type_id', $("input[name='appointment_type_id']").val());
        formData.append('location',$("input[name='location']").val());
        formData.append('client_id',$("select[name='client_id']").val());
        formData.append('_token', '{{ csrf_token() }}');
        
        formData.append('address',$("input[name='address']").val());
        formData.append('address2',$("input[name='address2']").val());
        formData.append('suburb',$("input[name='suburb']").val());
        formData.append('state',$("input[name='state']").val());
        //const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        formData.append('timezone', $("input[name='timezone']").val());
        formData.append('note_textbox', $('.note_textbox').val());
        $.ajax({
            url: '{{route("patient.appointment.book")}}',
            data: formData, //$(this).serialize(),
            dataType: 'JSON',
            contentType: false,
            type: 'POST',
            processData: false,
            beforeSend: function () {
                $("#waitingModal").modal("show");
                $('#waitingModal').addClass('block-display');
            }
        }).done(function(response) {
            if (response.status == "success") {
                // $(".loading").css("display", 'none');
                $("#waitingModal").modal("hide");
                $('#waitingModal').removeClass('block-display');
                console.log('log', "popup Hides");

                var baseUrl = "{{route('home')}}";
                // $(".available-appointment-slots").empty();
                // $(".next-day-available-appointment-slots").empty();
                // $(".next-week-available-appointment-slots").empty();
                // $("#calenderModal").modal('toggle');
                // $("#booknowModal1").modal("hide");
                if (response.data.instant_payment || response.data.deposit_payment || response.data.tokenise_card) {
                    var card_authentication = $('#card_authentication').val();
                    if(card_authentication == '1'){
                        $("input[name='latpayAmount']").val(0);
                        $("input[name='total']").val(0);
                        $("input[name='total']").val(0);
                    }else{
                        $("input[name='latpayAmount']").val(response.data.totalInvoice);
                        $("input[name='total']").val(response.data.total);
                        $("input[name='total']").val(response.data.total);
                    }
                    
                    $("input[name='latpayUserFirstName']").val(response.data.user.name);
                    $("input[name='latpayUserLastName']").val(response.data.user.last_name);
                    $("input[name='latpayUserEmail']").val(response.data.user.email);
                    $("input[name='merchant_id']").val(response.data.merchantId);
                    $("input[name='merchant_password']").val(response.data.merchantPassword);
                    $("input[name='merchant_public_key']").val(response.data.merchantPublicKey);
                    $("input[name='payment_type']").val(1);
                    $("input[name='notes']").val(response.data.invoiceSettings.invoice_notes_text);
                    $("input[name='appointment_id']").val(response.data.appointment.id);
                    $("input[name='invoice_id']").val(response.data.invoice_id);
                    $("input[name='practitioner_id']").val(response.data.user.practitioner_id);    
                    $("input[name='invoice_number']").val(response.data.invoiceNumber);    
                    $("input[name='pre_id']").val(response.data.pre_id);
     
                    
                    if(response.data.deposit_payment){
                        $("input[name='deposit']").val(1);
                    } else{
                        $("input[name='deposit']").val(0);
                    }
                    $("input[name='sendConfirmationEmail']").val(1);
                    $("input[name='diposit_type']").val(response.data.depositPaymentType);
                    $("input[name='flaglatpay']").val('AppointmentPay');
                    $("input[name='deposit_amount_value']").val(response.data.deposit_amount_value);

                    $("#paymentDiv").removeClass("d-none");
                    $(".paynow-fotter").removeClass("d-none");
                    $("#bookingDiv").addClass("d-none");
                    openLatpayFun();

                } else {
                    // $(".loading").removeClass("d-block");
                    $("#waitingModal").modal("hide");
                    $('#waitingModal').removeClass('block-display');
                    console.log('log', "popup Hides1");
                    $("#bookedModal").modal("show");
                    $.ajax({
                        url: '{{route("patient.check.auth")}}',
                        dataType: 'JSON',
                        type: 'GET',
                    }).done(function(response) {
                        if (response.status == 'success') {
                            $("#bookedMessage").text("Thanks " + response.data.name + ", we have emailed you a copy of your booking confirmation.");
                        }
                    });
                    //window.location.href = "{{route('patient.appointment.index')}}";
                }
            } else {
                // $(".loading").css("display", 'none');
                $("#waitingModal").modal("hide");
                $.each(response.errors, function(key, value) {
                    var input = $('select[name=' + key + ']');
                    var parent = input.parent().next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                    var input = $('input[name=' + key + ']');
                    var parent = input.parent().next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                });
            }
        });
    });

    $("#reschedule-form").submit(function (e) {
        // $(".loading").show();
        e.preventDefault();
        $(".invalid-feedback").hide();
        //if ($(this).parsley().isValid() ){}
        var modal = $("#booknowModal1");
        var formData = new FormData($(this)[0]);
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('appointment_id', $("input[name='appId'").val());
        formData.append('practitioner_id',$("input[name='practitioner_id'").val());
        formData.append('appointment_type',$("input[name='appointment_type_id'").val());
        formData.append('appointment_location',$("input[name='location'").val());
        formData.append('appointment_date',$("input[name='date'").val());
        formData.append('appointment_time',$("input[name='time'").val());
        
        $.ajax({
            url: "{{route('patient.appointment.reschedule')}}",
            data: formData,
            dataType: 'JSON',
            contentType: false,
            type: 'POST',
            processData: false,
            beforeSend: function(msg) {
                // $(".loading").addClass("d-block");
                $("#waitingModal").modal("show");
                $('#waitingModal').addClass('block-display');
            },
        }).done(function (response) {
            // $(".loading").removeClass("d-block");
            // $(".loading").hide();
            $("#waitingModal").modal("hide");
            $('#waitingModal').removeClass('block-display');

            if (response.status == "success") {
                $("#waitingModal").modal("hide");
                $('#waitingModal').removeClass('block-display');
                console.log('log', "popup Hides2");
                Swal.fire({
                    icon: response.status,
                    title: response.msg,
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });

                setTimeout(() => {
                    window.location.href = "{{route('patient.appointment.index')}}";
                    }, 1000);
                // addEvent(calendar,response);
            }else{
                $("#waitingModal").modal("hide");
                $('#waitingModal').removeClass('block-display');
                console.log('log', "popup Hides3");
            }
        });
    });
    /// end

    /// Latpay script

    function openLatpayFun(){
        $("#waitingModal").modal("hide");
        $('#waitingModal').removeClass('block-display');
        console.log('log', "popup Hides4");
      //  $('#invoicetemplatemodal').removeClass('invoicetemplatemodal');
        var final_total = $("input[name='latpayAmount']").val();
        var deposit = $("input[name='deposit']").val();
        var dispositType = $("input[name='diposit_type']").val();
        var depositPercentageValue = $("input[name='deposit_amount_value']").val();
        var card_authentication = $('#card_authentication').val();
        var pre_id = btoa($('#pre_id').val());

        if(card_authentication == '1'){
            $('.payment-amount').text(" To secure your booking, a credit card is required. Your card will be stored encrypted for all future appointments. No charges will be processed at this time");
            $('.payment-amount').attr("style","font-size:14px !important;font-weight:normal");
            $('.payment_des_title').addClass('d-none');
            $('.font-weight-normal').text('Card details are stored secured & encrypted');
            $('.font-weight-normal').attr("style","margin-top:22px !important");
            $('.payment_back_button').addClass('d-none');
            $('.save_card_section').addClass('d-none');
            $('input[name="client_card_authentication"]').val(1);
        }else{
            if (deposit == 1) {
                $("input[name='sendConfirmationEmail']").val(1);
                $('.payment-amount').text("Deposit required : $" + final_total + "");
                if (dispositType == "$") {
                    $('#paymentTitle').text("To secure this booking, a " + dispositType + "" + final_total + " deposit is required.");
                } else {
                    $('#paymentTitle').text("To secure this booking, a " + depositPercentageValue + "" + dispositType + " deposit is required.");
                }
            } else {
                $("input[name='sendConfirmationEmail']").val(1);
                $('.payment-amount').text("Payment amount : $" + final_total + "");
                $('#paymentTitle').text("To secure this booking, full payment is required");
            }
        }
       

        var merchantId = $("input[name='merchant_id']").val();
        LatpayCheckout.open({
            merchantid: merchantId,
            publickey: $("input[name='merchant_public_key']").val(),
            merchantuserid: merchantId,
            'status': function(status) {
                if (status == 'success') {
                    $("#waitingModal").modal("hide");
                    $('#waitingModal').removeClass('block-display');
                    console.log('log', "popup Hides5");
                    $("#invoicetemplatemodal").modal('hide');
                    $("#invoicesavepaymodal").modal('hide');
                    $.ajax({
                        url: "{{route('patient.getPaymentCard')}}",
                        type: 'get',
                        data:{practitioner_id:pre_id},
                    }).done(function(response) {
                        //$('#PayNowNew').modal('show');
                        if (response.status == 'success') {
                            $("#waitingModal").modal("hide");
                            $('#waitingModal').removeClass('block-display');
                            console.log('log', "popup Hides6");
                            $("#appendPaymentCard").empty();
                            $.each(response.data, function(key, value) {
                                var html = '';
                                var src = '{{asset("assets/images/credit-img/visa-card.png")}}';
                                if (value.card_type == 'MASTERCARD') {
                                    src = '{{asset("assets/images/credit-img/master-card.png")}}';
                                } else if (value.card_type == 'VISA') {
                                    src = '{{asset("assets/images/credit-img/visa-card.png")}}';
                                }
                                html += '<div class="popup-more-filter"> <div class="popup-label position-relative"> <div class="custom-control custom-checkbox"> <input type="radio" class="custom-control-input" value="' + value.card_token + '" name="choose-card" id="' + value.card_token + '"><span class="name_on_card hide">' + value.name_on_card +'</span> <label class="custom-control-label" for="' + value.card_token + '"> <span><img class="img-fluid" src="' + src + '"></span> •••• •••• •••• ' + value.card_no + ' </label> <button type="button" style="top:5px" class="close removeclientcard" data-cardid=' + value.id + ' aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>  </div>';
                                $("#appendPaymentCard").append(html);
                            });
                            $('#ifNoCardFound').css('display', 'none');
                            $('#ifCardFound').css('display', 'block');
                            $('.add-new-cart-link').css('display', 'block');
                        } else {
                            $("#waitingModal").modal("hide");
                            $('#waitingModal').removeClass('block-display');
                            console.log('log', "popup Hides7");
                            $('#ifNoCardFound').css('display', 'block');
                            $('#ifCardFound').css('display', 'none');
                            $("input[name='paymentTypeNotSelected']").val(1);
                            $('.add-new-cart-link').css('display', 'none');
                        }
                    });
                } else {
                    $("#waitingModal").modal("hide");
                    $('#waitingModal').removeClass('block-display');
                    console.log('log', "popup Hides8");
                    if (merchantId) {
                        var title = 'Invalid merchant id, please contact administrator.';
                    } else {
                        title = 'Details not found for this merchant, please contact administrator.';
                    }
                    Swal.fire({
                        icon: "error",
                        title: title,
                        // text: response.msg,
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                }
            }
        })
        //merchat can write custom logic to get alerted
    }

    $(function() {

        // $('#openLatpayModal').on('hidden.bs.modal', function(e) {
        //     $(this).find('#latpay-element').empty();
        // });
        $('#PayNowNew').on('hidden.bs.modal', function(e) {
            $(this).find('#latpay-element').empty();
        });
    });

    $(document).on('click', '#customButton', function(e) {
        $("input[name='cardHolderName']").val($("#lpscardcardholder").val());
        var val = $("input[name='choose-card']:checked").val();
        var name_on_card = $("input[name='choose-card']:checked").next('.name_on_card').text();

        var practitioner = $('input[name="practitioner_id"').val();
        var invoiceNumber = $('input[name="invoice_number"').val();
        var reference = practitioner+ 'INV' + invoiceNumber;
        
        if(name_on_card){
            const myArray = name_on_card.split(" ");
            var first_name = $("input[name='latpayUserFirstName']").val(myArray[0]);
            var last_name = $("input[name='latpayUserLastName']").val(myArray[1]);
        }

        if ($("input[name='paymentTypeNotSelected']").val() == 0 && val == undefined && $("#appendPaymentCard").html() !== "") {
            console.log('log', 'popup hides23');
            $("#displayError").text("Please select payment method to continue");
            $("#waitingModal").modal("hide");   
            $('#waitingModal').removeClass('block-display');
            return false;
        }

        if (val) {
            callLatpayForCard(val);
        } else {

            var name = $("input[name='cardHolderName']").val();
            if(name){
                const myArray = name.split(" ");
                var first_name = myArray[0];
                var last_name = myArray[1];
            } else {
                var first_name = $("input[name='latpayUserFirstName']").val();
                var last_name = $("input[name='latpayUserLastName']").val();
            }

            LatpayCheckout.processpayment({
                "amount": $("input[name='latpayAmount']").val(),
                "currency": "AUD",
                "reference": reference,
                "description": "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
                "firstname": first_name,
                "lastname": last_name,
                "email": $("input[name='latpayUserEmail']").val(),
                "status": function(status) {
                    if (status == "success") {
                        // $(".loading").show();
                        $("#waitingModal").modal("show");
                        $('#waitingModal').addClass('block-display');

                        var TransToken = $('#TransToken').val();
                        //Once you got the transtoken, submit the latpay_from by using jquery.
                        if (TransToken) {
                            callLatpayForNew();
                            // $("#latpay_from").submit();
                        }
                    } else {
                        $("#waitingModal").modal("hide");
                        $('#waitingModal').removeClass('block-display');
                        console.log('log', "popup Hides13");
                        $("#button-confirm").val('Submit Payment')
                        e.preventDefault();
                    }
                }
            });
        }
    });

    function callLatpayForNew() {
        // $(".loading").show();
        $("#waitingModal").modal("show");
        $('#waitingModal').addClass('block-display');
        var modal = $("#openLatpayModal");
        $.ajax({
            url: "{{route('patient.latpayPayment')}}",
            data: $('#latpay_from').serialize(),
            type: 'POST',
        }).done(function(response) {
            // $(".loading").hide();
            $("#waitingModal").modal("hide");
            $('#waitingModal').removeClass('block-display');
            console.log('log', "popup Hides14");

            
            if (response.status == "success") {
                //neworderplaced();
                $("#waitingModal").modal("hide");
                $('#waitingModal').removeClass('block-display');

                $('#PayNowNew').removeClass('invoicetemplatemodal');
                $('#PayNowNew').modal('hide');
                $("#bookedModal").modal("show");
                $("#bookedMessage").text("Thanks " + response.name + ", we have emailed you a copy of your booking confirmation.");

            } else {
                if (response.status_code == "1003") {
                    $("#waitingModal").modal("hide");
                    $('#waitingModal').removeClass('block-display');

                    Swal.fire({
                        icon: 'warning',
                        title: 'Transaction limit exceeded',
                        text: "Amount cannot exceed $1000",
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                } else {
                    if (response.msg == "Prescreen Failed") {
                        $("#waitingModal").modal("hide");
                        $('#waitingModal').removeClass('block-display');

                        Swal.fire({
                            icon: "error",
                            title: "Invalid Card",
                            text: "Please check the card details and try again",
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                    } else {
                        if(response.status_code == "14" || response.status_code == "54" || response.status_code == "82"){
                            $("#waitingModal").modal("hide");
                            $('#waitingModal').removeClass('block-display');
                            
                            console.log('log', "popup Hides24");

                            $(".latpay-error").html('<span style="color:red">'+ response.msg +'</span>');
                        } else {
                            $("#waitingModal").modal("hide");
                            $('#waitingModal').removeClass('block-display');

                            Swal.fire({
                                icon: response.status,
                                //title: 'Error!',
                                //text: response.msg,
                                title: 'Unable to process card payment',
                                text: 'Please check card details & try again',
                                showClass: {
                                    popup: 'animate__animated animate__fadeInDown'
                                },
                                hideClass: {
                                    popup: 'animate__animated animate__fadeOutUp'
                                }
                            });
                        }
                    }
                }
            }
        })
    }

    function callLatpayForCard(val) {
        // $(".loading").show();
        $("#waitingModal").modal("show");
        $('#waitingModal').addClass('block-display');

        console.log('log', "popup Shows");

        var modal = $("#PayNowNew");
        var formData = new FormData();
        formData.append('latpayAmount', $('input[name="latpayAmount"').val());
        formData.append('latpayUserFirstName', $('input[name="latpayUserFirstName"').val());
        formData.append('latpayUserLastName', $('input[name="latpayUserLastName"').val());
        formData.append('latpayUserEmail', $('input[name="latpayUserEmail"').val());
        formData.append('merchant_id', $('input[name="merchant_id"').val());
        formData.append('merchant_password', $('input[name="merchant_password"').val());
        formData.append('merchant_public_key', $('input[name="merchant_public_key"').val());
        formData.append('payment_type', $('input[name="payment_type"').val());
        formData.append('cardToken', val);
        formData.append('_token', $('input[name="_token"').val());
        formData.append('deposit', $('input[name="deposit"').val());
        formData.append('sendConfirmationEmail', $('input[name="sendConfirmationEmail"').val());
        formData.append('note_textbox', $('.note_textbox').val());
        formData.append('is_new_booking', $('input[name="isNewBooking"').val());
        formData.append('client_card_authentication', $('input[name="client_card_authentication"').val());
        formData.append('pre_id', $('input[name="pre_id"').val());

        var practitioner = $('input[name="practitioner_id"').val();
        var invoiceNumber = $('input[name="invoice_number"').val();
        var reference = practitioner + 'INV' + invoiceNumber;
        formData.append('reference',reference);

        console.log(practitioner,invoiceNumber);


        if ($("input[name='flaglatpay']").val() == 'AppointmentPay') {
            formData.append('notes', $('input[name="notes"').val());
            formData.append('appointment_id', $('input[name="appointment_id"').val());
            formData.append('invoice_id', $('input[name="invoice_id"').val());
            formData.append('invoice_number', $('input[name="invoice_number"').val());
            formData.append('total', $('input[name="total"').val());
        }
        if ($("input[name='flaglatpay']").val() == 'InvoicePay') {
            formData.append('invoice_id', $('input[name="invoice_id"').val());
        }
        $.ajax({
            url: "{{route('patient.latpayPayment')}}",
            data: formData,
            type: 'POST',
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS

        }).done(function(response) {
            // $(".loading").hide();
            $("#waitingModal").modal("hide");
            $('#waitingModal').removeClass('block-display');
            console.log('log', "popup Hides17");


            if (response.status == "success") {
                $("#waitingModal").modal("hide");
                $('#waitingModal').removeClass('block-display');

                console.log('log', "popup Hides18");
                // cardorderplaced(formData);
                $('#PayNowNew').removeClass('invoicetemplatemodal');
                $('#PayNowNew').modal('hide');
                $("#bookedModal").modal("show");
                $("#bookedMessage").text("Thanks " + response.name + ", we have emailed you a copy of your booking confirmation.");

            } else {
                $("#waitingModal").modal("hide");
                $('#waitingModal').removeClass('block-display');

                console.log('log', "popup Hides19");


                if (response.status_code == "1003") {
                    $("#waitingModal").modal("hide");
                    $('#waitingModal').removeClass('block-display');

                    console.log('log', "popup Hides20");
                    Swal.fire({
                        icon: 'warning',
                        title: 'Transaction limit exceeded',
                        text: "Amount cannot exceed $1000",
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                } else {
                    $("#waitingModal").modal("hide");
                    $('#waitingModal').removeClass('block-display');

                    console.log('log', "popup Hides21");
                    if(response.status_code == "14" || response.status_code == "54" || response.status_code == "82"){
                        $(".latpay-error").html('<span style="color:red">'+ response.msg +'</span>');
                    } else {
                        Swal.fire({
                            icon: response.status,
                            //title: 'Error!',
                            //text: response.msg,
                            title: 'Unable to process card payment',
                            text: 'Please check card details & try again',
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                    }
                }
            }
        });
    }

    $(document).on('click', '.add-new-cart-link', function(e) {
        $('#latpay-element').empty();
        $("input[name='choose-card']:checked").prop('checked', false);
        $("input[name='paymentTypeNotSelected']").val(1);
        var merchantId = $("input[name='merchant_id']").val();
        LatpayCheckout.open({
            merchantid: merchantId,
            publickey: $("input[name='merchant_public_key'").val(),
            merchantuserid: merchantId,
            'status': function(status) {
                if (status == 'success') {
                    $('#ifNoCardFound').css('display', 'block');
                    $('#ifCardFound').css('display', 'none');
                } else {
                    if (merchantId) {
                        var title = 'Invalid merchant id, please contact administrator.';
                    } else {
                        title = 'Details not found for this merchant, please contact administrator.';
                    }
                    Swal.fire({
                        icon: "error",
                        title: title,
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                }
            }
        });
    });


    $(document).ready(function() {
        $('input').attr('autocomplete', 'off');

        $(".js-example-basic-single").select2({
            minimumResultsForSearch: -1
        });

        $(".single-select2").select2({
            placeholder: function() {
                $(this).data('placeholder');
            },
            closeOnSelect: true,
            dropdownPosition: 'below',
        });
    });

    $('#modalClose').on('click', function() {
        var appointmentId = $('#invoicetemplatemodal').find("input[name='appointment_id']").val();
        $.ajax({
            url: '{{route("patient.appointment.delete")}}',
            data: {
                "id": appointmentId,
                "_token": "{{ csrf_token() }}"
            },
            dataType: 'JSON',
            type: "POST"
        }).then((response) => {
            if (response.status == 'success') {
                window.location.reload();
            }
        });
    });

    $('#PayNowNew').on('hidden.bs.modal', function() {
        var appointmentId = $('#PayNowNew').find("input[name='appointment_id']").val();
        $.ajax({
            url: '{{route("patient.appointment.delete")}}',
            data: {
                "id": appointmentId,
                "_token": "{{ csrf_token() }}"
            },
            dataType: 'JSON',
            type: "POST"
        }).then((response) => {
            if (response.status == 'success') {
                window.location.reload();
            }
        });
    });

    $(".autosizetextarianote").each(function() {
        this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;box-shadow: none !important;");
    }).on("input", function() {
        this.style.height = "auto";
        this.style.height = (this.scrollHeight) + "px";
    });

    function auto_grow(element) {
        element.style.height = "5px";
        element.style.height = (element.scrollHeight) + "px";
        //alert("Hello!");
    }


    /// end

</script>

@endsection