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

@section('content')

<div class=" dashboard-wrapper">
   <!-- my plan page design start-->

   <div class="container-fluid">
      <div class="row">
         <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100 unpaid-invoices-nav">
            <a class=" p-0" href="{{ route('practitioner.dashboard') }}"><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 pr-2"><span class="arca-font">My </span>Unpaid Invoices</h1>
            <ul class="hm-banner-text textbox-dropdown-area my-auto ml-lg-3">
               <!-- <li class="search-b">
                  <div class="input-group box-shadow" id="unpaid-invoice-search-box">
                     
                     <input data-action="{{ route('practitioner.unpaid.invoice.searchUnpaidInvoice') }}" type="text" name="search_unpaid_invoices" id="search_unpaid_invoices" class="form-control border-left-0 text-navy" placeholder="Search invoices">
                     <div class="input-group-prepend">
                        <span class="input-group-text bg-white border-right-0" id="basic-addon1">
                           <img src='{{asset("assets/images/Search_icon_white.svg")}}' alt="">
                        </span>
                     </div>
                  </div>
               </li> -->
               <div class="sortdropdown-area search-b">
                            <div class="input-group " id="unpaid-invoice-search-box">
                            <input data-action="{{ route('practitioner.unpaid.invoice.searchUnpaidInvoice') }}" type="text" name="search_unpaid_invoices" id="search_unpaid_invoices" class="form-control border-left-0 text-navy" placeholder="Search invoices">
                                <div class="input-group-append">
                                    <span class="input-group-text  border-right-0" id="basic-addon1">
                                       <img src='{{asset("assets/images/Search_icon_white.svg")}}' alt="">
                                    </span>
                                </div>
                            </div>
                        </div>
            </ul>

            <ul class="list-inline  mr-auto my-md-auto mx-lg-3 mx-sm-2">
               <li class="list-inline-item areafilter">
                  <a data-dismiss="modal" data-toggle="modal" data-target="#dateserviceModal" class=" greentext cursor-pointer btn-unfill ">Filter</a>
               </li>
               <li class="list-inline-item areafilter hide" id="clear-filter" style="width:auto !important;">
                  <a href="{{ route('practitioner.unpaid.invoice.index') }}"  class="greentext cursor-pointer btn-unfill ">Clear Filter</a>
               </li>
            </ul>
            
            <!-- <ul class="list-inline icons-listing mr-auto my-auto"></ul> -->
            <!-- <a href="javascript:void(0)" class="btn-fill text-white float-right text-center">Send invoice/s</a> -->
            <div class="dropdown send-invoices-dropdown ml-sm-auto">
               <!-- <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a> -->
               <a href="javascript:void(0)" class="btn-fill text-white float-right text-center" data-toggle="dropdown">Send invoice/s</a>
               <div class="dropdown-menu">
                  <a href="javascript:void(0)" id="sendInvoicesViaSMS" data-type='sms' class="dropdown-item cursor-pointer sendInvoiceToClient">Send via SMS</a>
                  <a href="javascript:void(0)" id="sendInvoicesViaEmail" data-type='email' class="dropdown-item cursor-pointer sendInvoiceToClient" href="#">Send via email</a>
               </div>
            </div>

         </nav>

         <div class="brdr-bttm w-100"></div>
      </div>
   </div>

   <div>
      <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper ">
         <div class="">
            <div class="unpaid-invoice-page">
               <div class="client-top-area clienttop-img">
                  <div class="clients-area client-area-bullet mob-right-none communication-contain">
                     <div class="dr-table communication-table  unpaid-invoices-table">
                        <div class="table-responsive">
                           <table class="table table-striped">
                              <thead class="head-brdr">
                                 <tr>
                                    <th class="position-relative">
                                       <div class="waitlist-modal client-area-bullet-first">
                                          <div class="delete-check-icon checkedbox">
                                             <ul class="mb-0">
                                                <li>
                                                   <div class="rdio rdio-primary radio-inline">
                                                      <input id="allID" name="allID" type="checkbox">
                                                      <label for="allID"></label>
                                                   </div>
                                                </li>
                                             </ul>
                                          </div>
                                       </div>
                                    </th>
                                    <th class=" white-space-nowrap">Date</th>
                                    <th class=" white-space-nowrap">Number</th>
                                    <th>Client</th>
                                    <th>Description</th>
                                    <th>Provider</th>
                                    <th>Location</th>
                                    <th>Amount</th>
                                    <th>Balance</th>
                                    <th>Date last sent</th>
                                    <th>&nbsp;</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>
</div>

