@extends('front.patient.inner-layout.app')
@section('page_tab_title' ,"My Appointments")
@section('content')

<div class="page-content dashboard-wrapper mdashboard-wrapper space-bttm-n myappoint-font">
   <div class="row align-items-center">
      <div class="col-lg-6 col-md-6 col-sm-4">
         <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Appointments</h1>
      </div>
      @include('front.patient.inner-layout.header')
   </div>
   <div class="brdr-bttm mb-0"></div>


   @if(!$upcomingAppointments->isEmpty() || !$oldAppointments->isEmpty() )


   <div class="mydashboard-upcoming-area upcoming-appintarea tab-menu">
      <div class="row">
         <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 mt-20">
            <ul class="nav nav-tabs border-0" id="myTab" role="tablist">
                              @foreach ($upcomingAppointments as $appointment)
               @endforeach

               @foreach($familyMembersData as $member)

                                    <script>
                        $(document).ready(function(e) {
                           GetUpcomingAppointment()
                           GetPastAppointment()
                        });
                        
                       
                     </script>
                  
               
               <li class="nav-item">
                  <a data-clientid="{{$member['client_id']}}" class="nav-link {{$active}}" id="home-tab" data-toggle="tab" href="#" aria-selected="true"> {{ $member['name'] }}</a>
               </li>
               @endforeach
                  
               @if($count >=1)
               <li class="nav-item" >
                  <a data-clientid="0" class="nav-link" id="home-tab" data-toggle="tab" href="#" aria-selected="false"> Everyone</a>
               </li>
               @endif
   


               <!--<li class="nav-item" >
                           <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"  aria-selected="true"> Monica</a>
                           </li>
                           <li class="nav-item" >
                              <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile"   aria-selected="false">Lola</a>
                           </li>
                           <li class="nav-item" >
                              <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact"    aria-selected="false">jack</a>
                           </li>
                           <li class="nav-item" >
                              <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact"    aria-selected="false">everyone</a>
                           </li>-->
            </ul>
            <div class="card">
               <!--id="upcomingappointment"-->
               <!-- <h2 class="sub-title mb-3">Upcoming Appointments </h2> -->

               <ul class="nav appointments-menu-content" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                     <a class="nav-link sub-title active" id="upcoming-appointments-tab" data-toggle="tab" href="#upcoming-appointments-content" role="tab" aria-controls="home" aria-selected="true">Upcoming Appointments</a>
                  </li>
                  <li class="nav-item" role="presentation">
                     <a class="nav-link sub-title" id="past-appointments-tab" data-toggle="tab" href="#past-appointments-content" role="tab" aria-controls="profile" aria-selected="false">Past Appointments</a>
                  </li>
               </ul>
               <div class="tab-content mt-3" id="myTabContent">
                  <div class="tab-pane fade show active" id="upcoming-appointments-content" role="tabpanel" aria-labelledby="upcoming-appointments-tab">
                     <div id="upcomingappointment"></div>

                     <div id="up_comming_appointment" style="display:none" class="mydashboard-upcoming-area mydash-emptyarea ">
                        <div class="row align-items-center justify-content-center my-5">
                           <div class="col-lg-8  mt-20 pr-xl-0">
                              <div class="empty-box-no-appointment">
                                 <div class="appointment-empty-box">
                                    <div class="img-calenderbox">
                                       <img src="{{asset("assets/images/Streamlined-bookings-icon.svg")}}" alt="" class="img-fluid">
                                    </div>
                                    <h3 class="sub-title sub-title-new">You have no upcoming appointments</h3>
                                    <p class="font-15 text-blue">Your upcoming appointments will automatically show here once booked with your service provider.</p>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>

                  </div>
                  <div class="tab-pane fade" id="past-appointments-content" role="tabpanel" aria-labelledby="past-appointments-tab">
                     <div id="pastappointment"></div>

                     <div id="past_comming_appointment" style="display:none" class="mydashboard-upcoming-area mydash-emptyarea">
                        <div class="row align-items-center justify-content-center my-5">
                           <div class=" col-lg-8  mt-20 pr-xl-0">
                              <div class="empty-box-no-appointment">
                                 <div class="appointment-empty-box">
                                    <div class="img-calenderbox">
                                       <img src="{{asset("assets/images/Streamlined-bookings-icon.svg")}}" alt="" class="img-fluid">
                                    </div>
                                    <h3 class="sub-title sub-title-new">You have no past appointments</h3>
                                    <!-- <p class="font-15 text-blue">Your upcoming appointments will automatically show here once booked with your service provider.</p> -->
                                    <p class="font-15 text-blue">Your appointments will automatically show here once they have passed.</p>

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

            </div>

            <!-- <div class="bttm-brdr"></div> -->
            <ul class="nav nav-tabs border-0 d-none" id="myTab" role="tablist">

               
               @foreach($oldAppointments as $appointment)

               
                     <script>
                        $(document).ready(function(e) {
                           GetPastAppointment()
                        });
                     </script>
                  
                  <li class="nav-item">
                     <a data-clientid="{{$appointment->client_id}}" class="nav-link {{$active}}" id="home-tab" data-toggle="tab" href="#" aria-selected="true"> {{ $appointment->name }} </a>
                  </li>


               
               @endforeach


               <!--<li class="nav-item" >
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"  aria-selected="true"> Monica</a>
                     </li>
                     <li class="nav-item" >
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile"   aria-selected="false">Lola</a>
                     </li>
                     <li class="nav-item" >
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact"    aria-selected="false">jack</a>
                     </li>
                     <li class="nav-item" >
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact"    aria-selected="false">everyone</a>
                     </li>-->
            </ul>

            <!-- <div id="pastappointment" class="card"> -->
                        <!-- </div> -->
                     </div>
         <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 brdr-left spl-bdr slider-top">
            {!! $slider !!}
         </div>
      </div>
   </div>
   @else
   <div class="mydashboard-upcoming-area mydash-emptyarea ">
      <div class="row align-items-center justify-content-center my-5">
         <div class="col-lg-8 mt-20 pr-xl-0">
            <div class="empty-box-no-appointment">
               <div class="appointment-empty-box">
                  <div class="img-calenderbox">
                     <img src="{{asset("assets/images/Streamlined-bookings-icon.svg")}}" alt="" class="img-fluid">
                  </div>
                  <h3 class="sub-title sub-title-new">You have no appointments</h3>
                  <p class="font-15 text-blue">Your upcoming appointments will automatically show here once booked with your service provider. Coming soon, you'll also be able to book appointments via our wellness directory.</p>
                  <a href="{{route('patient.serviceproviders.index')}}" class="btn-unfill">View Service Providers</a>
               </div>
            </div>
         </div>
         <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 brdr-left spl-bdr">
            <div class="slider-empty">
               {!! $slider !!}
            </div>
         </div>
      </div>
   </div>
   @endif
