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

<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-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> Invoice</h1>
    </div>
    @include('front.inner-layout.header')
  </div>
  <div class="brdr-bttm"></div>

  <div class="invoice-new-page">

    <div class="col-12 back-contain"><a href="{{url()->previous()}}" class="backbtn d-block getprevurlforsubmit"><i class="fa fa-angle-left" aria-hidden="true"></i> Back </a></div>  
    <form id="createnewpageinvoice">
    <input type="hidden" name="appointment_id" value="{{$invoice->invoiceappt->id}}">
    <input type="hidden" name="client_id" value="{{$invoice->clientID ?? ''}}">
    <input type="hidden" name="status" id="apptStatus" value="">
    <input type="hidden" id="actionflag" value="">
    <input type="hidden" name="invoice_id" id="invoiceid" value="{{$invoice->id}}">
    <div class="invoice-new-box comm-form">
      <div class="row">
        <div class="col-lg-6">
          <div class="invoce-new-address">
            <p>
              <span>{{ ucwords( $invoice->clientD['name']. ' ' .$invoice->clientD['last_name'] ) }}</span>
              <span>{{ $invoice->clientD['address'] }}</span>                           
              <span>{{ $invoice->clientD['address2'] }}</span>                           
              <span>{{ $invoice->clientD['suburb_state_postcode'] }}</span>                           
              <span>{{ $invoice->clientD['country'] }}</span>                           
            </p>
            <p class="pb-0">{{ $invoice->clientD['phone'] }}</p>
            @if(isset($cc) && $cc->expiry_date)
              <p class="pb-0" style="color:red">Conssesion card holder expiry {{ \Carbon\Carbon::parse($cc->expiry_date)->format('d/m/y')}}</p>
            @endif
                        @if($display == 1 && isset($phf) && isset($chf))
              <p class="pb-0">{{$phf->healthcodes->name ?? ""}} : {{$phf->provider_number ?? ""}}</p>
            @endif

          
            @if(isset($claim_details) && $claim_details->bill_to == 1 && $claim_details->display_claim_details == 1)
            @if($claim_details->claim_number !='')
              <p class="green-text claim_number">
                <label>CLAIM NUMBER:</label> {{$claim_details->claim_number}}
              </p>
            @endif
            <div class="form-group bill-dd-box select2-search--none">
              <label class="invoice-no-label">Bill to:</label>
              <div class=" mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow--none " >
                <select id="claims_company_details" name="bill_to" class="form-control single-select2">                  
                  <option value="company" @if($invoice->bill_to =='company') selected @endif>{{$claim_details->company_name}}</option>
                  <!-- <option value="">{{$claim_details->owner_first_name}} {{$claim_details->owner_last_name}}</option> -->
                  <option value="client" @if($invoice->bill_to =='client') selected @endif>{{ ucwords( $invoice->clientD['name']. ' ' .$invoice->clientD['last_name'] ) }}</option>
                </select>                    
              </div>
            </div>    
            @endif
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row">
            <div class="col-sm-7 col-6 invoice-no-label">Invoice number</div>
            <div class="col-sm-5 col-6">
              <div class="form-group">
                <input type="text" name="invoice_number" id="invoice_number" class="form-control small-input numeric-only" placeholder="" value="{{ $invoice->invoice_number }}">
              </div>
            </div>
          </div>

        
          <div class="row">
            <div class="col-sm-7 col-6 invoice-no-label">Date</div>
            <div class="col-sm-5 col-6">                        
              <div class="form-group">
                <div class="input-group date filter-dropdown-three" data-date-format="mm-dd-yyyy">
                <!-- value="{{\Carbon\Carbon::now()->timezone(getAustraliaTimeZone())->format('d/m/y')}}" -->
                  <input class="form-control box-shadow-none day-datepicker" autocomplete="off" value="{{$invoice->date->timezone(getAustraliaTimeZone())->format('d/m/y')}}" id="appt_crt_inv_dp"
                  type="text" placeholder="" name="date"  style="background-color:TRANSPARENT;">
                  <span class="input-group-addon"><img src="{{asset('assets/images/calender-new-g.png')}}" alt="" class="img-fluid rightimg"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-7 col-6 invoice-no-label">Location</div>
            <div class="col-sm-5 col-6">
              <div class="form-group">
                <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none">
                  <select disabled name="location" id="loction123" class="form-control single-select2">
                      @foreach($Locations as $location)
                        <!-- @if(sizeof($Locations) == 1)
                        <option value="{{$location->id}}" selected>{{getLocationAddress($location->address) ?? '-'}}</option>
                        @else 
                        @endif-->
                        <option value="{{$location->id}}"  @if($invoice->location == $location->id) selected @endif>{{getLocationAddress($location->address) ?? '-'}}</option>                       
                      @endforeach
                  </select> 

                  @if(sizeof($Locations) == 1)
                    @foreach($Locations as $location)
                    <input type="hidden" name="location" id="loction123" value="{{$location->id}}">
                    @endforeach
                  @else
                  @foreach($Locations as $location)
                    @if($invoice->location == $location->id)
                      <input type="hidden" name="location" id="loction123" value="{{$location->id}}">
                    @endif
                  @endforeach
                  @endif                  
                </div>
              </div>
            </div>
          </div>

          @if(count($providerNumber) >=1)
            <div class="row">
              <div class="col-sm-7 col-6 invoice-no-label">Provider Number</div>
              <div class="col-sm-5 col-6">
                <div class="form-group">
                  <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none">
                    <select name="provider_number" id="provider_number" class="form-control single-select2 select-arr-none">
                        @foreach($providerNumber as $val)                        
                          <option value="{{$val->provider_number}}">{{$val->provider_number}}</option>
                        @endforeach
                    </select>                        
                  </div>
                </div>
              </div>
            </div>
          @endif
          
        </div>
      </div>

      <hr class="new-hr">
      
      <div class="service-new-table invoice-new-table ">
        <div class="table-responsive">
          <table class="table table-striped" id="appt_service_table">
            <thead>
              <tr>
                <th>Item</th>
                <th>Code</th>
                <th>Cost</th>
                <th>Qty</th>
                <th>Total</th>
                <!-- <th></th>        -->
              </tr>
            </thead>
            <tbody id="service_table_body">
            
                @if($item)
              @foreach($item as $tid)
               <tr>
               
                 <td class="service-product-select2">
                    <input type="hidden" name="item_id[]" value="{{$tid->id}}">
                  
                    <select class="form-control text-capitalize select-arr-none border-0 single-select2 service_add_list" name="states1[]">
                      @foreach($practitionerAppointmentTypes as $type)
                        <option @if( $type->id == $tid->item ) Selected @endif value="{{$type->id}}" data-code = "{{ $type->code }}" data-qty='{{$tid->item_qty}}' data-cost = "{{ $type->fee }}" @if($type->is_gst=='on') data-gst="{{$settings->gst}}" @endif>@if($type->is_gst=='on') * @endif{{$type->appointment_type}}</option>
                      @endforeach
                    </select>
                  </td>
                  <td class="service_code">{{ $tid->appointment_type->code }}</td>
                  <td class="service_sub_cost dollar"> {{ number_format($tid->app_cost ,2) }}</td>
                  <td class="service_qty">{{$tid->item_qty ?? '-'}}</td> <input type="hidden" class="form-control item small-input" placeholder="" name="item_qty[]"  value="{{$tid->item_qty}}">                        
                  <td  class="service_total_cost dollar" data-qty='1'> {{ number_format($tid->app_cost,2) }}
                  </td>
                  <input type="hidden" class="form-control item small-input numeric-dot-only cost_item1" placeholder="" name="cost_item[]"  value="{{ $tid->app_cost }}">
                  <td>
                    <div class="dropdown three-dot-dropdown">
                      <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
                      <div class="dropdown-menu">
                        <a class="dropdown-item editaddedservice" data-flag="dynamicservice">Edit</a>
                        <a class="dropdown-item remove_service" data-flag="service">Delete</a>
                      </div>
                    </div>
                  </td>
               
                
              </tr>
              @endforeach
              @endif
              @if($product)
              @foreach($product as $prod)
              <tr>
                
                    <td>
                      <div>
                        <input type="text" class="small-input graytxt w-100" name="product_name" value='{{$prod->product_iteams->product_name}}'><input type="hidden" name="product_id1[]" class="form-control list_of_products product_id1"  value='{{$prod->product_id}}'>
                        <input type="hidden" name="p_id[]" class="form-control p_id" value='{{$prod->id}}'>
                      </div>
                    </td>
        
                    <td class="product_code1">{{$prod->product_iteams->product_code}}</td><input type="hidden" name="product_code[]" class="form-control product_code"  value='{{$prod->product_iteams->product_code}}'>
        
                    <td class="product_cost1 dollar">{{number_format($prod->product_cost,2)}} </td><input type="hidden" name="product_cost[]" class="form-control product_cost"  value='{{$prod->product_cost}}'>
        
                    <td class="product_qty1" class="service_qty">{{$prod->deduct_quantity}}</td><input type="hidden" name="product_qty[]" class="form-control product_qty"  value='{{$prod->deduct_quantity}}'>
        
                    <td class="product_total_cost service_total_cost dollar" data-qty='{{$prod->product_qty}}'>{{number_format(($prod->deduct_quantity * $prod->product_cost) , 2)}}</td><input type="hidden" class="form-control item small-input" name="product_total_cost" value="{{number_format(($prod->deduct_quantity * $prod->product_cost) , 2)}}">
        
                    <td>
                      <div class="dropdown three-dot-dropdown">
                        <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
                        <div class="dropdown-menu">
                          <a class="dropdown-item editaddedservice" data-flag="product">Edit</a>
                          <a class="dropdown-item remove_service" data-flag="product">Delete</a>
                        </div>
                      </div>
                    </td>
                        
                 
                
              </tr>
              @endforeach
              @endif
            </tbody>
          </table>
        </div>
      </div>
      
      <a href="#InvoiceAddServiceModal" class="btn btn-unfill btn-border-custom d-table mt-4" data-toggle="modal">Add a Service</a>
      <a href="#InvoiceAddProductModal" class="btn btn-unfill btn-border-custom d-table mt-4" data-toggle="modal">Add a Product</a>
      
      <hr class="new-hr">

      <div class="invoice-new-payment-area">
        <div class="row justify-content-end">
          <div class="col-lg-7">
            
            <!-- <div class="row mb-4">
              <div class="col-7">
                <p class="mb-0">This invoice</p>
              </div>
              <div class="col-5">
                <p class="mb-0 pl-4 dollar" id="this_invoice_label"></p> -->
                <input type="hidden" class="form-control small-input numeric-dot-only" placeholder="" name="this_invoice1" id="this_invoice1" value="">
              <!-- </div>
            </div> -->
            
            <!-- <div class="row" id="outstanding_balance_area">
              <div class="col-7">
              
                <p class="mb-0">Outstanding balance</p>
              </div>
              <div class="col-5">
                <p class="mb-0 pl-4 dollar" id="clientOutstanding">{{$clientpendingbalance->client_pending_balance ?? "0.00"}}</p>
              </div>
            </div> -->
            
            <!-- <div class="row d-none" id="opening_balance_area">
              <div class="col-7">
                <p class="mb-0">Opening balance</p>
              </div>
              <div class="col-5">
                <p class="mb-0 pl-4 dollar" id="clientOpening">0.00</p>
              </div>
            </div>

            <hr class="new-hr"> -->

            <div class="row total-payment-col mb-4">
              <div class="col-7">
                <p class="mb-0">Total</p>
              </div>
              <div class="col-5">
                <input type="hidden" id="finalprice" name="totalInvoice" value="">
                <p class="mb-0 pl-4 dollar" id="totalInvoice"></p>
              </div>
            </div>

             <div class="row d-none" id="credit_applied_section">
              <div class="col-7">
                <p class="mb-0">Credit applied</p>
              </div>
              <div class="col-5">
                <p class="mb-0 pl-4 dollar" id="clientCreditVal"></p>
                <input type="hidden" name="client_credit_balance" id="client_credit_balance" value="">
              </div>
            </div>

            <p class="mb-0 pl-4 dollar d-none" id="clientOnlinePaid"></p>
            <div class="row d-none" id="online_payment_section">
              <div class="col-7">
                <p class="mb-0 pay_type_name">Online payment</p>
              </div>
              <div class="col-5">
                <!-- <p class="mb-0 pl-4 dollar" id="clientOnlinePaid"></p> -->
                <input type="hidden" name="amount_paid1" id="amount_paid1" value="">
              </div>
            </div>
           
            <hr class="new-hr">

            <div class="row mb-4 d-none" id="current_balance_section">
              <div class="col-7">
                <p class="mb-0">Current balance</p>
              </div>
              <div class="col-5">
                <p class="mb-0 pl-4 dollar" id="clientCurrentToPay"></p>
                <input type="hidden" name="amount_to_paid" id="amount_to_paid" value="">
              </div>
            </div>
            

             <!-- /// medipass - 14-02-2022 -->
              <!-- @if($practitioner->medipass_provider_number != null && 
                  $practitioner->medipass_api_key != null)  
              @endif   -->
              <div class="row mb-4 hicaps_btn_div_parent">
                <div class="col-sm-7 col-6">
                  <img src='{{asset("assets/images/medipass-img.png")}}' class="img-fluid madipass-icon" alt="">
                </div>
                <div class="col-sm-5 col-6  hicaps_btn_div">                  
                      <a href="#" class="btn btn-unfill myDiractHicapButton"  style="" >Health Fund Rebate</a>
                      <!-- <div class="btn btn-unfill btn-not-conn" >Not connected
                        <div class="Not-connect">
                          <span>Sign up your free Medipass account to begin processing HICAPS online. no terminal required.</span>
                          <button class="btn btn-unfill call-modal cursor-pointer" data-toggle="modal" data-target-modal="#integrationMedipassModel" data-url="{{route('get.integrationmedipass.model')}}">Apply now</button>
                        </div>
                      </div> -->                             
                </div>
              </div>
           

            <div class="row">
              <div class="col-sm-7 col-6">
                <p class="mb-0 font-weight-bold">Process Payment</p>
              </div>
              <div class="col-sm-5 col-6">
                <a  class="btn btn-unfill addPaymentinvoice" data-client_id="{{$invoice->clientID ?? ''}}" style="color:#45747a">Add payment</a>
                <!-- <a href="javascript:void(0)" class="paynow-btn openLatpay" data-appointment_id="" data-payment_type="" data-first_name="{{$practitioner->first_name}}" data-invoice_number="" data-last_name="{{$practitioner->last_name}}" data-notes="" data-email="mk@yopmail.com" data-merchant_id="{{$practitioner->merchant_id}}" data-merchant_password="{{$practitioner->merchant_password}}" data-merchant-public-key="{{$practitioner->merchant_public_key}}" data-amount="" data-flag="AppointmentPay" data-payment_due_date="">Pay Now</a> -->
              </div>
            </div>

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

      <hr class="new-hr">

      <div class="form-group brdrfull">
        <!-- <input type="text" name="note" class="form-control" placeholder="Add note to client" value="{{$invoiceSettings->invoice_notes_text ?? ''}}"> -->
          <textarea  name="note" class="append-text autosizetextaria" placeholder="Add note to client" >{{$invoice->notes ?? ''}}</textarea>

      </div>
     

      <!-- <button type="submit">save</button> -->
      <a onclick="submitInvoice();"  class="btn btn-fill invoice-save d-block mt-4 text-white">Save</a>
    </div>
    </form>
  </div>

  <!-- InvoiceAddServiceModal Modal Start --->
  <div class="client-follow-popup login-modal videoconsultationmodal customscroll remindersModal calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
    <div class="modal fade new-service-product-invoice-modal" id="InvoiceAddServiceModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="popup-marg">
            <div class="modal-header">
              <h5 class="modal-title text-center eagle-font">Add Service</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 p-0">
                <div class="mCustomScrollbar">
                  <div class="boxwhite mt-30">
                    <div class="test-results-area labeltop mt-3">
                      
                      <div class="label-input">
                        <div class="row">
                          <div class="col-lg-5 col-md-6">
                            <label>Appointment type</label>
                          </div>
                          <div class="col-lg-7 col-md-6">
                            <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop text-left text-navy">
                              <input type="hidden" id="add_item_id" value="">
                              <select class="form-control text-capitalize single-select2" id="add_service_invoice" name="appt_types" required data-placeholder="Select Service">
                                
                                <option></option>
                                @foreach( $practitionerAppointmentTypes as $key => $value )
                                
                                  <option value="{{ $value->id }}" data-sr-code = "{{ $value->code }}"
                                    data-sr-id = "{{ $value->id }}"  data-sr-cost = "{{ $value->fee }}" @if($value->is_gst=='on') data-sr-gst="{{ $settings->gst }}" @endif>@if($value->is_gst=='on') * @endif{{ $value->appointment_type }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                        </div>
                      </div>
                      <input type="hidden" name="add_service_id" id="add_service_id">
                      <div class="label-input">
                        <div class="row">
                          <div class="col-lg-5 col-md-6">
                            <label>Code</label>                                        
                          </div>
                          <div class="col-lg-7 col-md-6">
                            <div class="form-group brdrfull">                                                      
                              <input required type="text" class="form-control disabled"  name="add_service_code"  id="add_service_code" placeholder="Enter code" disabled />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="label-input">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-lg-5 col-md-6 col-sm-6">
                            <label>Cost</label>
                          </div>
                          <div class="col-lg-7 col-md-6 col-sm-6">
                            <div class="form-group brdrfull">
                              <span class="dollar-icon">$</span>
                              <input required  type="text" name="add_service_cost" id="add_service_cost" class="form-control select-80 numeric-dot-only text-navy" placeholder="00.00">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="label-input">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-lg-5 col-md-6 col-sm-6">
                            <label>Qty</label>
                          </div>
                          <div class="col-lg-7 col-md-6 col-sm-6">
                            <div class="form-group brdrfull selectdrop-textbox">
                              <select required class="form-control select-80 select-text-center text-navy" name="change_service_qty" id="change_service_qty">
                                <option value="1" selected> 1</option>
                                <option value="2"> 2</option>
                                <option value="3"> 3</option>
                                <option value="4"> 4</option>
                                <option value="5"> 5</option>
                                <option value="6"> 6</option>
                                <option value="7"> 7</option>
                                <option value="8"> 8</option>
                                <option value="9"> 9</option>
                                <option value="10"> 10</option>
                              </select>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="label-input">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-lg-5 col-md-6 col-sm-6">
                            <label>Total Cost</label>
                          </div>
                          <div class="col-lg-7 col-md-6 col-sm-6">
                            <div class="form-group brdrfull">
                              <span class="dollar-icon">$</span>
                              <input required type="text" name="add_service_total_cost" id="add_service_total_cost" class="form-control select-80 text-navy" placeholder="00.00">
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <div class="text-center">
                  <button type="button" id="btn_add_service" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and Save</button>
                </div>
              </div>
           
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- InvoiceAddServiceModal Modal End -->

  <!-- InvoiceAddProductModal Modal Start --->
  <div class="client-follow-popup login-modal videoconsultationmodal customscroll remindersModal calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
    <div class="modal fade new-service-product-invoice-modal" id="InvoiceAddProductModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="popup-marg">
            <div class="modal-header">
              <h5 class="modal-title text-center eagle-font">Add Product</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 p-0">
                <div class="mCustomScrollbar">
                  <div class="boxwhite mt-30">
                    <div class="test-results-area labeltop mt-3">
                      <div class="label-input">
                        <div class="row">
                          <div class="col-lg-5 col-md-6">
                            <label>Product</label>
                          </div>
                          <div class="col-lg-7 col-md-6">
                            <div class="form-group brdrfull ">
                              <input type="text" class="typeahead typeahead-text form-control left small-input product___id text-navy" placeholder="Enter product name" autocomplete="off" name="product___id" data-price1="">
                              <input type="hidden" name="product_id1[]" class="form-control product_id1" id="product_id1" value="">
                              {{--<input type="hidden" name="p_id[]" id="p_id" class="form-control p_id" value='{{$prod->id}}'>--}}
                              <input type="hidden" name="product_name1[]" class="form-control product_name1" id="product_name1" value="">
                               <input type="hidden" class="form-control productQTY" id="productQTY" value="">
                              <input type="hidden" class="form-control productnotifyQTY" id="productnotifyQTY" value="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="label-input">
                        <div class="row">
                          <div class="col-lg-5 col-md-6">
                            <label>Code</label>                                        
                          </div>
                          <div class="col-lg-7 col-md-6">
                            <div class="form-group brdrfull">                                                        
                              <input required type="text"  class="form-control disabled" id="product_code" placeholder="Enter code" disabled />
                              
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="label-input">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-lg-5 col-md-6 col-sm-6">
                            <label>Cost</label>
                          </div>
                          <div class="col-lg-7 col-md-6 col-sm-6">
                            <div class="form-group brdrfull">
                              <span class="dollar-icon">$</span>
                              <input type="text" class="form-control select-80 numeric-dot-only text-navy" id="product_cost" name="product_cost" placeholder="00.00">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="label-input">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-lg-5 col-md-6 col-sm-6">
                            <label>Qty</label>
                          </div>
                          <div class="col-lg-7 col-md-6 col-sm-6">
                            <div class="form-group brdrfull">
                             
                              <input required type="text" name="product_qty" id="product_qty" class="form-control select-80 numeric-only text-navy" placeholder="0">

                            </div>
                          </div>
                        </div>
                      </div>
                       <div class="label-input">
                        <div class="row align-items-center justify-content-center">
                          <div class="col-lg-5 col-md-6 col-sm-6">
                            <label>Total Cost</label>
                          </div>
                          <div class="col-lg-7 col-md-6 col-sm-6">
                            <div class="form-group brdrfull">
                              <span class="dollar-icon">$</span>
                              <input required type="text" name="add_product_total_cost" id="add_product_total_cost" class="form-control select-80 text-navy" placeholder="00.00">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <div class="text-center">
                  <button type="button" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100" id="AddProduct">Update and Save</button>
                </div>
              </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- InvoiceAddProductModal Modal End -->
</div>
@endsection

@section('css')
<style>
  .select2-selection__arrow::after {right: 7px !important;}
  .select2-container--default .select2-selection--single {border: 1px solid #c7c7c7 !important;height: 33px !important;}
  #InvoiceAddServiceModal  .form-control.disabled,#myclienthide .form-control.disabled{
    background-color:#e9ecef !important;
  }

</style>
@endsection

@section('js')
<script>
  $(document).on("click", ".editaddedservice", function () { 
    if($(this).data('flag') == 'service'){
      $("#InvoiceAddServiceModal").find("#add_service_code").val($(this).closest("tr").find(".service_code").text());
      $("#InvoiceAddServiceModal").find("#add_service_cost").val($(this).closest("tr").find(".service_sub_cost").text());
      $("#InvoiceAddServiceModal").find("#change_service_qty").val($(this).closest("tr").find(".service_qty").text());
      $("#InvoiceAddServiceModal").find("#add_service_total_cost").val($(this).closest("tr").find(".service_total_cost").text());
      $("#InvoiceAddServiceModal").find('#add_service_invoice').val($(this).closest("tr").find("#invoice-table-service").val()).select2();
      $("#InvoiceAddServiceModal").find('#add_service_id').val($(this).closest("tr").find("#invoice-table-service").val());
      $(this).closest("tr").addClass('removetrforedit');
      $("#InvoiceAddServiceModal").find('#btn_add_service').attr('data-removetag','removethistr');
      $("#InvoiceAddServiceModal").modal('show');
    }else if($(this).data('flag') == 'dynamicservice'){
      
       $("#InvoiceAddServiceModal").find("#add_service_code").val($(this).closest("tr").find(".service_code").text());
       $("#InvoiceAddServiceModal").find("#add_item_id").val($(this).closest("tr").find("input[name='item_id[]']").val());
      $("#InvoiceAddServiceModal").find("#add_service_cost").val($(this).closest("tr").find(".service_sub_cost").text());
      $("#InvoiceAddServiceModal").find("#change_service_qty").val($(this).closest("tr").find(".service_qty").text());
      $("#InvoiceAddServiceModal").find("#add_service_total_cost").val($(this).closest("tr").find(".service_total_cost").text());
      $("#InvoiceAddServiceModal").find('#add_service_invoice').val($(this).closest("tr").find("select[name='states1[]']").val()).select2();
      $("#InvoiceAddServiceModal").find('#add_service_id').val($(this).closest("tr").find("select[name='states1[]']").val());
      $(this).closest("tr").addClass('removetrforedit');
      $("#InvoiceAddServiceModal").find('#btn_add_service').attr('data-removetag','removethistr');
      $("#InvoiceAddServiceModal").modal('show');
    }else if($(this).data('flag') == 'product'){
      
      $("#InvoiceAddProductModal").find('input[name="product___id"]').val($(this).closest("tr").find("input[name='product_name']").val());
      $("#InvoiceAddProductModal").find("#product_name1").val($(this).closest("tr").find("input[name='product_name']").val());
      $("#InvoiceAddProductModal").find("#product_id1").val($(this).closest("tr").find(".product_id1").val());

      $("#InvoiceAddProductModal").find('#product_code').val($(this).closest("tr").find(".product_code1").text());
      $("#InvoiceAddProductModal").find('.p_id').val($(this).closest("tr").find(".p_id").val());
      $("#InvoiceAddProductModal").find('#product_cost').val($(this).closest("tr").find(".product_cost1").text());
      $("#InvoiceAddProductModal").find('#product_qty').val($(this).closest("tr").find(".product_qty1").text());
      $("#InvoiceAddProductModal").find('#add_product_total_cost').val($(this).closest("tr").find(".product_total_cost").text());
      $(this).closest("tr").addClass('removetrforedit');
      $("#InvoiceAddProductModal").find('#AddProduct').attr('data-removetag','removethistr');
      $("#InvoiceAddProductModal").modal('show');
    }
    
  });
  $(document).on("click", ".remove_service", function () {
    var this11 = $(this);
    
    if($(this).data('flag') == 'product'){
      if($("#invoiceid").val()){
        $.ajax({
          url: "{{route('practitioner.client.product.remove')}}",
            data: {
              product_id: $(this).closest("tr").find(".product_id1").val(),
              invoice_id: $("#invoiceid").val(),
              flag:'product'
            },
            type: 'POST',
        }).done(function(response) {
            if (response.status == "success") {
              //console.log(response.data.healthhistory);
              this11.closest("tr").remove();
              getcountoftotal();
            }
        });

      }else{
              $(this).closest("tr").remove();
              getcountoftotal();
      

      }
    }else if($(this).data('flag') == 'service'){
      if($("#invoiceid").val()){
        $.ajax({
          url: "{{route('practitioner.client.product.remove')}}",
            data: {
              product_id: $(this).closest("tr").find("select[name='states1[]']").val(),
              invoice_id: $("#invoiceid").val(),
              flag:'service'
            },
            type: 'POST',
        }).done(function(response) {
            if (response.status == "success") {
              //console.log(response.data.healthhistory);
              this11.closest("tr").remove();
              getcountoftotal();
            }
        });

      }else{
              $(this).closest("tr").remove();
              getcountoftotal();
      

      }

    }
    
    // total = $("#this_invoice_label").text() - $(this).closest("tr").find("#service_total_cost").text();
    
    // $("#this_invoice1").val(total);
  });
  var service_cnt = 2;
  function getcountoftotal(){

    console.log("hiii");

      var ob = $("#clientOutstanding").text();
      $("#this_invoice_label").text("");
      var celltext = 0;
      $('#service_table_body td.service_total_cost').each(function() {        
        string = $(this).text();
        var cell = string.replace(',','');
        celltext += parseFloat(cell);
      });
      $("#this_invoice_label").text(Number(celltext).toFixed(2));
      $("#this_invoice1").val(Number(celltext).toFixed(2));
      $("#clientCurrentToPay").text(Number(celltext - $("#clientOnlinePaid").text()).toFixed(2));
      var TI = parseFloat(celltext) + parseFloat(ob);
      $("#totalInvoice").text( Number(celltext).toFixed(2) );
      // $("#finalprice").val(Number(TI).toFixed(2));
  }
   $(document).ready(function() {
    $('#InvoiceAddServiceModal').on('hidden.bs.modal', function() {
      $(':input', this).val('');
      $("#change_service_qty").val(1);     
      $("#add_service_invoice").val('').select2();
      $("#service_table_body").find('.removetrforedit').removeClass('removetrforedit');
    });
    $('#InvoiceAddProductModal').on('hidden.bs.modal', function() {
      $(':input', this).val('');     
      $("#service_table_body").find('.removetrforedit').removeClass('removetrforedit');
    });
  });
  $(document).ready(function() {
    getcountoftotal();
   
       $("#appt_crt_inv_dp").datepicker({
         format: 'dd/mm/yy',
         weekStart: 1,
         todayHighlight: true,
         autoclose: true,
         clearBtn: true,
        // startDate: '-',
      });
    // Add new service
    $(document).on( 'change', '#add_service_invoice', function(e) {
      e.preventDefault();

      var grand_total = 0;
      var sel_service_type = $('option:selected', this).attr('data-sr-id');
      var cost = $('option:selected', this).attr('data-sr-cost');
      var code = $('option:selected', this).attr('data-sr-code');
      var gst = $('option:selected', this).attr('data-sr-gst');
      var qty = $('#change_service_qty').val();
      grand_total = grand_total + ( parseFloat(cost) * parseFloat(qty) );

      $("#add_service_id").val(sel_service_type);
      $("#add_service_code").val(code);
      $("#add_service_cost").val(cost);
      $("#add_service_total_cost").val(Number(grand_total).toFixed(2));
    });
      $(document).on( 'keyup', '#add_service_cost', function(e) {
      e.preventDefault();
      var grand_total = 0;
      var cost = $(this).val();      
      var qty = $('#change_service_qty').val();
      grand_total = grand_total + ( parseFloat(qty) * parseFloat(cost) );
      $("#add_service_total_cost").val(Number(grand_total).toFixed(2));
    });
    // Change qty and calculate total price
    $(document).on( 'change', '#change_service_qty', function(e) {
      e.preventDefault();

      var grand_total = 0;
      var qty = $(this).val();      
      var cost = $('#add_service_cost').val();
      grand_total = grand_total + ( parseFloat(qty) * parseFloat(cost) );

      $("#add_service_total_cost").val(Number(grand_total).toFixed(2));
    });

    // Change service
    $(document).on('change', 'select[name="states[]"]', function() {
      var total = 0;
      
      $("#service_table_body select").each( function() {
        var cost = $('option:selected', this).attr('data-cost');
        var code = $('option:selected', this).attr('data-code');
        var gst = $('option:selected', this).attr('data-gst');
        var qty = $('option:selected', this).attr('data-qty');
        
      
        $(this).parent().parent().find('.cost_item').val(cost);
        $(this).parent().parent().find('.service_code').text(code);
        $(this).parent().parent().find('.service_sub_cost').text(cost);
        $(this).parent().parent().find('.service_total_cost').text(Number(cost * qty).toFixed(2));
        total = total + parseFloat(cost);
      });
      getcountoftotal();
    });
    
    $(document).on('change', 'select[name="states1[]"]', function() {
      var total = 0;
      
      if(btnclicked == false){
        $("#service_table_body select").each( function() {
        
        var cost = $('option:selected', this).attr('data-cost');
        var code = $('option:selected', this).attr('data-code');
        var gst = $('option:selected', this).attr('data-gst');
        var qty = $('option:selected', this).attr('data-qty');

        $(this).parent().parent().find('.cost_item1').val(Number(qty * cost).toFixed(2));
        $(this).parent().parent().find('.service_code').text(code);
        $(this).parent().parent().find('.service_sub_cost').text(cost);
        $(this).parent().parent().find('.service_total_cost').text(Number(qty * cost).toFixed(2));
        total = total + parseFloat(cost);
        });
        getcountoftotal();
        
      }
      btnclicked = false;
      
    });

    // Add Product
    $(document).on( 'click', '#AddProduct', function(e) {
      e.preventDefault();
      var product_qty = $('#product_qty').val();
      var product_id = $('#product_id1').val();
      var p_id = $("#p_id").val();
      if($(this).data('removetag') == 'removethistr'){
        $(".removetrforedit").remove();
      }
      var product_name = $('#product_name1').val();
      var product_code = $('#product_code').val();
      var product_cost = $('#product_cost').val();
      var product_total_cost = $('#add_product_total_cost').val();
      var flag = 1;
      var message = 'Product added.';
      if( product_id == '' ) {
        flag = 0;
        message = "Product required";
      }

      // if( product_code == '' ) {
      //   flag = 0;
      //   message = "Product code is required!";
      // }

      if( product_cost == '' ) {
        flag = 0;
        message = "Product cost is required!";
      }

      if( product_qty == '' ) {
        flag = 0;
        message = "Product quantity is required!";
      }

      if( product_cost == '' ) {
        flag = 0;
        message = "Product total cost is required!";
      }
      // $.ajax({
      //   url:'{{route("practitioner.product.check.qty")}}',
      //   data:{product_id:product_id,product_qty:product_qty},
      //   type:"POST"
      // }).done(function (response) {
      //   if(response.status == "warning"){
      //     Swal.fire({
      //       icon: response.status,
      //       text:response.text,
      //       title: response.title,
      //       showClass: {
      //         popup: 'animate__animated animate__fadeInDown'
      //       },
      //       hideClass: {
      //         popup: 'animate__animated animate__fadeOutUp'
      //       }
      //     });
       
      //     return false;
      //   }else{
          
          
          
          if( flag == 1 ) {
            var html_data = '<tr>';

            html_data += '<td>';
            html_data += '<div>';
            html_data += ' <input type="text" readonly class="text-navy small-input w-100" name="product_name" value="'+product_name+'"><input type="hidden" name="product_id1[]" class="form-control list_of_products product_id1"  value='+product_id+'><input type="hidden" name="p_id[]" class="form-control p_id" value='+p_id+'>';            

            html_data += '</div>';
            html_data += '</td>';
            
            html_data += '<td class="product_code1">'+ product_code +'</td><input type="hidden" name="product_code[]" class="form-control product_code"  value='+product_code+'>';
            
            html_data += '<td class="product_cost1 dollar">'+ Number(product_cost).toFixed(2) +'</td><input type="hidden" name="product_cost[]" class="form-control product_cost"  value='+product_cost+'>';
            
            html_data += '<td class="product_qty1" class="service_qty">'+ product_qty +'</td><input type="hidden" name="product_qty[]" class="form-control product_qty"  value='+product_qty+'>';
            
            html_data += '<td class="product_total_cost dollar service_total_cost" data-qty='+product_qty+'>'+ Number(product_total_cost).toFixed(2) +'</td><input type="hidden" class="form-control item small-input" name="product_total_cost" value="'+ product_cost +'">';  /// product_total_cost 06-06-2022
            
            html_data += '<td>';
            html_data += '<div class="dropdown three-dot-dropdown">';
            html_data += '<a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>';
            html_data += '<div class="dropdown-menu">';
            html_data += '<a class="dropdown-item editaddedservice" data-flag="product">Edit</a>';
            html_data += '<a class="dropdown-item remove_service" data-flag="product">Delete</a>';
            html_data += '</div></div></td>';
            html_data += '</tr>';
            $(".service-new-table").removeClass('d-none');

            var sameExists = 0;
            $('.list_of_products').each(function() {
              if($(this).val() == product_id)
              {
                Swal.fire({
                  icon: 'warning',
                  title:'Already added',
                  text: "Adjust quantity if required",
                  showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                  }
                });
                sameExists = 1;
                return false;
              }
            });

            if(sameExists == 1){
              $("#InvoiceAddProductModal").modal("hide");
              return false;
            }
            
            $("#service_table_body").append( html_data );

            $("#InvoiceAddProductModal").modal("hide");
            getcountoftotal();

            toastr.success( message );
          }else{
            toastr.error( message );
          }
      //   }
      // });
     
      
     
    });
    var btnclicked = false;
    // Add new service
    $(document).on( 'click', '#btn_add_service', function(e) {
      e.preventDefault();
      if($(this).data('removetag') == 'removethistr'){
        $(".removetrforedit").remove();
        var flag1 = 'edit';
      }
      var sel2class = 'single-select'+service_cnt;

      var sel_service_id = $('#add_service_id').val();
      // console.log( sel_service_id );
      var sel_service_code = $('#add_service_code').val();
      var sel_service_cost = $('#add_service_cost').val();
      var add_item_id = $('#add_item_id').val();
      var sel_qty = $('#change_service_qty').val();
      var sel_total_cost = sel_qty * sel_service_cost ;
      var seltcost = $("#add_service_total_cost").val();
      var flag = 1;
      var message = 'Service added.';

      var myarray =[];

      if(flag1!='edit'){
        myarray.push(sel_service_id);
      }

      $('.service-product-select2').each(function(index, val) { 
      serviesId= $(this).closest('tr').find('select option:selected').val();
      myarray.push(serviesId);
      });

      var hasDups = !myarray.every(function(v,i) {
        return myarray.indexOf(v) == i;
      });
      
      if( sel_service_id == '' ) {
        flag = 0;
        message = "Service type is required!";
      }

      if( sel_service_cost == '' ) {
        flag = 0;
        message = "Service cost is required!";
      }

      if( sel_qty == '' ) {
        flag = 0;
        message = "Service quantity is required!";
      }

      if( seltcost == '' ) {
        flag = 0;
        message = "Service total cost is required!";
      }
      var add_val_item_id = '';
      if(add_item_id){
        add_val_item_id = add_item_id;
      }
      if( flag == 1 ) {
        
        btnclicked = true;
        var html_data = '<tr>';

        html_data += '<td class="service-product-select2"><input type="hidden" name="item_id[]" value='+add_val_item_id+'>';
        
        html_data += '<select class="form-control text-capitalize service_add_list '+sel2class+'" id="test-sel'+service_cnt+'" name="states1[]">';
        html_data += '@foreach($practitionerAppointmentTypes as $type)';

        html_data += '<option @if( $type->id == '+ sel_service_id +') Selected @endif value="{{$type->id}}" data-code = "{{$type->code}}" data-qty='+sel_qty+' data-cost = "{{$type->fee}}" @if($type->is_gst=="on") data-gst="{{$settings->gst}}" @endif>@if($type->is_gst=="on") * @endif{{$type->appointment_type}}</option>@endforeach';
        html_data += '</select></td>';
        html_data += '<td class="service_code">'+sel_service_code +'</td>';
        
        html_data += '<td class="service_sub_cost dollar">'+ Number(sel_service_cost).toFixed(2) +'</td>';
        
        html_data += '<td class="service_qty">'+ sel_qty +'</td><input type="hidden" class="form-control item small-input" placeholder="" name="item_qty[]"  value="'+ sel_qty +'">';
        
        html_data += '<td class="service_total_cost dollar" data-qty='+sel_qty+'>'+Number(sel_total_cost).toFixed(2)+'</td><input type="hidden" class="form-control item small-input numeric-dot-only cost_item1" id="cost_item1" placeholder="" name="cost_item[]"  value="'+ sel_service_cost +'">'; //sel_total_cost 06-06-2022
        
        html_data += '<td>';
        html_data += '<div class="dropdown three-dot-dropdown">';
        html_data += '<a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>';
        html_data += '<div class="dropdown-menu">';
        html_data += '<a class="dropdown-item editaddedservice" data-flag="dynamicservice">Edit</a>';
        html_data += '<a class="dropdown-item remove_service" data-flag="service">Delete</a>';
        html_data += '</div></div></td>';
        html_data += '</tr>';

        // console.log( html_data );
        $(".service-new-table").removeClass('d-none');

        var sameExists = 0;
        $('.service_add_list').each(function() {
          if($(this).val() == sel_service_id)
          {
            Swal.fire({
              icon: 'warning',
              title:'Already added',
              text: "Adjust quantity if required",
              showClass: {
                popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            });
            sameExists = 1;
            return false;
          }
        });

        if(sameExists == 1){
          $("#InvoiceAddServiceModal").modal("hide");
          return false;
        }

        $("#service_table_body").append( html_data );

        $("."+sel2class).select2({
          placeholder: function () {
            $(this).data('placeholder');
          },
          closeOnSelect: true,
          dropdownPosition: 'below',
        });

        $('#test-sel'+service_cnt).val(sel_service_id).trigger('change');

        $("#InvoiceAddServiceModal").modal("hide");
        getcountoftotal();
        toastr.success( message );
        service_cnt++;
      } else {
        toastr.error( message );
      }

    });

    $('#invoice-table-service').select2({});
  });
  var ppath = "{{ route('practitioner.search.invoiceproduct') }}";
  $('body').delegate('.product___id','focus',function(){
    var thiss = $(this);
    var gst1 = '{{$settings->gst}}';
    $(this).typeahead({
      source:  function (query, process) {
         return $.get(ppath, { query: query }, function (data) {
            for (var i = 0;i<data.length;i++) {
               if(data[i].id){
                  //console.log(data[i].id);
                  //thiss.parent().find(".product_id").val(data[i].id);
                  //$("#product_id").val(data[i].id);
                 
      // $(".typeahead.dropdown-menu").addClass('d-block');
  
               }
            }
            if(data.length > 0){
               return process(data);
               
            }else{
               $(".tt-dataset").text('No Results Found');
               setTimeout(function() {
                  $('.tt-dataset').text('');
               }, 3000);
            }
         });
      },
      updater: function(selection){
        
        
         var fprice = selection.product_price
         thiss.attr('data-price1',fprice);
         $("#product_cost").val(Number(fprice).toFixed(2));
         $("#product_code").val(selection.product_code);
         
         
         thiss.parent().find(".product_id1").val(selection.id);   
         thiss.parent().find(".product_name1").val(selection.name);   
         thiss.parent().find(".productQTY").val(selection.product_quantity);
         thiss.parent().find(".productnotifyQTY").val(selection.product_notify_at);
         var cost= $("#product_cost").val();
         // var qty = $("#product_qty").val();

         $("#product_qty").val(1);
         var qty = 1;
         
         $("#add_product_total_cost").val(Number(qty*cost).toFixed(2)); 
         if(selection.is_gst == 'on'){
            return '* '+selection.name;
         }else{
            return selection.name;
         }
         
      }
   });
   $(this).on('keyup',function(e) {
         //console.log($(this).parent());
         $(this).parent().find(".dropdown-menu").find('.active .dropdown-item').css({"backgroundColor":"#68afb5","color":"white"});


         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"});

            }
         }
      });
   });
     $(document).on("keyup","#product_cost",function(){
      var qty= $("#product_qty").val();
      var cost = $(this).val();   
      $("#add_product_total_cost").val(Number(qty*cost).toFixed(2)); 
         
   });
  $(document).on("keyup","#product_qty",function(){
    var cost= $("#product_cost").val();
    var qty = $(this).val();   
    
    $("#add_product_total_cost").val(Number(qty*cost).toFixed(2)); 
        
  });

  $('#loction123').on('select2:open', function (e) {
    
      $("#select2-loction123-results").parent().parent().addClass('invoice-location-particular');
  });

  $('#provider_number').on('select2:open', function (e) {
    $(".select2-search--dropdown").addClass('d-none');
  });

  $('#claims_company_details').on('select2:open', function (e) {
    $(".select2-search--dropdown").addClass('d-none');
  });

  // $(document).ready(function (){
  //   alert('load page');
  // $('ul.typeahead li').click(function(){
  //   alert('enter');
  //           $(this).removeClass("d-block");
  //       });
  //     });

 
//   jQuery(document).ready(function($) {
//       $("a.dropdown-item").on(function(){
//       alert('enter');
//         $("ul.typeahead").removeClass('d-block');
//       })
// });  


// $(".adultChild").click(function(event) {
// 			defaultFlag = true
//             $(".option-box").addClass("display-box");
// 			$("#guestsPlaceHolder").html('');			
//             event.stopPropagation();
// 			$(".dropdown-toggle+.dropdown-menu").removeClass("show");
// 			if($('#redirect_trip_page').val() == '') {
// 				$(".filter-option-inner-inner").html('For your next holiday');
// 			}
//         });
</script> 
@endsection