{{-- resources/views/accounting/ar/invoices/create.blade.php --}}
@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>

@php
  // Grab old lines or default one blank line
  $oldLines = old('lines', [
    ['account_id'=>'','description'=>'','quantity'=>1,'unit_price'=>0]
  ]);
@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('invoices.index') }}" class="text-white">
            <i class="bx bx-chevrons-left"></i> Back
          </a>
        </li>
        <li class="breadcrumb-item active text-white" aria-current="page">New Invoice</li>
      </ol>
    </nav>
    <h5 class="mb-0">New Invoice</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 $err)
              <li>{{ $err }}</li>
            @endforeach
          </ul>
        </div>
      @endif

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

        {{-- 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') }}">
            @error('reference')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <label class="form-label">Customer</label>
            <select name="customer_id" class="form-select customer-select">
              <option value="">Select customer…</option>
              @foreach($customers as $id=>$name)
                <option value="{{ $id }}" @selected(old('customer_id')==$id)>{{ $name }}</option>
              @endforeach
            </select>
            @error('customer_id')<div class="text-danger small">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-4">
            <label class="form-label">Invoice Date</label>
            <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date') }}">
            @error('invoice_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>
            @error('notes')<div class="text-danger small">{{ $message }}</div>@enderror
          </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 class="text-center" style="width:1%"></th>
              </tr>
            </thead>
            <tbody>
              @foreach($oldLines as $i => $line)
              <tr>
                <td>
                  <select name="lines[{{ $i }}][account_id]" class="form-select account-select">
                    <option value="">Select revenue account…</option>
                    @foreach($accounts->where('type','income') as $ac)
                      <option value="{{ $ac->id }}"
                        @selected(old("lines.$i.account_id", $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="{{ old("lines.$i.description", $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="{{ old("lines.$i.quantity", $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="{{ old("lines.$i.unit_price", $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-success px-4">
            <i class="bx bx-save me-1"></i> Save Invoice
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

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

  // init customer select
  $('.customer-select').select2({
    theme: 'bootstrap-5',
    placeholder: 'Select customer',
    allowClear: true,
    width: '100%'
  });

  const $tbody       = $('#linesTable tbody');
  const templateRow  = $tbody.find('tr:first')[0].outerHTML;
  let idx            = {{ count($oldLines) }};

  // init all existing account‑selects
  $tbody.find('.account-select').select2(opts);

  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 = templateRow.replace(/\[\d+\]/g, `[${idx}]`);
    $tbody.append(newHtml);
    $tbody.find('tr:last .account-select').select2(opts);
    idx++;
    bindRemove();
  });

  bindRemove();
});
</script>

@endsection