@extends('layouts.app')

@section('title', 'Invoices')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/invoice-create.css') }}">
<style>
    /* ── Index-specific overrides ── */
    .invoice-wrap { max-width: 1100px; }

    .index-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .index-toolbar-title {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text-primary, #1a202c);
    }

    .index-toolbar-title span {
        font-size: .85rem;
        font-weight: 400;
        color: var(--text-muted, #718096);
        margin-left: .4rem;
    }

    .btn-create {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .5rem 1.1rem;
        border-radius: 6px;
        font-size: .875rem;
        font-weight: 600;
        background: var(--primary, #2b6cb0);
        color: #fff;
        text-decoration: none;
        transition: opacity .15s;
    }
    .btn-create:hover { opacity: .88; }

    /* Table */
    .inv-table-wrap {
        overflow-x: auto;
        border-radius: 8px;
        border: 1px solid var(--border, #e2e8f0);
    }

    .inv-table {
        width: 100%;
        border-collapse: collapse;
        font-size: .875rem;
    }

    .inv-table thead tr {
        background: var(--surface-alt, #f7fafc);
        border-bottom: 2px solid var(--border, #e2e8f0);
    }

    .inv-table th {
        padding: .75rem 1rem;
        text-align: left;
        font-weight: 600;
        color: var(--text-muted, #718096);
        white-space: nowrap;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .inv-table td {
        padding: .8rem 1rem;
        border-bottom: 1px solid var(--border, #e2e8f0);
        color: var(--text-primary, #2d3748);
        vertical-align: middle;
    }

    .inv-table tbody tr:last-child td { border-bottom: none; }
    .inv-table tbody tr:hover { background: var(--surface-alt, #f7fafc); }

    .inv-number {
        font-family: monospace;
        font-size: .82rem;
        color: var(--text-muted, #718096);
    }

    .applicant-name { font-weight: 600; }
    .applicant-email { font-size: .78rem; color: var(--text-muted, #718096); }

    .amount-cell { font-weight: 700; }

    /* Status badges */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .25rem .65rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
        text-transform: capitalize;
        white-space: nowrap;
    }
    .badge-pending  { background: #fef3c7; color: #92400e; }
    .badge-paid     { background: #d1fae5; color: #065f46; }
    .badge-overdue  { background: #fee2e2; color: #991b1b; }
    .badge-draft    { background: #e2e8f0; color: #4a5568; }
    .badge-cancelled{ background: #f3f4f6; color: #6b7280; }

    /* Actions */
    .action-link {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        font-size: .8rem;
        font-weight: 600;
        color: var(--primary, #2b6cb0);
        text-decoration: none;
        padding: .3rem .6rem;
        border-radius: 4px;
        transition: background .15s;
    }
    .action-link:hover { background: var(--surface-alt, #ebf4ff); }

    /* Empty state */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--text-muted, #718096);
    }
    .empty-state svg { margin-bottom: 1rem; opacity: .4; }
    .empty-state p { margin: 0; font-size: .95rem; }

    /* Pagination wrapper */
    .pagination-wrap {
        margin-top: 1.25rem;
        display: flex;
        justify-content: flex-end;
    }
</style>
@endpush

@section('content')

<div class="invoice-page">
<div class="invoice-wrap">

    {{-- ── HEADER ── --}}
    <div class="invoice-header">
        <div class="gov-emblem">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5L12 1zm-1 14H9V9h2v6zm4 0h-2V9h2v6z"/>
            </svg>
        </div>
        <div>
            <h1 class="invoice-header-title">Invoices</h1>
            <p class="invoice-header-sub">Ministry of Fisheries &amp; Ocean Resources &mdash; Local Fish Licensing System</p>
        </div>
    </div>

    <div class="invoice-card">

        {{-- ── TOOLBAR ── --}}
        <div class="index-toolbar">
            <div class="index-toolbar-title">
                All Invoices
                <span>({{ $invoices->total() }} total)</span>
            </div>
    <!--        @php
                $createRoute = auth()->user()?->role === 'admin'
                    ? route('admin.invoice.create')
                    : route('reviewer.invoice.create');
            @endphp
            <a href="{{ $createRoute }}" class="btn-create">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                New Invoice
            </a>
            
    -->        
        </div>

        {{-- ── SUCCESS FLASH ── --}}
        @if(session('success'))
            <div class="alert alert-success" style="margin-bottom:1rem">
                {{ session('success') }}
            </div>
        @endif

        {{-- ── TABLE ── --}}
        <div class="inv-table-wrap">
            <table class="inv-table">
                <thead>
                    <tr>
                        <th>Invoice #</th>
                        <th>Applicant</th>
                        <th>Company Type</th>
                        <th>Duration</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Due Date</th>
                        <th>Proof of Payment</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($invoices as $invoice)
                        @php
                            $showRoute = auth()->user()?->role === 'admin'
                                ? route('admin.invoice.show', $invoice)
                                : route('reviewer.invoice.show', $invoice);

                            $badgeClass = match($invoice->status) {
                                'paid'      => 'badge-paid',
                                'overdue'   => 'badge-overdue',
                                'cancelled' => 'badge-cancelled',
                                'draft'     => 'badge-draft',
                                default     => 'badge-pending',
                            };
                        @endphp
                        <tr>
                            {{-- Invoice number --}}
                            <td class="inv-number">{{ $invoice->invoice_number }}</td>

                            {{-- Applicant --}}
                            <td>
                                <div class="applicant-name">
                                    {{ $invoice->application?->companyDetail?->registered_name
                                       ?? $invoice->application?->cd_business_name
                                       ?? '—' }}
                                </div>
                                <div class="applicant-email">
                                    App #{{ $invoice->application_id ?? '—' }}
                                </div>
                            </td>

                            {{-- Company type --}}
                            <td>{{ ucfirst($invoice->company_type ?? '—') }}</td>

                            {{-- Duration --}}
                            <td>
                                {{ $invoice->license_duration === '6months' ? '6 Months' : '12 Months' }}
                            </td>

                            {{-- Total --}}
                            <td class="amount-cell">
                                ${{ number_format($invoice->total_amount, 2) }}
                            </td>

                            {{-- Status badge --}}
                            <td>
                                <span class="badge {{ $badgeClass }}">
                                    {{ ucfirst($invoice->status ?? 'pending') }}
                                </span>
                            </td>

                            {{-- Due date --}}
                            <td>
                                {{ $invoice->due_date
                                    ? \Carbon\Carbon::parse($invoice->due_date)->format('d M Y')
                                    : '—' }}
                            </td>

                            {{-- Proof of Payment ← ADD THIS ENTIRE CELL --}}
                            <td>
                                @if($invoice->proof_of_payment_path)
                                    <a href="{{ asset('storage/' . $invoice->proof_of_payment_path) }}"
                                    target="_blank"
                                    class="action-link"
                                    style="color:#16a34a;">
                                        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                            <polyline points="14 2 14 8 20 8"/>
                                        </svg>
                                        View
                                    </a>
                                    @if($invoice->proof_of_payment_uploaded_at)
                                        <div style="font-size:.72rem;color:var(--text-muted,#718096);margin-top:.2rem;">
                                            {{ \Carbon\Carbon::parse($invoice->proof_of_payment_uploaded_at)->format('d M Y') }}
                                        </div>
                                    @endif
                                @else
                                    <span style="font-size:.78rem;color:var(--text-muted,#718096);font-style:italic;">Not uploaded</span>
                                @endif
                            </td>

                            {{-- View action --}}
                            <td>
                                <a href="{{ $showRoute }}" class="action-link" target="_blank">
                                    <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                        <circle cx="12" cy="12" r="3"/>
                                    </svg>
                                    View
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <div class="empty-state">
                                    <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                        <polyline points="14 2 14 8 20 8"/>
                                        <line x1="16" y1="13" x2="8" y2="13"/>
                                        <line x1="16" y1="17" x2="8" y2="17"/>
                                        <polyline points="10 9 9 9 8 9"/>
                                    </svg>
                                    <p>No invoices found.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- ── PAGINATION ── --}}
        @if($invoices->hasPages())
            <div class="pagination-wrap">
                {{ $invoices->links() }}
            </div>
        @endif

    </div>{{-- /.invoice-card --}}
</div>{{-- /.invoice-wrap --}}
</div>{{-- /.invoice-page --}}

@endsection