@extends('user.layouts.app')
@section('title','Invoice Preview')
@section('page-title')
Invoice {{ $invoice->invoice_number }}
@endsection
@section('page-subtitle')
{{ $invoice->conference?->name }}
@endsection

@push('styles')
<style>
    .invoice-document {
        max-width: 900px;
        margin: 0 auto;
    }
    .invoice-header-logo {
        max-height: 72px;
        max-width: 220px;
        object-fit: contain;
    }
    .invoice-meta dt {
        color: #6c757d;
        font-weight: 500;
        margin-bottom: 0.15rem;
    }
    .invoice-meta dd {
        margin-bottom: 0.75rem;
    }
    .invoice-table tfoot tr:last-child td,
    .invoice-table tfoot tr:last-child th {
        border-bottom: 0;
    }
    @media print {
        body * {
            visibility: hidden;
        }
        .invoice-document,
        .invoice-document * {
            visibility: visible;
        }
        .invoice-document {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            max-width: none;
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
        }
        .no-print {
            display: none !important;
        }
        main.p-4 {
            padding: 0 !important;
        }
    }
</style>
@endpush

@section('content')
@php
    $lineItems = $invoice->lineItems();
    $currency = $invoice->currencySymbol();
@endphp

<div class="content-card p-4 invoice-document">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4 pb-3 border-bottom">
        <div>
            @if($settingsService->logoUrl())
                <img src="{{ $settingsService->logoUrl() }}" alt="{{ $branding['organization_name'] }}" class="invoice-header-logo mb-2">
            @endif
            <h5 class="mb-1">{{ $branding['organization_name'] }}</h5>
            @if($branding['organization_tagline'])
                <p class="text-muted small mb-1">{{ $branding['organization_tagline'] }}</p>
            @endif
            @if($branding['support_email'] || $branding['support_phone'])
                <p class="text-muted small mb-0">
                    @if($branding['support_email']){{ $branding['support_email'] }}@endif
                    @if($branding['support_email'] && $branding['support_phone']) · @endif
                    @if($branding['support_phone']){{ $branding['support_phone'] }}@endif
                </p>
            @endif
        </div>
        <div class="text-md-end">
            <h4 class="text-success mb-2">INVOICE</h4>
            <p class="mb-1"><strong>{{ $invoice->invoice_number }}</strong></p>
            <span class="badge {{ $invoice->status === 'paid' ? 'bg-success' : 'bg-warning text-dark' }}">{{ ucfirst($invoice->status) }}</span>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <dl class="invoice-meta mb-0">
                <dt>Bill To</dt>
                <dd class="mb-2">
                    <strong>{{ $invoice->user?->name }}</strong><br>
                    {{ $invoice->user?->email }}<br>
                    @if($invoice->user?->phone){{ $invoice->user->phone }}@endif
                </dd>
            </dl>
        </div>
        <div class="col-md-6">
            <dl class="invoice-meta mb-0 text-md-end">
                <dt>Invoice Date</dt>
                <dd>{{ $invoice->issued_at?->format('M d, Y') ?? '—' }}</dd>
                <dt>Conference</dt>
                <dd>{{ $invoice->conference?->name }}</dd>
                @if($invoice->payment?->registration?->registration_number)
                    <dt>Registration No.</dt>
                    <dd>{{ $invoice->payment->registration->registration_number }}</dd>
                @endif
            </dl>
        </div>
    </div>

    <div class="table-responsive mb-4">
        <table class="table table-bordered invoice-table align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>Description</th>
                    <th class="text-end" style="width: 160px">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($lineItems as $item)
                    <tr>
                        <td>{{ $item['description'] }}</td>
                        <td class="text-end">{{ $currency }}{{ number_format($item['amount'], 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="table-light">
                    <th>Total</th>
                    <th class="text-end">{{ $currency }}{{ number_format($invoice->total_amount, 2) }}</th>
                </tr>
                <tr>
                    <td>Amount Paid</td>
                    <td class="text-end">{{ $currency }}{{ number_format($invoice->amount_paid, 2) }}</td>
                </tr>
                <tr>
                    <td><strong>Balance Due</strong></td>
                    <td class="text-end"><strong>{{ $currency }}{{ number_format($invoice->balance, 2) }}</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>

    @if($invoice->payment)
        <div class="row g-3 mb-4 small">
            <div class="col-md-6">
                @if($invoice->payment->payment_gateway)
                    <p class="mb-1"><strong>Payment Method:</strong> {{ ucfirst($invoice->payment->payment_gateway) }}</p>
                @endif
                @if($invoice->payment->payment_reference)
                    <p class="mb-0"><strong>Transaction Reference:</strong> {{ $invoice->payment->payment_reference }}</p>
                @endif
            </div>
            <div class="col-md-6 text-md-end">
                @if($invoice->receipt_number)
                    <p class="mb-0"><strong>Receipt #:</strong> {{ $invoice->receipt_number }}</p>
                @endif
                @if($invoice->payment->paid_at)
                    <p class="mb-0"><strong>Paid On:</strong> {{ $invoice->payment->paid_at->format('M d, Y H:i') }}</p>
                @endif
            </div>
        </div>
    @elseif($invoice->receipt_number)
        <p class="mb-4"><strong>Receipt #:</strong> {{ $invoice->receipt_number }}</p>
    @endif

    <div class="d-flex flex-wrap gap-2 no-print">
        <button type="button" class="btn btn-green" onclick="window.print()">
            <i class="fas fa-print me-1"></i> Print Invoice
        </button>
        <a href="{{ route('user.payments-invoices') }}" class="btn btn-light">Back</a>
    </div>
</div>

@endsection