@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">
      <h5 class="mb-0">New General Payment Voucher</h5>
      <a href="{{ route('payments.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('payments.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">Receipt No.</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">Received By (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>

          {{-- Payment Lines (Receipts) --}}
          <h6 class="mb-3">Receipt 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 income account</option>
                      @foreach($expenseAccounts as $e)
                        <option value="{{ $e->id }}">{{ $e->code }} — {{ $e->name }}</option>
                      @endforeach
                    </select>
                  </td>
                  <td>
                    <input type="text" name="lines[0][amount]" class="form-control text-end amount-field" value="0.00" required>
                  </td>
                  <td>
                    <input type="text" name="lines[0][description]" class="form-control">
                  </td>
                  <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger js-remove" disabled>&times;</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="text-end mb-4">
            <strong>Total Received: 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>

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

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

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

  function renderRemove(){
    const $rows = $tbody.children('tr');
    $rows.find('.js-remove').prop('disabled', $rows.length === 1);
  }

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

  $('#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();

  function formatWithCommas(str) {
    const parts = str.replace(/,/g,'').match(/^\d*(\.\d{0,2})?$/);
    if (!parts) return '';
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }

  $('#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);

    let total = 0;
    $('.amount-field').each(function(){
      total += parseFloat(this.value.replace(/,/g,''))||0;
    });
    $('#totalAmount').text(total.toLocaleString(undefined, { minimumFractionDigits:2, maximumFractionDigits:2 }));
  });
});
</script>
@endsection