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

<div class="page-content">
  <div class="container-fluid">

    {{-- 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> Back</a>
          </li>
          <li class="breadcrumb-item active text-white" aria-current="page">New Vendor Bill</li>
        </ol>
      </nav>
      <h5 class="mb-0">New Vendor Bill</h5>
    </div>

    <div class="card shadow border-0 rounded">
      <div class="card-body p-4">

        {{-- Validation Errors --}}
        @if($errors->any())
        <div class="alert alert-danger">
          <ul class="mb-0">
          @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
          @endforeach
          </ul>
        </div>
        @endif

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

          {{-- Header Fields --}}
          <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') }}">
              @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')==$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') }}">
              @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') }}">
              @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') }}</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 class="text-end">Qty</th>
                  <th class="text-end">Unit Price</th>
                  <th>Description</th>
                  <th class="text-center" style="width:1%"></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 $ac)
                        <option value="{{ $ac->id }}">{{ $ac->full_name }}</option>
                      @endforeach
                    </select>
                    @error('lines.0.account_id')<div class="text-danger small">{{ $message }}</div>@enderror
                  </td>
                  <td>
                    <input type="number" step="1" name="lines[0][quantity]" class="form-control text-end" value="{{ old('lines.0.quantity',1) }}">
                  </td>
                  <td>
                    <input type="number" step="0.01" name="lines[0][unit_price]" class="form-control text-end" value="{{ old('lines.0.unit_price',0) }}">
                  </td>
                  <td>
                    <input type="text" name="lines[0][description]" class="form-control" value="{{ old('lines.0.description') }}">
                  </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 type="submit" class="btn btn-success px-4">
              <i class="bx bx-save me-1"></i> Save Bill
            </button>
          </div>
        </form>

      </div>
    </div>

  </div>
</div>

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

  const $tbody = $('#linesTable tbody');
  const templateHtml = $tbody.find('tr:first')[0].outerHTML;

  // Initialize Select2 on the first select
  $tbody.find('.account-select').select2(opts);
  $('.vendor-select').select2(opts); // Initialize vendor select2

  let idx = 1;

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

  $('#addLineBtn').on('click', function(){
    const newHtml = templateHtml.replace(/\[0\]/g, `[${idx}]`);
    $tbody.append(newHtml);

    // Re-initialize Select2 on the newly added select field
    $tbody.find('tr:last .account-select').select2(opts);

    idx++;
    bindRemove();
  });

  bindRemove();
});
</script>

@endsection