@extends('backend.layout.exposcale')

@section('page_title', 'Invoices')

@section('content')
<div class="page-body">
  <form method="GET" action="" id="inv-filter-form" style="display:contents;">
    <div class="inv-filter-bar">
      <input class="inv-filter-input" placeholder="🔍 Search by client or invoice ID…" oninput="filterAllInvoices(this.value)" style="min-width:200px;"/>
      <input type="date" class="inv-filter-input" id="all-inv-from" name="from" value="{{ request('from') }}" onchange="document.getElementById('inv-filter-form').submit()"/>
      <input type="date" class="inv-filter-input" id="all-inv-to"   name="to"   value="{{ request('to') }}"   onchange="document.getElementById('inv-filter-form').submit()"/>
      <select class="inv-filter-select" id="all-inv-plan" onchange="filterAllInvoicesByPlan()">
        <option value="">All Plans</option>
        <option value="Growth">Growth</option>
        <option value="Starter">Starter</option>
        <option value="Enterprise">Enterprise</option>
      </select>
    </div>
  </form>
  <div class="panel">
    <table id="all-inv-table" style="width:100%;">
      <thead><tr><th>Invoice ID</th><th>Client</th><th>Plan</th><th>Amount</th><th>Date</th><th>Action</th></tr></thead>
      <tbody id="all-inv-tbody">
        @forelse($invoices as $inv)
        @php
          $clientName = trim(($inv->user?->first_name ?? '') . ' ' . ($inv->user?->last_name ?? ''));
          if (!$clientName) $clientName = $inv->billed_to_name ?? '—';
        @endphp
        <tr data-plan="Growth" data-client="{{ $clientName }}">
          <td style="font-family:monospace;font-size:10px;color:var(--pl);">{{ $inv->invoice_number }}</td>
          <td><a href="#" class="client-link" onclick="return false;">{{ $clientName }}</a></td>
          <td><span class="badge bgrowth">Growth</span></td>
          <td>{{ $inv->currency }} {{ number_format($inv->total_due, 2) }}</td>
          <td style="color:var(--muted);">{{ $inv->created_at ? $inv->created_at->format('d M Y') : '—' }}</td>
          <td>
            @if($inv->pdf_link)
              <a href="{{ $inv->pdf_link }}" target="_blank" class="tbtn" style="font-size:9px; text-decoration:none;">📄 PDF</a>
            @else
              <span style="color:var(--muted); font-size:11px;">—</span>
            @endif
          </td>
        </tr>
        @empty
        <tr><td colspan="6" style="text-align:center; padding:30px; color:var(--muted);">No invoices found.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
  @if($invoices->hasPages())
  <div style="margin-top: 12px;">
    {{ $invoices->links('pagination::bootstrap-4') }}
  </div>
  @endif
</div>
@endsection

@section('page_scripts')
<script>
function filterAllInvoices(q) {
  const ql = q.toLowerCase();
  const plan = document.getElementById('all-inv-plan')?.value || '';
  document.querySelectorAll('#all-inv-tbody tr[data-client]').forEach(r => {
    const pm = !plan || r.dataset.plan === plan;
    const qm = !ql || r.textContent.toLowerCase().includes(ql);
    r.style.display = (pm && qm) ? '' : 'none';
  });
}
function filterAllInvoicesByPlan() {
  filterAllInvoices(document.querySelector('.inv-filter-input').value);
}
</script>
@endsection