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

@section('content')

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper">
   <!-- my plan page design start-->
   <div class="client-header">
		<div class="row align-items-center justify-content-between">
		  {{-- <div class="col-lg-3 col-xl-2 col-md-2 col-sm-12"> --}}
		  <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> invoices</h1>
		  </div>
		  @include('front.inner-layout.header')
	   </div>
	</div>
   <div class="brdr-bttm"></div>

   <div class="container-fluid">
      <div class="row">
         <nav class="navbar navbar-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>Invoices</h1> --}}
            <ul class="hm-banner-text textbox-dropdown-area">
               <div class="sortdropdown-area search-b">
                     <div class="input-group " id="unpaid-invoice-search-box">
                        <input data-action="{{ route('practitioner.invoice.searchInvoice') }}" type="text" name="search_invoices" id="search_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.invoice.index') }}"  class="greentext cursor-pointer btn-unfill ">Clear Filter</a>
               </li>
            </ul>
            
            <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="#" data-toggle="modal" data-target="#create-new-invoice-client-select" class="btn-fill text-white float-right text-center">+ Add invoice</a>
            </div>

         </nav>
      </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>
                                    @if(count($serviceProviders) > 1)
                                       <th>Provider</th>
                                    @endif
                                    @if(count($locations) > 1)
                                       <th>Location</th>
                                    @endif
                                    <th>Amount</th>
                                    <th>Balance</th>
                                    <th></th>
                                    <th></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_invoices" id="frm_filter_invoices" data-action="{{route('practitioner.invoice.filterInvoice')}}" 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>

                           @if(count($serviceProviders) > 1)
                           <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>
                           @endif

                           @if(count($locations) > 1)
                           <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>
                           @endif

                           <div class="">
                              <label class="ml-0 text-navy">Payment status</label>
                              <select class="form-control" name="payment_status">
                                 <option value="">Select</option>
                                 <option value="paid">Paid</option>
                                 <option value="unpaid">Unpaid</option>
                                 <option value="owing">Owing</option>
                                 <option value="all">All</option>
                              </select>
         
                           </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 -->

<!-- invoice paid email modal start -->
<div class="todo-list-modal clientabpopup sentmodal openModelPopup cfm-modal">
   <div class="modal fade" id="send-invoice-paid-email-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" wfd-invisible="true">
       <div class="modal-dialog modal-dialog-centered" role="document">
           <div class="modal-content mdashboard-client-followuparea">
               <div class="modal-header">
                   <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 p-3"> 
                   <img src="{{asset('assets/images/send-icon-green.svg')}}" alt="" class="img-flude mail-img" />
                   <h3 class="text-center mb-3">Email invoice?</h3>

                   <p class="mb-3 font-16 text-navy" id="paid-email-invoice-modal-body">Your invoice will be emailed to your client.</p>
                   <div class="text-center mt-3 invoice-modal-footer">
                       <a data-url="" data-userType='' href="javascript:void(0)" data-email='' data-flag='' data-gift_voucher_id='' class="sendPaidEmailPractToClient cursor-pointer btn-fill save-btn save-btn-bg confirm-bttn mt-0">Ok</a>
                       <a href="javascript:void(0)" data-dismiss="modal" class="cursor-pointer save-btn save-btn-bg btn-link confirm-bttn mt-0">Cancel</a>
                       {{-- <br>
                       @if(isset($invoice) && $invoice->bill_to =='company')
                       <a data-url="" data-userType='' data-email="@if(isset($claim_details)){{$claim_details->owner_email}}@endif" data-phone="@if(isset($claim_details)){{$claim_details->owner_phone_number}}@endif" data-status="sendCopyToClient" style="font-weight: normal;display: inline-block;margin: 15px 0;font-size: 18px;color:#45747a !important" class="sendPaidEmailPractToClient cursor-pointer green-text txet-center">Send to third party</a>
                       @endif --}}
                   </div>
               </div>
           </div>
       </div>
   </div>
</div>
<!-- invoice paid email modal end -->  


