@extends('front.inner-layout.app')

@section('content')

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper">
   <div class="row align-items-center">
      <div class="col-lg-4 col-md-4 col-sm-4">
         <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Notifications</h1>
      </div>
     @include('front.inner-layout.header')
   </div>
   <div class="brdr-bttm"></div>
   <div class="loading">Loading…</div>
   <div class="clients-area client-area-bullet">
      <div class="row">
         <div class="col-lg-12">
            <div class="client-top-area clienttop-img">               
              <div class="clients-area client-area-bullet mob-right-none communication-contain">
                  <input type="hidden" name="perPage" id="perPage" value="3" />
                  <div class=" dr-table communication-table mt-5">
                     <div class="table-responsive">
                        <table class="table table-striped">
                           <thead class="head-brdr">
                              <tr>
                                 <th width="100%"> <a class="cursor-pointer changeNotificationStatus markAllRead" class="dropdown-item " data-id="0" data-flag="markAllRead" style="color:#45747a !important;">Mark all as read</a></th>                                 
                              </tr>
                           </thead>
                           <tbody id="communicationAppend"></tbody>
                        </table>
                     </div>                     
                  </div>
               </div>
            </div>
            <div class="text-center">
               <a href="javascript:void(0)" class="btn btn-fill load-more hide">Load more</a>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection

@section('css')
   <style>
      .settingwaitlist #sendsmsmessage .modal-content{width: 400px;}
      .c-reply-modal .modal-body{padding:10px 5px;}
      .msgtext {width: 80%;border: none;padding:0 10px 10px;border-radius: 5px;background: transparent;}
      .image, .text-round-img{overflow: hidden;}
      .chatfill-bg .tooltip-info-icon{right: 0px;}
      .clientd-wrapper .communication-contain .client-top-area .checkedbox{
         top: 5px !important
         }
    .icon-button-blue {
      width: 10px;
      height: 12px;
      background: #68afb5;
      border: none;
      outline: none;
      border-radius: 50%;
    }
    .text-color-notification-read {
      font-weight: bold;
      color: #24303F !important;
    }

    .client_profile
    {
      height: 39px !important;
    }

    .dot-green1 {
      width: 15px;
      height: 15px;
      background: #68afb5;
      border-radius: 50px;
      position: absolute;
      left: 0px;
      top: 17px;
    }
   .changeIntakeFormNotificationStatus,
   .changeNotificationStatus {
      position: relative;
   }
   .sub-link {
    /* text-align: right; */
    position: relative;
    color: #45747a;
    text-decoration: underline;
   }
   .read
   {
      color:#898989 !important;
   }
   .markAllRead
   {
      color: #45747a;
      padding-left: 26px;
   }
   .topUpNow
   {
      color: #45747a;
   }
   .communication-table table tr td
   {
      padding-left: 20px !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) {
         getNotification();
      });

      function getNotification()
      {
         $.ajax({
           url: "{{ route('practitioner.notifications.all') }}",
           method: 'POST',
           success: function(data) {
              communicationList(data);
           }
        });
      }

      function communicationList(data) {
         if( data.data.length != 0 ) {
               var html = '';
               $.each( data.data.commonArray, function( key, value ) {
               html += dynamicContent( value );   
               $("#communicationAppend").html(html);
               $('input').attr('autocomplete', 'off');
            if($('.count_tr').length < data.count ) {
               $('.load-more').removeClass('hide');
               } else {
               $('.load-more').addClass('hide');
               }
            });
         } else {
            $("#communicationAppend").html('');
            $('.load-more').addClass('hide');
         }
      }

      function dynamicContent( val )
      {
         var uniqueId = Math.random();    
         var html = '';
         html += '<tr class="count_tr">';
         // html += '<td></td>';
         html += '<td>'; 

         var baseUrl = "{{url('practitioner/my-orders')}}";
         var url = baseUrl + "?" + 'notification_read_id=' + val.id;
         var date = "";
         date = moment(val.created_at).format("DD/MM/YY");
         var baseUrl = "{{url('/')}}";
         var client_url = baseUrl + "/practitioner/clientcard?" + 'client_id=' + btoa(val.client_id);
         var read_class = val.practitioner_read === 0 ? 'd-block' : 'd-none';
         var read = val.practitioner_read === 0 ? 'notread' : 'read';
         var book_with = '';
         if(val.bookedByOther == 1)
         {
            book_with = 'with '+val.bookedByName;
         }
         if (val.notification_type == 'getNewOrder') {
            var url = baseUrl+"/practitioner/my-orders";
               html += '<a style="border-bottom:0px !important" class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="newOrder"  href="' + url + '"> <div class="media"> <span style="" class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">Order received from ' + val.patient_name + ' <span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div> </a>';
         } else if (val.notification_type == 'paidAppointment') {
               html += '<a style="border-bottom:0px !important" class="dropdown-item changeNotificationStatus paidinvoicefetch_notify cursor-pointer '+read+'" data-id="' + val.id + '" data-flag="invoice" data-url=' + val.url + '  data-invoice_id="' + val.invoice_id + '" ><div class="media"> <span style="" class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1"> ' + val.patient_name + ' has paid invoice ' + val.invoice_number + ' <span class="float-right credit-date">' + val.bookingDate + '</span> </h6></div> </div> </a>';
         } else if (val.notification_type == 'testResults') {
            var text = val.content;
            var count = 25;
            var type = text.slice(0, count) + (text.length > count ? "..." : "");
            html += '<a style="border-bottom:0px !important" class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="testResults"  href="' + client_url + '"> <div class="media"> <span style="" class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has sent test results <span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div> </a>';
         }  else if (val.notification_type == 'documents') {
            var text = val.content;
            var count = 25;
            var type = text.slice(0, count) + (text.length > count ? "..." : "");
               html += '<a class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="documents" href="' + client_url + '"> <div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has sent documents <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
         } else if (val.notification_type == 'reminderTrialPeriod') {
            var baseUrl = "{{url('/')}}";
            var url = '#';
            var text = val.content;
            var count = 25;
            var type = text.slice(0, count) + (text.length > count ? "..." : "");
               html += '<a class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="trialReminder" href="' + url + '"> <div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.title + ' <span class="float-right credit-date">' +val.bookingDate + '</span></h6><span class="d-block">' + type + '</span> </div> </div> </a>';
         } else if (val.notification_type == 'intakeform') {
               html += '<a style="border-bottom:0px !important" data-intakeform="' + val.id + '" data-flag="intakeForm" class="dropdown-item changeIntakeFormNotificationStatus '+read+'" target="new" href="' + val.link + '"> <div class="media"> <span class="dot-green1 '+read_class+'"></span>  <div class="media-body"> <h6 class="mt-10 ml-1"> ' + val.patient_name + ' has submitted their intake form <span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div> </a>';
         } else if (val.notification_type == "referral") {
            var baseUrl = "{{route('home')}}";
               html += '<a style="border-bottom:0px !important" class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="referral" href="' + client_url + '"> <div class="media"> <span style="" class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">You have an unmatched referral for ' + val.patient_name + ' referred by ' + val.content + '<span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div> </a>';
         } else if (val.notification_type == "newInvoice") {
            var read_class = 'd-none';
            html += '<a href="' + val.url + '" style="border-bottom:0px !important" class="dropdown-item changeNotificationStatus paidinvoicefetch_notify cursor-pointer '+read+'" data-id="' + val.id + '" data-flag="invoice" data-url=' + val.url + '  data-invoice_id="' + val.id + '" ><div class="media"> <span style="" class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">Payment Received<span class="float-right credit-date">' + val.bookingDate + '</span></h6> <span class="d-block">' + val.patient_name + '</span> <span class="d-block">Invoice : ' + val.order_no + '</span> <span class="d-block">Time : ' + val.bookingDate + '  ' + val.time + '</span> </div> </div> </a>';
         } else if (val.notification_type == 'getVideoConstraint') {
            var url = val.link;
               html += '<a style="border-bottom:0px !important" class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="videoConsult" href="' + url + '"> <div class="media"> <span style="" class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has joined their Telehealth consult for an appointment '+book_with+' on ' + val.appointmentDate + ' at ' + val.time + '<span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div> </a>';
         } else if (val.notification_type == 'newAppointment') {
            if (val.note_added_from_book == 1) {
                  html += '<div class="position-relative"><a href=' + val.link + '  class="dropdown-item jumptodatecalendar cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="appointment" data-date="' + val.jumpAppointmentDate + '"><div class="media"><span class="dot-green1 '+read_class+'"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has booked an appointment for ' + val.content + ' '+book_with+' on ' + val.appointmentDate + ' at ' + val.time + ' <span class="sub-link" onclick="window.location.href=' + val.link + '">View note</span> <span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div></a></div>';
            } else {
                  html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="appointment" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has booked an appointment for ' + val.content + ' '+book_with+' on ' + val.appointmentDate + ' at ' + val.time + ' <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
            }
         } else if (val.notification_type == 'recheduleAppointment') {
            if (val.note_added_from_book == "1") {
                  html += '<div class="position-relative"><a href=' + val.link + ' class="dropdown-item jumptodatecalendar cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="appointment" data-date="' + val.jumpAppointmentDate + '"><div class="media"><span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has rescheduled their appointment for ' + val.content + ' '+book_with+' to ' + val.appointmentDate + ' at ' + val.time + ' <span class="sub-link" onclick="window.location.href=' + val.link + '">View note</span><span class="float-right credit-date">' + val.bookingDate + '</span></h6></div></div></a></div>';
            } else {
                  html += '<a href="' + val.link + '"  class="dropdown-item jumptodatecalendar cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="appointment" data-date="' + val.jumpAppointmentDate + '"><div class="media"><span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has rescheduled their appointment for ' + val.content + ' '+book_with+' to ' + val.appointmentDate + ' at ' + val.time + ' <span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div> </a>';
            }
         }else if (val.notification_type == 'credit_balance') {
               var baseUrl = "{{route('practitioner.credit.purchase')}}";
               var url = '#';
               var text = val.title;
               var count = 25;
               var type = text.slice(0, count) + (text.length > count ? "..." : "");
               html += '<div class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="credit_notification"> <div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body mt-10 ml-1"> <h6 class="mt-0">'+ val.title + ' ' + val.content + ' <a class="topUpNow"  target="_blank"  href="' + baseUrl + '"> Top up now</a> to avoid uninterrupted service<span class="float-right credit-date">' + val.bookingDate + '</span></h6></div> </div> </div> ';
         
         }else if (val.notification_type == 'auto_credit_topup_purchased_failed') {
            var baseUrl = "{{route('practitioner.credit.purchase')}}";
            var url = '#';
            var text = val.title;
            var count = 25;
            var type = text.slice(0, count) + (text.length > count ? "..." : "");
            html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="credit_notification"> <div class="media"> <span class="dot-green1 ' + read_class + '"></span> <div class="media-body"> <h6 class="mt-0">' + val.title + ' <span class="float-right credit-date">' + val.bookingDate + ' </span></h6> <h6>' + val.content + '</h6></div> </div> </a>';
            //html += '<div class="dropdown-item changeNotificationStatus '+read+'" data-id="' + val.id + '" data-flag="credit_notification"> <div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-0">'+ val.title + '<span class="float-right">' + val.bookingDate + '</span></h6> <h6>' + val.content + '<br><a class="topUpNow"  target="_blank"  href="' + baseUrl + '"> Top up now</a> to avoid uninterrupted service</h6></div> </div> </div> ';
        
         }else if (val.notification_type == 'cancelledAppointment'){
            html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="appointment" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' has cancelled their appointment for '+val.content+' '+book_with+' on ' + val.appointmentDate + ' at ' + val.time + ' <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
         }
         else if (val.notification_type == 'giftVoucher'){
            html += '<a href="' + val.voucher_link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="giftVoucher" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.sender_name + ' purchased a gift voucher for $' + val.voucher_price  + ' <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
         }
         else if (val.notification_type == 'packages'){
            html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="giftVoucher" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' purchased a package - '+val.content+' <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
         }
         else if (val.notification_type == 'courses'){
            html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="giftVoucher" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' purchased a course - '+val.content+' <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
         }
         else if (val.notification_type == 'waitlist'){
            html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="giftVoucher" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' added to waitlist <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
         }
         else if (val.notification_type == 'payment_plans'){
            
            if (val.note_added_from_book == "1") {
                  html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="giftVoucher" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' payment received - '+val.content+' <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
            } else {
                  html += '<a href="' + val.link + '"  class="dropdown-item cursor-pointer changeNotificationStatus '+read+'" data-id="' + val.id + '"  data-flag="giftVoucher" data-date="' + val.jumpAppointmentDate + '"><div class="media"> <span class="dot-green1 ' + read_class + '"></span>  <div class="media-body"> <h6 class="mt-10 ml-1">' + val.patient_name + ' purchased a payment plan - '+val.content+' <span class="float-right credit-date">' + val.bookingDate + '</span></h6> </div> </div> </a>';
            }
         }
            
         html += '</td>';  
         html += '</tr>';

         return html;
      }

      $(document).on( 'click', '.load-more', function() {
         getNotificationListForLoadMore('','');
      });

      // Search communication
      $(document).on( 'submit', '#frm_search_communication', function(e) {
         e.preventDefault();

         $.ajax({
            type: "POST",
            url: $(this).data('action'),
            data: new FormData(this),
            dataType: "JSON",
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function (msg) {
               $(".loading").addClass("d-block");
            },
            success: function( data ) {
               $(".loading").removeClass("d-block");
               if( data.data.length != 0 ) {
                  var html = '';
                  $.each( data.data, function( key, value ) {  
                     
                     // if(value.sms_replies.length >=1){
                     //    var array = value.sms_replies;
                     //    var l = value.sms_replies.length;
                     //    for(i=0; i< l / 2; i++) {
                     //       var t = array[i];
                     //       array[i] = array[l - 1 - i];
                     //       array[l - 1 - i] = t;
                     //    }
                     //    $.each(array, function(key,sms_replies){
                     //       html += dynamicReplyContent(value,sms_replies);
                     //    });
                     // }

                     html += dynamicContent(value);                       
                  });

                  $("#communicationAppend").empty();
                  $("#communicationAppend").html(html);

                  if( $('.count_tr').length < data.count ) {
                     $('.load-more').removeClass('hide');
                  } else {
                     $('.load-more').addClass('hide');
                  }
               } else {
                  $("#communicationAppend").html('');
                  $('.load-more').addClass('hide');
               }
               $("#clear-filter").removeClass("hide");
               $("#searchCommunicationByPatient").modal("hide");
            }
         });
      });

      function getNotificationListForLoadMore(searchData, sorting) {
         $.ajax({
            url: "{{ route('practitioner.notifications.all')}}",
            method: 'POST',
            data: {
               searchData: searchData,
               sorting: sorting,
               skip: $('.count_tr').length
            },
            beforeSend: function(msg) {
               $(".loading").addClass("d-block");
               $(".loading").css("display", 'block');
            },
            success: function(data) {                  
               $(".loading").removeClass("d-block");
               $(".loading").css("display", 'none');
               if( data.data.length != 0 ) {
                  var html = '';
                  $.each( data.data.commonArray, function( key, value ) {
                        html += dynamicContent( value );        
                     });
                     $("#communicationAppend").append(html);
                     $('input').attr('autocomplete', 'off');
                     if( $('.count_tr').length < data.count ) {
                        $('.load-more').removeClass('hide');
                     } else {
                        $('.load-more').addClass('hide');
                     }               
               } else {
                  $("#communicationAppend").html('');
                  $('.load-more').addClass('hide');
               }              
            }
         });
      }

      $(document).on('click', '.changeNotificationStatus', function() {
         getNotification();
      });
      $(document).on('click', '.changeIntakeFormNotificationStatus', function() {
         getNotification();
      });
   </script>   
@endsection