<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Payments - PG Finsev</title>
    <style>
        *{box-sizing:border-box}
        html,body{margin:0;padding:0;background:#eef3f8;font-family:Inter,Arial,sans-serif;color:#344966}
        .app{width:100%;max-width:520px;min-height:100vh;margin:0 auto;background:#f7f9fc;padding-bottom:88px}
        .top{height:70px;padding:0 16px;background:#fff;border-bottom:1px solid #e7edf4;display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:20}
        .back{width:34px;height:34px;border-radius:10px;background:#f3f6fa;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#344966;font-size:20px}
        .title strong{display:block;color:#1d3557;font-size:13px}.title span{display:block;margin-top:3px;color:#94a3b8;font-size:7px}
        .content{padding:14px}.flash{padding:11px 13px;border-radius:11px;margin-bottom:12px;font-size:9px;font-weight:700}.success{background:#eaf8ef;border:1px solid #ccebd9;color:#287646}.error{background:#fff0f1;border:1px solid #f0ccd1;color:#a52834}
        .balance{padding:18px;border-radius:18px;background:linear-gradient(135deg,#1769e0,#3c8cff);color:#fff}.label{font-size:8px;opacity:.8;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.amount{margin-top:5px;font-size:27px;font-weight:900}.sub{margin-top:5px;font-size:8px;opacity:.8}
        .section{margin-top:17px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.section-title{font-size:11px;color:#1d3557;font-weight:900}
        .emi{background:#fff;border:1px solid #e7edf4;border-radius:15px;padding:14px;margin-bottom:9px}.emi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.emi-title{font-size:9px;font-weight:900;color:#344966}.emi-status{padding:5px 8px;border-radius:20px;background:#fff7e8;color:#b7791f;font-size:7px;font-weight:900;text-transform:uppercase}.emi-info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}.emi-info div{padding:9px;background:#f7f9fc;border-radius:9px}.emi-info span{display:block;font-size:7px;color:#94a3b8}.emi-info strong{display:block;margin-top:4px;font-size:9px;color:#344966}.pay{display:flex;align-items:center;justify-content:center;width:100%;height:37px;margin-top:11px;border-radius:9px;background:#1769e0;color:#fff;text-decoration:none;font-size:8px;font-weight:900}
        .history{background:#fff;border:1px solid #e7edf4;border-radius:15px;overflow:hidden}.row{padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #edf1f5}.row:last-child{border-bottom:0}.left{display:flex;align-items:center;gap:9px}.ico{width:32px;height:32px;border-radius:9px;background:#eaf2ff;color:#1769e0;display:flex;align-items:center;justify-content:center;font-size:12px}.rtitle{font-size:8px;font-weight:900;color:#344966}.rsub{margin-top:3px;font-size:7px;color:#94a3b8}.right{text-align:right}.ramount{font-size:9px;font-weight:900;color:#344966}.rstatus{margin-top:3px;font-size:7px;font-weight:900;color:#287646}.rstatus.pending{color:#b7791f}.empty{padding:20px;text-align:center;color:#94a3b8;font-size:8px}
        .nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;height:62px;background:#fff;border-top:1px solid #e7edf4;box-shadow:none;display:grid;grid-template-columns:repeat(4,1fr);z-index:50;padding:3px 6px calc(4px + env(safe-area-inset-bottom))}.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#94a3b8;font-size:7px;font-weight:800;text-decoration:none}.nav a.active{color:#1769e0}.nav .icon{font-size:16px}
        @media(min-width:700px){body{background:#e8eef5}.app{box-shadow:0 0 50px rgba(31,41,55,.08)}}
    </style>
</head>
<body>
<div class="app">

    <header class="top">
        <a href="<?php echo e(route('client.dashboard')); ?>" class="back">‹</a>
        <div class="title">
            <strong>Payments</strong>
            <span>Pay your EMI and view payment history</span>
        </div>
    </header>

    <main class="content">

        <?php if(session('success')): ?>
            <div class="flash success">✓ <?php echo e(session('success')); ?></div>
        <?php endif; ?>

        <?php if(session('error')): ?>
            <div class="flash error">⚠ <?php echo e(session('error')); ?></div>
        <?php endif; ?>

        <section class="balance">
            <div class="label">Total Outstanding EMI</div>
            <div class="amount">₹<?php echo e(number_format($totalOutstanding,2)); ?></div>
            <div class="sub">All unpaid EMI installments</div>
        </section>

        <section class="section">
            <div class="section-head">
                <div class="section-title">EMI Payments</div>
            </div>

            <?php $__empty_1 = true; $__currentLoopData = $pendingEmis; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $emi): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php $loan = $emi->loan_for_payment; ?>
                <div class="emi">
                    <div class="emi-top">
                        <div class="emi-title">
                            <?php echo e($loan->loan_number ?? 'Loan #'.$loan->id); ?> · EMI #<?php echo e($emi->installment_number); ?>

                        </div>
                        <div class="emi-status"><?php echo e(ucfirst($emi->status)); ?></div>
                    </div>

                    <div class="emi-info">
                        <div>
                            <span>Due Date</span>
                            <strong><?php echo e($emi->due_date ? \Illuminate\Support\Carbon::parse($emi->due_date)->format('d M Y') : '—'); ?></strong>
                        </div>
                        <div>
                            <span>EMI</span>
                            <strong>₹<?php echo e(number_format((float)$emi->emi_amount,2)); ?></strong>
                        </div>
                        <div>
                            <span>Outstanding</span>
                            <strong>₹<?php echo e(number_format((float)$emi->outstanding_amount,2)); ?></strong>
                        </div>
                    </div>

                    
                    <a href="<?php echo e(route('client.loans.show',$loan)); ?>" class="pay">
                        View EMI & Pay
                    </a>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="empty" style="background:#fff;border:1px solid #e7edf4;border-radius:15px">
                    No pending EMI payments.
                </div>
            <?php endif; ?>
        </section>

        <section class="section">
            <div class="section-head">
                <div class="section-title">Payment History</div>
            </div>

            <div class="history">
                <?php $__empty_1 = true; $__currentLoopData = $payments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $payment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="row">
                        <div class="left">
                            <div class="ico">₹</div>
                            <div>
                                <div class="rtitle">
                                    <?php echo e($payment->loan ? ($payment->loan->loan_number ?? 'Loan Payment') : 'Payment'); ?>

                                    <?php if($payment->installment): ?>
                                        · EMI #<?php echo e($payment->installment->installment_number); ?>

                                    <?php endif; ?>
                                </div>
                                <div class="rsub">
                                    <?php echo e($payment->paid_at?->format('d M Y, h:i A') ?? $payment->created_at?->format('d M Y, h:i A')); ?>

                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="ramount">₹<?php echo e(number_format((float)$payment->amount,2)); ?></div>
                            <div class="rstatus <?php echo e($payment->status !== 'paid' ? 'pending' : ''); ?>">
                                <?php echo e(ucfirst(str_replace('_',' ',$payment->status ?? '—'))); ?>

                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="empty">No payment history yet.</div>
                <?php endif; ?>
            </div>

            <?php if($payments->hasPages()): ?>
                <div style="padding:12px;text-align:center;font-size:8px">
                    <?php echo e($payments->links()); ?>

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

    </main>

    <nav class="nav">
        <a href="<?php echo e(route('client.dashboard')); ?>"><span class="icon">🏠</span>Home</a>
        <a href="<?php echo e(route('client.emi-card')); ?>"><span class="icon">💳</span>EMI Card</a>
        <a href="<?php echo e(route('client.loans')); ?>"><span class="icon">💰</span>Loans</a>
        <a href="<?php echo e(route('client.payments')); ?>" class="active"><span class="icon">₹</span>Payments</a>
    </nav>

</div>
</body>
</html><?php /**PATH C:\laragon\www\emi-card\resources\views/client/payments.blade.php ENDPATH**/ ?>