<!-- unpaid invoice via sms modal start -->
<div class="todo-list-modal clientabpopup sentmodal openModelPopup cfm-modal">
	<div class="modal fade" id="send-unpaid-via-sms-invoice-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" wfd-invisible="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content mdashboard-client-followuparea">
				<div class="modal-header">
					<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 p-3"> 
					<img src="{{asset('assets/images/send-icon-green.svg')}}" alt="" class="img-flude mail-img" />
					<h3 class="text-center mb-3">SMS invoice?</h3>
 
					<p class="mb-3 font-16 text-navy" id="unpaid-sms-invoice-modal-body">Your invoice will be messaged to your client.</p>
					<div class="text-center mt-3 invoice-modal-footer">
						<a data-url="" data-userType='' href="javascript:void(0)" class="sendInvoiceToClient cursor-pointer btn-fill save-btn save-btn-bg confirm-bttn mt-0">Ok</a>
						<a href="javascript:void(0)" data-dismiss="modal" class="cursor-pointer save-btn save-btn-bg btn-link confirm-bttn mt-0">Cancel</a>
						{{-- <br>
						@if(isset($invoice) && $invoice->bill_to =='company')
						<a data-url="" data-userType='' data-email="@if(isset($claim_details)){{$claim_details->owner_email}}@endif" data-phone="@if(isset($claim_details)){{$claim_details->owner_phone_number}}@endif" data-status="sendCopyToClient" style="font-weight: normal;display: inline-block;margin: 15px 0;font-size: 18px;color:#45747a !important" class="sendPaidEmailPractToClient cursor-pointer green-text txet-center">Send to third party</a>
						@endif --}}
					</div>
				</div>
			</div>
		</div>
	</div>
 </div>
 <!-- unpaid invoice via sms modal end -->  

 <!-- unpaid invoice via email modal start -->
<div class="todo-list-modal clientabpopup sentmodal openModelPopup cfm-modal">
	<div class="modal fade" id="send-unpaid-via-email-invoice-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" wfd-invisible="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content mdashboard-client-followuparea">
				<div class="modal-header">
					<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 p-3"> 
					<img src="{{asset('assets/images/send-icon-green.svg')}}" alt="" class="img-flude mail-img" />
					<h3 class="text-center mb-3">Email invoice?</h3>
 
					<p class="mb-3 font-16 text-navy" id="unpaid-email-invoice-modal-body">Your invoice will be emailed to your client.</p>
					<div class="text-center mt-3 invoice-modal-footer">
						<a data-url="" data-userType='' href="javascript:void(0)" class="sendInvoiceToClient cursor-pointer btn-fill save-btn save-btn-bg confirm-bttn mt-0">Ok</a>
						<a href="javascript:void(0)" data-dismiss="modal" class="cursor-pointer save-btn save-btn-bg btn-link confirm-bttn mt-0">Cancel</a>
						{{-- <br>
						@if(isset($invoice) && $invoice->bill_to =='company')
						<a data-url="" data-userType='' data-email="@if(isset($claim_details)){{$claim_details->owner_email}}@endif" data-phone="@if(isset($claim_details)){{$claim_details->owner_phone_number}}@endif" data-status="sendCopyToClient" style="font-weight: normal;display: inline-block;margin: 15px 0;font-size: 18px;color:#45747a !important" class="sendPaidEmailPractToClient cursor-pointer green-text txet-center">Send to third party</a>
						@endif --}}
					</div>
				</div>
			</div>
		</div>
	</div>
 </div>
 <!-- unpaid invoice via email modal end -->  

 <!-- Create new invoice Modal start -->
<div class="client-follow-popup login-modal settingwaitlist customscroll calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
   <div class="modal fade " id="create-new-invoice-client-select" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13" >
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <form id="select_client_from_my_invoice" name="select_client_from_my_invoice">
               @csrf
               <div class="popup-marg">
                  <div class="modal-header">
                     <h5 class="modal-title text-center eagle-font" id="exampleModalLabel13">Select client</h5>
                     <button type="button" class="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">
                     <div class="mt-30 customformcontrol-form mb-0">
                        <div class="form-group typehead-select">
                           <input name="search_client_by_name_my_invoice" id="search_client_by_name_my_invoice" type="text" class="form-control h40" placeholder="Enter client name">
                           <input type="hidden" name="my_invoice_client_id" id="my_invoice_client_id" value="">
                           <span class="div-search_client_by_name_my_invoice text-danger invalid-feedback d-block"></span>
                        </div>
                        {{-- <div class="dummy-spacer" style="height: 50px;"></div> --}}
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
                  <div class="text-center">
                     <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Create invoice</button>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<!-- Create new invoice Modal end -->

@endsection

@section('modals')
@endsection

@section('css')
<style>
/* #main-section{display: none;} */
/* .navbar{padding: 0rem 1rem;} */
.brdr-bttm{margin-bottom:20px;}
.page-content {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;
}
.hm-banner-text {
    margin: 0;
}

.dateserviceModal button.yellow-btn.mt-3 {
    margin-top: 30px !important;
}
.unpaid-invoice-page {
   margin-top: 10px;
}
.unpaid-invoices-nav {
   padding: 0;
}

