<?php $__env->startPush('styles'); ?>
<style>
    .portal-hero{position:relative;color:#fff;padding:26px 28px;margin-bottom:18px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(120deg,rgba(15,23,42,.78),rgba(30,64,175,.62));box-shadow:0 18px 45px rgba(15,23,42,.16);overflow:hidden}.portal-hero:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-58px;top:-90px;background:rgba(255,255,255,.1)}.hero-eyebrow{color:#bfdbfe;font-size:.73rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}.hero-title{font-size:clamp(1.35rem,3vw,2rem);font-weight:800;margin:0;position:relative;z-index:1}.hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:#dbeafe;font-size:.82rem;margin-top:9px}.hero-meta span{display:inline-flex;align-items:center;gap:6px}.hero-meta svg{width:15px;height:15px}.hero-status{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);font-size:.8rem;font-weight:800;white-space:nowrap}.status-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.18)}.status-dot.success{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}.status-dot.danger{background:#fb7185;box-shadow:0 0 0 4px rgba(251,113,133,.18)}.status-dot.info{background:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.18)}
    .summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.summary-card{padding:19px;border:1px solid var(--portal-border);border-radius:18px;background:#fff;box-shadow:0 9px 26px rgba(15,23,42,.055)}.summary-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.summary-label{font-size:.76rem;color:var(--portal-muted);font-weight:700}.summary-icon{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:#eff6ff;color:#2563eb}.summary-icon svg{width:19px;height:19px}.summary-icon.danger{background:#fff1f2;color:#e11d48}.summary-icon.success{background:#ecfdf5;color:#059669}.summary-icon.warning{background:#fffbeb;color:#d97706}.summary-value{font-size:1.18rem;font-weight:850;line-height:1.25;word-break:break-word}.summary-hint{font-size:.7rem;color:#94a3b8;margin-top:5px}
    .content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.section-card{border:1px solid var(--portal-border);border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.055);overflow:hidden}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 21px;border-bottom:1px solid #eef2f7}.section-title{font-size:1rem;font-weight:800;margin:0}.section-subtitle{font-size:.73rem;color:#94a3b8;margin-top:3px}.bill-table{margin:0}.bill-table th{padding:11px 18px;border:0;background:#f8fafc;color:#64748b;font-size:.68rem;text-transform:uppercase;letter-spacing:.045em}.bill-table td{padding:15px 18px;border-color:#f1f5f9;font-size:.82rem;vertical-align:middle}.invoice-code{font-weight:800;color:#1e40af}.bill-badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:.68rem;font-weight:800}.bill-badge.paid{color:#047857;background:#d1fae5}.bill-badge.partial{color:#a16207;background:#fef3c7}.bill-badge.unpaid{color:#be123c;background:#ffe4e6}.pay-now-button{border:0;border-radius:10px;padding:8px 12px;background:#2563eb;color:#fff;font-size:.75rem;font-weight:800;box-shadow:0 5px 14px rgba(37,99,235,.22)}.pay-now-button:hover{background:#1d4ed8;color:#fff}.mobile-bills{display:none}.info-list{padding:6px 20px 12px}.info-row{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #f1f5f9}.info-row:last-child{border:0}.info-label{font-size:.74rem;color:#64748b}.info-value{text-align:right;font-size:.8rem;font-weight:750;word-break:break-word}.secure-note{margin:0 20px 20px;padding:13px;border-radius:13px;background:#f0fdf4;color:#166534;font-size:.72rem;display:flex;gap:9px}.secure-note svg{width:17px;height:17px;flex:0 0 auto}.empty-state{padding:45px 20px;text-align:center;color:#94a3b8}.payment-amount-box{padding:16px;border-radius:15px;background:linear-gradient(135deg,#eff6ff,#eef2ff);border:1px solid #dbeafe;margin-bottom:19px}.payment-amount-box small{display:block;color:#64748b;font-weight:700;margin-bottom:3px}.payment-amount-box strong{font-size:1.45rem;color:#1d4ed8}
    @media(max-width:991.98px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.account-card{order:-1}}
    @media(max-width:575.98px){.portal-hero{padding:20px;margin-bottom:14px;border-radius:18px}.portal-hero .d-flex{align-items:flex-start!important;flex-direction:column}.hero-title{font-size:1.35rem}.hero-meta{display:grid;gap:7px}.hero-status{position:absolute;right:14px;top:14px;padding:7px 10px}.hero-status .status-text{display:none}.summary-grid{gap:10px;margin-bottom:14px}.summary-card{padding:14px;border-radius:15px}.summary-head{margin-bottom:9px}.summary-icon{width:32px;height:32px}.summary-value{font-size:.96rem}.summary-hint{font-size:.65rem}.content-grid{gap:14px}.section-header{padding:16px}.desktop-bills{display:none}.mobile-bills{display:block;padding:10px}.mobile-bill{padding:14px;border:1px solid #e8edf4;border-radius:14px;margin-bottom:9px}.mobile-bill:last-child{margin-bottom:0}.mobile-bill-top,.mobile-bill-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.mobile-bill-month{font-size:.72rem;color:#64748b;margin-top:3px}.mobile-bill-amounts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0;padding:11px;background:#f8fafc;border-radius:11px}.mobile-bill-amounts small{display:block;color:#94a3b8;font-size:.65rem}.mobile-bill-amounts strong{font-size:.82rem}.mobile-bill .pay-now-button{width:100%;margin-top:12px;min-height:42px}.info-list{padding-left:16px;padding-right:16px}.secure-note{margin-left:16px;margin-right:16px}}
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <?php
        [$connectionLabel, $connectionClass] = match ((int) $customer->status) {
            1 => ['Active', 'success'], 2 => ['Disconnected', 'danger'], 3 => ['Free Connection', 'info'], default => ['Inactive', 'secondary'],
        };
        $packageName = $customer->package?->name ?? 'Standard Package';
        $nextDisconnect = $customer->mikrotik_disconnect?->format('d M Y') ?? 'Lifetime';
    ?>

    <section class="portal-hero">
        <div class="d-flex align-items-center justify-content-between gap-3">
            <div><div class="hero-eyebrow">Welcome back</div><h1 class="hero-title">Hello, <?php echo e($customer->name); ?></h1>
                <div class="hero-meta">
                    <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4zM8 9h8M8 13h5"/></svg><?php echo e($customer->customer_code); ?></span>
                    <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12.55a11 11 0 0 1 14.08 0M8.5 16a6 6 0 0 1 7 0M12 20h.01"/></svg><?php echo e($customer->ip_address ?: 'No PPPoE username'); ?></span>
                </div>
            </div>
            <div class="hero-status"><span class="status-dot <?php echo e($connectionClass); ?>"></span><span class="status-text"><?php echo e($connectionLabel); ?></span></div>
        </div>
    </section>

    <section class="summary-grid" aria-label="Account summary">
        <div class="summary-card"><div class="summary-head"><span class="summary-label">Current Due</span><span class="summary-icon danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span></div><div class="summary-value text-danger"><?php echo e(app(\App\Services\CurrencyService::class)->format($totalDue)); ?></div><div class="summary-hint">Total unpaid balance</div></div>
        <div class="summary-card"><div class="summary-head"><span class="summary-label">Monthly Bill</span><span class="summary-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2h12v20l-3-2-3 2-3-2-3 2z"/><path d="M9 7h6M9 11h6"/></svg></span></div><div class="summary-value"><?php echo e(app(\App\Services\CurrencyService::class)->format($customer->monthly_bill)); ?></div><div class="summary-hint">Regular package charge</div></div>
        <div class="summary-card"><div class="summary-head"><span class="summary-label">Package</span><span class="summary-icon success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12.55a11 11 0 0 1 14.08 0M8.5 16a6 6 0 0 1 7 0M12 20h.01"/></svg></span></div><div class="summary-value"><?php echo e($packageName); ?></div><div class="summary-hint">Current internet plan</div></div>
        <div class="summary-card"><div class="summary-head"><span class="summary-label">Valid Until</span><span class="summary-icon warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></svg></span></div><div class="summary-value"><?php echo e($nextDisconnect); ?></div><div class="summary-hint">Next disconnect date</div></div>
    </section>

    <div class="content-grid">
        <section class="section-card">
            <div class="section-header"><div><h2 class="section-title">Recent Bills</h2><div class="section-subtitle">Your latest invoices and payment status</div></div></div>
            <div class="desktop-bills table-responsive"><table class="table bill-table align-middle"><thead><tr><th>Invoice</th><th>Month</th><th>Amount</th><th>Due</th><th>Status</th><th class="text-end">Action</th></tr></thead><tbody>
                <?php $__empty_1 = true; $__currentLoopData = $billings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bill): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php $billMonth = $bill->billing_month ? \Carbon\Carbon::create(null,(int)$bill->billing_month)->format('M') : '-'; $canPay = in_array($bill->status,['pending','partial']) && $onlinePaymentEnabled; ?>
                    <tr><td class="invoice-code">#<?php echo e($bill->invoice_id ?: $bill->id); ?></td><td><?php echo e($billMonth); ?> <?php echo e($bill->billing_year); ?></td><td><?php echo e(app(\App\Services\CurrencyService::class)->format($bill->amount)); ?></td><td class="fw-bold"><?php echo e(app(\App\Services\CurrencyService::class)->format($bill->due_amount)); ?></td><td><span class="bill-badge <?php echo e($bill->status === 'paid' ? 'paid' : ($bill->status === 'partial' ? 'partial' : 'unpaid')); ?>"><?php echo e(match($bill->status){'paid'=>'Paid','partial'=>'Partially Paid',default=>'Unpaid'}); ?></span></td><td class="text-end"><?php if($canPay): ?><button class="pay-now-button" type="button" data-action="<?php echo e(route('portal.payment.start',$bill)); ?>" data-invoice="#<?php echo e($bill->invoice_id ?: $bill->id); ?>" data-amount="<?php echo e(app(\App\Services\CurrencyService::class)->format($bill->due_amount)); ?>">Pay Now</button><?php else: ?><span class="text-muted">—</span><?php endif; ?></td></tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><tr><td colspan="6" class="empty-state">No bills found.</td></tr><?php endif; ?>
            </tbody></table></div>
            <div class="mobile-bills">
                <?php $__empty_1 = true; $__currentLoopData = $billings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bill): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php $billMonth = $bill->billing_month ? \Carbon\Carbon::create(null,(int)$bill->billing_month)->format('M') : '-'; $canPay = in_array($bill->status,['pending','partial']) && $onlinePaymentEnabled; ?>
                    <article class="mobile-bill"><div class="mobile-bill-top"><div><div class="invoice-code">#<?php echo e($bill->invoice_id ?: $bill->id); ?></div><div class="mobile-bill-month"><?php echo e($billMonth); ?> <?php echo e($bill->billing_year); ?></div></div><span class="bill-badge <?php echo e($bill->status === 'paid' ? 'paid' : ($bill->status === 'partial' ? 'partial' : 'unpaid')); ?>"><?php echo e(match($bill->status){'paid'=>'Paid','partial'=>'Partially Paid',default=>'Unpaid'}); ?></span></div><div class="mobile-bill-amounts"><div><small>Bill amount</small><strong><?php echo e(app(\App\Services\CurrencyService::class)->format($bill->amount)); ?></strong></div><div><small>Amount due</small><strong><?php echo e(app(\App\Services\CurrencyService::class)->format($bill->due_amount)); ?></strong></div></div><?php if($canPay): ?><button class="pay-now-button" type="button" data-action="<?php echo e(route('portal.payment.start',$bill)); ?>" data-invoice="#<?php echo e($bill->invoice_id ?: $bill->id); ?>" data-amount="<?php echo e(app(\App\Services\CurrencyService::class)->format($bill->due_amount)); ?>">Pay Now</button><?php endif; ?></article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><div class="empty-state">No bills found.</div><?php endif; ?>
            </div>
        </section>

        <aside class="section-card account-card"><div class="section-header"><div><h2 class="section-title">Account Details</h2><div class="section-subtitle">Registered connection information</div></div></div><div class="info-list"><div class="info-row"><span class="info-label">Customer ID</span><span class="info-value"><?php echo e($customer->customer_code); ?></span></div><div class="info-row"><span class="info-label">PPPoE Username</span><span class="info-value"><?php echo e($customer->ip_address ?: '—'); ?></span></div><div class="info-row"><span class="info-label">Phone</span><span class="info-value"><?php echo e($customer->contact_phone ?: '—'); ?></span></div><div class="info-row"><span class="info-label">Connection</span><span class="info-value"><?php echo e($connectionLabel); ?></span></div></div><div class="secure-note"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg><span>Your payment is securely verified before your connection is activated.</span></div></aside>
    </div>

    <div class="modal fade portal-modal" id="onlinePaymentModal" tabindex="-1" aria-labelledby="onlinePaymentModalLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form method="POST" id="onlinePaymentForm"><?php echo csrf_field(); ?><div class="modal-header"><div><h2 class="modal-title h5 fw-bold mb-1" id="onlinePaymentModalLabel">Online Payment</h2><small class="text-muted">Confirm your connection before continuing</small></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="payment-amount-box"><small>Amount to pay</small><strong id="onlinePaymentAmount"></strong></div><label class="form-label fw-semibold" for="onlinePaymentIp">PPPoE Username</label><input id="onlinePaymentIp" class="form-control" name="ip_address" value="<?php echo e($customer->ip_address); ?>" required><div class="form-text mt-2">Must exactly match your registered PPPoE username.</div></div><div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary px-4" id="continuePaymentButton" type="submit"><span class="payment-label">Continue to Payment</span><span class="payment-loader d-none"><span class="spinner-border spinner-border-sm me-2"></span>Redirecting...</span></button></div></form></div></div></div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        document.addEventListener('DOMContentLoaded',function(){const modalElement=document.getElementById('onlinePaymentModal'),modal=bootstrap.Modal.getOrCreateInstance(modalElement),form=document.getElementById('onlinePaymentForm'),submitButton=document.getElementById('continuePaymentButton');let submitting=false;document.querySelectorAll('.pay-now-button').forEach(function(button){button.addEventListener('click',function(){form.action=button.dataset.action;document.getElementById('onlinePaymentModalLabel').textContent='Pay invoice '+button.dataset.invoice;document.getElementById('onlinePaymentAmount').textContent=button.dataset.amount;modal.show()})});form.addEventListener('submit',function(event){event.preventDefault();if(submitting||!form.reportValidity())return;submitting=true;submitButton.disabled=true;form.querySelector('.payment-label').classList.add('d-none');form.querySelector('.payment-loader').classList.remove('d-none');modalElement.querySelectorAll('[data-bs-dismiss="modal"]').forEach(button=>button.disabled=true);setTimeout(function(){form.submit()},3000)})});
    </script>
    <?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.portal', ['title' => 'Dashboard'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\herd\billing\laravel-app\resources\views\portal\dashboard.blade.php ENDPATH**/ ?>