@extends('layouts.app')

@section('title', 'Invoice List')
@section('page', 'invoices')
@section('salesNav', 'invoices')

@php
  $rows = [
    ['id' => 1, 'invoice' => 'INV-12088', 'date' => '2026-07-13', 'due' => '2026-07-20', 'customer' => 'Corporate Catering Co', 'sale' => 'SL-98421', 'total' => 860.00, 'paid' => 860.00, 'status' => 'Paid'],
    ['id' => 2, 'invoice' => 'INV-12087', 'date' => '2026-07-13', 'due' => '2026-07-27', 'customer' => 'City Hall Events', 'sale' => 'SL-98415', 'total' => 1240.50, 'paid' => 400.00, 'status' => 'Partial'],
    ['id' => 3, 'invoice' => 'INV-12086', 'date' => '2026-07-12', 'due' => '2026-07-19', 'customer' => 'Nova Tech Office', 'sale' => 'SL-98410', 'total' => 420.00, 'paid' => 0.00, 'status' => 'Unpaid'],
    ['id' => 4, 'invoice' => 'INV-12085', 'date' => '2026-07-12', 'due' => '2026-07-12', 'customer' => 'Harbor Hotel', 'sale' => 'SL-98408', 'total' => 3180.00, 'paid' => 0.00, 'status' => 'Overdue'],
    ['id' => 5, 'invoice' => 'INV-12084', 'date' => '2026-07-11', 'due' => '2026-07-18', 'customer' => 'Jordan Miles', 'sale' => 'SL-98407', 'total' => 98.00, 'paid' => 98.00, 'status' => 'Paid'],
    ['id' => 6, 'invoice' => 'INV-12083', 'date' => '2026-07-11', 'due' => '2026-07-25', 'customer' => 'Summit Wellness', 'sale' => 'SL-98405', 'total' => 670.00, 'paid' => 0.00, 'status' => 'Unpaid'],
    ['id' => 7, 'invoice' => 'INV-12082', 'date' => '2026-07-10', 'due' => '2026-07-17', 'customer' => 'Blue River Bank', 'sale' => 'SL-98402', 'total' => 1890.25, 'paid' => 1890.25, 'status' => 'Paid'],
    ['id' => 8, 'invoice' => 'INV-12081', 'date' => '2026-07-10', 'due' => '2026-07-10', 'customer' => 'Studio Nine', 'sale' => 'SL-98399', 'total' => 512.40, 'paid' => 0.00, 'status' => 'Overdue'],
    ['id' => 9, 'invoice' => 'INV-12080', 'date' => '2026-07-09', 'due' => '2026-07-16', 'customer' => 'Ava Lopez', 'sale' => 'SL-98395', 'total' => 154.20, 'paid' => 154.20, 'status' => 'Paid'],
    ['id' => 10, 'invoice' => 'INV-12079', 'date' => '2026-07-09', 'due' => '2026-07-23', 'customer' => 'Ryan West', 'sale' => 'SL-98390', 'total' => 246.00, 'paid' => 100.00, 'status' => 'Partial'],
    ['id' => 11, 'invoice' => 'INV-12078', 'date' => '2026-07-08', 'due' => '2026-07-15', 'customer' => 'Mia Chen', 'sale' => 'SL-98388', 'total' => 78.50, 'paid' => 0.00, 'status' => 'Void'],
    ['id' => 12, 'invoice' => 'INV-12077', 'date' => '2026-07-08', 'due' => '2026-07-22', 'customer' => 'Emma Stone', 'sale' => 'SL-98385', 'total' => 312.00, 'paid' => 312.00, 'status' => 'Paid'],
  ];
  $statusVariant = fn ($s) => match ($s) {
    'Paid' => 'success',
    'Partial' => 'info',
    'Unpaid' => 'warning',
    'Overdue', 'Void' => 'danger',
    default => 'neutral',
  };
@endphp