.paid-btn {
    background: transparent;
    color: #fff;
    padding: 6px 20px;
    letter-spacing: 0.5px;
    position: unset;
    right: auto;
    border: 1px solid #68afb5;
    float: none !important;
    color: #68afb5;
    border-radius: 20px;
    display: inline-block;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1;
    height: 25px;
    width: 70px;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
   }
   .communication-table .btn-fill {
   border-radius: 20px;
   display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 70px;
    padding: 0;
    min-width: auto;
}

.confirm-bttn:hover {
   border-color: #4F7379;
}
.communication-table .send-btn {
  
   }
   .communication-table .send-btn img {
   width: 25px;
}

.unpaid-invoices-table table tr td:first-of-type {
    padding-left: 25px;
}
.myplans-table tr td:first-child, .dr-table.communication-table.unpaid-invoices-table tr th:first-child {
    padding-left: 25px !important;
}

.head-right .dashboard-top-area {
   justify-content: flex-end;
}
.unpaid-invoice-page {
   max-width: 100%;
}
.sortdropdown-area .input-group .form-control{
   border:1px solid #cccccc !important;
   background-color: transparent;
}
.unpaid-invoices-table table tr td {
   vertical-align:middle;
}

.clientd-wrapper  .client-top-area .unpaid-invoices-table table tr td .checkedbox {
    top: 18px !important;
}
/* 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 = '';
   getInvoiceList(searchData, '');

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

   function getInvoiceList( searchData, sorting ) {
      $.ajax({
         url: "{{ route('practitioner.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 location_count = {{ count($locations) }};
      var service_provider_count = {{ count($serviceProviders) }};
      var clientemail = value.clientemail ?? '';
      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>';

      if(value.gift_voucher_id)
      {
         var Url = "{{url('/')}}";
         var downloadUrl = Url + "/my/voucher/download/invoice/" + btoa(value.gift_voucher_id);
      }else{
      var downloadUrl = value.invoice_details;
      }

      html += '<td><a href="'+ downloadUrl +'" class="hover-client-name" style="color:#24303f;">'+ value.invoice_number +'</a></td>';
      if(value.client_id != 1)
      {
         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>';
      }else{
         html += '<td><a style="color:#24303f;" class="hover-client-name">'+ value.clientname +'</td>';
      }      

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

      if(service_provider_count > 1){
         html += '<td>'+ value.providerName +'</td>';
      }

      if(location_count > 1){
         html += '<td>'+ value.inv_location +'</td>';
      }

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

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

	  if(value.invoice_pay_status == 'pending'){
         html += '<td><a href="'+ value.add_payment_link +'" class="btn-fill ">Pay now</a></td>'
      }else if(value.invoice_pay_status == 'owing'){
         html += '<td><a href="'+ value.add_payment_link +'" class="btn-fill ">Owing</a></td>'
      }else{
		 html += '<td class=""><a href="javascript:void(0)" class="confirm-bttn paid-btn">' + value.invoice_pay_status +'</a></td>';
	  }
	  
      var imageUrl = "{{ asset('assets/images/send-icon.svg') }}";

      if(value.invoice_pay_status != 'paid' && value.invoice_pay_status != 'credit'){

		 html += '<td>';
         html += '<div class="dropdown invoice-paid-dropdown">';
         html += '<a href="#" class="send-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
         html += '<img src="' + imageUrl + '" alt="" class="img-fluid dropdown-toggle" />';
         html += '</a>';
         html += '<div class="dropdown-menu">';
         html += '<a href="javascript:void(0)" data-invoiceid="' + value.invoice_id + '" id="sendUnpaidInvoiceViaSms" data-type="sms" class="dropdown-item cursor-pointer">Send via SMS</a>';
         html += '<a href="javascript:void(0)" data-invoiceid="' + value.invoice_id + '" id="sendUnpaidInvoiceViaEmail" data-type="email" class="dropdown-item cursor-pointer">Send via email</a>';
         html += '</div></div></td>';

         //  html += '<td><a data-userType="practitioner"  data-url="{{route('practitioner.clients.invoice.newdownload')}}" class="cursor-pointer" href="javascript:void(0)" id="mailclientinvoicenew"
         //        <img src="' + imageUrl + '" alt="" class="img-fluid"></a></td>';
        
      }else{
         // if(value.gift_voucher_id == 0)
         // {
            html += '<td><a data-invoiceid="' + value.invoice_id + '" data-userType="practitioner" href="javascript:void(0)" id="mailclientpaidinvoice" class="send-btn" data-url="{{route('practitioner.clients.invoice.newdownload')}}" data-email="' + clientemail + '" data-flag="'+value.gift_voucher_id+'"><img src="' + imageUrl + '" alt="" class="img-fluid"></a></td>';
        // }
         //html += '<td><a class="send-btn" data-id="' + value.invoice_id + '"><img src="' + imageUrl + '" alt="" class="img-fluid"></a></td>'; 
      }

      return html;
   }

   function getMoreInvoices(searchData, sorting) {
      $.ajax({
         url: "{{ route('practitioner.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() {

      $('#search_client_by_name_my_invoice').on('input', function() {
        var value = $(this).val().trim();

        if (value.length > 0) {
            $(this).addClass('type-selected');
        } else {
            $(this).removeClass('type-selected');
            $("#my_invoice_client_id").val('');
        }
      });

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

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

      $('#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_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('');
				  var html = '<tr><td  colspan="8" class="text-center text-danger">No Results Found</td></tr>';
                  $("#communicationAppend").html(html);
                  $('.load-more').addClass('hide');
               }

               $("#clear-filter").removeClass("hide");
               $("#dateserviceModal").modal("hide");
            }
         });
      });

      // Search invoices      
      $(document).on( 'keyup', '#search_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 {
				  var html = '<tr><td  colspan="8" class="text-center text-danger">No Results Found</td></tr>';
                  $("#communicationAppend").html(html);
                  $('.load-more').addClass('hide');
               }

               $("#clear-filter").removeClass("hide");
               $("#dateserviceModal").modal("hide");
            }
         });
      });

	  $(document).on( 'click', '#sendUnpaidInvoiceViaSms', function(e) {
			var invoiceid = $(this).data('invoiceid');
			$(".sendInvoiceToClient").attr("data-invoiceid", invoiceid);
			$(".sendInvoiceToClient").attr("data-type", 'sms');
			$("#send-unpaid-via-sms-invoice-modal").modal("show");
	  });

	  $(document).on( 'click', '#sendUnpaidInvoiceViaEmail', function(e) {
			var invoiceid = $(this).data('invoiceid');
			$(".sendInvoiceToClient").attr("data-invoiceid", invoiceid);
			$(".sendInvoiceToClient").attr("data-type", 'email');
			$("#send-unpaid-via-email-invoice-modal").modal("show");
	  });

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

		ids.push({ 'id': $(this).data('invoiceid') });
		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,
            flag:'my_invoice_page'
			},"GET", "");
		}

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

      $(document).on('click', '#mailclientpaidinvoice', function(e) {

         var url = $(this).data('url'); 
         var usertype = $(this).data('usertype');
         var email = $(this).data('email');
		   var invoiceid = $(this).data('invoiceid');
		   var flag = $(this).data('flag');
         var invoice_type = 'invoice';
         if(flag != 0)
         {
            invoice_type = 'voucher';
         }

         if (usertype == "practitioner") {

            if (email == "") {

               Swal.fire({
                     title: 'No email on file',
                     icon: 'warning',
                     text: 'Please add an email address to your clients file to proceed.',
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
               });
               return false;
            }
         }

         //if (usertype == "practitioner") {
            //$("#paid-email-invoice-modal-body").text("Your invoice will be emailed to your client.");
         //} else {
            //$("#paid-email-invoice-modal-body").text("You are about to email this invoice to your self. Would you like to proceed?");
         //}

         $(".sendPaidEmailPractToClient").attr("data-url", url);
		   $(".sendPaidEmailPractToClient").attr("data-invoiceid", invoiceid);
         $(".sendPaidEmailPractToClient").attr("data-userType", usertype);
         $(".sendPaidEmailPractToClient").attr("data-flag", invoice_type);
         $(".sendPaidEmailPractToClient").attr("data-gift_voucher_id", flag);
         $(".sendPaidEmailPractToClient").attr("data-email", email);
         $("#send-invoice-paid-email-modal").modal("show");
      });

      $(document).on('click', '.sendPaidEmailPractToClient', function(e) {

         // check third party email or phone exists or not  10-08-2022 added by bahadur
        //  if ($(this).data('email') == '' && $(this).data('phone') == '') {
        //     Swal.fire({
        //        icon: "warning",
        //        title: 'Invoice cannot be sent',
        //        text: 'Please add a third party email address in your clients card to send this invoice',
        //        showClass: {
        //              popup: 'animate__animated animate__fadeInDown'
        //        },
        //        hideClass: {
        //              popup: 'animate__animated animate__fadeOutUp'
        //        }
        //     });
        //     return false;
        //  }
         //end 

         var url = $(this).data('url');
         var usertype = $(this).data('usertype');
         //var status = $(this).data('status');
		   var invoiceid = $(this).data('invoiceid');
		   var flag = $(this).data('flag');
		   var gift_voucher_id = $(this).data('gift_voucher_id');
		   var email = $(this).data('email');

         if(flag == 'voucher' && gift_voucher_id != 0)
         {
            var selectedEmail = 'purchaser';
            var email_address = email;
            var id = gift_voucher_id;
            $.ajax({
            url: '{{ route("practitioner.voucher.send.email") }}', 
            data: {
                  email_type: selectedEmail,
				      email_address: email_address,
                  id : id,
                  _token: '{{ csrf_token() }}'  
            },
            type: 'POST',
            beforeSend: function (msg) {
               $(".loading").addClass("d-block");
            },
         }).done(function (response) {
            $(".loading").removeClass("d-block");
            if( response.status == "success" ) {
               $("#send-invoice-paid-email-modal").modal("hide");
               Swal.fire({
                  icon: 'success',
                  title: 'Invoice sent',
                  showCancelButton: false,
                  showConfirmButton: false,
                  timer: 2000,
                  showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                  }
               });                 
            }else{

                Swal.fire({
					icon: 'error',
					title: response.msg,
					showClass: {
						popup: 'animate__animated animate__fadeInDown'
					},
					hideClass: {
						popup: 'animate__animated animate__fadeOutUp'
					}
				});
            }
         });
         } else
         {
            $.ajax({
            url: url,
            data: {
               invoice_id: invoiceid,
               flag: 'mailInvoice',
               //send_copy_to_client: status,
            },
            type: 'GET',
            beforeSend: function(msg) {
               $(".loading").addClass("d-block");
            },
            }).done(function(response) {
               $(".loading").removeClass("d-block");
               $("#send-invoice-paid-email-modal").modal("hide");
               Swal.fire({
                  icon: 'success',
                  title: 'Invoice sent',
                  showCancelButton: false,
                  showConfirmButton: false,
                  timer: 2000,
                  showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            });
         }

        
      });

   });

    $(document).ready( function() {

		/* NEW CODE FOR TEAM MEMBER - START */
		var is_team_member = "{{$isMemberGlobal}}";

		if( is_team_member == 0 ) {
			var searchClientByNamePath = "{{ route('practitioner.search.client') }}";
		} else {
			var searchClientByNamePath = "{{ route('practitioner.search.clientteam') }}";
		}

		$( "input[name^='search_client_by_name_my_invoice']" ).typeahead({
		source:  function (query, process) {
			return $.get(searchClientByNamePath, { query: query }, function (data) {
				if( data.length > 0 ) {
					return process(data);
				} else {
					$(".div-search_client_by_name_my_invoice").text('No Results Found');
					$("#my_invoice_client_id").val('');
					setTimeout(function() {
					$('.div-search_client_by_name_my_invoice').text('');
					}, 5000);
				}
			});
		},
		updater: function(selection){
			$("#my_invoice_client_id").val(selection.id);
			return selection.name;
		}
		});

		$("input[name^='search_client_by_name_my_invoice']").on('keyup',function(e) {
		if( e.keyCode === 40 || e.keyCode === 38 ) {
			$(this).parent().find(".dropdown-menu").find('.dropdown-item').css({"backgroundColor":"#fff","color":"#24303f"});
			if( $(this).parent().find(".dropdown-menu") ) {
				$(this).parent().find(".dropdown-menu").find('.active .dropdown-item').css({"backgroundColor":"#68afb5","color":"white"});
			}
		}
		});

		$('#search_client_by_name_my_invoice').attr('autocomplete','off');
		

		// create a new invoice link
		$(document).on( "submit", "#select_client_from_my_invoice", function(e) {
			e.preventDefault();

			var my_invoice_client_id = $("#my_invoice_client_id").val();

			if( my_invoice_client_id == '' ) {
				Swal.fire({
					icon: 'error',
					title: 'Please select a client',
					showClass: {
						popup: 'animate__animated animate__fadeInDown'
					},
					hideClass: {
						popup: 'animate__animated animate__fadeOutUp'
					}
				});
				return false;

			}else{
				url = "{{route('practitioner.client.invoice.create', '')}}" + "/" + my_invoice_client_id +
					"?flag=" + 'my-invoice';
				window.location.href = url;

			}

		});

		$(document).find('.modal').on('hidden.bs.modal', function () {
			$("#my_invoice_client_id").val('');
			
		});
	});
</script>
@endsection