@if ($invoice->id)
    {!! Form::model($invoice, ['route' => ['admin.invoices.update', $invoice], 'method' => 'PUT']) !!}
@else
    {!! Form::model($invoice, ['route' => ['admin.invoices.store'], 'method' => 'POST']) !!}
@endif

<div class="row">
    <div class="form-group  col-12">
      {{-- {{ Form::label('type', __('Type'), ['class' => 'col-form-label']) }} --}}
      <div class="row">
        <div class="col-md mb-md-0 mb-3">
          <div class="form-check custom-option custom-option-icon {{!$invoice->type || $invoice->type == 'Reqular' ? 'checked': ''}}">
            <label class="form-check-label custom-option-content" for="customRadioRegular">
              <span class="custom-option-body">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-building-skyscraper" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M3 21l18 0"></path>
                      <path d="M5 21v-14l8 -4v18"></path>
                      <path d="M19 21v-10l-6 -4"></path>
                      <path d="M9 9l0 .01"></path>
                      <path d="M9 12l0 .01"></path>
                      <path d="M9 15l0 .01"></path>
                      <path d="M9 18l0 .01"></path>
                  </svg>
                <span class="custom-option-title">Regular</span>
              </span>
              {!! Form::radio('type', 'Regular', false, ['class' => 'form-check-input', 'id' => 'customRadioRegular', 'checked']) !!}
            </label>
          </div>
        </div>
        <div class="col-md mb-md-0 mb-3">
          <div class="form-check custom-option custom-option-icon {{$invoice->type == 'Down Payment' ? 'checked': ''}}">
            <label class="form-check-label custom-option-content" for="customRadioDown Payment">
              <span class="custom-option-body">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                      <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                  </svg>
                <span class="custom-option-title"> Down Payment </span>
              </span>
              {!! Form::radio('type', 'Down Payment', false, ['class' => 'form-check-input', 'id' => 'customRadioDown Payment']) !!}
            </label>
          </div>
        </div>
        <div class="col-md mb-md-0 mb-3">
          <div class="form-check custom-option custom-option-icon {{$invoice->type == 'Expense' ? 'checked': ''}}">
            <label class="form-check-label custom-option-content" for="customRadioExpense">
              <span class="custom-option-body">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                      <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                  </svg>
                <span class="custom-option-title"> Expense </span>
              </span>
              {!! Form::radio('type', 'Expense', false, ['class' => 'form-check-input', 'id' => 'customRadioExpense']) !!}
            </label>
          </div>
        </div>
        <div class="col-md mb-md-0 mb-3">
          <div class="form-check custom-option custom-option-icon">
            <label class="form-check-label custom-option-content" for="customRadioCompetition">
              <span class="custom-option-body">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
                      <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                  </svg>
                <span class="custom-option-title"> Competition </span>
              </span>
              {!! Form::radio('type', 'Competition', false, ['class' => 'form-check-input', 'id' => 'customRadioCompetition']) !!}
            </label>
          </div>
        </div>
      </div>
      <small class="form-text text-muted">{{ __('Select invoice type') }}</small>
    </div>
    {!! Form::hidden('invoice_type', $invoice->type ? : 'Regular', ['id' => 'id-invoice-type']) !!}

    {{-- Client --}}
    <div class="form-group col-6 client_id_select tdf">
      {{ Form::label('company_id', __('Client'), ['class' => 'col-form-label']) }}
      {!! Form::select('company_id', $clients ?? [], @$invoice->bill_clientid, [
        'id' => 'client_id-select',
        'class' => 'form-select dependent-select required',
        'data-kt-select2' => 'true',
        'data-placeholder' => 'Select Client',
        'data-remote' => route('resource-select', ['groupedCompany', 'dependent_2_col' => 'creating-inv-type']),
        'data-dependent_2' => 'id-invoice-type',
        'data-allow-clear' => 'true'
        ]) !!}
    </div>

    {{-- Contract --}}
    <div class="form-group col-6 contract_id_select tdf">
      {{ Form::label('contract_id', __('Contract'), ['class' => 'col-form-label']) }}
      {!! Form::select('contract_id', $companies ?? [], @$invoice->contract_id, [
        'class' => 'form-select required',
        'data-kt-select2' => 'true',
        'data-remote' => route('resource-select', ['Contract', 'dependent' => 'company_id', 'dependent_2_col' => 'creating-inv-type']),
        'data-placeholder' => 'Select Contract',
        'data-dependent_id' => 'client_id-select',
        'data-dependent_2' => 'id-invoice-type',
        'data-allow-clear' => 'true'
      ]) !!}
    </div>

    {{-- Expense --}}
    <div class="form-group col-6 expense_id_select d-none tdf">
      {{ Form::label('expense_id', __('Expense'), ['class' => 'col-form-label']) }}
      {!! Form::select('expense_id', [], null, [
        'class' => 'form-select',
        'data-kt-select2' => 'true',
        'data-remote' => route('resource-select', ['Expense', 'must_have_remaining_amount' => true, 'filter_status' => '1', 'dependent' => 'company_id']),
        'data-placeholder' => 'Select Expense',
        'data-dependent_id' => 'client_id-select',
        'data-dependent_2' => 'id-invoice-type',
        'data-allow-clear' => 'true'
      ]) !!}
    </div>

    {{-- competition --}}
    <div class="form-group col-6 competition_id_select d-none competition-fields tdf">
      {{ Form::label('competition_id', __('Competition'), ['class' => 'col-form-label']) }}
      {!! Form::select('competition_id', [], null, [
        'class' => 'form-select',
        'data-kt-select2' => 'true',
        'data-remote' => route('resource-select', ['Competition']),
        'data-placeholder' => 'Select Competition',
        'id' => 'competition_id-select',
        'data-allow-clear' => 'true'
      ]) !!}
    </div>

    {{-- select participant --}}
    <div class="form-group col-6 participant_id_select d-none competition-fields tdf">
      {{ Form::label('participant_id', __('Participant'), ['class' => 'col-form-label']) }}
      {!! Form::select('participant_id', [], null, [
        'class' => 'form-select',
        'data-remote' => route('resource-select', ['CompetitionParticipant', 'must_have_remaining_amount' => true, 'filter_status' => 'Approved', 'filter_is_winner' => '1', 'dependent' => 'competition_id']),
        'data-kt-select2' => 'true',
        'data-placeholder' => 'Select Participant',
        'data-dependent_id' => 'competition_id-select',
        'data-allow-clear' => 'true'
      ]) !!}
    </div>

    {{-- invoice date --}}
    <div class="form-group col-6">
        {{ Form::label('invoice_date', __('Invoice Date'), ['class' => 'col-form-label']) }}
        {!! Form::text('invoice_date', null, ['class' => 'form-control flatpickr', 'placeholder' => __('Invoice Date')]) !!}
    </div>
    {{-- due date --}}
    <div class="form-group col-6">
        {{ Form::label('due_date', __('Due Date'), ['class' => 'col-form-label']) }}
        {!! Form::text('due_date', null, ['class' => 'form-control flatpickr', 'placeholder' => __('Due Date')]) !!}
    </div>
      {{-- amount --}}
      <div class="form-group col-6 downpayment-amount d-none tdf">
          {{ Form::label('subtotal', __('Amount'), ['class' => 'col-form-label']) }}
          <div class="dropdown open d-inline">
            <span data-bs-toggle="dropdown" aria-haspopup="true">
                <i class="fas fa-calculator"></i>
            </span>
            <div class="dropdown-menu p-3">
              <div class="mb-3" data-content="percent-cal">
                <label for="percent-value" class="form-label">Percentage (Balance: <span id="contract-remaining-balance">0</span>)</label>
                <input type="number" name="percent-value" id="percent-value" class="form-control" placeholder="10%">
              </div>
            </div>
          </div>
          {!! Form::number('subtotal', null, ['class' => 'form-control', 'placeholder' => __('Amount')]) !!}
      </div>
      {{-- description --}}
      <div class="form-group col-6 downpayment-amount d-none">
          {{ Form::label('description', __('Description'), ['class' => 'col-form-label']) }}
          {!! Form::text('description', null, ['class' => 'form-control', 'placeholder' => __('Description')]) !!}
      </div>
