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

@section('styles')
<style>
.invoice-page{max-width:720px;margin:0 auto}
.invoice-card{background:#fff;border-radius:18px;box-shadow:0 4px 25px rgba(247,148,29,.15);overflow:hidden;font-family:'Segoe UI',sans-serif}

/* Purple header banner */
.inv-banner{
    background:linear-gradient(135deg,#f7941d 0%,#e8820a 100%);
    padding:48px 32px;
    text-align:center;
    color:#fff;
    position:relative;
}
.inv-banner h1{
    font-size:32px;
    font-weight:800;
    letter-spacing:4px;
    margin:0 0 6px;
    text-transform:uppercase;
}
.inv-banner .sub{font-size:13px;opacity:.92;letter-spacing:1px;text-transform:uppercase}

/* Body */
.inv-body{padding:36px 38px}

/* Company + Invoice info row */
.top-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:32px;
    padding-bottom:24px;
    border-bottom:2px dashed #e8e9f3;
}
.company-block h3{
    font-size:18px;
    font-weight:800;
    color:#1a1a1a;
    margin:0 0 10px;
    letter-spacing:.3px;
}
.company-block p{
    font-size:13px;
    color:#666;
    margin:3px 0;
    line-height:1.6;
}
.invoice-meta{text-align:right}
.invoice-meta .lbl{
    font-size:11px;
    font-weight:700;
    color:#999;
    text-transform:uppercase;
    letter-spacing:1px;
    margin:0 0 4px;
}
.invoice-meta .val{
    font-size:18px;
    font-weight:800;
    color:#f7941d;
    margin:0 0 16px;
    letter-spacing:.5px;
}
.invoice-meta .date-val{
    font-size:14px;
    color:#333;
    font-weight:600;
    margin:0;
}

/* Bill To */
.bill-section{
    background:linear-gradient(135deg,#f5f7ff,#faf0ff);
    border-left:4px solid #f7941d;
    border-radius:10px;
    padding:18px 22px;
    margin-bottom:28px;
}
.bill-section h4{
    color:#f7941d;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin:0 0 10px;
}
.bill-section .cust-name{
    font-size:17px;
    font-weight:700;
    color:#1a1a1a;
    margin:0 0 4px;
}
.bill-section .cust-email{
    font-size:13px;
    color:#666;
    margin:0;
}

/* Items table */
.items-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin-bottom:24px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #eee;
}
.items-table thead{
    background:linear-gradient(135deg,#f7941d,#e8820a);
}
.items-table th{
    padding:14px 18px;
    text-align:left;
    font-size:12px;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:1px;
}
.items-table th:last-child{text-align:right}
.items-table td{
    padding:16px 18px;
    font-size:14px;
    color:#333;
    background:#fff;
}
.items-table td:last-child{
    text-align:right;
    font-weight:700;
    font-size:15px;
    color:#1a1a1a;
}

/* Totals */
.totals-box{
    background:#f8f9fc;
    border-radius:12px;
    padding:20px 24px;
    margin-bottom:24px;
}
.total-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 0;
    font-size:14px;
    color:#666;
}
.total-row strong{color:#333;font-weight:700}
.total-row.grand{
    border-top:2px solid #e0e3f5;
    margin-top:12px;
    padding-top:14px;
    font-size:18px;
}
.total-row.grand .label{
    color:#1a1a1a;
    font-weight:700;
}
.total-row.grand .amount{
    color:#f7941d;
    font-weight:800;
    font-size:22px;
}

/* GST Note */
.gst-note{
    background:#fffaf0;
    border:1px solid #f9d8a0;
    border-radius:10px;
    padding:14px 18px;
    font-size:12px;
    color:#7a5824;
    line-height:1.6;
    margin-bottom:24px;
}
.gst-note strong{color:#5a3f0c}

/* Actions */
.actions{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:28px;
}
.btn-action{
    padding:13px 28px;
    border-radius:11px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:none;
    transition:.2s;
}
.btn-print{
    background:linear-gradient(135deg,#f7941d,#e8820a);
    color:#fff;
    box-shadow:0 4px 14px rgba(247,148,29,.4);
}
.btn-print:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(247,148,29,.5)}
.btn-back{background:#f0f0f0;color:#444}
.btn-back:hover{background:#e0e0e0}

/* Menu Style Buttons from Front Website */
.btn-menu-style {
    color: #fff !important;
    font-weight: 700;
    text-align: center;
    padding: 13px 28px;
    border-radius: 8px;
    letter-spacing: .6px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .25s ease;
    border: none;
    cursor: pointer;
}
.btn-menu-style:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.c-home { background: #07b8a3 !important; border-bottom: 4px solid #089a89 !important; }
.c-about { background: #81c66b !important; border-bottom: 4px solid #67a055 !important; }
.c-services { background: #ff7528 !important; border-bottom: 4px solid #d9a810 !important; }
.c-gallery { background: #11A2D9 !important; border-bottom: 4px solid #0c8bbb !important; }
.c-contact { background: #de2779 !important; border-bottom: 4px solid #af1b5d !important; }

/* Logout Button Styling in Sidebar */
.sidebar a[href*="logout"],
.sidebar form[action*="logout"] button,
.sidebar .logout-btn,
.sidebar .btn-logout,
.main-sidebar a[href*="logout"],
.main-sidebar form[action*="logout"] button,
.sidebar-wrapper a[href*="logout"] {
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    letter-spacing: .6px !important;
    font-size: 14px !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .25s ease !important;
    border: none !important;
    cursor: pointer !important;
    background: #de2779 !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.sidebar a[href*="logout"]:hover,
.sidebar form[action*="logout"] button:hover,
.sidebar .logout-btn:hover,
.sidebar .btn-logout:hover,
.main-sidebar a[href*="logout"]:hover,
.main-sidebar form[action*="logout"] button:hover,
.sidebar-wrapper a[href*="logout"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    color: #fff !important;
    background: #de2779 !important;
}

/* Top Navbar Profile Color */
.navbar .nav-link, .navbar .dropdown-toggle, .navbar .user-name, header .user-name, .navbar .profile-text {
    color: #f7941d !important;
}

/* Sidebar Logo Image */
.logo-text, .sidebar .logo-text, .main-sidebar .logo-text {
    color: transparent !important;
    text-indent: -9999px !important;
    background-image: url('{{ asset("images/logo.png") }}') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100% !important;
    height: 65px !important;
    display: block !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

/* Sidebar Theme override */
.main-sidebar, .sidebar, aside, .sidebar-wrapper {
    background: #1d1d1d !important;
}
.sidebar .nav-link, .sidebar a {
    color: #fff !important;
}
.sidebar .nav-link:hover, .sidebar a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #07b8a3 !important;
}
.sidebar .nav-item .nav-link.active, .sidebar .active > a {
    background: linear-gradient(90deg, #81c66b 0%, #07b8a3 25%, #ff7528 70%, #de2779 100%) !important;
    color: #fff !important;
    border-radius: 6px;
}

@media(max-width:640px){
    .top-row{flex-direction:column}
    .invoice-meta{text-align:left}
    .inv-body{padding:24px}
}

/* ---------- PRINT ---------- */
@media print {
    *{
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
        color-adjust:exact !important;
    }
    body * { visibility: hidden; }
    .invoice-card, .invoice-card * { visibility: visible; }
    .invoice-card {
        position: absolute !important;
        left:0; top:0;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        box-shadow:none !important;
        border-radius:0 !important;
    }
    .inv-banner {
        background:linear-gradient(135deg,#f7941d 0%,#e8820a 100%) !important;
        color:#fff !important;
    }
    .inv-banner h1, .inv-banner .sub { color:#fff !important; }
    .items-table thead {
        background:linear-gradient(135deg,#f7941d,#e8820a) !important;
    }
    .items-table th { color:#fff !important; }
    .invoice-meta .val,
    .total-row.grand .amount,
    .bill-section h4 { color:#f7941d !important; }
    .bill-section { background:linear-gradient(135deg,#f5f7ff,#faf0ff) !important; }
    .gst-note { background:#fffaf0 !important; }
    .totals-box { background:#f8f9fc !important; }
    .actions { display:none !important; }
    @page { margin:10mm; size:A4; }
}
</style>
@endsection

@section('content')
<div class="invoice-page">
<div class="invoice-card">

    <div class="inv-banner">
        <h1>Tax Invoice</h1>
        <div class="sub">Includes GST</div>
    </div>

    <div class="inv-body">
        <div class="top-row">
            <div class="company-block">
                <h3>Yahya Playland</h3>
                <p>123 Business Street</p>
                <p>Sydney, NSW 2000</p>
                <p>ABN: 12 345 678 910</p>
            </div>
            <div class="invoice-meta">
                <p class="lbl">Invoice #</p>
                <p class="val">{{ $payment->invoice_no }}</p>
                <p class="lbl">Date</p>
                <p class="date-val">{{ $payment->created_at->format('d M Y') }}</p>
            </div>
        </div>

        <div class="bill-section">
            <h4>Bill To</h4>
            <p class="cust-name">{{ $payment->customer_name }}</p>
            <p class="cust-email">{{ $payment->customer_email }}</p>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        @if($payment->type === 'donation')
                            Donation Payment
                        @else
                            Credit Pre-payment
                        @endif
                    </td>
                    <td>${{ number_format($payment->amount_ex_gst, 2) }}</td>
                </tr>
            </tbody>
        </table>

        <div class="totals-box">
            <div class="total-row">
                <span>Subtotal</span>
                <strong>${{ number_format($payment->amount_ex_gst, 2) }}</strong>
            </div>
            <div class="total-row">
                <span>GST (10%)</span>
                <strong>${{ number_format($payment->gst, 2) }}</strong>
            </div>
            <div class="total-row grand">
                <span class="label">Total (incl. GST)</span>
                <span class="amount">${{ number_format($payment->amount, 2) }}</span>
            </div>
        </div>

        <div class="gst-note">
            <strong>GST Summary:</strong> This is a tax invoice for GST purposes. GST amount shown is included in the total price.
        </div>

        <div class="actions">
            <button class="btn-menu-style c-gallery" onclick="window.print()">📄 Download PDF</button>
            <a class="btn-menu-style c-about" href="{{ route('customer.payment-history') }}">← Back to Payments</a>
        </div>
    </div>
</div>
</div>
@endsection