<?php
// app/Views/admin/subscription/invoice.php
$details = json_decode($sub['payment_details'] ?? '{}', true) ?: [];
$currency = FeatureGate::currency($sub['restaurant_id']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice #SUB-<?php echo str_pad($sub['id'], 5, '0', STR_PAD_LEFT); ?> - RestPO</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg: #09090b;
            --card-bg: #121218;
            --border: rgba(255, 255, 255, 0.08);
            --text-1: #f4f4f5;
            --text-2: #a1a1aa;
            --text-3: #71717a;
            --primary: #a855f7;
            --primary-glow: rgba(168, 85, 247, 0.2);
            --success: #10b981;
        }

        * {
            margin: 0; padding: 0; box-sizing: border-box;
            font-family: 'Outfit', sans-serif;
        }

        body {
            background-color: var(--bg);
            color: var(--text-1);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
        }

        /* Invoice Container */
        .invoice-card {
            width: 100%;
            max-width: 720px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
            position: relative;
            overflow: hidden;
        }

        .invoice-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 4px;
            background: linear-gradient(90deg, var(--primary), #6366f1);
        }

        /* Actions area */
        .actions-panel {
            width: 100%;
            max-width: 720px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            z-index: 10;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            border: none;
        }
        .btn-back {
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            color: var(--text-2);
        }
        .btn-back:hover {
            color: white;
            background: rgba(255,255,255,0.08);
        }
        .btn-primary {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 15px var(--primary-glow);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px var(--primary-glow);
        }

        /* Invoice Header Grid */
        .invoice-header {
            display: grid;
            grid-template-cols: 12fr;
            gap: 24px;
            border-b: 1px solid var(--border);
            padding-bottom: 30px;
            margin-bottom: 30px;
        }
        @media (min-width: 576px) {
            .invoice-header {
                grid-template-cols: 6fr 6fr;
            }
        }

        .logo-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }
        .logo-title span {
            color: var(--primary);
        }

        .meta-list {
            list-style: none;
            text-align: left;
            font-size: 13px;
            color: var(--text-2);
            line-height: 1.8;
        }
        @media (min-width: 576px) {
            .meta-list {
                text-align: right;
            }
        }
        .meta-list span {
            color: white;
            font-weight: 600;
        }

        /* Section Layouts */
        .billing-grid {
            display: grid;
            grid-template-cols: 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        @media (min-width: 576px) {
            .billing-grid {
                grid-template-cols: 1fr 1fr;
            }
        }

        .billing-col h3 {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-3);
            margin-bottom: 10px;
        }
        .billing-col p {
            font-size: 13px;
            color: var(--text-2);
            line-height: 1.6;
        }
        .billing-col strong {
            color: white;
            font-weight: 600;
        }

        /* Table */
        .invoice-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }
        .invoice-table th, .invoice-table td {
            padding: 14px 16px;
            font-size: 13px;
        }
        .invoice-table th {
            background: rgba(255,255,255,0.02);
            color: var(--text-3);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: left;
            border-bottom: 1.5px solid var(--border);
        }
        .invoice-table td {
            color: var(--text-2);
            border-bottom: 1px solid var(--border);
        }
        .invoice-table td.amount-col {
            font-weight: 700;
            color: white;
        }

        /* Total Panel */
        .total-panel {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin-bottom: 30px;
        }
        .total-row {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 320px;
            font-size: 13px;
            color: var(--text-2);
            padding: 6px 0;
        }
        .total-row.grand-total {
            border-top: 1.5px solid var(--border);
            padding-top: 12px;
            margin-top: 6px;
            font-size: 16px;
            font-weight: 800;
            color: var(--primary);
        }
        .total-row.grand-total span {
            color: white;
        }

        /* Payment Details */
        .payment-summary {
            background: rgba(255,255,255,0.015);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 40px;
        }
        .payment-summary h4 {
            font-size: 12px;
            font-weight: 800;
            color: var(--text-3);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 12px;
        }
        .payment-details-grid {
            display: grid;
            grid-template-cols: 1fr;
            gap: 12px;
        }
        @media (min-width: 576px) {
            .payment-details-grid {
                grid-template-cols: 1fr 1fr;
            }
        }
        .pay-detail-item {
            font-size: 12px;
            color: var(--text-2);
        }
        .pay-detail-item strong {
            color: white;
        }

        /* Footer */
        .invoice-footer {
            border-top: 1px dashed var(--border);
            padding-top: 30px;
            text-align: center;
        }
        .invoice-footer p {
            font-size: 11px;
            color: var(--text-3);
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .invoice-footer strong {
            color: var(--primary);
            font-weight: 700;
        }

        /* Printable styles */
        @media print {
            body {
                background: white;
                color: black;
                padding: 0;
            }
            .actions-panel {
                display: none !important;
            }
            .invoice-card {
                border: none;
                box-shadow: none;
                background: white;
                padding: 0;
            }
            .invoice-card::before {
                display: none;
            }
            .logo-title, .logo-title span, .invoice-table td.amount-col, .total-row.grand-total, .total-row.grand-total span, .billing-col strong, .meta-list span, .pay-detail-item strong, .invoice-footer strong {
                color: black !important;
            }
            .invoice-table th {
                background: #f1f5f9;
                color: #475569;
                border-bottom: 1.5px solid #cbd5e1;
            }
            .invoice-table td, .total-row.grand-total {
                border-bottom: 1px solid #e2e8f0;
            }
            .payment-summary {
                background: #f8fafc;
                border: 1px solid #e2e8f0;
            }
            .pay-detail-item, .billing-col p, .meta-list {
                color: #334155 !important;
            }
            .invoice-footer {
                border-top: 1px dashed #cbd5e1;
            }
        }
    </style>
</head>
<body>

    <!-- Actions -->
    <div class="actions-panel">
        <a href="/restpo/admin/subscription" class="btn btn-back">
            <i class="fas fa-arrow-left"></i> Back to Dashboard
        </a>
        <button onclick="window.print()" class="btn btn-primary">
            <i class="fas fa-print"></i> Print Invoice
        </button>
    </div>

    <!-- Invoice Sheet -->
    <div class="invoice-card">
        
        <!-- Header -->
        <div class="invoice-header">
            <div>
                <h1 class="logo-title"><i class="fas fa-utensils"></i> Rest<span>po</span></h1>
                <p style="font-size:12px; color:var(--text-3); margin-top:4px;">Premium Restaurant POS &amp; Management Ecosystem</p>
            </div>
            <div>
                <ul class="meta-list font-mono">
                    <li>Invoice No: <span>#SUB-<?php echo str_pad($sub['id'], 5, '0', STR_PAD_LEFT); ?></span></li>
                    <li>Date: <span><?php echo date('M d, Y', strtotime($sub['created_at'])); ?></span></li>
                    <li>Status: <span style="color:<?php echo $sub['status'] === 'active' ? 'var(--success)' : '#eab308'; ?>;"><?php echo strtoupper($sub['status']); ?></span></li>
                </ul>
            </div>
        </div>

        <!-- Billing Info -->
        <div class="billing-grid">
            <div class="billing-col">
                <h3>Billed To</h3>
                <p>
                    <strong><?php echo htmlspecialchars($restaurant['name']); ?></strong><br>
                    <?php if (!empty($restaurant['address'])): ?>
                        <?php echo nl2br(htmlspecialchars($restaurant['address'])); ?><br>
                    <?php endif; ?>
                    <?php if (!empty($restaurant['phone'])): ?>
                        Phone: <?php echo htmlspecialchars($restaurant['phone']); ?><br>
                    <?php endif; ?>
                    <?php if (!empty($restaurant['email'])): ?>
                        Email: <?php echo htmlspecialchars($restaurant['email']); ?>
                    <?php endif; ?>
                </p>
            </div>
            <div class="billing-col" style="text-align: left; @media (min-width: 576px) { text-align: right; }">
                <h3>Issued By</h3>
                <p>
                    <strong>Restipo Ltd.</strong><br>
                    Road 4, Sector 11, Uttara<br>
                    Dhaka, Bangladesh<br>
                    Phone: +880 1850-211813<br>
                    Email: support@restipo.com
                </p>
            </div>
        </div>

        <!-- Table -->
        <table class="invoice-table">
            <thead>
                <tr>
                    <th>Description</th>
                    <th style="text-align: right;">Duration</th>
                    <th style="text-align: right;">Total Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <strong>RestPO <?php echo htmlspecialchars($sub['package_name']); ?> Subscription</strong>
                        <p style="font-size: 11px; color: var(--text-3); margin-top: 4px;">Access to pos system, order analytics, QR menu table ordering, cashier/waiter sessions.</p>
                    </td>
                    <td style="text-align: right; white-space: nowrap;"><?php echo $sub['duration_days']; ?> Days</td>
                    <td style="text-align: right;" class="amount-col"><?php echo htmlspecialchars($currency) . number_format($sub['amount'], 2); ?></td>
                </tr>
            </tbody>
        </table>

        <!-- Total -->
        <div class="total-panel">
            <div class="total-row">
                <span>Subtotal:</span>
                <span class="font-semibold text-white"><?php echo htmlspecialchars($currency) . number_format($sub['amount'], 2); ?></span>
            </div>
            <div class="total-row">
                <span>Tax (0%):</span>
                <span class="font-semibold text-white"><?php echo htmlspecialchars($currency); ?>0.00</span>
            </div>
            <div class="total-row grand-total">
                <span>Grand Total:</span>
                <span><?php echo htmlspecialchars($currency) . number_format($sub['amount'], 2); ?></span>
            </div>
        </div>

        <!-- Offline Payment Details -->
        <?php if (!empty($sub['payment_method'])): ?>
        <div class="payment-summary">
            <h4>Payment Verification Details</h4>
            <div class="payment-details-grid">
                <div class="pay-detail-item">
                    Payment Channel: <strong><?php echo ucfirst(htmlspecialchars($sub['payment_method'])); ?></strong>
                </div>
                <div class="pay-detail-item">
                    Transaction Ref: <strong class="font-mono"><?php echo htmlspecialchars($details['transaction_ref'] ?? '—'); ?></strong>
                </div>
                <?php if (!empty($details['sender_number'])): ?>
                <div class="pay-detail-item">
                    Sender Account: <strong class="font-mono"><?php echo htmlspecialchars($details['sender_number']); ?></strong>
                </div>
                <?php endif; ?>
                <?php if (!empty($details['account_name'])): ?>
                <div class="pay-detail-item">
                    Sender Holder Name: <strong><?php echo htmlspecialchars($details['account_name']); ?></strong>
                </div>
                <?php endif; ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Footer -->
        <div class="invoice-footer">
            <p>Thank you for choosing RestPO. Contact us to make yours.</p>
            <strong>Restipo, Phone: 01850211813</strong>
        </div>

    </div>

</body>
</html>
