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

{{-- jQuery & Select2 CSS/JS --}}
<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>

@php
  use \Carbon\Carbon;

  // prepare line‑item data
  $lines = old('lines')
      ?? $bill->lines->map(fn($l)=>[
           'account_id'=>$l->account_id,
           'description'=>$l->description,
           'quantity'=>$l->quantity,
           'unit_price'=>$l->unit_price,
         ])->toArray();
@endphp

<div class="page-content">
  <!-- Breadcrumb & Title -->
  <div class="page-breadcrumb d-flex flex-column flex-sm-row
              align-items-center justify-content-between mb-3 p-3
              bg-primary text-white rounded shadow-sm">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0 p-0">
        <li class="breadcrumb-item">
          <a href="{{ route('ap.bills.index') }}" class="text-white">
            <i class="bx bx-arrow-back"></i>
          </a>
        </li>
        <li class="breadcrumb-item active text-white">
          Edit Vendor Bill #{{ $bill->id }}
        </li>
      </ol>
    </nav>
    <h5 class="mb-0">Edit Bill #{{ $bill->id }}</h5>
  </div>

  <div class="card shadow-sm rounded-lg border-0">
    <div class="card-body p-4">
      {{-- Validation Errors --}}
      @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('ap.bills.update',$bill->id) }}">
        @csrf @method('PUT')

        {{-- Header --}}
        <div class="row g-3 mb-4">
          <div class="col-md-4">
            <label class="form-label">Reference</label>
            <input
              type="text"
              name="reference"
              class="form-control"
              value="{{ old('reference',$bill->reference) }}"
            >
            @error('reference')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <label class="form-label">Vendor</label>
            <select name="vendor_id" class="form-select vendor-select">
              <option value="">Select vendor…</option>
              @foreach($vendors as $id=>$name)
                <option
                  value="{{ $id }}"
                  @selected(old('vendor_id',$bill->vendor_id)==$id)
                >{{ $name }}</option>
              @endforeach
            </select>
            @error('vendor_id')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <label class="form-label">Bill Date</label>
            <input
              type="date"
              name="bill_date"
              class="form-control"
              value="{{ old('bill_date',
                $bill->bill_date
                  ? Carbon::parse($bill->bill_date)->format('Y-m-d')
                  : ''
              ) }}"
            >
            @error('bill_date')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <label class="form-label">Due Date</label>
            <input
              type="date"
              name="due_date"
              class="form-control"
              value="{{ old('due_date',
                $bill->due_date
                  ? Carbon::parse($bill->due_date)->format('Y-m-d')
                  : ''
              ) }}"
            >
            @error('due_date')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-12">
            <label class="form-label">Notes</label>
            <textarea name="notes" class="form-control">{{ old('notes',$bill->notes) }}</textarea>
          </div>
        </div>

        <hr>

        {{-- Line Items --}}
        <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>Description</th>
                <th class="text-end">Qty</th>
                <th class="text-end">Unit Price</th>
                <th style="width:1%"></th>
              </tr>
            </thead>
            <tbody>
              {{-- existing (or old) lines --}}
              @foreach($lines as $i => $line)
              <tr>
                <td>
                  <select name="lines[{{ $i }}][account_id]" class="form-select account-select">
                    <option value="">Select account…</option>
                    @foreach($accounts as $ac)
                      <option
                        value="{{ $ac->id }}"
                        @selected($line['account_id']==$ac->id)
                      >{{ $ac->full_name }}</option>
                    @endforeach
                  </select>
                  @error("lines.$i.account_id")<div class="text-danger small">{{ $message }}</div>@enderror
                </td>
                <td>
                  <input
                    type="text"
                    name="lines[{{ $i }}][description]"
                    class="form-control"
                    value="{{ $line['description'] }}"
                  >
                  @error("lines.$i.description")<div class="text-danger small">{{ $message }}</div>@enderror
                </td>
                <td>
                  <input
                    type="number" step="1"
                    name="lines[{{ $i }}][quantity]"
                    class="form-control text-end"
                    value="{{ $line['quantity'] }}"
                  >
                  @error("lines.$i.quantity")<div class="text-danger small">{{ $message }}</div>@enderror
                </td>
                <td>
                  <input
                    type="number" step="0.01"
                    name="lines[{{ $i }}][unit_price]"
                    class="form-control text-end"
                    value="{{ $line['unit_price'] }}"
                  >
                  @error("lines.$i.unit_price")<div class="text-danger small">{{ $message }}</div>@enderror
                </td>
                <td class="text-center">
                  <button
                    type="button"
                    class="btn btn-sm btn-danger remove-line-btn"
                    {{ $i===0?'disabled':'' }}
                  >&times;</button>
                </td>
              </tr>
              @endforeach
            </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 type="submit" class="btn btn-primary px-4">
            <i class="bx bx-save me-1"></i> Update Bill
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- Dynamic Add/Remove Line + Select2 Initialization --}}
<script>
$(function(){
  const opts = {
    theme:       'bootstrap-5',
    placeholder: 'Select…',
    allowClear:  true,
    width:       '100%'
  };

  // build a JS string of your <option> list
  const accountOptions = `
    <option value="">Select account…</option>
    @foreach($accounts as $ac)
      <option value="{{ $ac->id }}">{{ $ac->full_name }}</option>
    @endforeach
  `;

  // init vendor dropdown
  $('.vendor-select').select2(opts);
  // init all existing account dropdowns
  $('.account-select').select2(opts);

  let idx = {{ count($lines) }};  // next index for new lines

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

  $('#addLineBtn').on('click', () => {
    // create a brand‑new empty row
    const row = `
<tr>
  <td>
    <select name="lines[${idx}][account_id]" class="form-select account-select">
      ${accountOptions}
    </select>
  </td>
  <td>
    <input type="text"
           name="lines[${idx}][description]"
           class="form-control"
           value="">
  </td>
  <td>
    <input type="number" step="1"
           name="lines[${idx}][quantity]"
           class="form-control text-end"
           value="1">
  </td>
  <td>
    <input type="number" step="0.01"
           name="lines[${idx}][unit_price]"
           class="form-control text-end"
           value="0.00">
  </td>
  <td class="text-center">
    <button type="button"
            class="btn btn-sm btn-danger remove-line-btn">
      &times;
    </button>
  </td>
</tr>`;
    // append and init Select2 on just that new select
    $('#linesTable tbody').append(row);
    $('#linesTable tbody tr:last .account-select').select2(opts);
    idx++;
    bindRemove();
  });

  bindRemove();
});
</script>

@endsection