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

    <link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
    <link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />

    <div class="loading">Loading&#8230;</div>
    @php
    
    if ($app->practitioner_id != '' && $app->date != '' && $app->location != '') {
        $rturnUrl = url('/practitioner/appointments/show') .'?practitionersearch='.base64_encode($app->practitioner_id). '&jump_todate=' . date('Y-m-d', strtotime($app->date)).'&practitionerlocation='.base64_encode($app->location);
    }else{
        $rturnUrl = '';
    }
    
    @endphp
    <input type="hidden" name="appointment_id" id="appointment_id" readonly value="{{$app->id}}">
    
      <div class="container-fluid">
            <div class="row">
                <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
                  <a class="p-0" href="{{ route('practitioner.appointments.details',$app->id) }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
                  <a class="navbar-brand p-0" href="{{ route('practitioner.appointments.index') }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
                  <h1 class="page-title eagle-font font-400 m-0">Edit Appointment</h1>
                </nav>
                <div class="brdr-bttm w-100"></div>
            </div>
            {{-- {{dd(date_format(date_create($app->time), 'h:i a'))}} --}}

            <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
              <div class="services-pages mb-5 edit-appointment-main">
                <div class="boxwhite padd-sm mt-4">
                  <div class="card">
                    <div class="booking-confirmation-area blockout-time">
                      <div class="for-service-table dr-table w-100 Blockouttime-table" id="blockoutTable">
                        <div class="edit-box-inner">
                            <h5 class="main-title">{{$clientname}} - {{ date_format(date_create($app->date), 'l dS F Y') . ' ' . date_format(date_create($app->time), 'h:i a') }}</h5>
                            <h5 class="modal-title mb-4">Edit service type</h5>
                            <div class="mCustomScrollbar">
                                <div class="comm-marg">
                                    <div class="form-inline">
                                        <select
                                            class="form-control text-capitalize single-select2  js-example-basic-single"
                                            id="appointment_type_list" name="appointment_type_list">
                                            @foreach ($appointmentTypes as $appt)
                                                <option
                                                    {{ $appointent->appointment_type_id == $appt->id ? 'selected' : '' }}
                                                    value="{{ $appt->id }}">{{ $appt->appointment_type ?? '' }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="appointment_type_id" id="appointment_type_id" readonly value="{{ $appointent->appointment_type_id }}">
                                    </div>
                                </div>
                            </div>
                            <h5 class="modal-title mt-4 mb-4">Edit date & time</h5>

                            <!-- NEW TIMEPICKER - START -->
                            <div class="row ml-1 editdateandtime">
                                <div class="col-md-3 col-sm-4 mr-2">
                                    <div class="row graytext" id="app-date-box">
                                      <input type="text" class="form-control datepicker-custom" name="date" id="edit_appointment_date" autocomplete="off" readonly value="{{date_format(date_create($app->date), 'd/m/Y')}}">
                                    </div>
                                    <span class="invalid-feedback d-block"></span>
                                </div>
                                <div class="col-md-4 col-sm-4">
                                  <div class="row graytext">
                                    <div class="timePickerNew timepickerBlockoutTIme" id="starttimePicker" style="width: 20rem;"></div>
                                    <input type="hidden" name="time" id="time" autocomplete="off" readonly value="{{date_format(date_create($app->time), 'h:i a')}}">
                                  </div>
                                  <span class="invalid-feedback d-block"></span>
                                </div>
                            </div>  
                            <!-- NEW TIMEPICKER - END -->
                        
                            <h5 class="modal-title mt-4 mb-4">Edit duration</h5>
                            <div class="edit-duration">
                                <div class="comm-marg">
                                    <div class="form-inline">
                                        <input type="text" value="{{ $hours }}" class="form-control  mx-sm-2 text-center hours-text box-shadow-none" id="hours" placeholder="0">
                                        <input type="hidden" id="hours_text" value="{{ $hours }}" >
                                        <label class="mx-2" for="hours">Hours</label>
                                        <input type="text" value="{{ $minutes }}" class="form-control mx-sm-2 text-center mins-text box-shadow-none" id="mins" placeholder="00">
                                        <input type="hidden" id="mins_text" value="{{ $minutes }}" >
                                        
                                        <label class="mx-2 " for="mins">Mins</label>
                                    </div> 
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="bookTimeOverAppointment_Add" name="bookTimeOverAppointment">
                        <input type="hidden" id="bookApptOverAppointment_Add" name="bookApptOverAppointment">
                        <input type="hidden" id="bookApptOverBlockout_Add" name="bookApptOverBlockout">

                        <div class="footer-btn">
                            <div class="text-center">
                                <button type="submit" id="update_and_save" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and Save</button>
                            </div>
                        </div>
                      </div>
                    </div>                            
                  </div>
                </div>                     
              </div>
            </div>
      </div>
    </div>
@endsection


@section('import-scripts')
    <script type="text/javascript">

        $(document).ready(function() {

            $("#edit_appointment_date").datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            todayHighlight: true,
            autoclose: true,
            clearBtn: false
            });

            $( "#starttimePicker" ).find( ".form-select" ).css( "color", "#24303f" );
            $("#starttimePicker").timepicker().setValue($('#time').val().toUpperCase());
        })

        $("#starttimePicker").timepicker({ onChange: function(value) {
            $("#time").val( value );
        }});

        $(document).on('change', '#appointment_type_list', function(e) {
            $('#appointment_type_id').val(e.target.value);
        })

        $(document).on('change', '#hours', function(e) {
            $('#hours_text').val(e.target.value);
        })

        $(document).on('change', '#mins', function(e) {
            $('#mins_text').val(e.target.value);
        })

        var notification_popup_flag = 0;
        var notification_flag = 0;
        $(document).on('click', '#update_and_save', function() {
            if(notification_popup_flag != 1){
                Swal.fire({
                title: "Would you like to send your client a booking confirmation?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "No",
                showCloseButton: true,
                }).then((result) => {
                    if (result.value) {
                        notification_flag = 1;
                        updateappt();
                    }else{
                        notification_flag = 0;
                        updateappt();
                    }
                });
            }else{
                updateappt();
            }
        })
        function updateappt(){
             $(".loading").show();
             $.ajax({
                 url: "{{ route('practitioner.editappointment.update') }}",
                 data: {
                     appt_type: $('#appointment_id').val(),
                     appointment_type_id: $('#appointment_type_id').val(),
                     hours_text: $('#hours_text').val(),
                     mins_text: $('#mins_text').val(),
                     time: $('#time').val(),
                     date: $('#edit_appointment_date').val(),
                     bookTimeOverAppointment: $('input[name="bookTimeOverAppointment"]').val(),
                     bookApptOverAppointment: $('input[name="bookApptOverAppointment"]').val(),
                     bookApptOverBlockout: $('input[name="bookApptOverBlockout"]').val(),
                     notification_flag:notification_flag,
                 },
                 type: 'POST',
             }).done(function(response) {
                 $(".loading").hide();
                 if(response.status === "success") {
                 // window.location.reload();
                     Swal.fire({
                         icon: response.status,
                         title: "Appointment has been edited",
                         showClass: {
                             popup: 'animate__animated animate__fadeInDown'
                         },
                         hideClass: {
                             popup: 'animate__animated animate__fadeOutUp'
                         }
                     });
                     var url = '{{ $rturnUrl }}';
                     if(url != ''){
                             var first_url = url.replace('&amp;', '&');   
                             var url = first_url.replace('&amp;', '&');
                         // window.location.href = url;
                             setTimeout(function () {
                                 window.location.href = url;
                             }, 3000);  
                     }else{
                             setTimeout(function () {
                                 window.location.href = "{{route('practitioner.appointments.index')}}";
                             }, 3000); 
                     }
                 
                 } else{
                     if (response.time_status == "over") {
                         Swal.fire({
                             icon: "warning",
                             title: "Outside of hours",
                             text: "You are attempting to book an appointment outside of your specified hours. Would you like to proceed?",
                             type: "warning",
                             showCancelButton: true,
                             confirmButtonColor: "#3085d6",
                             cancelButtonColor: "#d33",
                             confirmButtonText: "Yes",
                             cancelButtonText: "No",
                         }).then((result) => {
                             if(result.value) {
                                 notification_popup_flag = 1;
                                 $("#bookTimeOverAppointment_Add").val(response.time_status);
                                 $("#update_and_save").click();
                            
                             } else {
                                 return false;
                             }
                         }).catch(swal.noop);
                     } else if (response.time_status == "conflicting_app") {
                         console.log(response.time_status,'test');
                         Swal.fire({
                             icon: "warning",
                             title: response.title,
                             text: response.msg,
                             showCancelButton: true,
                             confirmButtonColor: "#3085d6",
                             cancelButtonColor: "#d33",
                             confirmButtonText: "Yes",
                             cancelButtonText: "No",
                         }).then((result) => {
                             console.log(result);
                             if (result.value) {
                                 console.log(response.time_status);
                                 $("#bookApptOverAppointment_Add").val(
                                     response.time_status
                                 );
                                 notification_popup_flag = 1;
                                 $("#update_and_save").click();
                             } else {
                                 return false;
                             }
                         }).catch(swal.noop);
                     } else if (response.time_status == "conflicting_blockout") {
                         Swal.fire({
                             icon: "warning",
                             title: response.title,
                             text: response.msg,
                             showCancelButton: true,
                             confirmButtonColor: "#3085d6",
                             cancelButtonColor: "#d33",
                             confirmButtonText: "Yes",
                             cancelButtonText: "No",
                         }).then((result) => {
                                 if (result.value) {
                                     $("#bookApptOverBlockout_Add").val(
                                         response.time_status
                                     );
                                     notification_popup_flag = 1;
                                 $("#update_and_save").click();
                                 } else {
                                     return false;
                                 }
                             }).catch(swal.noop);
                     } else if (response.time_status == "no_hours") {
                         Swal.fire({
                             icon: "warning",
                             title: response.title,
                             text: response.msg,
                         });
                     } else if ( response.msg ==
                         "The appointment requested in this time slot is already booked.") {
                         Swal.fire({
                             icon: "error",
                             title: response.msg,
                             showClass: {
                                 popup: "animate__animated animate__fadeInDown",
                             },
                             hideClass: {
                                 popup: "animate__animated animate__fadeOutUp",
                             },
                         });
                     } 

                     // if(response.status === "error") {
                     //     swal.fire({
                     //         icon: 'warning',
                     //         title: response.title,
                     //         text: response.msg, 
                     //         showCancelButton: true,
                     //         confirmButtonColor: "#DD6B55",
                     //         confirmButtonText: "Ok",
                     //         cancelButtonText: "Cancel",
                     //     }).then(function(value) {
                     //         if (value.isConfirmed) {
         
                     //         }
                     //     });
                     // }
                 }

                 
     
             }).fail(function(error) {
                 $(".loading").hide();
             });
        }
    </script>
@endsection