</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" class="btn btn-primary">{{ __('Save') }}</button>
    </div>
</div>
{!! Form::close() !!}
</div>
<script nonce="{{ csp_nonce() }}">
  $(document).on('change', '[name="type"]', function(){
    $(this).parents('.form-check').addClass('checked');
    $(this).parents('.form-check').parent().siblings().find('.form-check').removeClass('checked');
    $('#id-invoice-type').val($(this).val());

    $('.tdf').addClass('d-none');

    if($(this).val() == 'Regular') {
      $('.client_id_select').removeClass('d-none');
      $('.contract_id_select').removeClass('d-none');
    } else if ($(this).val() == 'Down Payment') {
      $('.client_id_select').removeClass('d-none');
      $('.contract_id_select').removeClass('d-none');
      $('.downpayment-amount').removeClass('d-none');
    } else if ($(this).val() == 'Expense') {
      $('.client_id_select').removeClass('d-none');
      $('.expense_id_select').removeClass('d-none');
    } else if ($(this).val() == 'Competition') {
      $('.competition-fields').removeClass('d-none');
    }
  })

  $(document).on('change', '[name="contract_id"]', function(){
    var contract_id = $(this).val();
    if(contract_id)
    $.ajax({
      url: route('admin.contracts.show', {contract: contract_id, getjson: true}),
      type: 'GET',
      success: function(data){
        $('#contract-remaining-balance').text(data.value);
      }
    })
  });
  $(document).on('change keyup', '#percent-value', function(){
    var percent = $(this).val();
    var balance = $('#contract-remaining-balance').text();
    var amount = (balance * percent) / 100;
    $('[name="subtotal"]').val(amount);
  })
</script>