@section('content')
  <div class="app-content__header">
    <div>
      <h1 class="page-title">Invoice List</h1>
      <p class="page-subtitle">Customer invoices and payment status</p>
    </div>
    <div class="app-content__actions">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#invoiceModal">
        <i class="bi bi-plus-lg"></i><span class="d-none d-sm-inline"> New invoice</span>
      </button>
    </div>
  </div>

  @include('partials.sales-nav')

  <div class="row g-3 g-lg-4 mb-4">
    <div class="col-6 col-xl-3"><x-stat-card label="Invoices MTD" value="42" icon="bi-file-earmark-ruled" icon-variant="primary" trend="8" trend-direction="up" trend-meta="vs last month" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Collected" value="$18.4k" icon="bi-cash-coin" icon-variant="success" trend="9%" trend-direction="up" trend-meta="MTD" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Outstanding" value="$6.2k" icon="bi-hourglass-split" icon-variant="warning" trend="3%" trend-direction="down" trend-meta="AR balance" /></div>
    <div class="col-6 col-xl-3"><x-stat-card label="Overdue" value="5" icon="bi-exclamation-triangle" icon-variant="danger" trend="1" trend-direction="up" trend-meta="need follow-up" /></div>
  </div>

  <x-data-table id="invoices-table" title="Invoices" subtitle="Billed sales · Downtown Branch" :page-size="10">
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-soft-primary btn-sm" data-bs-toggle="modal" data-bs-target="#invoiceModal"><i class="bi bi-plus-lg"></i> New invoice</button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All statuses</option>
        <option>Paid</option><option>Partial</option><option>Unpaid</option><option>Overdue</option><option>Void</option>
      </select>
    </x-slot:filters>
    <x-slot:bulkActions>
      <button type="button" class="btn btn-soft-primary btn-sm" data-edt-bulk-action="export">Export selected</button>
      <button type="button" class="btn btn-outline-secondary btn-sm" data-edt-bulk-action="remind">Send reminder</button>
      <button type="button" class="btn btn-outline-danger btn-sm" data-edt-bulk-action="void">Void</button>
    </x-slot:bulkActions>
    <x-slot:head>
      <x-data-table-th label="Invoice #" col="invoice" :filterable="true" />
      <x-data-table-th label="Date" col="date" :filterable="true" />
      <x-data-table-th label="Due" col="due" :filterable="true" />
      <x-data-table-th label="Customer" col="customer" :filterable="true" />
      <x-data-table-th label="Sale #" col="sale" :filterable="true" />
      <x-data-table-th label="Total" col="total" sort-type="number" />
      <x-data-table-th label="Paid" col="paid" sort-type="number" />
      <x-data-table-th label="Status" col="status" :filterable="true" type="select" filter-options="Paid|Partial|Unpaid|Overdue|Void" />
    </x-slot:head>
    <x-slot:body>
      @foreach ($rows as $row)
        <tr data-id="{{ $row['id'] }}">
          <td data-col="invoice" class="cell-primary">{{ $row['invoice'] }}</td>
          <td data-col="date">{{ $row['date'] }}</td>
          <td data-col="due">{{ $row['due'] }}</td>
          <td data-col="customer">{{ $row['customer'] }}</td>
          <td data-col="sale">{{ $row['sale'] }}</td>
          <td data-col="total">{{ money($row['total']) }}</td>
          <td data-col="paid">{{ money($row['paid']) }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($row['status'])">{{ $row['status'] }}</x-badge></td>
          <td data-edt-actions><x-action-dropdown :id="$row['id']" /></td>
        </tr>
      @endforeach
    </x-slot:body>
  </x-data-table>

  <x-ui-modal id="invoiceModal" title="New invoice" form-id="invoice-form">
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label" for="inv_customer">Customer</label><input type="text" class="form-control" id="inv_customer" name="customer" required></div>
      <div class="col-md-3"><label class="form-label" for="inv_date">Invoice date</label><input type="date" class="form-control" id="inv_date" name="date" value="2026-07-13" required></div>
      <div class="col-md-3"><label class="form-label" for="inv_due">Due date</label><input type="date" class="form-control" id="inv_due" name="due" value="2026-07-20" required></div>
      <div class="col-md-4"><label class="form-label" for="inv_sale">Sale #</label><input type="text" class="form-control" id="inv_sale" name="sale" placeholder="SL-xxxxx"></div>
      <div class="col-md-4"><label class="form-label" for="inv_total">Total</label><input type="number" step="0.01" class="form-control" id="inv_total" name="total" min="0" value="0" required></div>
      <div class="col-md-4">
        <label class="form-label" for="inv_status">Status</label>
        <select class="form-select" id="inv_status" name="status"><option>Unpaid</option><option>Partial</option><option>Paid</option></select>
      </div>
      <div class="col-12"><label class="form-label" for="inv_notes">Notes</label><textarea class="form-control" id="inv_notes" name="notes" rows="2"></textarea></div>
    </div>
    <x-alert class="mt-3 mb-0" variant="info" icon="bi-info-circle">UI only — invoice is not posted.</x-alert>
  </x-ui-modal>
@endsection

@push('scripts')
  <script src="{{ asset('assets/js/pages/sales.js') }}"></script>
@endpush