@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' />
<style>
  .invoice-item-selecter {
    margin-top: 22px;
    width: 262px;
  }

  .invoice-item-selecter button {
    width: 100%;
  }

  .invoice-item-selecter button:after {
    display: none;
  }

  .invoice-item-selecter .dropdown-menu {
    width: 100%;
    padding: 0;
  }

  .invoice-item-selecter .dropdown-menu a {
    width: 100%;
  }

  .invoice-item-selecter .dropdown-menu a:hover {
    background-color: #68afb5;
    color: white;
  }

  .shipping-item-selecter {
    max-width: 123px;
    width: 100%;

  }

  .shipping-item-selecter button {
    width: 100%;
    border: 0.5px solid #dadada;
    font-size: 14px;
    padding: 10px 18px;
    color: #898989;

  }

  .shipping-item-selecter button:after {
    display: none;
  }

  .comm-form .shipping-item-selecter label {
    font-size: 14px;
    color: 898989;
    font-weight: normal;
    width: 90px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .comm-form .shipping-item-selecter span {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shipping-item-selecter .dropdown-menu {
    width: 240px;
    padding: 13px;
  }

  .shipping-item-selecter .form-group {
    max-width: 90px;
    margin: 12px 0
  }

  .comm-form .shipping-item-dropdown .dollar:before {
    top: 6px;
    font-size: 14px;
  }

  .comm-form .shipping-item-dropdown .dollar .form-control {
    padding-left: 26px !important;
  }

  .percentage:after {
    content: "%";
    position: absolute;
    top: 19px;
    right: 32px;
    color: #24303f;
    font-size: 14px;
  }

  .percentage .form-control {
    padding-right: 26px;
  }

  .discount-item-dropdown .dollar:before {
    top: 6px;
    font-size: 14px;
  }

  .discount-item-dropdown .btn {
    margin-top: 13px;
  }

  #payment-box-btns a {
    max-width: 120px;
    width: 100%;
    min-width: 80px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #payment-box-btns p {
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.5px;
  }

  .payment-methods-modal .modal-dialog {
    max-width: 340px;
    text-align: center;

    position: relative;
  }

  .payment-methods-modal .modal-dialog p {
    color: #24303f;
    line-height: 22px;
    letter-spacing: 0.5px;
  }

  .payment-methods-modal .modal-dialog .modal-body {
    padding: 32px 45px;
  }

  .payment-methods-modal .modal-dialog a {
    width: 100%;
  }

  .payment-methods-modal .close {
    position: absolute;
    right: 10px;
    top: 5px;
  }
</style>



<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">
    {{-- @dump(request()->segment(4)) --}}

    <div class="col-12 back-contain"><a @if(Request::get('is_from')=="clientcard" ) {{-- href="{{url()->previous()}}" --}} href="{{route('practitioner.dashboard.clientcard',['client_id'=>base64_encode(request()->segment(3))])}}" @elseif(Request::get('is_from')=="calander" ) href="{{route('practitioner.appointments.index')}}" @elseif(Request::get('type')=="book_from_hover" ) href="{{ route('practitioner.appointments.details',Request::get('appt_id')) }}" @elseif(Request::get('type')=="create_invoice" ) href="{{ route('practitioner.appointments.details',Request::get('appt_id')) }}" @else href="{{url()->previous()}}" @endif 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="">
      <input type="hidden" name="client_id" value="{{$client->id}}">
      <input type="hidden" name="client_email_ckeck" class="client_email_ckeck" value="{{$client->email}}">
      <input type="hidden" name="status" value="">
      <input type="hidden" id="actionflag" value="">
      {{--<input type="hidden" name="invoice_id" id="invoiceid" @if($idd) value="{{$idd}}" @else value="" @endif>--}}

      <div class="invoice-new-box comm-form ">
        <div class="row">
          <div class="col-lg-6">
            <div class="invoce-new-address">
              <p>

                <a style="color: #24303f;" href="{{ url('practitioner/clientcard').'?client_id='.base64_encode( $client->id) }}" class=" hover-client-name"> <span> {{ ucwords( $client['name']. ' ' .$client['last_name'] ) }}</span></a>
                @if(isset($invoiceSettings) && $invoiceSettings->client_email==1)
                <span>{{ $client['email'] }}</span>
                @endif
                @if(isset($invoiceSettings) && $invoiceSettings->client_address==1)
                <span>{{ $client['address'] }}</span>
                @endif
                @if(isset($invoiceSettings) && $invoiceSettings->phone_number==1)
                <span>{{ $client['phone'] }}</span>
                @endif
                <!-- @if(isset($invoiceSettings) && $invoiceSettings->client_dob==1)  
              <span>DOB: @if(isset($client['date_of_birth'])) {{$client['date_of_birth']->format('d/m/Y')}} @else {{"-"}} @endif</span>
              @endif     -->
              </p>
              <!-- <p>
                <strong>Medibank private : </strong>12987212A
              </p> -->
             
              <p>
                <strong>Number of sessions remaining : </strong> 4
              </p>

                            @if($display == 1 && isset($phf) && isset($chf))
                <p class="pb-0" id="providerNumber"></p>
              @endif
              <div id="claimsDetails" class="@if(isset($claim_details) && $claim_details->bill_to == 1 && $claim_details->display_claim_details == 1) @else d-none @endif">
              @if(isset($claim_details) && $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">{{$claim_details->company_name ?? ''}}</option>
                    <!-- <option value="">{{$claim_details->owner_first_name ?? ''}} {{$claim_details->owner_last_name ?? ''}}</option> -->
                    <option value="client">{{ ucwords( $newclient['name']. ' ' .$newclient['last_name'] ) }}</option>
                  </select>
                </div>
              </div>
            </div>



              @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
              
             
            </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="{{ $invoiceNumber }}">
                </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">
                    {{--<input class="form-control box-shadow-none day-datepicker" autocomplete="off" id="clnt_crt_inv_dp"
                  type="text" placeholder="" name="date" value="@if(isset($oldinvoice) && $oldinvoice !='') {{$oldinvoice->date->format('d/m/y') }} @else {{\Carbon\Carbon::now()->timezone($practitionerTimezone)->format('d/m/y') }} @endif" style="background-color:TRANSPARENT;">--}}
                    <input class="form-control box-shadow-none day-datepicker" autocomplete="off" id="clnt_crt_inv_dp" type="text" placeholder="" name="date" value="" 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 name="location" id="loction123" class="form-control single-select2 select-arr-none">
                      @foreach($Locations as $location)
                      @if(sizeof($Locations) == 1)
                      <option value="{{$location->id}}" selected>{{getLocationAddress($location->address) ?? '-'}}</option>
                      @else
                      <option value="{{$location->id}}">{{getLocationAddress($location->address) ?? '-'}}</option>
                      @endif
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-7 col-6 invoice-no-label">Service Provider</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="service_provider" id="service_provider" class="form-control single-select2 ">
                      {{-- @foreach($service_providers as $service_provider)
                        @if(sizeof($service_providers) == 1)
                        <option value="{{$service_provider->id}}" selected>{{getservice_providerAddress($service_provider->address) ?? '-'}}</option>
                      @else
                      <option value="{{$service_provider->id}}">{{getservice_providerAddress($service_provider->address) ?? '-'}}</option>
                      @endif
                      @endforeach--}}
                      <option value="#" selected>Service Provider</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

            <div class="row" id="providerNumberDiv">
              <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>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <hr class="new-hr">
        <div class="service-new-table invoice-new-table @if(Request::segment(4) || $invioceproduct) @else d-none @endif">
          <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($charge)
                <tr>
                  <td class="service-product-select2">
                    <input type="text" class="form-control  small-input" @if($status=='missed' )placeholder="Missed Appointment" @else placeholder="Cancelled Appointment" @endif readonly>
                  </td>
                  <td>-</td>
                  <td id="service_sub_cost" class="service_sub_cost dollar"> {{ $charge ?? '0.00' }}</td>
                  <td>-</td>
                  <td id="service_total_cost" class="service_total_cost dollar" data-qty='1'> {{ $charge ?? '0.00' }}
                  </td>
                </tr>
                @else

                @if( $blank_invoice_for_cancel_charge == 0 )
                @if(empty($hasinvoice))
                <tr>
                  <td class="service-product-select2">
                    <input type="hidden" name="item_id[]" value="">
                    <select class="form-control text-capitalize service_add_list" id="invoice-table-service" name="states1[]">
                      @foreach($practitionerAppointmentTypes as $type)
                      <option @if( $type->id == $appointment->appointment_type_id ) Selected @endif
                        value="{{$type->id}}"
                        data-code = "{{ $type->code }}"
                        data-qty='1'
                        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 id="service_code" class="service_code">{{ $appointmentType->code }} <input type="hidden" name="service_code[]" value="{{ $appointmentType->code }}"></td>
                  <td id="service_sub_cost" class="service_sub_cost dollar"> {{ $appointmentType->fee }}</td>
                  <td id="service_qty" class="service_qty">1</td> <input type="hidden" class="form-control item small-input" placeholder="" name="item_qty[]" value="1">
                  <td id="service_total_cost" class="service_total_cost dollar" data-qty='1'> {{$appointmentType->fee}}
                  </td>
                  <input type="hidden" class="form-control item small-input numeric-dot-only cost_item1" placeholder="" name="cost_item[]" value="{{ $appointmentType->fee}}">
                  <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="service">Edit</a>
                        <a class="dropdown-item remove_service" data-flag="service">Delete</a>
                      </div>
                    </div>
                  </td>
                </tr>
                @endif
                @if(isset($invioceproduct))
                @foreach($invioceproduct as $ip)
                <tr>
                  <td>
                    <div>
                      <input type="text" readonly class="text-navy small-input graytxt w-100" name="product_name" value="{{$ip->notes_product_name->product_name ?? ''}}"><input type="hidden" name="product_id1[]" class="form-control list_of_products product_id1" value='{{$ip->notes_product_name->id ?? ""}}'>
                    </div>
                  </td>

                  <td class="product_code1">{{$ip->notes_product_name->product_code ?? ''}}</td><input type="hidden" name="product_code[]" class="form-control product_code" value='{{$ip->notes_product_name->product_code ?? ""}}'>

                  <td class="product_cost1 dollar">{{$ip->price ?? ''}}</td><input type="hidden" name="product_cost[]" class="form-control product_cost" value='{{$ip->price ?? ""}}'>

                  <td class="product_qty1" class="service_qty">{{$ip->quantity ?? ''}}</td><input type="hidden" name="product_qty[]" class="form-control product_qty" value='{{$ip->quantity ?? ""}}'>

                  <td class="product_total_cost dollar service_total_cost" data-qty='{{$ip->quantity ?? ""}}'>
                    {{number_format(($ip->quantity * $ip->price),2) ?? ''}}
                  </td><input type="hidden" class="form-control item small-input" name="product_total_cost" value="{{number_format(($ip->quantity * $ip->price),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
                @endif
                @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 addNewProduct" data-toggle="modal">Add a Product</a> -->


        <div class="dropdown invoice-item-selecter">
          <button class="btn btn-unfill dropdown-toggle select-arr-none" type="button" data-toggle="dropdown" aria-expanded="false">
            + Item
          </button>
          <div class="dropdown-menu">
            <a href="#InvoiceAddServiceModal" class=" dropdown-item btn-border-custom " data-toggle="modal">Add a Service</a>
            <a href="#InvoiceAddProductModal" class=" dropdown-item btn-border-custom  addNewProduct" data-toggle="modal">Add a Product</a>
            <a href="#InvoiceAddProductModal" class=" dropdown-item btn-border-custom  " data-toggle="modal">Add billable item</a>
          </div>
        </div>
        <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">{{ (isset($olddescinvoice)) ? number_format($olddescinvoice,2) : '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 font-weight-normal">Shipping</p>
                </div>
                <div class="col-5">
                  <div>
                    <div class="dropdown shipping-item-selecter">
                      <button class="btn dropdown-toggle select-arr-none" type="button" data-toggle="dropdown" aria-expanded="false">
                        $0.00
                      </button>
                      <div class="dropdown-menu shipping-item-dropdown  dropdown-menu-right">
                        <div class="d-flex justify-content-between align-items-center">
                          <div class="age-title">
                            <input type="radio" name="is_gst" value="off" wfd-invisible="true">
                            <input type="radio" id="addgst-regular" name="is_gst" value="on" wfd-invisible="true">
                            <label for="addgst-regular">Regular</label>
                          </div>
                          <label>Or</label>
                          <div class="age-title">
                            <input type="radio" name="is_gst" value="off" wfd-invisible="true">
                            <input type="radio" id="addgst-express" name="is_gst" value="on" wfd-invisible="true">
                            <label for="addgst-express">Express</label>
                          </div>
                        </div>
                        <div class="d-flex justify-content-center">
                          <div class="form-group dollar">
                            <input type="text" class="form-control" placeholder="00.00" />
                          </div>
                        </div>
                        <a href="#" class="btn btn-fill w-100">Apply</a>
                      </div>
                    </div>

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

              <div class="row total-payment-col mb-4">
                <div class="col-7">
                  <p class="mb-0 font-weight-normal">Discount</p>
                </div>
                <div class="col-5">
                  <div>
                    <div class="dropdown shipping-item-selecter discount-item-selecter">
                      <button class="btn dropdown-toggle select-arr-none" type="button" data-toggle="dropdown" aria-expanded="false">
                        $0.00
                      </button>
                      <div class="dropdown-menu discount-item-dropdown dropdown-menu-right">
                        <div class="d-flex justify-content-between align-items-center">
                          <div class="form-group dollar m-0">
                            <input type="text" class="form-control discount" id="dollar" placeholder="00.00" />
                          </div>
                          <label>Or</label>
                          <div class="form-group percentage m-0">
                            <input type="text" class="form-control discount" id="percentage" placeholder="00.00" />
                          </div>
                        </div>
                        <a class="btn btn-fill w-100 cursor-pointer" id="applyDiscount">Apply</a>
                      </div>
                    </div>

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




              <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="">
                  <input type="hidden" id="invoiceBalance" name="invoiceBalance" value="">
                  <p class="mb-0 pl-4 dollar" id="totalInvoice"></p>
                </div>
              </div>


              @if( isset( $history ) && !empty( $history ) )
              <div id="online_payment_section_page_load">
                @foreach( $history as $key => $value )
                <div class="row">
                  <div class="col-7">
                    @if( $value->paymentType != '' || $value->paymentType != null )
                    <p class="mb-0 ">{{ $value->paymentType->name }} @if( $value->is_deposite_by_patient == 1 ) {{ $value->created_at->format('d/m/y') }} @endif</p>
                    @endif
                  </div>
                  <div class="col-5">
                    <p class="mb-0 pl-4 dollar" id="">{{ number_format( $value->paid_amount, 2 ) }}</p>
                  </div>
                </div>
                @endforeach
              </div>
              @endif

              <div class="row d-none" id="online_payment_section">
                <div class="col-7">
                  <p class="mb-0 pay_type_name d-none">{{ (isset($oldinvoice) && $oldinvoice != '' && isset($oldinvoice->paymentType)) ? $oldinvoice->paymentType->name : 'Payment'}} </p>
                </div>
                <div class="col-5">
                  <p class="mb-0 pl-4 dollar d-none" id="clientOnlinePaid">{{ (isset($oldinvoice) && $oldinvoice != '') ? $oldinvoice->amount_paid : '0.00'}}</p>
                  <input type="hidden" name="amount_paid1" id="amount_paid1" value="{{ (isset($oldinvoice) && $oldinvoice != '') ? $oldinvoice->amount_paid : '0.00'}}">
                </div>
              </div>
              <hr class="new-hr">

              <div class="row mb-4  total-payment-col" id="payment-box-btns">
                <div class="col-12">
                  <p class=" font-weight-normal">Add payment</p>

                  <div class="d-flex justify-content-between ">
                    <!-- <a href="#online-payment-modal" data-toggle="modal" class="btn btn-unfill">Online</a>
                    <a href="#tap-payment-modal" data-toggle="modal" class="btn btn-unfill">Tap</a>
                    <a href="#other-payment-modal" data-toggle="modal" class="btn btn-unfill">Other</a> -->
                    <a data-flag="Online" data-client_id="{{$client->id}}" class="btn btn-unfill cursor-pointer addPaymentinvoice">Online</a>
                    <a href="#tap-payment-modal" data-toggle="modal" class="btn btn-unfill cursor-pointer addPaymentinvoice">Tap</a>
                    <a data-flag="External" data-client_id="{{$client->id}}" class="btn btn-unfill cursor-pointer addPaymentinvoice">Other</a>
                  </div>
                </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">{{(isset($oldinvoice) && $oldinvoice != '') ?  number_format(($oldinvoice->total - $oldinvoice->amount_paid),2) : '0.00'}}</p>
                  <input type="hidden" name="amount_to_paid" id="amount_to_paid" value="{{(isset($oldinvoice) && $oldinvoice != '') ?  number_format(($oldinvoice->total - $oldinvoice->amount_paid),2) : '0.00'}}">
                </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="">Process HICAPS</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="{{$client->id}}" 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">{{$invoiceNotes ?? ''}}</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">
                            <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

                                {{-- @if($value->appt_type !="") 
                                      @if($value->appt_type =="Telehealth" || $value->appt_type =="Mobile") 
                                       {{ $value->appt_type.' - ' }}
                                @endif
                                @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 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">
                            <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="">
                            <input type="hidden" class="form-control" id="isProductEdit" value="0">
                          </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 type="text" class="form-control text-navy" id="product_code" placeholder="Enter code" />

                          </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 -->


  <!-- Modal -->
  <div class="modal fade payment-methods-modal" id="online-payment-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <div class="modal-body">
          <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>
          <p>Save time & money with our integrated online payment processing. 1.5% plus 25c per transaction*. No set-up or monthly fees & no terminal required. </p>
          <a href="#" class="btn btn-unfill">Activate payment processing</a>
        </div>

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


  <div class="modal fade payment-methods-modal" id="tap-payment-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
      <div class="modal-content">
        <div class="modal-body">
          <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>
          <p>Save time & money with our integrated tap payment solution. 1.5% plus 25c per transaction. Purchase your tap machine to get started today. </p>
          <a href="#" class="btn btn-unfill">Purchase tap machine</a>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade payment-methods-modal" id="other-payment-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
      <div class="modal-content">
        <div class="modal-body">
          <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 class="">
            <hr>
            <div class="mt-30 col-12 label-input ">
              <p class="row" id="cash-amount">
                <label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Cash </label>
                <span class="col-md-6 col-6"> <span class="form-group brdrfull">
                    <span class="dollar-icon">$</span> <input type="text" name="cash-amount" id="cash-amount" class="numeric-dot-only form-control" placeholder="0.00"></span>
                </span>
              </p>
            </div>
            <div class="mt-30 col-12 label-input ">
              <p class="row" id="credit_card-amount">
                <label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Credit Card </label>
                <span class="col-md-6 col-6"> <span class="form-group brdrfull">
                    <span class="dollar-icon">$</span> <input type="text" name="credit-card-amount" id="credit-card-amount" class="numeric-dot-only form-control" placeholder="0.00"></span>
                </span>
              </p>
            </div>
            <div class="mt-30 col-12 label-input ">
              <p class="row" id="eftpos-amount">
                <label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Eftpos </label>
                <span class="col-md-6 col-6"> <span class="form-group brdrfull">
                    <span class="dollar-icon">$</span> <input type="text" name="eftpos-amount" id="eftpos-amount" class="numeric-dot-only form-control" placeholder="0.00"></span>
                </span>
              </p>
            </div>
            <div class="mt-30 col-12 label-input ">
              <p class="row" id="HICAPS-terminal-amount">
                <label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">HICAPS terminal </label>
                <span class="col-md-6 col-6"> <span class="form-group brdrfull">
                    <span class="dollar-icon">$</span> <input type="text" name="terminal-amount" id="terminal-amount" class="numeric-dot-only form-control" placeholder="0.00"></span>
                </span>
              </p>
            </div>
            <div class="mt-30 col-12 label-input ">
              <p class="row" id="direct-deposit-amount">
                <label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Direct deposit</label>
                <span class="col-md-6 col-6"> <span class="form-group brdrfull">
                    <span class="dollar-icon">$</span> <input type="text" name="direct-deposit-amount" id="direct-deposit-amount" class="numeric-dot-only form-control" placeholder="0.00"></span>
                </span>
              </p>
            </div>
            <div class="mt-30 col-12 label-input ">
              <p class="row" id="other-amount">
                <label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Other</label>
                <span class="col-md-6 col-6"> <span class="form-group brdrfull">
                    <span class="dollar-icon">$</span> <input type="text" name="other-amount" id="other-amount" class="numeric-dot-only form-control" placeholder="0.00"></span>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>




</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());
      $("#isProductEdit").val(1);
      $(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() {

    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));
    $("#amount_to_paid").val(Number(celltext).toFixed(2));
    var TI = parseFloat(celltext) + parseFloat(ob);
    $("#totalInvoice").text(Number(celltext).toFixed(2));
    $("#invoiceBalance").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();
    });
    $('#InvoiceAddProductModal').on('hidden.bs.modal', function() {
      $(':input', this).val('');


    });
  });
  $(document).ready(function() {
    getcountoftotal();
    $("#clnt_crt_inv_dp").datepicker({
      format: 'dd/mm/yy',
      weekStart: 1,
      todayHighlight: true,
      autoclose: true,
      clearBtn: true,
      // startDate: '-',
    });
    var $oldprodct = @json($product);
    var $olditem = @json($item);
    if ($oldprodct.length > 0 || $olditem.length > 0) {
      $("#opening_balance_area").removeClass('d-none');
      $("#online_payment_section").removeClass('d-none');
      $("#current_balance_section").removeClass('d-none');
      $("#outstanding_balance_area").addClass('d-none');


    }
    // 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;

      $("#appt_service_table 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('.cost_item1').val(Number(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;

    });

    $(document).on('click', '.addNewProduct', function(e) {
      $("#isProductEdit").val(0);
    });

    // Add Product
    $(document).on('click', '#AddProduct', function(e) {
      e.preventDefault();
      var product_qty = $('#product_qty').val();
      var product_id = $('#product_id1').val();
      var invoice_id = $("#invoiceid").val();
      var isProductEdit = $("#isProductEdit").val();
      var p_id = $("#p_id").val();

      var removeThisTr = 0;

      if ($(this).data('removetag') == 'removethistr') {
        removeThisTr = 1;
      }

      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_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,
          invoice_id: invoice_id,
          is_product_edit: isProductEdit
        },
        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) {

            if (removeThisTr == 1) {
              $(".removetrforedit").remove();
            }

            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 sel2class = 'single-select' + service_cnt;

      var sel_service_id = $('#add_service_id').val();
      var add_item_id = $('#add_item_id').val();

      // console.log( sel_service_id );
      var sel_service_code = $('#add_service_code').val();
      var sel_service_cost = $('#add_service_cost').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.';

      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><input type="hidden" name="add_service_id" value="' + sel_service_id + '">';
        html_data += '<td class="service_code">' + sel_service_code + ' <input type="hidden" name="service_code[]" value=' + 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
        console.log(sel_total_cost);

        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({});
    $('#invoice-table-product').select2({});
    $('#invoice-addproduct').select2({});
    $('#invoice-addservice').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);
            }
          }
          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');

  });

  $(document).ready(function() {
    var location_id = $("#loction123").val();
    getProviderNumber(location_id);
  });

  $('#loction123').on('change', function(e) {
    var location_id = $(this).val();
    getProviderNumber(location_id);
  });

  function getProviderNumber(location_id) {
    var client_id = $("input[name='client_id']").val();
    $.ajax({
      url: "{{route('practitioner.providerNumber.get')}}",
      data: {
        client_id: client_id,
        location_id: location_id,
      },
      type: 'POST',
    }).done(function(response) {
      $("#providerNumber").text(response.providerNumber);
      if (response.providerNumberList.length >= 1) {
        $("#providerNumberDiv").removeClass("d-none");
        $('.hicaps_btn_div_parent').removeClass("d-none");
        var provider_number = $('#provider_number');
        provider_number.empty();
        $.each(response.providerNumberList, function(key, value) {
          provider_number.append($("<option></option>")
            .attr("value", value.provider_number)
            .text(value.provider_number));
        });
      } else {
        $("#providerNumberDiv").addClass("d-none");
        $('.hicaps_btn_div_parent').addClass("d-none");

      }
    });
  }

  // new changes 26-07-2022
  $('.discount').keyup((e) => {
      var value = e.currentTarget.id;
      if(value =='dollar')
      {
        $("#percentage").val("");
      } else{
        $("#dollar").val("");
      }
  });
  
  $('#applyDiscount').on('click', function(e) {
      if($("#dollar").val() !='')
      {
        console.log($("#dollar").val());
        var amount = $("#invoiceBalance").text() - $("#dollar").val();
        $('#totalInvoice').text(amount);
      }

      if($("#percentage").val() !='')
      {
        console.log($("#percentage").val());
        var value = $("#invoiceBalance").text() * $("#percentage").val() / 100;
        var amount = $("#invoiceBalance").text() - value;
        $('#totalInvoice').text(amount);
      }

  });

  

</script>
@endsection