@extends('layouts.customer')
@section('title','Invoice '.$payment->invoice_no)
@section('page-title','Invoice')

@section('styles')
<style>
.invoice-wrap{max-width:680px;margin:0 auto}
.inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;flex-wrap:wrap;gap:14px}
.inv-logo{font-size:22px;font-weight:700;color:#f7941d}
.inv-logo small{display:block;font-size:13px;color:#888;font-weight:400}
.inv-meta{text-align:right}
.inv-meta .badge{background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700}
.divider{border:none;border-top:2px dashed #e0e0e0;margin:20px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.col-label{font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase;margin-bottom:6px}
.col-val{font-size:15px;color:#333;font-weight:600}
.col-val small{font-size:13px;font-weight:400;color:#666}
.line-items table{width:100%;border-collapse:collapse}
.line-items th{background:#f8f9fa;padding:10px 14px;text-align:left;font-size:12px;color:#888;font-weight:700;text-transform:uppercase}
.line-items td{padding:12px 14px;border-bottom:1px solid #f0f0f0;font-size:14px}
.total-section{background:#f8f9fa;border-radius:12px;padding:18px;margin-top:18px}
.total-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:#555}
.grand-total{font-size:20px;font-weight:700;color:#f7941d;border-top:2px solid #ddd;margin-top:8px;padding-top:10px}
.btn-print{padding:11px 24px;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600}
@media print{.btn-print,.back-link{display:none}.card{box-shadow:none}}
</style>
@endsection

@section('content')
<div class="invoice-wrap">
<div class="card">
    <div class="inv-header">
        <div class="inv-logo">
            🎠 Yahya Playland
            <small>All Abilities Play Space</small>
        </div>
        <div class="inv-meta">
            <div class="badge">TAX INVOICE</div>
            <div style="margin-top:10px;font-size:13px;color:#666">{{ $payment->invoice_no }}</div>
            <div style="font-size:12px;color:#aaa">{{ $payment->created_at->format('d M Y') }}</div>
        </div>
    </div>

    <hr class="divider">

    <div class="two-col">
        <div>
            <div class="col-label">Bill To</div>
            <div class="col-val">{{ $payment->customer_name }}<small><br>{{ $payment->customer_email }}</small></div>
        </div>
        <div>
            <div class="col-label">Payment Method</div>
            <div class="col-val">
                {{ ucfirst($payment->card_brand ?? 'Card') }}
                @if($payment->card_last4) •••• {{ $payment->card_last4 }} @endif
            </div>
        </div>
    </div>

    <div class="line-items">
        <table>
            <thead><tr><th>Description</th><th>Amount</th></tr></thead>
            <tbody>
                <tr>
                    <td>Prepayment Credit (No Expiry)</td>
                    <td>${{ number_format($payment->amount_ex_gst, 2) }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="total-section">
        <div class="total-row"><span>Subtotal (ex GST)</span><span>${{ number_format($payment->amount_ex_gst, 2) }}</span></div>
        <div class="total-row"><span>GST (10%)</span><span>${{ number_format($payment->gst, 2) }}</span></div>
        <div class="total-row grand-total"><span>Total (inc GST)</span><span>${{ number_format($payment->amount, 2) }} AUD</span></div>
    </div>

    <div style="margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center">
        <button class="btn-print" onclick="window.print()">🖨️ Print Invoice</button>
        <a href="{{ route('customer.payment-history') }}" style="color:#f7941d;text-decoration:none;font-size:14px">← Back to Payments</a>
    </div>
</div>
</div>
@endsection