<!-- Date Service Modal S -->
   <div class="client-follow-popup customscroll waitlist-modal showpop dateserviceModal">
      <div class="modal fade" id="dateserviceModal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
               <div class="popup-marg">
                  <div class="modal-body p-0">
                     <div class="borderbtttm">
                        <form name="frm_filter_unpaid_invoices" id="frm_filter_unpaid_invoices" data-action="{{route('practitioner.unpaid.invoice.filterUnpaidInvoice')}}" method="POST">
                           @csrf
                           <div class="cdropdown-menu borderbtttm">
                              <div class="">
                                 <h5>Date</h5>
                                 <ul class="date-textli">
                                    <li>From</li>
                                    <li>
                                       <div class="form-group" id="open_from_date">
                                          <input class="form-control navy-text" id="date" name="start_date" placeholder="DD-MM-YYYY" type="text" autocomplete="off" />
                                       </div>
                                    </li>
                                    <li>To</li>
                                    <li>
                                       <div class="form-group">
                                          <input type="text" name="end_date" id="end_date" class="form-control navy-text" placeholder="DD-MM-YYYY" autocomplete="off" >
                                       </div>
                                    </li>
                                 </ul>
                              </div>
                           </div>

                           <div class="borderbtttm"></div>

                           <div class="borderbtttm">
                              <label class="ml-0 text-navy">Service Provider</label>
                              <div class="form-group">
                                 <select onchange="this.className=this.options[this.selectedIndex].className" class="form-control grey-text" name="practitioner_id" id="select_service_provider_upi">
                                    <option value="">Select</option>
                                    <option class="form-control navy-text" value="{{$practitioner->id}}">{{ $practitioner->first_name.' '.$practitioner->last_name }}</option>
                                    @foreach( $serviceProviders as $key => $value )
                                       @if( $value->role == "service_provider" )
                                          <option class="form-control navy-text" value="{{@$value->id}}">{{ $value->first_name.' '.$value->last_name }}</option>
                                       @endif
                                    @endforeach
                                 </select>
                              </div>
                           </div>

                           <div class="">
                              <label class="ml-0 text-navy">Location</label>
                              <div class="form-group">
                                 <select onchange="this.className=this.options[this.selectedIndex].className" class="form-control select-location grey-text" name="location" >
                                    <option selected disabled>Select</option>
                                    @foreach( $locations as $key => $value)
                                       <option class="form-control navy-text" value="{{@$value->id}}">{{ getLocationAddress( $value->address ) }}</option>
                                    @endforeach
                                 </select>
                              </div>
                           </div>

                           <div class="modal-footer mb-0">
                              <button type="submit" class="yellow-btn mt-3 save-btn save-btn-bg w-100 font-15">Apply</button>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
<!-- Date Service Modal E -->

<!-- No selection made Modal S -->
   <div class="client-follow-popup customscroll waitlist-modal showpop dateserviceModal">
      <div class="modal fade" id="no-invoice-selected-modal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 380px;">
            <div class="modal-content mdashboard-client-followuparea">
               <div class="modal-header border-0">
                  <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt="" class="img-fluid"></span>
                  </button>
               </div>
               <div class="modal-body text-center pb-4">
                  <h3 class="font-bold  font-18 ">No selection made</h3>
                  <p class="font-14 mt-3 mb-4">Please select atleast one record to proceed</p>
                  <a href="javascript:void(0)" class="btn-fill reSendInvite mb-4" data-dismiss="modal">Ok</a>
               </div>
            </div>
         </div>
      </div>
   </div>
<!-- No selection made Modal E -->

@endsection

@section('modals')
@endsection

