<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice <?php echo e($invoice->invoice_number); ?> — <?php echo e($invoice->user->business_name); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        * { box-sizing:border-box; }
        body {
            background: #f0fdf4;
            font-family: 'Segoe UI', system-ui, sans-serif;
            margin: 0;
            padding: 1.5rem 1rem 3rem;
        }

        .page-wrap { max-width: 680px; margin: 0 auto; }

        /* Top bar */
        .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #0f1923;
            border-radius: 12px;
            padding: 0.85rem 1.25rem;
            margin-bottom: 1rem;
        }

        .top-bar-brand {
            display: flex;
            align-items: center;
            gap: 8px;
            color: white;
            font-weight: 700;
            font-size: 0.95rem;
            text-decoration: none;
        }

        .top-bar-brand .icon {
            width: 28px; height: 28px;
            background: #00a651;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; color: white; font-weight: 900;
        }

        .top-bar-brand span { color: #00c96a; }

        /* Status pill */
        .status-pill {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .s-paid      { background:#dcfce7; color:#15803d; }
        .s-sent      { background:#dbeafe; color:#1d4ed8; }
        .s-viewed    { background:#ede9fe; color:#6d28d9; }
        .s-overdue   { background:#fee2e2; color:#b91c1c; }
        .s-draft     { background:#e2e8f0; color:#475569; }
        .s-cancelled { background:#f1f5f9; color:#334155; }

        /* Invoice card */
        .invoice-card {
            background: white;
            border-radius: 14px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.07);
            overflow: hidden;
        }

        .invoice-body { padding: 2rem; }

        /* Pay button */
        .pay-btn {
            display: block;
            width: 100%;
            background: #00a651;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 700;
            padding: 0.9rem 1.5rem;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            text-align: center;
        }

        .pay-btn:hover:not(:disabled) {
            background: #007a3d;
            transform: translateY(-1px);
        }

        .pay-btn:disabled { opacity: 0.65; cursor: not-allowed; }

        .secure-note {
            text-align: center;
            font-size: 0.75rem;
            color: #94a3b8;
            margin-top: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        /* Table */
        table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
        thead th {
            background: #f8fafc;
            padding: 0.6rem 0.75rem;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
            border-bottom: 2px solid #e2e8f0;
            text-align: left;
        }
        thead th.r { text-align: right; }
        tbody td { padding: 0.65rem 0.75rem; border-bottom: 1px solid #f1f5f9; color: #374151; }
        tbody td.r { text-align: right; }
        tfoot td { padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #64748b; }
        tfoot tr.grand td { border-top: 2px solid #e2e8f0; font-size: 1rem; font-weight: 700; color: #1e293b; padding-top: 0.75rem; }
        tfoot tr.grand td.amt { color: #00a651; }

        /* Footer */
        .page-footer {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.73rem;
            color: #94a3b8;
        }
        .page-footer a { color: #00a651; text-decoration: none; font-weight: 500; }

        @media (max-width: 576px) {
            .invoice-body { padding: 1.25rem; }
        }
    </style>
</head>
<body>

<div class="page-wrap">

    
    <div class="top-bar">
        <a href="#" class="top-bar-brand">
            <div class="icon">₦</div>
            Ola<span>Invoice</span>
        </a>
        <span class="status-pill s-<?php echo e($invoice->status); ?>"><?php echo e(ucfirst($invoice->status)); ?></span>
    </div>

    
    <div class="invoice-card">
        <div class="invoice-body">

            
            <div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-3">
                <div>
                    <?php if($invoice->user->logo_path): ?>
                        <img src="<?php echo e(asset('storage/' . $invoice->user->logo_path)); ?>"
                             alt="logo"
                             style="max-height:52px;max-width:150px;object-fit:contain;display:block;margin-bottom:8px;">
                    <?php endif; ?>
                    <div class="fw-700" style="font-size:1.1rem;color:#1e293b;">
                        <?php echo e($invoice->user->business_name); ?>

                    </div>
                    <?php if($invoice->user->address): ?>
                        <div class="text-muted" style="font-size:0.8rem;"><?php echo e($invoice->user->address); ?></div>
                    <?php endif; ?>
                </div>
                <div class="text-end">
                    <div style="font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;">Invoice</div>
                    <div style="font-family:monospace;font-size:1.35rem;font-weight:700;color:#1e293b;">
                        <?php echo e($invoice->invoice_number); ?>

                    </div>
                </div>
            </div>

            <hr style="border-color:#e2e8f0;">

            
            <div class="row mb-4">
                <div class="col-sm-6">
                    <div style="font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:5px;">
                        Bill To
                    </div>
                    <div class="fw-600" style="color:#1e293b;"><?php echo e($invoice->client->display_name); ?></div>
                    <?php if($invoice->client->email): ?>
                        <div class="text-muted small"><?php echo e($invoice->client->email); ?></div>
                    <?php endif; ?>
                    <?php if($invoice->client->address): ?>
                        <div class="text-muted small"><?php echo e($invoice->client->address); ?></div>
                    <?php endif; ?>
                </div>
                <div class="col-sm-6 mt-3 mt-sm-0">
                    <div class="row g-1" style="font-size:0.875rem;">
                        <div class="col-5 text-muted">Issue Date:</div>
                        <div class="col-7 fw-500"><?php echo e($invoice->issue_date->format('d/m/Y')); ?></div>
                        <div class="col-5 text-muted">Due Date:</div>
                        <div class="col-7 fw-500 <?php echo e($invoice->isOverdue() ? 'text-danger' : ''); ?>">
                            <?php echo e($invoice->due_date->format('d/m/Y')); ?>

                            <?php if($invoice->isOverdue()): ?>
                                <span style="font-size:0.7rem;"> (Overdue)</span>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="table-responsive mb-4">
                <table>
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th class="r" style="width:60px;">Qty</th>
                            <th class="r" style="width:115px;">Unit Price</th>
                            <th class="r" style="width:115px;">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $invoice->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td><?php echo e($item->description); ?></td>
                            <td class="r"><?php echo e($item->quantity); ?></td>
                            <td class="r">₦<?php echo e(number_format($item->unit_price, 2)); ?></td>
                            <td class="r fw-500">₦<?php echo e(number_format($item->total, 2)); ?></td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" class="text-end">Subtotal</td>
                            <td class="text-end">₦<?php echo e(number_format($invoice->subtotal, 2)); ?></td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-end">VAT (<?php echo e($invoice->vat_rate); ?>%)</td>
                            <td class="text-end">₦<?php echo e(number_format($invoice->vat_amount, 2)); ?></td>
                        </tr>
                        <?php if($invoice->discount > 0): ?>
                        <tr>
                            <td colspan="3" class="text-end">Discount</td>
                            <td class="text-end text-danger">-₦<?php echo e(number_format($invoice->discount, 2)); ?></td>
                        </tr>
                        <?php endif; ?>
                        <tr class="grand">
                            <td colspan="3" class="text-end">Total Due</td>
                            <td class="text-end amt">₦<?php echo e(number_format($invoice->total, 2)); ?></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            
            <?php if($invoice->notes): ?>
            <div class="p-3 rounded mb-4"
                 style="background:#f8fafc;font-size:0.85rem;color:#64748b;border:1px solid #e2e8f0;">
                <strong style="color:#374151;">Note: </strong><?php echo e($invoice->notes); ?>

            </div>
            <?php endif; ?>

            
            <?php if($invoice->user->bank_name): ?>
            <div class="p-3 rounded mb-4"
                 style="background:#f0fdf4;border:1px solid #bbf7d0;font-size:0.85rem;">
                <div class="fw-600 mb-1" style="color:#15803d;">
                    <i class="bi bi-bank me-1"></i>Bank Transfer Option
                </div>
                <div style="color:#166534;">
                    <?php echo e($invoice->user->bank_name); ?> &nbsp;·&nbsp;
                    <strong><?php echo e($invoice->user->account_number); ?></strong> &nbsp;·&nbsp;
                    <?php echo e($invoice->user->account_name); ?>

                </div>
            </div>
            <?php endif; ?>

            
            <?php if(!$invoice->isPaid() && !$invoice->isCancelled()): ?>
                <button id="payBtn" class="pay-btn" onclick="payWithPaystack()">
                    <i class="bi bi-shield-lock me-2"></i>
                    Pay ₦<?php echo e(number_format($invoice->total, 2)); ?> Now
                </button>
                <div class="secure-note">
                    <i class="bi bi-lock-fill"></i>
                    Secured by Paystack &nbsp;·&nbsp; 256-bit SSL encryption
                </div>

            <?php elseif($invoice->isPaid()): ?>
                <div class="text-center p-4 rounded"
                     style="background:#dcfce7;border:1px solid #bbf7d0;">
                    <i class="bi bi-patch-check-fill text-success"
                       style="font-size:2.5rem;display:block;margin-bottom:0.75rem;"></i>
                    <div class="fw-700 text-success" style="font-size:1.1rem;">Payment Received</div>
                    <div class="text-muted small mt-1">
                        Paid on <?php echo e($invoice->paid_at?->format('d F Y')); ?>

                    </div>
                </div>
            <?php elseif($invoice->isCancelled()): ?>
                <div class="text-center p-3 rounded"
                     style="background:#f1f5f9;border:1px solid #e2e8f0;">
                    <div class="fw-600 text-muted">This invoice has been cancelled.</div>
                </div>
            <?php endif; ?>

        </div>
    </div>

    
    <div class="page-footer">
        <p>
            Powered by <strong style="color:#00a651;">OlaInvoice</strong>
            &nbsp;·&nbsp;
            Built by
            <a href="https://adeyemoportfolio.armitech.com.ng/about.php"
               target="_blank" rel="noopener">
                Adeyemo Olamilekan
            </a>
        </p>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://js.paystack.co/v1/inline.js"></script>
<script>
function payWithPaystack() {
    const btn = document.getElementById('payBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Initializing payment...';

    fetch('<?php echo e(route("payments.initiate")); ?>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
        },
        body: JSON.stringify({ token: '<?php echo e($invoice->public_token); ?>' })
    })
    .then(r => r.json())
    .then(data => {
        if (!data.authorization_url) throw new Error(data.message || 'Initialization failed');

        const handler = PaystackPop.setup({
            key:      '<?php echo e($paystackPublicKey); ?>',
            email:    '<?php echo e($invoice->client->email ?? $invoice->user->email); ?>',
            amount:   <?php echo e((int)($invoice->total * 100)); ?>,
            currency: 'NGN',
            ref:      data.reference,
            metadata: {
                invoice_number: '<?php echo e($invoice->invoice_number); ?>',
                invoice_token:  '<?php echo e($invoice->public_token); ?>',
            },
            callback: function(response) {
                btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Confirming payment...';
                window.location.href = '<?php echo e(route("payments.callback")); ?>?reference=' + response.reference;
            },
            onClose: function() {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-shield-lock me-2"></i>Pay ₦<?php echo e(number_format($invoice->total, 2)); ?> Now';
            }
        });

        handler.openIframe();
    })
    .catch(err => {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-shield-lock me-2"></i>Pay ₦<?php echo e(number_format($invoice->total, 2)); ?> Now';
        alert('Could not start payment: ' + err.message);
    });
}
</script>
</body>
</html>
<?php /**PATH C:\Users\Bunmi\Desktop\crud\resources\views/invoices/public.blade.php ENDPATH**/ ?>