@extends('layouts.app')

@section('title', 'Invoices & Receipts')

@push('styles')
<style>
    .invoices-page h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .invoices-page h1 i { color: var(--accent); }

    /* Filters */
    .invoices-filters {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .filter-group label {
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .filter-input,
    .filter-select {
        padding: 0.5rem 0.75rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.85rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .filter-input:focus,
    .filter-select:focus { border-color: var(--accent); }

    /* Table */
    .invoices-table-wrapper {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .invoices-table {
        width: 100%;
        border-collapse: collapse;
    }

    .invoices-table th {
        padding: 0.875rem 1.25rem;
        text-align: left;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
    }

    .invoices-table td {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border);
    }

    .invoices-table tr:last-child td { border-bottom: none; }

    .invoices-table tr:hover td { background: var(--bg-hover); }

    .invoice-id {
        font-weight: 600;
        color: var(--accent);
    }

    .invoice-amount {
        font-weight: 600;
    }

    .invoice-actions {
        display: flex;
        gap: 0.5rem;
    }

    .action-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all var(--transition);
        font-size: 0.82rem;
    }

    .action-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    /* Empty State */
    .invoices-empty {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--text-muted);
    }

    .invoices-empty-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
    }

    .invoices-empty-icon i {
        font-size: 2rem;
        opacity: 0.3;
    }

    .invoices-empty h3 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.375rem;
    }

    .invoices-empty p {
        font-size: 0.85rem;
    }

    /* Pagination */
    .invoices-pagination {
        display: flex;
        justify-content: center;
        gap: 0.375rem;
        margin-top: 1.5rem;
    }

    .page-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all var(--transition);
    }

    .page-btn:hover { border-color: var(--accent); color: var(--text-primary); }
    .page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

    @media (max-width: 768px) {
        .invoices-table-wrapper { overflow-x: auto; }
        .invoices-table { min-width: 600px; }
        .invoices-filters { flex-direction: column; align-items: flex-start; }
    }
</style>
@endpush

@section('content')
    <div class="invoices-page">
        <h1><i class="fas fa-file-invoice"></i> Invoices & Receipts</h1>

        {{-- Filters --}}
        <form method="GET" action="{{ route('escrow.invoices') }}" class="invoices-filters">
            <div class="filter-group">
                <label>From:</label>
                <input type="date" class="filter-input" name="date_from" value="{{ $filters['dateFrom'] ?? '' }}">
            </div>
            <div class="filter-group">
                <label>To:</label>
                <input type="date" class="filter-input" name="date_to" value="{{ $filters['dateTo'] ?? '' }}">
            </div>
            <div class="filter-group">
                <label>Type:</label>
                <select class="filter-select" name="type">
                    <option value="all"     @selected(($filters['type'] ?? 'all') === 'all')>All Types</option>
                    <option value="escrow"  @selected(($filters['type'] ?? '') === 'escrow')>Escrow</option>
                    <option value="general" @selected(($filters['type'] ?? '') === 'general')>General</option>
                    <option value="milestone" @selected(($filters['type'] ?? '') === 'milestone')>Milestone</option>
                    <option value="domain"  @selected(($filters['type'] ?? '') === 'domain')>Domain</option>
                    <option value="vehicle" @selected(($filters['type'] ?? '') === 'vehicle')>Vehicle</option>
                </select>
            </div>
            <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-filter"></i> Apply</button>
        </form>

        {{-- Table --}}
        <div class="invoices-table-wrapper">
            @if(method_exists($invoices, 'total') ? $invoices->total() > 0 : $invoices->count() > 0)
                <table class="invoices-table">
                    <thead>
                        <tr>
                            <th>Invoice #</th>
                            <th>Date</th>
                            <th>Description</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoices as $invoice)
                            <tr>
                                <td><span class="invoice-id">{{ $invoice->invoice_number }}</span></td>
                                <td>{{ $invoice->created_at?->format('M d, Y') }}</td>
                                <td>{{ $invoice->description }}</td>
                                <td class="invoice-amount">{{ $invoice->formatted_amount ?? '---' }}</td>
                                <td>
                                    @php
                                        $statusClass = match($invoice->status) {
                                            'paid', 'completed' => 'badge-success',
                                            'pending' => 'badge-warning',
                                            'refunded', 'cancelled' => 'badge-danger',
                                            default => 'badge-warning'
                                        };
                                    @endphp
                                    <span class="badge-status {{ $statusClass }}">{{ ucfirst($invoice->status) }}</span>
                                </td>
                                <td>
                                    <div class="invoice-actions">
                                        <a href="{{ route('escrow.invoices.show', $invoice->id) }}" class="action-btn" title="View"><i class="fas fa-eye"></i></a>
                                        <a href="{{ route('escrow.invoices.show', $invoice->id) }}?print=1" class="action-btn" title="Print / Download" target="_blank"><i class="fas fa-print"></i></a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="invoices-empty">
                    <div class="invoices-empty-icon">
                        <i class="fas fa-file-invoice"></i>
                    </div>
                    <h3>No invoices yet</h3>
                    <p>Your invoices and receipts will appear here once you make transactions.</p>
                </div>
            @endif
        </div>

        @if(method_exists($invoices, 'hasPages') && $invoices->hasPages())
            <div class="invoices-pagination">
                {{ $invoices->withQueryString()->links() }}
            </div>
        @endif
    </div>
@endsection