{{-- @extends('admin.layouts/layoutMaster')

@section('title', 'Create Payment')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
@endsection

@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-profile.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
@endsection

@section('page-script')
<script src={{asset('assets/js/custom/select2.js')}}></script>
<script src={{asset('assets/js/custom/flatpickr.js')}}></script>
@endsection --}}

{{-- @section('content') --}}
  <div class="mt-3  col-12">
    {{-- <h3>Create Payment</h3>
    <div class="card">
      <div class="card-body"> --}}
        @php
          $invoiceRawCurrency = $invoice->getRawOriginal('currency');
        @endphp
        @include('admin.pages.finances.payment.invoice-payment.invoice-info-header')

        @if(isset($invoicePayment))
          <form id="invoice-partial-payment-form" action="{{ route('admin.invoices.partial-payments.update', [$invoice, 'partial_payment' => $invoicePayment, 'event' => request()->event]) }}">

            @method('PUT')
        @else
          <form id="invoice-partial-payment-form" action="{{ route('admin.invoices.partial-payments.store', $invoice) }}">
            @method('POST')
        @endif
          @csrf
          <div class="d-block d-md-flex justify-content-between">
            <div class="col-8">
              <div class="row">
                {{-- Account --}}
                <div class="form-group col-12 col-md-4">
                  {{ Form::label('account_balance_id', __('Account'), ['class' => 'col-form-label']) }}
                  {!! Form::select('account_balance_id', $selectedAccountBalance ?? [], @$invoicePayment->accountTransaction->account_balance_id ?? @array_keys($selectedAccountBalance ?? [])[0], [
                  'class' => 'form-select', 'data-kt-select2' => 'true',
                  'data-remote' => route('resource-select',
                    [
                      'AccountBalance',
                      'dependent' => 'invoice_id',
                      'dependent_2_col' => 'inv-type',
                      'dependent_3_col' => 'pay-type',
                      'dependent_id' => $invoice->uuid,
                      'dependent_2' => 'Invoice',
                      'dependent_3' => 'Partial',
                      'mainInvoice' => $invoice->type
                    ]),
                  'data-placeholder' => __('Select Account'),
                  'data-allow-clear' => 'true'
                  ]) !!}
                </div>

              </div>
              <div class="row">
                {{-- Transaction Id --}}
                <div class="form-group col-12 col-md-4">
                  {{ Form::label('transaction_id', __('Transaction Id'), ['class' => 'col-form-label']) }}
                  {!! Form::text('transaction_id', @$invoicePayment->transaction_id, ['class' => 'form-control', 'placeholder' => __('Transaction Id')]) !!}
                </div>

                {{-- payment date --}}
                <div class="form-group col-12 col-md-4">
                    {{ Form::label('payment_date', __('Payment Date'), ['class' => 'col-form-label']) }}
                    {!! Form::date('payment_date', @$invoicePayment->payment_date, ['class' => 'form-control flatpickr', 'placeholder' => __('Payment Date')]) !!}
                </div>
              </div>
              <div class="row {{($isForeignCurrencyInvoice = $invoice->isForeignCurrency()) ? '' : 'd-none' }}">
                {{-- Currency --}}
                <div class="form-group col-12 col-md-4">
                  {{ Form::label('currency', __('Currency'), ['class' => 'col-form-label']) }}
                  {!! Form::select('currency', [cCurrency()->getSymbol() => cCurrency()->getSymbol(), $invoiceRawCurrency => $invoiceRawCurrency], $invoiceRawCurrency, [
                    'class' => 'form-select',
                    'data-kt-select2' => 'true'
                  ],
                  [
                    cCurrency()->getSymbol() => ['data-is-base' => '1', 'data-symbol' => cCurrency()->getSymbol()],
                    $invoiceRawCurrency => ['data-is-base' => '0', 'data-symbol' => $invoiceRawCurrency],
                  ]) !!}
                </div>
                {{-- {{dd($invoice->payments->pluck('conversion_rate'))}} --}}
                {{-- conversion rate --}}
                <div class="form-group col-12 col-md-4">
                  <label class="col-form-label" for="conversion_rate">{{  __('Conversion Rate') }}</label>
                  @if($isForeignCurrencyInvoice && ($used_conversion_rates = $invoice->payments->pluck('conversion_rate'))->count() > 0)
                    <span data-bs-toggle="tooltip" data-bs-html="true"
                      title="Previous rates: <br>
                      @foreach($used_conversion_rates as $conversion_rate)
                        {{floatval($conversion_rate)}}<br>
                      @endforeach"
                    >
                      <i class="fa-solid fa-circle-info"></i>
                    </span>
                  @endif
                  <div class="input-group col-12 col-md-4">
                    <span class="input-group-text">1 {{$invoiceRawCurrency}} = </span>
                    {!! Form::number('conversion_rate', @floatval($invoicePayment->conversion_rate), ['class' => 'form-control']) !!}
                    <span class="input-group-text">{{ cCurrency()->getSymbol() }}</span>
                  </div>
                </div>

              </div>
            </div>

            <div class="row">
              {{-- paying amount h3 --}}
              <div>
                Total Paying Amount
                <h2>
                  <span class="total-paying-amount">{{ cMoney(isset($invoicePayment) ? ($invoicePayment->amount / $invoicePayment->conversion_rate) : 0, $invoice->currency, true) }}</span>
                </h2>
                <input type="hidden" name="total_paid_amount">
                <span>
                  Vat Amount: <span class="total-paying-vat-amount fw-bold">{{ cMoney(@$invoicePayment?->totalVatPaidAmount() ?? 0, $invoice->currency, true) }}</span>
                  <br>
                  Excluding VAT Amount : <span class="total-paying-pxvat-amount fw-bold">{{ cMoney(@$invoicePayment?->totalExcludingVatPaidAmount() ?? 0, $invoice->currency, true) }}</span>
                </span>
              </div>
            </div>
          </div>

          <hr class="my-4">

          <div class="row">
            <div class="col-12">
              <button type="button" class="btn btn-primary btn-sm ms-2 float-end {{ (@$invoicePayment || !$isForeignCurrencyInvoice) ? '' : 'd-none' }} reset-auto-fill-payable-amount">Reset Amounts</button>
              <button type="button" class="btn btn-primary btn-sm float-end {{ (@$invoicePayment || !$isForeignCurrencyInvoice) ? '' : 'd-none' }} auto-fill-payable-amount">Auto Fill Amount</button>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table mt-4">
              <thead>
                <tr>
                  <th scope="col">Invoice Item</th>
                  <th scope="col">Payable VAT Amount</th>
                  <th scope="col">Payable Excluding VAT Amount</th>
                  <th scope="col">Paid VAT Amount</th>
                  <th scope="col">Paid Excluding VAT Amount</th>
                </tr>
              </thead>
              <tbody>
                @forelse ($invoice->items as $item)
                  @php
                    $item->conversion_rate = $applicable_conversion_rate;
                    $item->setIsBaseCurrency(false);
                    if(isset($invoicePayment)) {
                      $paidItem = $invoicePayment->paidItems->firstWhere('invoice_item_id', $item->id);
                      $item->this_vat_paid_amount = $paidItem?->vat_paid_amount / $invoicePayment->conversion_rate;
                      $item->this_excluding_vat_paid_amount = $paidItem?->excluding_vat_paid_amount / $invoicePayment->conversion_rate;
                    }
                  @endphp
                  <tr>
                    <td scope="row">
                      {{$item->name ? : $item->invoiceable->name}}
                      <br>
                      <small>{{$item->description}}</small>
                    </td>
                    {{-- payable vat --}}
                    <td>
                      <span class="converted_amount payable-vat-amount" data-amount="{{($payableVatAmount = (($item->payableVatAmount()) / $item->conversion_rate) + $item->this_vat_paid_amount)}}">
                        @cMoney($payableVatAmount, $invoice->currency, true)
                      </span>

                      <br>
                      <span class="payable-base-amount">
                      </span>
                    </td>

                    {{-- payable excluding vat --}}
                    <td>
                      <span class="converted_amount pxvat-amount" data-amount="{{($pxvatAmount = (($item->pxvatAmount()) / $item->conversion_rate) + $item->this_excluding_vat_paid_amount)}}">
                        @cMoney($pxvatAmount, $invoice->currency, true)
                      </span>
                      <br>
                      <span class="payable-base-amount">
                      </span>
                    </td>

                    {{-- paying vat --}}
                    <td>
                      <div class="input-group">
                        <input type="number" name="{{'invoice_items[' . $item->id .'][vat_paid_amount]'}}" value="{{ $item->this_vat_paid_amount ?? 0 }}" class="form-control paying-vat-amount" @disabled((!isset($invoicePayment) && $isForeignCurrencyInvoice) || !$payableVatAmount)>
                        <span class="input-group-text paying-currency">{{ $invoiceRawCurrency }}</span>
                      </div>
                    </td>

                    {{-- paying excluding vat --}}
                    <td>
                      <div class="input-group">
                        <input type="number" name="{{'invoice_items[' . $item->id .'][excluding_vat_paid_amount]'}}" value="{{ $item->this_excluding_vat_paid_amount ?? 0 }}" class="form-control paying-pxvat-amount" @disabled((!isset($invoicePayment) && $isForeignCurrencyInvoice) || !$pxvatAmount)>
                        <span class="input-group-text paying-currency">{{ $invoiceRawCurrency }}</span>
                      </div>
                    </td>
                  </tr>
                @empty
                @endforelse
              </tbody>
            </table>
          </div>

          <div class="modal-footer">
            <div class="btn-flt float-end">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
                <button type="submit" data-form="ajax-form" data-form-id="invoice-partial-payment-form" class="btn btn-primary">{{ __('Save') }}</button>
            </div>
          </div>
        </form>
      {{-- </div>
    </div> --}}
  </div>
{{--
@endsection
@push('scripts') --}}
    <script nonce="{{ csp_nonce() }}">
    window.isForeignCurrencyInvoice = "{{$isForeignCurrencyInvoice}}";
    // on change conversion rate, updateInvoiceCurrencyAmounts with new conversion rate and currency
    $(document).on('keyup change', 'input[name="conversion_rate"], select[name="currency"]', function() {
      if($('input[name="conversion_rate"]').val() < 0){
        $(this).val(Math.abs($(this).val()));
      }

      // if conversion reate is set, show auto-fill-payable-amount
      if($('input[name="conversion_rate"]').val() > 0){
        $('.auto-fill-payable-amount').removeClass('d-none');
        $('.reset-auto-fill-payable-amount').removeClass('d-none');
      }else{
        $('.auto-fill-payable-amount').addClass('d-none');
        $('.reset-auto-fill-payable-amount').addClass('d-none');
      }

      updateInvoiceCurrencyAmounts();
    });

    $(document).on('keyup change', 'select[name="currency"]', function() {
      // update paying-currency text
      $('.paying-currency').text($(this).val());
      updateInvoiceCurrencyAmounts();
    });

    $(document).on('keyup change', '.paying-vat-amount, .paying-pxvat-amount', function() {
      // convert negative value to non negative
      if(parseFloat($(this).val()) < 0){
        $(this).val(Math.abs($(this).val()));
      }
      updateInvoiceCurrencyAmounts();
    });

    // auto fill payable amount
    $(document).on('click', '.auto-fill-payable-amount', function() {
      var conversionRate = $('input[name="conversion_rate"]').val();
      var isBaseCurrencySelected = $('select[name="currency"]').find(':selected').data('is-base');

      if(!isBaseCurrencySelected){
        conversionRate = 1;
      }

      $('.paying-vat-amount').each(function() {
        $(this).val((parseFloat($(this).closest('tr').find('.payable-vat-amount').data('amount')) * conversionRate).toFixed(2));
      });
      $('.paying-pxvat-amount').each(function() {
        $(this).val((parseFloat($(this).closest('tr').find('.pxvat-amount').data('amount')) * conversionRate).toFixed(2));
      });

      updateInvoiceCurrencyAmounts();
    });

    // reset auto fill payable amount
    $(document).on('click', '.reset-auto-fill-payable-amount', function() {
      $('.paying-vat-amount').val(0);
      $('.paying-pxvat-amount').val(0);
      updateInvoiceCurrencyAmounts();
    });

    function updateInvoiceCurrencyAmounts() {
      let invoiceCurrency = $('select[name="currency"]').find(':selected').data('symbol');
      // currency option text which have data-is-base is base currency
      let baseCurrency = $('select[name="currency"]').find('[data-is-base]').val();
      let conversionRate = $('input[name="conversion_rate"]').val();

      if(conversionRate && conversionRate > 0){
        // remove disabled from paying amount if payable amount is > 0
        $('.payable-vat-amount').each(function() {
          if(parseFloat($(this).data('amount')) > 0){
            $(this).closest('tr').find('.paying-vat-amount').prop('disabled', false);
          }
        });
        $('.pxvat-amount').each(function() {
          if(parseFloat($(this).data('amount')) > 0){
            $(this).closest('tr').find('.paying-pxvat-amount').prop('disabled', false);
          }
        });
      }else if (isForeignCurrencyInvoice){
        // add disabled to paying amount fields
        if(!conversionRate < 0){
          $('input[name="conversion_rate"]').val(0);
        }
        $('.paying-vat-amount').prop('disabled', true);
        $('.paying-pxvat-amount').prop('disabled', true);
      }

      // if(! $('select[name="currency"]').find(':selected').data('is-base')){
      //   conversionRate = 1;
      // }

      // update items amounts
      $('.converted_amount').each(function() {
        let amount = $(this).data('amount');
        let newAmount =  $(this).data('amount') * conversionRate;
        // $(this).text(invoiceCurrency + newAmount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));

        // update base amount
        if(isForeignCurrencyInvoice){
          $(this).parent().find('.payable-base-amount').text(baseCurrency + newAmount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
        }else{
          $(this).parent().find('.payable-base-amount').text('');
        }
      });

      //update total paying amount
      let totalPayingAmount = 0;
      $('.paying-vat-amount').each(function() {
        totalPayingAmount += parseFloat($(this).val()) || 0;
      });
      $('.paying-pxvat-amount').each(function() {
        totalPayingAmount += parseFloat($(this).val()) || 0;
      });
      $('.total-paying-amount').text(invoiceCurrency + totalPayingAmount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));

      //update total paying vat amount
      let totalPayingVatAmount = 0;
      $('.paying-vat-amount').each(function() {
        totalPayingVatAmount += parseFloat($(this).val()) || 0;
      });
      $('.total-paying-vat-amount').text(invoiceCurrency + totalPayingVatAmount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));

      //update total paying pxvat amount
      let totalPayingPxvatAmount = 0;
      $('.paying-pxvat-amount').each(function() {
        totalPayingPxvatAmount += parseFloat($(this).val()) || 0;
      });
      $('.total-paying-pxvat-amount').text(invoiceCurrency + totalPayingPxvatAmount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
    }
    </script>
{{-- @endpush --}}