@extends('layouts.app')
@section('title', 'Invoices')

@section('content')
@php
  $f = $filters ?? [];
  $qParams = request()->query();
  $tabBase = array_filter(['q' => $f['q'] ?? '', 'client_id' => $f['client_id'] ?? '', 'project_id' => $f['project_id'] ?? '', 'date_from' => $f['date_from'] ?? '', 'date_to' => $f['date_to'] ?? '', 'sort' => $f['sort'] ?? '', 'direction' => $f['direction'] ?? '']);
@endphp
<div class="p-4 sm:p-6 lg:p-7">
  <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3 mb-5">
    <div>
      <p class="text-[17px] font-bold text-slate-900"><i class="fa-solid fa-file-invoice-dollar text-blue-600 mr-1.5"></i>Invoices</p>
      <p class="text-slate-400 text-[11px] mt-0.5">Click any invoice to view details</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('invoices.export.excel', $qParams) }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-excel"></i> Export Excel</a>
      <a href="{{ route('invoices.export.pdf', $qParams) }}" class="bs inline-flex items-center gap-1.5 no-underline" style="padding:8px 14px;font-size:13px;border-radius:9px"><i class="fa-regular fa-file-pdf"></i> Export PDF</a>
      <button type="button" onclick="document.getElementById('inv_ov_new').classList.add('open')" class="ba"><i class="fa-solid fa-plus text-xs"></i> New Invoice</button>
    </div>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Invoiced</p>
      <p class="text-[22px] font-bold text-slate-900 mt-2">{{ \App\Support\Format::mwkDecimal($totalInvoiced) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Paid</p>
      <p class="text-[22px] font-bold text-emerald-600 mt-2">{{ \App\Support\Format::mwkDecimal($paidTotal) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Outstanding</p>
      <p class="text-[22px] font-bold text-amber-600 mt-2">{{ \App\Support\Format::mwkDecimal($outstandingTotal) }}</p>
    </div>
    <div class="stat border-slate-200">
      <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Overdue</p>
      <p class="text-[22px] font-bold text-red-600 mt-2">{{ \App\Support\Format::mwkDecimal($overdueTotal) }}</p>
    </div>
  </div>

  <div class="snav mb-4">
    @php
      $tabs = [
        ['label' => 'All', 'status' => 'all'],
        ['label' => 'Pending', 'status' => 'Pending'],
        ['label' => 'Overdue', 'status' => 'Overdue'],
        ['label' => 'Paid', 'status' => 'Paid'],
      ];
      $cur = $currentStatus ?? 'all';
    @endphp
    @foreach($tabs as $t)
      @php
        $tp = $tabBase;
        if ($t['status'] !== 'all') { $tp['status'] = $t['status']; } else { unset($tp['status']); }
        $active = ($t['status'] === 'all' && ($cur === 'all' || $cur === '')) || ($t['status'] !== 'all' && $cur === $t['status']);
      @endphp
      <a class="sni {{ $active ? 'active' : '' }} no-underline" href="{{ route('invoices.index', $tp) }}">{{ $t['label'] }}</a>
    @endforeach
  </div>

  @if($filterProjectId ?? null)
    @php $fp = $projects->firstWhere('id', $filterProjectId); @endphp
    <div class="card p-3 mb-4 flex flex-wrap items-center justify-between gap-2 bg-blue-50 border-blue-100">
      <p class="text-[13px] text-slate-700"><i class="fa-solid fa-folder-open text-blue-600 mr-1"></i>Showing invoices for project <strong>{{ $fp->name ?? ('#'.$filterProjectId) }}</strong></p>
      <a href="{{ route('invoices.index', array_filter(['status' => $cur !== 'all' ? $cur : null, 'client_id' => $filterClientId ?? null])) }}" class="text-blue-600 font-semibold text-[12px] no-underline">Clear project filter</a>
    </div>
  @endif

  @if($filterClientId ?? null)
    @php $fc = $clients->firstWhere('id', $filterClientId); @endphp
    <div class="card p-3 mb-4 flex flex-wrap items-center justify-between gap-2 bg-emerald-50 border-emerald-100">
      <p class="text-[13px] text-slate-700"><i class="fa-solid fa-building-user text-emerald-600 mr-1"></i>Showing invoices for client <strong>{{ $fc->company_name ?? ('#'.$filterClientId) }}</strong></p>
      <a href="{{ route('invoices.index', array_filter(['status' => $cur !== 'all' ? $cur : null, 'project_id' => $filterProjectId ?? null])) }}" class="text-blue-600 font-semibold text-[12px] no-underline">Clear client filter</a>
    </div>
  @endif

  <form method="get" action="{{ route('invoices.index') }}" class="card p-4 mb-4 flex flex-wrap gap-2 items-end border-slate-200">
    @if(($cur ?? 'all') !== 'all' && ($cur ?? '') !== '')
      <input type="hidden" name="status" value="{{ $cur }}">
    @endif
    <div class="min-w-[160px] flex-1">
      <label class="fl text-[10px]">Search</label>
      <input type="search" name="q" value="{{ $f['q'] ?? '' }}" placeholder="Invoice, client, project, fiscal code…" class="fi">
    </div>
    <div class="min-w-[140px]">
      <label class="fl text-[10px]">Client</label>
      <select name="client_id" class="fi">
        <option value="">All clients</option>
        @foreach($clients as $c)
          <option value="{{ $c->id }}" @selected((string)($f['client_id'] ?? '') === (string)$c->id)>{{ $c->company_name }}</option>
        @endforeach
      </select>
    </div>
    <div class="min-w-[140px]">
      <label class="fl text-[10px]">Project</label>
      <select name="project_id" class="fi">
        <option value="">All projects</option>
        @foreach($projects as $p)
          <option value="{{ $p->id }}" @selected((string)($f['project_id'] ?? '') === (string)$p->id)>{{ $p->name }}</option>
        @endforeach
      </select>
    </div>
    <div class="w-[130px]">
      <label class="fl text-[10px]">Date from</label>
      <input type="date" name="date_from" value="{{ $f['date_from'] ?? '' }}" class="fi">
    </div>
    <div class="w-[130px]">
      <label class="fl text-[10px]">Date to</label>
      <input type="date" name="date_to" value="{{ $f['date_to'] ?? '' }}" class="fi">
    </div>
    <div class="w-[150px]">
      <label class="fl text-[10px]">Sort</label>
      <select name="sort" class="fi">
        @foreach(['invoice_number'=>'Invoice #','invoice_date'=>'Invoice date','due_date'=>'Due date','total_amount'=>'Amount','status'=>'Status','created_at'=>'Created'] as $k=>$label)
          <option value="{{ $k }}" @selected(($f['sort'] ?? 'invoice_date') === $k)>{{ $label }}</option>
        @endforeach
      </select>
    </div>
    <div class="w-[100px]">
      <label class="fl text-[10px]">Direction</label>
      <select name="direction" class="fi">
        <option value="desc" @selected(($f['direction'] ?? 'desc') === 'desc')>Desc</option>
        <option value="asc" @selected(($f['direction'] ?? '') === 'asc')>Asc</option>
      </select>
    </div>
    <button type="submit" class="bp h-[38px] self-end">Apply</button>
    <a href="{{ route('invoices.index') }}" class="text-[12px] font-semibold text-slate-500 self-end pb-2 no-underline">Clear</a>
  </form>

  <div class="card p-0 card-has-table border-slate-200 overflow-hidden">
    @if($invoices->count() === 0)
      <div class="py-16 px-4 text-center">
        <i class="fa-solid fa-file-invoice text-4xl text-slate-200 mb-3"></i>
        <p class="font-semibold text-slate-700">No invoices found</p>
        <p class="text-[12px] text-slate-500 mt-1 max-w-sm mx-auto">Create your first invoice or adjust your filters.</p>
        <button type="button" onclick="document.getElementById('inv_ov_new').classList.add('open')" class="ba mt-4"><i class="fa-solid fa-plus text-xs"></i> New Invoice</button>
      </div>
    @else
      <table>
        <thead>
          <tr class="border-b border-slate-100">
            <th class="th">Invoice #</th>
            <th class="th">Client</th>
            <th class="th">Project</th>
            <th class="th">Date</th>
            <th class="th text-right">Amount</th>
            <th class="th">MRA Fiscal Code</th>
            <th class="th">Status</th>
            <th class="th"></th>
          </tr>
        </thead>
        <tbody>
          @foreach($invoices as $i)
            @php
              $badge = $i->status === 'Paid' ? 'g' : ($i->status === 'Overdue' ? 'r' : 'a');
            @endphp
            <tr class="cursor-pointer hover:bg-slate-50/80" onclick="window.location='{{ route('invoices.show', $i) }}'">
              <td class="td font-bold text-blue-600">{{ $i->invoice_number }}</td>
              <td class="td font-medium text-slate-800">{{ $i->client?->company_name }}</td>
              <td class="td text-slate-600 text-[12px]">{{ $i->project?->name ?? '—' }}</td>
              <td class="td text-slate-400 text-[12px] whitespace-nowrap">{{ $i->invoice_date?->format('M j, Y') }}</td>
              <td class="td text-right font-mono font-semibold text-slate-800">{{ \App\Support\Format::mwkDecimal($i->total_amount) }}</td>
              <td class="td" onclick="event.stopPropagation()">
                @if($i->mra_fiscal_code)
                  <span class="badge s font-mono text-[10px]">{{ $i->mra_fiscal_code }}</span>
                @else
                  <span class="badge s text-[10px]">Not fiscalised</span>
                @endif
              </td>
              <td class="td"><span class="badge {{ $badge }}">{{ $i->status }}</span></td>
              <td class="td" onclick="event.stopPropagation()">
                <a href="{{ route('invoices.show', $i) }}" class="bsm bg-slate-100 text-slate-600 hover:bg-slate-200 no-underline">View</a>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
      <div class="p-4 border-t border-slate-100">{{ $invoices->withQueryString()->links() }}</div>
    @endif
  </div>
</div>

<div id="inv_ov_new" class="modal-ov" onclick="if(event.target===this)this.classList.remove('open')">
  <div class="modal" style="max-width:640px">
    <div style="padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center">
      <p class="text-[15px] font-bold text-slate-900">New Invoice</p>
      <button type="button" onclick="document.getElementById('inv_ov_new').classList.remove('open')" style="width:28px;height:28px;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer">&times;</button>
    </div>
    <div style="padding:16px 20px 20px">
      @include('invoices.partials.invoice-form', ['clients' => $clients, 'projects' => $projects])
    </div>
  </div>
</div>
@endsection

@push('scripts')
@include('invoices.partials.invoice-form-script')
@endpush