@extends('layouts.app')

@section('title', 'Invoice ' . $invoice->invoice_number)

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

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

    .invoice-actions-bar {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .invoice-document {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 2.5rem;
        max-width: 820px;
        margin: 0 auto;
    }

    .invoice-doc-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
        margin-bottom: 1.5rem;
    }

    .invoice-brand {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: 0.02em;
    }

    .invoice-brand-sub {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.1rem;
    }

    .invoice-doc-meta {
        text-align: right;
        font-size: 0.85rem;
    }

    .invoice-doc-meta .label { color: var(--text-muted); }
    .invoice-doc-meta .value { color: var(--text-primary); font-weight: 600; }

    .invoice-parties {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .party-block {
        font-size: 0.85rem;
    }

    .party-label {
        font-size: 0.72rem;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        margin-bottom: 0.4rem;
    }

    .party-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .party-detail {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .invoice-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }

    .invoice-table th {
        text-align: left;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .invoice-table td {
        padding: 0.75rem;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
    }

    .invoice-totals {
        margin-left: auto;
        width: 100%;
        max-width: 320px;
        font-size: 0.9rem;
    }

    .invoice-totals .row {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 0;
    }

    .invoice-totals .row.grand {
        border-top: 2px solid var(--border);
        margin-top: 0.4rem;
        padding-top: 0.7rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--accent);
    }

    .invoice-footer {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
        font-size: 0.78rem;
        color: var(--text-muted);
        text-align: center;
    }

    @media print {
        .invoice-actions-bar,
        nav, header, aside, .sidebar { display: none !important; }
        .invoice-document { border: none; box-shadow: none; padding: 0; }
        body { background: #fff !important; color: #000 !important; }
    }
</style>
@endpush

@section('content')
    <div class="invoice-page">
        <h1><i class="fas fa-file-invoice"></i> Invoice {{ $invoice->invoice_number }}</h1>

        <div class="invoice-actions-bar">
            <a href="{{ route('escrow.invoices') }}" class="btn btn-sm btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
            <button class="btn btn-sm btn-primary" onclick="window.print()"><i class="fas fa-print"></i> Print / Save PDF</button>
        </div>

        <div class="invoice-document">
            <div class="invoice-doc-head">
                <div>
                    <div class="invoice-brand">Tenseal</div>
                    <div class="invoice-brand-sub">Secure Escrow Platform</div>
                </div>
                <div class="invoice-doc-meta">
                    <div><span class="label">Invoice #:</span> <span class="value">{{ $invoice->invoice_number }}</span></div>
                    <div><span class="label">Issued:</span> <span class="value">{{ $invoice->created_at?->format('M d, Y') ?? '—' }}</span></div>
                    <div>
                        <span class="label">Status:</span>
                        @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>
                    </div>
                </div>
            </div>

            @if(($invoice->source ?? null) === 'transaction')
                <div class="invoice-parties">
                    <div class="party-block">
                        <div class="party-label">Buyer</div>
                        <div class="party-name">{{ $invoice->buyer->name ?? '—' }}</div>
                        <div class="party-detail">{{ $invoice->buyer->email ?? '' }}</div>
                    </div>
                    <div class="party-block" style="text-align:right;">
                        <div class="party-label">Seller</div>
                        <div class="party-name">{{ $invoice->seller->name ?? '—' }}</div>
                        <div class="party-detail">{{ $invoice->seller->email ?? '' }}</div>
                    </div>
                </div>
            @endif

            <table class="invoice-table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th style="text-align:right;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            {{ $invoice->description }}
                            @if(($invoice->source ?? null) === 'transaction')
                                <div style="font-size:0.78rem; color: var(--text-muted); margin-top:0.2rem;">
                                    Escrow transaction #{{ $invoice->transaction->id ?? $invoice->id }}
                                </div>
                            @endif
                        </td>
                        <td style="text-align:right;">
                            {{ $invoice->currency ?? 'NGN' }} {{ number_format((float) ($invoice->subtotal ?? $invoice->amount), 2) }}
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="invoice-totals">
                @if(($invoice->source ?? null) === 'transaction')
                    <div class="row"><span>Subtotal</span><span>{{ $invoice->currency }} {{ number_format((float) $invoice->subtotal, 2) }}</span></div>
                    @if(($invoice->role ?? null) === 'buyer' && ($invoice->fee ?? 0) > 0)
                        <div class="row"><span>Escrow fee</span><span>{{ $invoice->currency }} {{ number_format((float) $invoice->fee, 2) }}</span></div>
                    @endif
                @endif
                <div class="row grand">
                    <span>Total</span>
                    <span>{{ $invoice->currency ?? 'NGN' }} {{ number_format((float) $invoice->amount, 2) }}</span>
                </div>
            </div>

            <div class="invoice-footer">
                This invoice was generated by Tenseal on {{ now()->format('M d, Y') }}. Keep this document for your records.
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Auto-open print dialog when ?print=1 is on the URL
    if (new URLSearchParams(window.location.search).get('print') === '1') {
        window.addEventListener('load', () => setTimeout(() => window.print(), 300));
    }
</script>
@endpush