@extends('admin.admin_dashboard')
@section('admin')

{{-- Select2 & jQuery --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="page-content">
  <div class="container-fluid">
    <div class="page-breadcrumb bg-primary text-white rounded p-3 mb-4 d-flex justify-content-between align-items-center">
<<<<<<< HEAD
      <h5 class="mb-0">New General Payment Voucher</h5>
=======
      <div>
        <h5 class="mb-0">New General Payment Voucher</h5>
        @if(!empty($selectedFarmer))
          <small class="opacity-75">Advance for {{ $selectedFarmer->farmer_number }} — {{ $selectedFarmer->farmer_fname }} {{ $selectedFarmer->farmer_lname }}</small>
        @endif
      </div>
>>>>>>> origin/main
      <a href="{{ route('general.vouchers.index') }}" class="btn btn-light">
        <i class="bx bx-chevron-left me-1"></i> Back
      </a>
    </div>

    <div class="card shadow-sm rounded-lg border-0">
      <div class="card-body p-4">
        @if($errors->any())
          <div class="alert alert-danger"><ul class="mb-0">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
          </ul></div>
        @endif

        <form method="POST" action="{{ route('general.vouchers.store') }}">
          @csrf

          {{-- Date / Reference / Bank --}}
          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <label class="form-label">Date</label>
              <input type="date" name="entry_date" class="form-control datepicker"
                     value="{{ old('entry_date', now()->toDateString()) }}" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Reference</label>
              <input type="text" name="reference" class="form-control"
                     value="{{ old('reference') }}" required>
              @error('reference')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4">
              <label class="form-label">Bank Account</label>
              <select name="bank_account_id" class="form-select js-bank" required>
                <option value="" disabled selected>— Select bank account —</option>
                @foreach($bankAccounts as $b)
                  <option value="{{ $b->id }}" @selected(old('bank_account_id')==$b->id)>
                    {{ $b->code }} — {{ $b->name }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>

          <hr>

          {{-- Expense Lines --}}
          <h6 class="mb-3">Expense Lines</h6>
          <div class="table-responsive mb-2">
            <table class="table table-striped table-bordered align-middle" id="linesTable">
              <thead class="table-dark">
                <tr>
                  <th>Account</th>
                  <th class="text-end">Amount</th>
                  <th>Description</th>
                  <th class="text-center" style="width:1%"></th>
                </tr>
              </thead>
              <tbody>
                <tr class="line-row">
                  <td>
                    <select name="lines[0][account_id]" class="form-select js-expense" required>
                      <option value="">Select expense</option>
                      @foreach($expenseAccounts as $e)
<<<<<<< HEAD
                        <option value="{{ $e->id }}">{{ $e->code }} — {{ $e->name }}</option>
=======
                        <option value="{{ $e->id }}" @selected(old('lines.0.account_id', $selectedAccountId ?? null) == $e->id)>{{ $e->code }} — {{ $e->name }}</option>
>>>>>>> origin/main
                      @endforeach
                    </select>
                  </td>
                  <td>
                    <input type="text" name="lines[0][amount]"
                           class="form-control text-end amount-field"
                           value="0.00" required>
                  </td>
                  <td>
<<<<<<< HEAD
                    <input type="text" name="lines[0][description]" class="form-control">
=======
                    <input type="text" name="lines[0][description]" class="form-control"
                           value="{{ old('lines.0.description', $defaultLineDescription ?? '') }}">
>>>>>>> origin/main
                  </td>
                  <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger js-remove" disabled>&times;</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          {{-- Live Total --}}
          <div class="text-end mb-4">
            <strong>Total: UGX <span id="totalAmount">0.00</span></strong>
          </div>

          {{-- Actions --}}
          <button type="button" id="addLineBtn" class="btn btn-sm btn-secondary mb-4 me-2">
            <i class="bx bx-plus me-1"></i> Add Line
          </button>
          <button type="button" class="btn btn-sm btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#addAccountModal">
            <i class="bx bx-book-open me-1"></i> Add Ledger
          </button>
          <button 
  type="button" 
  class="btn btn-sm btn-primary mb-4"
  onclick="window.location='{{ route('add.account.form') }}'">
  <i class="bx bx-book-open me-1"></i> Add Ledger
</button>

           

          <div class="text-end">
            <button type="submit" class="btn btn-success px-4">
              <i class="bx bx-save me-1"></i> Save Voucher
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- Add Ledger Modal --}}
<div class="modal fade" id="addAccountModal" tabindex="-1" aria-labelledby="addAccountModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form id="addAccountForm" action="{{ route('add.account.store') }}" method="POST">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title">New Account</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Account Code</label>
              <input name="code" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Account Name</label>
              <input name="name" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Account Type</label>
              <select name="type" class="form-select select2-modal" required>
                <option value="" disabled selected>— Choose type —</option>
                @foreach(['asset','liability','equity','income','expense'] as $t)
                  <option value="{{ $t }}">{{ ucfirst($t) }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Parent Account</label>
              <select name="parent_id" class="form-select select2-modal">
                <option value="" selected>— Select parent —</option>
                @foreach($allAccounts as $a)
                  <option value="{{ $a->id }}">{{ $a->full_name }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div id="entitySectionModal" class="mt-4" style="display:none;">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">Entity Type</label>
                <select name="entity_type" class="form-select select2-modal">
                  <option disabled selected>Select Entity Type</option>
                  @foreach($entityTypes as $key=>$lbl)
                    <option value="{{ $key }}">{{ $lbl }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label">Select Entity</label>
                <select name="entity_id" class="form-select select2-modal">
                  <option disabled selected>Select Entity</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Save Account</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
$(function(){
  // cache tbody + template
  const $tbody    = $('#linesTable tbody');
  const $template = $tbody.find('tr.line-row').first().clone();
  let rowIndex    = 1;

  // init Select2
  $('.js-bank, .js-expense, .select2-modal').select2({ theme:'bootstrap-5', width:'100%' });

<<<<<<< HEAD
=======
  @if(!empty($selectedAccountId))
  $('select.js-expense').first().val('{{ $selectedAccountId }}').trigger('change');
  @endif

>>>>>>> origin/main
  // enable/disable remove buttons
  function renderRemove(){
    const $rows = $tbody.children('tr');
    $rows.find('.js-remove').prop('disabled', $rows.length === 1);
  }

  // remove row
  $tbody.on('click', '.js-remove', function(){
    $(this).closest('tr').remove();
    renderRemove();
    $('.amount-field').first().trigger('input');
  });

  // add row
  $('#addLineBtn').click(function(){
    const $row = $template.clone();
    $row.find('select.js-expense')
        .attr('name', `lines[${rowIndex}][account_id]`)
        .val(null)
        .select2({ theme:'bootstrap-5', width:'100%' });
    $row.find('input[name$="[amount]"]')
        .attr('name', `lines[${rowIndex}][amount]`)
        .val('0.00')
        .addClass('amount-field');
    $row.find('input[name$="[description]"]')
        .attr('name', `lines[${rowIndex}][description]`)
        .val('');
    $tbody.append($row);
    rowIndex++;
    renderRemove();
    $('.amount-field').first().trigger('input');
  });

  renderRemove();

  // comma-formatting + live total
  function formatWithCommas(str) {
    const parts = str.replace(/,/g,'')
                     .match(/^(\d*)(\.\d{0,2})?$/);
    if (!parts) return '';
    return parts[1].replace(/\B(?=(\d{3})+(?!\d))/g, ',') + (parts[2]||'');
  }
  $('#linesTable').on('input', '.amount-field', function(){
    let cursor = this.selectionStart;
    const oldVal = this.value;
    let cleaned = oldVal.replace(/[^0-9.]/g,'');
    const bits = cleaned.split('.');
    if (bits.length>2) cleaned = bits.shift() + '.' + bits.join('');
    const formatted = formatWithCommas(cleaned);
    this.value = formatted;
    const shift = formatted.length - oldVal.length;
    this.setSelectionRange(cursor+shift, cursor+shift);

    // recalc total
    let total = 0;
    $('.amount-field').each(function(){
      total += parseFloat(this.value.replace(/,/g,''))||0;
    });
    $('#totalAmount').text(total.toLocaleString(undefined,{
      minimumFractionDigits:2, maximumFractionDigits:2
    }));
  });
  // trigger once
  $('.amount-field').trigger('input');

  // AJAX add ledger
  $('#addAccountForm').submit(function(e){
    e.preventDefault();
    const $f = $(this);
    $.post($f.attr('action'), $f.serialize(), function(data){
      $('#addAccountModal').modal('hide');
      $('select.js-expense').append(
        new Option(data.full_name, data.id, false, false)
      );
      $('#addLineBtn').click();
      const $last = $('select.js-expense').last();
      $last.append(new Option(data.full_name, data.id, true, true)).trigger('change');
      $f.trigger('reset').find('.select2-modal').val(null).trigger('change');
    }).fail(xhr=>alert(xhr.responseJSON?.message||xhr.statusText));
  });

  // toggle entity section
  const entityOpts = @json($entityOptions);
  $('select[name=parent_id]').change(function(){
    const opts = entityOpts[$(this).val()]||[];
    $('#entitySectionModal').toggle(opts.length>0);
    const $ent = $('[name=entity_id]').empty()
                  .append('<option disabled selected>Select Entity</option>');
    opts.forEach(o=> $ent.append(`<option value="${o.id}">${o.text}</option>`));
  });
});
</script>

@endsection