@section('css')
<style>
#main-section{display: none;}
.navbar{padding: 0rem 1rem;}
.brdr-bttm{margin-bottom:10px;}
.page-content {padding: 0;transition: .4s ease all;}
.welcome-page-menu a.navbar-brand img{max-width:49px;margin: 8px 20px;}
.welcome-page-menu a.btn{color:#457379;font-size: 16px;letter-spacing: 1px;margin:0px 20px 0px;}
.dashspace-area .page-content{padding: 0;}
.welcome-page-menu button{color:#457379;font-size:16px;background-color:transparent;}
.text-14{
   font-size: 14px !important;
}
.sortdropdown-area .input-group .form-control{
   border:1px solid #cccccc !important;
   background-color: transparent;
}
/* checkbox border issue for unpaid invoice start */
.communication-table .waitlist-modal .rdio-primary input[type="checkbox"]:checked+label::after {border:none;}
/* checkbox border issue for unpaid invoice end */
</style>
@endsection

@section('jss')
<script type="text/javascript">

   var searchData = '';
   getUnpaidInvoiceList(searchData, '');

   var paidinvoice = "{{route('practitioner.appointment.paid.invoice')}}";

   function getUnpaidInvoiceList( searchData, sorting ) {
      $.ajax({
         url: "{{ route('practitioner.unpaid.invoice.get') }}",
         method: 'POST',
         data: {
            searchData: searchData,
            sorting: sorting
         },
         success: function(data) {
            communicationList(data);
         }
      });
   }

   function communicationList(data) {
      console.log( data );
      if( data.data.length != 0 ) {
         var html = '';
         $.each( data.data, 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( value )
   {
      // console.log( value );
      var uniqueId = Math.random();    
      var html = '';
      html += '<tr class="count_tr">';

      html += '<td class="position-relative">';
      html += '<div class="waitlist-modal client-area-bullet-first">';
      html += '<div class="delete-check-icon checkedbox">';
      html += '<ul class="mb-0">';
      html += '<li><div class="rdio rdio-primary radio-inline"><input name="id[]" value="'+ value.invoice_id +'" data-flag="" id="radio-'+ uniqueId +'" type="checkbox" class="communication_id"><label for="radio-'+ uniqueId +'"></label></div></li>';
      html += '</ul>';
      html += '</div>';
      html += '</div>';
      html += '</td>';

      html += '<td class="white-space-nowrap">'+ value.inv_date +'</td>';

      html += '<td><a style="color:#24303f;" href="'+ value.add_payment_link +'">'+ value.invoice_number +'</a></td>';

      var cardUrl = "{{ url('/practitioner/clientcard') }}?client_id="+btoa(value.client_id);
      
      html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ cardUrl +'">'+ value.clientname +'</td>';

      html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ value.add_payment_link +'">'+ value.inv_desc +'</td>';

      html += '<td>'+ value.providerName +'</td>';

      html += '<td>'+ value.inv_location +'</td>';

      html += '<td>'+ value.inv_total +'</td>';

      html += '<td>'+ value.inv_account_balance +'</td>';
      html += '<td>'+ value.inv_date_inv_sent +'</td>';

      html += '<td><a href="'+ value.add_payment_link +'" class="btn btn-unfill ">Add payment</a></td>'

      html += '</tr>';

      return html;
   }

   function getMoreUnpaidInvoices(searchData, sorting) {
      $.ajax({
         url: "{{ route('practitioner.unpaid.invoice.get')}}",
         method: 'POST',
         data: {
            searchData: searchData,
            sorting: sorting,
            skip: $('.count_tr').length
         },
         success: function(data) {
            console.log( data );
            if( data.data.length != 0 ) {
               var html = '';
               $.each( data.data, function( key, value ) {
                  html += dynamicContent( value );
               });

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

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

   $(document).ready( function() {

      $(document).on('click', '#allID', function (e) {
         $('[name="id[]"]').prop('checked', this.checked);
      });

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

      $('#date').datepicker({
         format: "dd-mm-yyyy",
         weekStart: 1,
         todayHighlight: true,
         autoclose: true,
         clearBtn: false,
         saveBtn: true,
      });

      $('#end_date').datepicker({
         format: "dd-mm-yyyy",
         weekStart: 1,
         todayHighlight: true,
         autoclose: true,
         clearBtn: false,
         startDate: '-',
      });

      var startDate = new Date('01/01/2012');
      var FromEndDate = new Date();
      var ToEndDate = new Date();
      ToEndDate.setDate(ToEndDate.getDate() + 365);

      $('#date').datepicker({
         weekStart: 1,
         startDate: '01/01/2012',
         endDate: FromEndDate,
         autoclose: true
      })
      .on('changeDate', function(selected) {
         var to_calendar = $(this).parent().parent().next().next().find('input');
         startDate = new Date(selected.date.valueOf());
         startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
         to_calendar.datepicker('setStartDate', startDate);
         to_calendar.datepicker().datepicker("setDate", startDate);
      });

      // Filter invoices
      $(document).on( 'submit', '#frm_filter_unpaid_invoices', function(e) {
         e.preventDefault();

         $.ajax({
            type: "POST",
            url: $(this).data('action'),
            data: new FormData(this),
            dataType: "JSON",
            cache: false,
            contentType: false,
            processData: false,
            success: function( data )
            {
               if( data.data.length != 0 ) {
                  var html = '';
                  $.each( data.data, function( key, value ) { 
                     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");
               $("#dateserviceModal").modal("hide");
            }
         });
      });

      // Search invoices      
      $(document).on( 'keyup', '#search_unpaid_invoices', function(e) {
         var keyword = $(this).val();
         console.log( keyword );

         $.ajax({
            type: "POST",
            url: $(this).data('action'),
            data: { keyword: keyword },
            dataType: "JSON",
            beforeSend: function(msg) {
               // $(".loading").css("display", 'block');
            },
            success: function( data )
            {
               // $(".loading").css("display", 'none');
               if( data.data.length != 0 ) {
                  var html = '';
                  $.each( data.data, function( key, value ) { 
                     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");
               $("#dateserviceModal").modal("hide");
            }
         });
      });

      $(document).on( 'click', '.sendInvoiceToClient', function() {
         var ids = [];
         $('.communication_id:checked').each(function (i) {
            ids[i] = { 'id': $(this).val() };
         });

         if( ids.length === 0 ) {
            $("#no-invoice-selected-modal").modal("show");
            return false;
         } else {
            var type = $(this).data('type');
            var baseUrl = "{{route('home')}}";

            if( type == 'sms' ) {
               $.redirect(baseUrl + '/practitioner/unpaid-invoices/send-via-sms-page', {
                  ids: ids,
                  type:type
               },"GET", "");
            }

            if( type == 'email' ) {
               $.redirect(baseUrl + '/practitioner/unpaid-invoices/send-via-email-page', {
                  ids: ids,
                  type:type
               },"GET", "");
            }
            
         }
      });

   });
</script>
@endsection