<!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 - EMI CREDITS</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:98px}
        .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:15px}.title span{display:block;margin-top:3px;color:#94a3b8;font-size:10px}
        .content{padding:14px}.flash{padding:11px 13px;border-radius:11px;margin-bottom:12px;font-size:12px;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:11px;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:11px;opacity:.8}
        .section{margin-top:17px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.section-title{font-size:14px;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:12px;font-weight:900;color:#344966}.emi-status{padding:5px 8px;border-radius:20px;background:#fff7e8;color:#b7791f;font-size:10px;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:10px;color:#94a3b8}.emi-info strong{display:block;margin-top:4px;font-size:12px;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:11px;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:14px}.rtitle{font-size:11px;font-weight:900;color:#344966}.rsub{margin-top:3px;font-size:10px;color:#94a3b8}.right{text-align:right}.ramount{font-size:12px;font-weight:900;color:#344966}.rstatus{margin-top:3px;font-size:10px;font-weight:900;color:#287646}.rstatus.pending{color:#b7791f}.empty{padding:20px;text-align:center;color:#94a3b8;font-size:11px}

        @media(min-width:700px){body{background:#e8eef5}.app{box-shadow:0 0 50px rgba(31,41,55,.08)}}
    

        /* Premium dark-blue theme — visual only */
        html,body{background:#eef3f8;color:#344966}
        .app{background:#f7f9fc}
        .top{background:#fff;border-bottom-color:#dfe7f1}
        .back{background:#edf3fa;color:#0b2d5c;border-radius:8px}
        .title strong{color:#102a43}
        .balance{
            padding:18px;
            border-radius:8px;
            background:linear-gradient(135deg,#061b3a 0%,#0b2d5c 48%,#123f78 100%);
            color:#fff;
            box-shadow:0 14px 32px rgba(6,27,58,.20);
        }
        .balance .label,.balance .sub{color:#dbeafe}
        .section-title{color:#102a43}
        .emi{
            border-color:#dfe7f1;
            border-radius:8px;
            box-shadow:0 6px 18px rgba(16,42,67,.045);
        }
        .emi-title{color:#102a43}
        .emi-status{border-radius:8px}
        .emi-info div{border-radius:8px;background:#f3f7fb}
        .emi-info strong{color:#0b2d5c}
        .pay{
            border-radius:8px;
            background:linear-gradient(135deg,#0b2d5c,#0b5ed7);
            box-shadow:0 7px 16px rgba(11,45,92,.16);
        }
        .history{
            border-color:#dfe7f1;
            border-radius:8px;
            box-shadow:0 6px 18px rgba(16,42,67,.045);
        }
        .row{border-bottom-color:#e8eef5}
        .ico{border-radius:8px;background:#e8f1ff;color:#0b5ed7}
        .rtitle,.ramount{color:#102a43}
        .empty{color:#8795a8}
        .flash{border-radius:8px}

</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(money($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(money((float)$emi->emi_amount,2)); ?></strong>
                        </div>
                        <div>
                            <span>Outstanding</span>
                            <strong><?php echo e(money((float)$emi->outstanding_amount)); ?></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">
                                <?php echo e(preg_replace('/[-+0-9.,\s]+/u', '', money(0))); ?>

                            </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(money((float)$payment->amount)); ?></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:11px">
                    <?php echo e($payments->links()); ?>

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

    </main>

    <?php echo $__env->make('client.partials.bottom-nav', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>


</div>
</body>
</html><?php /**PATH /home/eduintxshop/public_html/loan.eduintx.shop/resources/views/client/payments.blade.php ENDPATH**/ ?>