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

{{-- jQuery & Select2 --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="page-content">
  <div class="page-breadcrumb d-flex justify-content-between align-items-center mb-3 p-3 bg-primary text-white rounded shadow-sm">
    <div>
      <a href="{{ route('fx.journals.index') }}" class="btn btn-light me-2">
        <i class="bx bx-arrow-back"></i>
      </a>
      <span class="h5 text-white">New FX Journal Entry</span>
    </div>
  </div>

  <div class="card shadow-sm rounded-lg border-0">
    <div class="card-body p-4">
      <form method="POST" action="{{ route('fx.journals.store') }}">
        @csrf

        {{-- Header --}}
        <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" value="{{ old('entry_date') }}">
            @error('entry_date')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <label class="form-label">Reference</label>
            <input type="text" name="reference" class="form-control" value="{{ old('reference') }}">
            @error('reference')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <label class="form-label">Description</label>
            <input type="text" name="description" class="form-control" value="{{ old('description') }}">
          </div>
        </div>

        {{-- Lines --}}
        <h6 class="mb-3">Line Items</h6>
        <div class="table-responsive mb-3">
          <table class="table table-hover table-striped table-bordered align-middle" id="linesTable">
            <thead class="table-dark">
              <tr>
                <th>Account</th><th class="text-end">Debit</th><th class="text-end">Credit</th>
                <th>Currency</th><th class="text-end">FX Rate</th><th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <select name="lines[0][account_id]" class="form-select account-select">
                    <option value="">Select account…</option>
                    @foreach($accounts as $a)
                      <option value="{{ $a->id }}">{{ $a->full_name }}</option>
                    @endforeach
                  </select>
                  @error('lines.0.account_id')<div class="text-danger small">{{ $message }}</div>@enderror
                </td>
                <td><input type="number" step="0.01" name="lines[0][debit]"  class="form-control text-end"></td>
                <td><input type="number" step="0.01" name="lines[0][credit]" class="form-control text-end"></td>
                <td>
                  <select name="lines[0][currency_id]" class="form-select currency-select">
                    <option value="">Select…</option>
                    @foreach($currencies as $c)
                      <option value="{{ $c->id }}">{{ $c->code }}</option>
                    @endforeach
                  </select>
                </td>
                <td><input type="number" step="0.000001" name="lines[0][fx_rate]" class="form-control text-end" value="{{ old('lines.0.fx_rate',1) }}"></td>
                <td class="text-center">
                  <button type="button" class="btn btn-sm btn-danger remove-line-btn" disabled>&times;</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <button type="button" id="addLineBtn" class="btn btn-sm btn-light mb-4">
          <i class="bx bx-plus me-1"></i> Add Line
        </button>

        <div class="text-end">
          <button class="btn btn-success px-4">
            <i class="bx bx-save me-1"></i> Post Journal
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
$(function(){
  const opts = { theme:'bootstrap-5', placeholder:'Select…', allowClear:true, width:'100%' };

  // Keep a pristine clone of the first row _before_ initializing Select2:
  const $first = $('#linesTable tbody tr:first');
  const $tpl   = $first.clone();

  $first.find('.account-select, .currency-select').select2(opts);

  let idx = 1;
  function bindRemove(){
    $('#linesTable .remove-line-btn')
      .prop('disabled', $('#linesTable tbody tr').length===1)
      .off('click')
      .on('click', function(){
        $(this).closest('tr').remove();
        bindRemove();
      });
  }

  $('#addLineBtn').click(function(){
    const $row = $tpl.clone();
    $row.find('[name]').each(function(){
      // swap [0] → [idx]
      let nm = $(this).attr('name');
      $(this).attr('name', nm.replace(/\[\d+\]/, `[${idx}]`));
    });
    $('#linesTable tbody').append($row);
    $row.find('.account-select, .currency-select').select2(opts);
    idx++; bindRemove();
  });

  bindRemove();
});
</script>
@endsection