</div>
@endsection

@section('modals')
<!-- location modal -->
<!-- <div class="modal fade location-modal" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="locationModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
          <div class="modal-body">
          <h4 id="provider-address"></h4>
          </div>
          <div class="modal-footer">
             <a id="provider-map-link" target="_blank">Open in map</a>
             <a href="javascript:" data-dismiss="modal">Cancel</a>
          </div>
       </div>
    </div>
 </div> -->
<!-- location modal end -->
<!-- location modal -->
<div class="modal fade location-modal" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="locationModalTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <button type="button" class="close text-navy" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" class="text-navy">&times;</span>
         </button>
         <div class="modal-header border-0">
            <h4 class="modal-title text-center  w-100">Address</h4>

         </div>
         <div class="modal-body text-center">
            <p id="provider-address"></p>
         </div>
         <div class="modal-footer border-0 d-flex justify-content-center text-center">
            <a id="provider-map-link" target="_blank" class="btn-fill">Open in map</a>
            <!-- <a href="javascript:" data-dismiss="modal">Cancel</a> -->
         </div>
      </div>
   </div>
</div>
<!-- location modal end -->
@endsection

@section('css')
<style>
   .slider-top .patient-dashboard-slider {
      margin-top: 58px !important;
   }
</style>
@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>
<script>
   $(document).ready(function(e) {
      $(function() {
         $('.lazy').lazy();
      });
   });


   const message = Swal.mixin({
      customClass: {
         confirmButton: 'btn btn-success shadow-sm mr-2',
         cancelButton: 'btn btn-danger shadow-sm'
      },
      buttonsStyling: false,
   });
   $(function() {
      $(document).on('click', '#cancelappt', function(e) {
         var flag = 0;
         var id = $(this).data("apptid");

         //check condition
         $.ajax({
            async: false,
            url: "{{route('patient.appointment.checkonlinebookingCancel')}}",
            method: 'POST',
            data: {
               id: id,
            },
         }).done(function(response) {

            flag = response.is_cancel;

         }).fail(function(error) {
            alert('something went wrong error.');
         });

         if (flag == 0) {
            swalAlert("error", "Cancellation not available", "Online cancellations are not permitted this close to your appointment. Please contact your service provider directly");
            return false;
         }


         message.fire({
            icon: 'warning',
            title: 'Cancel appointment?',
            type: 'warning',
            customClass: {
               confirmButton: 'btn btn-success shadow-sm mr-2',
               cancelButton: 'btn btn-danger shadow-sm'
            },
            buttonsStyling: false,
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
         }).then((result) => {
            if (result.value) {


               $(".loading").addClass("d-block");
               $.ajax({
                  url: "{{route('patient.appointment.cancel')}}",
                  data: {
                     app_id: id
                  },
                  method: "POST"
               }).done(function(response) {
                  $(".loading").removeClass("d-block");
                  if (response.status == "success") {
                     // Swal.fire({
                     //    icon: response.status,
                     //    title: response.msg,
                     //    showClass: {
                     //       popup: 'animate__animated animate__fadeInDown'
                     //    },
                     //    hideClass: {
                     //       popup: 'animate__animated animate__fadeOutUp'
                     //    }
                     // });
                     $('.appointment_' + id).remove();
                     // $(".upcomingapptcancel").attr("data-flag",'cancel');
                     // $(".upcomingapptcancel").trigger("click");
                     message.fire({
                        icon: 'success',
                        title: response.msg,
                        //text: "Service provider deleted successfully.",
                     });
                     // setTimeout(function(){
                     //    location.reload(true);
                     // }, 2500);
                  } else {
                     $(".upcomingappt").trigger('click');
                  }
               }).fail(function(respons) {
                  $(".loading").removeClass("d-block");
                  var res = respons.responseJSON;
                  var msg = 'something went wrong please try again !';
                  if (res.errormessage) {
                     msg = res.errormessage
                  }
                  message.fire({
                     type: 'error',
                     title: 'Error',
                     text: msg
                  });
               });
            }
         });
      })
      $(document).on('click', '#apptcall,#apptcalll', function() {
         $(".practitionercallname").text('Call ' + $(this).data('practitionername'));

         $("#officephone").text($(this).data('officephone'));
         $("#mobilephone").text($(this).data('mobilephone'));
         $('.no_record_found').css('display', 'block');
         if ($(this).data('officephone') == '-') {
            $('#telofficephone').parent().parent().css('display', 'none');
         } else {
            $('#telofficephone').attr('href', 'tel:' + $(this).data('officephone'));
            $('.no_record_found').css('display', 'none');
         }
         if ($(this).data('mobilephone') == '-') {
            $('#telmobilephone').parent().parent().css('display', 'none');
         } else {
            $('#telmobilephone').attr('href', 'tel:' + $(this).data('mobilephone'));
            $('.no_record_found').css('display', 'none');
         }
         $("#callPractitionerModal").modal('show');
      });
      $('#appointment_type').on("select2:selecting", function(e) {
         var data = e.params.args.data;
         var appointment_type = data.id;
         var url = "{{route('patient.get.appointmenttype')}}";
         var type = "POST"
         var formData = new FormData();
         formData.append('id', appointment_type);
         $.ajax({
               url: url,
               data: formData,
               dataType: 'JSON',
               type: type,
               contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
               processData: false, // NEEDED, DON'T OMIT THIS
            })
            .done(function(response) {
               $("#reschedule-form #appointment_fees").val(response.data.appointment_type.fee);
            });
      });

      $(document).on('click', '.open-service-provider-location', function(e) {
         $('.modal').modal('hide');
         e.preventDefault();
         var el = $(this);
         var url = el.data('url');
         var target = el.data('target');
         $(".loading").show();
         $.ajax({
            type: "GET",
            url: url,
            dataType: "json"
         }).always(function() {
            $('#load-modal').html(' ');
            $(".modal-backdrop").remove();
            $(".loading").hide();
         }).done(function(res) {
            console.log(res);
            $("#provider-address").text(res.address);
            var src = "{{ url( '/patient/view/location-of-practitioner' ) }}/" + res.practitioner.id;
            $("#provider-map-link").attr('href', src);
            $('#load-modal').html(res.html);
            $(target).modal('toggle');
            $(".loading").hide();
            $(".mCustomScrollbar").mCustomScrollbar();
         }).fail(function(error) {
            $(".loading").hide();
            swalAlert("error", "Error", "Something went wrong.");
         });

      });
   }); //end

   function GetUpcomingAppointment(id) {

      $(".loading").addClass("d-block");

      $.ajax({
         url: "{{route('patient.appointment.GetUpcomingAppointment')}}",
         data: {
            id: id,
            _token: "{{csrf_token()}}"
         },
         method: "POST"
      }).done(function(response) {
         $(".loading").removeClass("d-block");

         if (response.status == "success") {
            $("#upcomingappointment").html(response.data);
         }

         if (response.count == 0) {
            $("#up_comming_appointment").css('display','block');
         } else{
            $("#up_comming_appointment").css('display','none');
         }

      }).fail(function(respons) {
         $(".loading").removeClass("d-block");
      });
   }

   function GetPastAppointment(id) {
      $(".loading").addClass("d-block");

      $.ajax({
         url: "{{route('patient.appointment.GetPastAppointment')}}",
         data: {
            id: id,
            _token: "{{csrf_token()}}"
         },
         method: "POST"
      }).done(function(response) {
         $(".loading").removeClass("d-block");

         if (response.status == "success") {
            $("#pastappointment").html(response.data);
         } 

         if (response.count == 0) {
            $("#past_comming_appointment").css('display','block');
         } else{
            $("#past_comming_appointment").css('display','none');
         }

      }).fail(function(respons) {
         $(".loading").removeClass("d-block");
      });
   }

   $(document).on('click', '#home-tab', function(e) {
      var id = $(this).data('clientid');
      GetUpcomingAppointment(id);
      GetPastAppointment(id);
   });

   $(document).on('click', '.rec_app_click', function(e) {
      event.preventDefault();

      var el = $(this);
      var appointment_id = el.data('appointment-id');


      var flag = 0;
      $(".loading").addClass("d-block");
      $.ajax({
         async: false,
         url: "{{route('patient.appointment.checkonlinebookingResc')}}",
         method: 'POST',
         data: {
            id: appointment_id,
         },
      }).done(function(response) {
         $(".loading").removeClass("d-block");
         flag = response.is_rec;
         if (flag == 0) {
            swalAlert("error", "Reschedule not available", "Online rescheduling is not permitted this close to your appointment. Please contact your service provider directly");
            return false;
         } else {
            window.location.href = el.attr('href');

         }

      }).fail(function(error) {
         $(".loading").removeClass("d-block");
         alert('something went wrong error.');
      });
   });
</script>




@endsection