{{-- resources/views/generalvouchers/edit.blade.php --}}
@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">Edit Voucher {{ $voucher->reference }}</h5>
      <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.update', $voucher->id) }}">
          @csrf @method('PUT')

          {{-- Date / Reference / Bank --}}
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">Date</label>
              <input type="date" name="entry_date" class="form-control datepicker"
                     value="{{ old('entry_date', $voucher->entry_date->toDateString()) }}"
                     required>
            </div>
            <div class="col-md-3">
              <label class="form-label">Reference</label>
              <input type="text" name="reference" class="form-control"
                     value="{{ old('reference', $voucher->reference) }}"
                     required readonly>
            </div>
            <div class="col-md-6">
              <label class="form-label">Bank Account</label>
              <select name="bank_account_id" class="form-select js-bank"
                      required>
                <option value="" disabled>— Select bank account —</option>
                @foreach($bankAccounts as $b)
                  <option value="{{ $b->id }}"
                    @selected(old('bank_account_id',
                      $voucher->lines->where('credit','>',0)->first()->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-3">
            <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>
                @php
                  // how many existing expense‐lines we start with
                  $initial = $voucher->lines->where('debit','>',0)->count();
                @endphp
                @foreach($voucher->lines->where('debit','>',0)->values() as $i => $line)
                  <tr class="line-row">
                    <td>
                      <select
                        name="lines[{{ $i }}][account_id]"
                        class="form-select js-expense"
                        required
                      >
                        <option value="">Select expense</option>
                        @foreach($expenseAccounts as $e)
                          <option
                            value="{{ $e->id }}"
                            @selected(old("lines.$i.account_id", $line->account_id) == $e->id)
                          >
                            {{ $e->code }} — {{ $e->name }}
                          </option>
                        @endforeach
                      </select>
                    </td>
                    <td>
                      <input
                        type="number"
                        name="lines[{{ $i }}][amount]"
                        step="0.01"
                        class="form-control text-end"
                        value="{{ old("lines.$i.amount", $line->debit) }}"
                        required
                      >
                    </td>
                    <td>
                      <input
                        type="text"
                        name="lines[{{ $i }}][description]"
                        class="form-control"
                        value="{{ old("lines.$i.description", $line->memo) }}"
                      >
                    </td>
                    <td class="text-center">
                      <button
                        type="button"
                        class="btn btn-sm btn-danger js-remove"
                        @if($i===0) disabled @endif
                      >&times;</button>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

          <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>

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

{{-- Add Ledger Modal (same as your Create view) --}}
<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(){
  // 1) capture the **raw** HTML of the first row
  const $tbody  = $('#linesTable tbody');
  const rawTpl  = $tbody.find('tr.line-row').first()[0].outerHTML;
  let   idx     = {{ $initial }};

  // 2) now enhance all existing selects
  $('.js-bank, .js-expense, .select2-modal')
    .select2({ theme:'bootstrap-5', width:'100%' });

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

  // 3) remove‐row handler
  $tbody.on('click','.js-remove',function(){
    $(this).closest('tr').remove();
    refreshRemoveButtons();
  });

  // 4) add‐row handler
  $('#addLineBtn').on('click',function(){
    // replace [n] with the next index
    const html = rawTpl.replace(/\[\d+\]/g,`[${idx}]`);
    const $new = $(html).appendTo($tbody);

    // fresh init on just that <select>
    $new.find('.js-expense')
        .select2({ theme:'bootstrap-5', width:'100%' });

    idx++;
    refreshRemoveButtons();
  });

  refreshRemoveButtons();

  // 5) AJAX for “Add Ledger” modal
  $('#addAccountForm').on('submit',function(e){
    e.preventDefault();
    const $f = $(this);
    $.post($f.attr('action'), $f.serialize(),function(data){
      $('#addAccountModal').modal('hide');
      // append to every expense select
      $('select.js-expense').append(
        new Option(data.full_name,data.id,false,false)
      );
      // auto–add a new line & pick the new ledger
      $('#addLineBtn').click();
      $('select.js-expense').last()
        .append(new Option(data.full_name,data.id,true,true))
        .trigger('change');
      // reset form
      $f[0].reset();
      $('.select2-modal').val(null).trigger('change');
    }).fail(xhr=>{
      alert(xhr.responseJSON?.message||xhr.statusText);
    });
  });

  // 6) show/hide “entity” fields in modal
  const entityOpts = @json($entityOptions);
  $('select[name=parent_id]').on('change',function(){
    const list = entityOpts[$(this).val()]||[];
    $('#entitySectionModal').toggle(list.length>0);
    const $e = $('[name=entity_id]').empty()
      .append('<option disabled selected>Select Entity</option>');
    list.forEach(o=>{
      $e.append(`<option value="${o.id}">${o.text}</option>`);
    });
  });
});
</script>

@endsection