@extends('front.patient.inner-layout.app')
@section('page_tab_title' ,"My Notifications")
@section('content')
<div class="page-content dashboard-wrapper mdashboard-wrapper space-bttm-n client-dahsboardfamily">
    <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> Notifications</h1>
        </div>
        @include('front.patient.inner-layout.header')
    </div>
    {{-- <div id="tab-menu" class="mydashboard-upcoming-area tab-menu service-provider-area service-provider-widtharea mt-45"> --}}
            <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="25" />
         
                           <div class=" dr-table communication-table mt-5 mb-3">
                              <div class="table-responsive">
                                 <table class="table table-striped">
                                    <thead class="head-brdr">
                                       <tr>
                                          <th>&nbsp;</th>
                                          <th>Title</th>
                                          <th>Practitioner Name</th>
                                          <th>Invoice No.</th>  
                                          <th>Date</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 mb-2">Load more</a>
                     </div>
                  </div>
               </div>
            </div>

    {{-- </div> --}}

@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) {
      var items = parseInt($('#perPage').val());

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

       function communicationList(data) {
          if( data.data.length != 0 ) {
               var html = '';
               $.each( data.data, function( key, value ) {
                
                  if(key === "commonArray") {
                      $.each(value.data, function(skey, item) {
                      html += dynamicContent( item );              
                  })
                  if (value.last_page > 1) {
                    $('.load-more').removeClass('hide');
                  } else {
                    $('.load-more').addClass('hide');
                  }
                }

                $("#communicationAppend").html(html);
                $('input').attr('autocomplete', 'off');
           
             });
          } else {
             $("#communicationAppend").html('');
             $('.load-more').addClass('hide');
          }
       }

       function dynamicContent( value )
       {
          var uniqueId = Math.random();    
          var html = '';
          
          var badgeClass = '<td class="text-center"><button type="button" class="icon-button-blue"></button></td>';
          var textClass = 'text-color-notification-read';
          if(value.read === 1 || value.practitioner_read === 1) {
             badgeClass = '<td></td>';
             textClass= '';
          }
          html += '<tr class="count_tr '+textClass+'">';         
          html += badgeClass;

          var type = "-"
          if(value.type) {
            type = value.type;
          }
          html += '<td>'+ type +'</td>';
          html += '<td>'+ value.practitioner_name +'</td>';

          var invoice_number = "-";
          if(value.invoice_number) {
            invoice_number = value.invoice_number
          } 
          html += '<td>'+ invoice_number +'</td>';

          var date = "-"
          if(value.bookingDate) {
            date =  moment(value.bookingDate).format('YY/MM/DD');
          } else if(value.date) {
            date = moment(value.date).format('YY/MM/DD');
          }
          html += '<td>'+ date +'</td>';

        //   html += '<td>';
        //   html += '<div class="main-div">';
        //   var date = value.jumpAppointmentDate !== null ? moment(value.jumpAppointmentDate).format('DD/MM/YYYY') : '';
  
        //   if(value.notification_type === "referral") {
        //      date = value.date;
        //   } else if (value.notification_type === "intakeform") {
        //      date = value.date;
        //   }
        //   html += '<div>'+ date + ' ' + value.time +'</div>';
          html += '</div>';
          html += '</td>';

          // var read = "Unread";
          // if(value.read === 1 || value.practitioner_read === 1) {
          //     read = "Read";
          // }
          // html += '<td>'+ read +'</td>';

          html += '</tr>';

          return html;
       }

       $(document).on( 'click', '.load-more', function() {
          var items = parseInt($('#perPage').val());
          getNotificationListForLoadMore(items + 25);
       });

     
       function getNotificationListForLoadMore(items) {
          $.ajax({
             url: "{{ route('patient.notifications.all')}}",
             method: 'POST',
             data: {
              items: items
              },
              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, function( key, value ) {
                  if(key === "commonArray") {
                      $.each(value.data, function(skey, item) {
                      html += dynamicContent( item );              
                  })

                    if (value.last_page > 1) {
                        console.log("value",value.last_page);
                        $('.load-more').removeClass('hide'); 
                    } else {
                        console.log("value1",value.last_page);
                        $('.load-more').addClass('hide');       
                    }
                }
                

                $('#perPage').val(items);
                $("#communicationAppend").html(html);
                $('input').attr('autocomplete', 'off');
                
             });
          } else {
             $("#communicationAppend").html('');
             $('.load-more').addClass('hide');
          }
            
            }
          });
       }
    });
</script>   
@endsection