{{-- resources/views/client/invoices/index.blade.php --}}
@extends('client.layouts.client')
@section('title','Invoices')
@section('page-title','Invoices')

@section('client-content')

@if($invoices->count())
<div class="card" style="overflow:hidden;">
    <table style="width:100%;border-collapse:collapse;">
        <thead>
            <tr style="background:#f8fafc;">
                <th style="padding:0.75rem 1.25rem;text-align:left;font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid var(--border);">Invoice</th>
                <th style="padding:0.75rem 1rem;text-align:left;font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid var(--border);">Date</th>
                <th style="padding:0.75rem 1rem;text-align:left;font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid var(--border);">Due</th>
                <th style="padding:0.75rem 1rem;text-align:right;font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid var(--border);">Amount</th>
                <th style="padding:0.75rem 1rem;text-align:left;font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid var(--border);">Status</th>
                <th style="padding:0.75rem 1rem;text-align:right;font-size:0.65rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid var(--border);">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($invoices as $inv)
            <tr style="border-bottom:1px solid #f8fafc;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
                <td style="padding:0.9rem 1.25rem;">
                    <div style="font-size:0.82rem;font-weight:600;color:var(--ink);">{{ $inv->invoice_number }}</div>
                    <div style="font-size:0.7rem;color:#94a3b8;">{{ Str::limit($inv->title,35) }}</div>
                </td>
                <td style="padding:0.9rem 1rem;font-size:0.78rem;color:#64748b;">{{ $inv->created_at->format('d M Y') }}</td>
                <td style="padding:0.9rem 1rem;font-size:0.78rem;color:{{ $inv->due_date?->isPast() && $inv->status!=='paid' ? '#dc2626' : '#64748b' }};">
                    {{ $inv->due_date?->format('d M Y') ?? '—' }}
                </td>
                <td style="padding:0.9rem 1rem;text-align:right;font-family:'Fraunces',Georgia,serif;font-size:0.9rem;font-weight:700;color:var(--ink);">
                    {{ $inv->currency === 'NGN' ? '₦' : '$' }}{{ number_format($inv->total, 2) }}
                </td>
                <td style="padding:0.9rem 1rem;">
                    <span class="pill pill-{{ $inv->status }}">{{ ucfirst($inv->status) }}</span>
                </td>
                <td style="padding:0.9rem 1rem;text-align:right;">
                    <div style="display:flex;gap:0.4rem;justify-content:flex-end;">
                        <a href="{{ route('client.invoices.show',$inv) }}" class="btn btn-xs btn-outline">View</a>
                        <a href="{{ route('client.invoices.download',$inv) }}" class="btn btn-xs btn-outline">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width:0.7rem;height:0.7rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
                            PDF
                        </a>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div style="margin-top:1rem;">{{ $invoices->links() }}</div>
@else
<div style="text-align:center;padding:4rem;border:1.5px dashed var(--border);border-radius:12px;">
    <p style="font-family:'Fraunces',serif;font-size:1rem;font-weight:700;margin-bottom:0.4rem;">No invoices yet</p>
    <p style="font-size:0.8rem;color:#94a3b8;">Invoices will appear here once KiruDev creates them for your project.</p>
</div>
@endif

@endsection


{{-- ─────────────────────────────────────────────────────────────────────── --}}
{{-- resources/views/client/projects/index.blade.php                        --}}
{{-- ─────────────────────────────────────────────────────────────────────── --}}