<!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, user-scalable=no">
    <title>Dashboard - EMI CREDITS</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <style>
        *{box-sizing:border-box}
        html,body{margin:0;padding:0;background:#eef3f8;font-family:Inter,Arial,sans-serif;color:#344966}
        body{min-height:100vh}
        .app{width:100%;max-width:520px;min-height:100vh;margin:0 auto;background:#f7f9fc;padding-bottom:88px}
        .top{padding:18px 17px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
        .greeting{min-width:0}
        .eyebrow{font-size:10px;color:#94a3b8;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
        .greeting h1{margin:4px 0 0;color:#1d3557;font-size:20px;font-weight:900}
        .avatar{width:39px;height:39px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1769e0;color:#fff;font-size:15px;font-weight:900;flex:none}
        .logout-form{margin:0}
        .logout-btn{margin-top:6px;border:0;background:none;padding:0;color:#94a3b8;font-size:15px;font-weight:800;cursor:pointer}
        .logout-btn:hover{color:#a52834}
        .content{padding:8px 14px 20px}
        .flash{padding:11px 13px;border-radius:11px;margin-bottom:12px;font-size:15px;font-weight:700}
        .success{background:#eaf8ef;border:1px solid #ccebd9;color:#287646}
        .error{background:#fff0f1;border:1px solid #f0ccd1;color:#a52834}

        .hero{
            padding:20px;
            border-radius:21px;
            background:linear-gradient(135deg,#125ed1 0%,#2d7df0 58%,#4b97ff 100%);
            color:#fff;
            box-shadow:0 14px 34px rgba(23,105,224,.20);
            position:relative;
            overflow:hidden
        }

        .hero:after{
            content:"";
            position:absolute;
            width:180px;
            height:180px;
            border-radius:50%;
            right:-80px;
            top:-95px;
            background:rgba(255,255,255,.10);
            pointer-events:none
        }

        .hero-top,.hero-limit-label,.hero-limit,.hero-foot{
            position:relative;
            z-index:1
        }

        .hero-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px
        }

        .hero-label{
            font-size:10px;
            opacity:.8;
            font-weight:800;
            text-transform:uppercase;
            letter-spacing:.5px
        }

        .hero-number{
            margin-top:5px;
            font-size:15px;
            font-weight:800;
            letter-spacing:1px
        }

        .hero-limit-label{
            margin-top:20px;
            font-size:10px;
            opacity:.8
        }

        .hero-limit{
            margin-top:3px;
            font-size:27px;
            font-weight:900
        }

        .hero-foot{
            margin-top:16px;
            padding-top:13px;
            border-top:1px solid rgba(255,255,255,.18);
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px
        }

        .hero-foot span{
            display:block;
            font-size:10px;
            opacity:.75
        }

        .hero-foot strong{
            display:block;
            margin-top:4px;
            font-size:10px
        }

        .section{margin-top:17px}

        .section-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:9px
        }

        .section-title{
            font-size:15px;
            color:#1d3557;
            font-weight:900
        }

        .section-link{
            font-size:11px;
            color:#1769e0;
            font-weight:800;
            text-decoration:none
        }

        .loan-card,
        .next-card,
        .quick-card,
        .payment-card,
        .empty-card{
            background:#fff;
            border:1px solid #e7edf4;
            border-radius:16px
        }

        .next-card{
            padding:16px;
            border-radius:17px;
            box-shadow:0 5px 18px rgba(31,41,55,.035)
        }

        .next-card:before{
            content:"";
            display:block;
            width:4px;
            height:38px;
            border-radius:8px;
            background:#1769e0;
            float:left;
            margin-right:11px
        }

        .next-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px
        }

        .next-label{
            font-size:10px;
            color:#94a3b8;
            font-weight:800;
            text-transform:uppercase
        }

        .next-amount{
            font-size:18px;
            color:#1d3557;
            font-weight:900
        }

        .next-meta{
            margin-top:7px;
            font-size:11px;
            color:#718198
        }

        .pay-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            margin-top:12px;
            width:100%;
            height:39px;
            border-radius:10px;
            background:#1769e0;
            color:#fff;
            text-decoration:none;
            font-size:15px;
            font-weight:900
        }

        .loan-card{
            padding:16px;
            box-shadow:0 5px 18px rgba(31,41,55,.035)
        }

        .loan-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px
        }

        .loan-number{
            font-size:12px;
            color:#1769e0;
            font-weight:900
        }

        .loan-status{
            padding:5px 8px;
            border-radius:20px;
            background:#eaf8ef;
            color:#287646;
            font-size:15px;
            font-weight:900;
            text-transform:uppercase
        }

        .loan-stats{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:8px;
            margin-top:12px
        }

        .loan-stat{
            padding:9px;
            background:#f7f9fc;
            border-radius:9px
        }

        .loan-stat span{
            display:block;
            font-size:10px;
            color:#94a3b8
        }

        .loan-stat strong{
            display:block;
            margin-top:4px;
            font-size:9px;
            color:#344966
        }

        /* Quick Actions */
        .quick-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:9px
        }

        .quick{
            min-height:76px;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            background:#fff;
            border:1px solid #e7edf4;
            border-radius:15px;
            text-decoration:none;
            color:#344966
        }

        .quick-icon{
            width:32px;
            height:32px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:10px;
            background:#eaf2ff;
            color:#1769e0;
            font-size:14px
        }

        .quick-label{
            margin-top:6px;
            font-size:8px;
            font-weight:800
        }

        .quick-actions-modern{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:7px
        }

        .quick-action-modern{
            position:relative;
            min-height:96px;
            padding:9px 9px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            overflow:hidden;
            background:#fff;
            border:1px solid #e5ebf3;
            border-radius:8px;
            text-decoration:none;
            color:#1d3557;
            box-shadow:0 6px 18px rgba(31,41,55,.045);
            transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
        }

        .quick-action-modern:hover{
            transform:translateY(-2px);
            box-shadow:0 10px 24px rgba(31,41,55,.08);
            border-color:#d6e2f2
        }

        .quick-action-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:7px
        }

        .quick-action-icon{
            width:34px;
            height:34px;
            border-radius:8px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:17px;
            background:transparent;
            color:#fff
        }

        .quick-action-icon i{
            color:#fff !important;
            font-size:17px
        }

        .quick-action-arrow{
            width:21px;
            height:21px;
            border-radius:8px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:transparent;
            color:#fff;
            font-size:11px;
            font-weight:900
        }

        .quick-action-arrow i{
            color:#fff !important;
            font-size:11px
        }

        .quick-action-modern strong{
            display:block;
            font-size:11px;
            font-weight:900;
            color:#1d3557;
            line-height:1.25
        }

        .quick-action-modern span{
            display:block;
            margin-top:3px;
            font-size:8px;
            line-height:1.35;
            color:#8795a8;
            font-weight:700
        }

        /* Existing gradients */
        .quick-action-modern.credit .quick-action-icon{
            background:transparent;
            color:#fff
        }

        .quick-action-modern.loan .quick-action-icon{
            background:transparent;
            color:#fff
        }

        .quick-action-modern.mobile .quick-action-icon{
            background:transparent;
            color:#fff
        }

        /* Red */
        .quick-action-modern.red-gradient{
            background:linear-gradient(
                135deg,
                #db0503 0%,
                #f31e00 100%
            );
            border:none;
            color:#fff
        }

        /* Violet */
        .quick-action-modern.violet-gradient{
            background:linear-gradient(
                135deg,
                #4a4087 0%,
                #4e498b 100%
            );
            border:none;
            color:#fff
        }

        /* Pink */
        .quick-action-modern.pink-gradient{
            background:linear-gradient(
                135deg,
                #bb2169 0%,
                #d22b7b 100%
            );
            border:none;
            color:#fff
        }

        /* Green EMI Calculator */
        .quick-action-modern.green-gradient{
            background:linear-gradient(
                135deg,
                #31b004 0%,
                #2a9405 100%
            );
            border:none;
            color:#fff
        }

        /* White text for all gradient cards */
        .quick-action-modern.red-gradient strong,
        .quick-action-modern.red-gradient span,
        .quick-action-modern.red-gradient .quick-action-icon,
        .quick-action-modern.red-gradient .quick-action-arrow,

        .quick-action-modern.violet-gradient strong,
        .quick-action-modern.violet-gradient span,
        .quick-action-modern.violet-gradient .quick-action-icon,
        .quick-action-modern.violet-gradient .quick-action-arrow,

        .quick-action-modern.pink-gradient strong,
        .quick-action-modern.pink-gradient span,
        .quick-action-modern.pink-gradient .quick-action-icon,
        .quick-action-modern.pink-gradient .quick-action-arrow,

        .quick-action-modern.green-gradient strong,
        .quick-action-modern.green-gradient span,
        .quick-action-modern.green-gradient .quick-action-icon,
        .quick-action-modern.green-gradient .quick-action-arrow{
            color:#fff !important
        }

        /* All Quick Action Icons - White */
        .quick-action-modern .quick-action-icon{
            background:transparent !important;
            border:none !important;
            box-shadow:none !important;
            color:#fff !important
        }

        .quick-action-modern .quick-action-icon i{
            color:#fff !important
        }

        /* All arrows - White */
        .quick-action-modern .quick-action-arrow{
            color:#fff !important;
            background:transparent !important
        }

        .quick-action-modern .quick-action-arrow i{
            color:#fff !important
        }

        /* Hover */
        .quick-action-modern.red-gradient:hover{
            transform:translateY(-3px);
            box-shadow:0 12px 28px rgba(219,5,3,.30)
        }

        .quick-action-modern.violet-gradient:hover{
            transform:translateY(-3px);
            box-shadow:0 12px 28px rgba(74,64,135,.30)
        }

        .quick-action-modern.pink-gradient:hover{
            transform:translateY(-3px);
            box-shadow:0 12px 28px rgba(187,33,105,.30)
        }

        .quick-action-modern.green-gradient:hover{
            transform:translateY(-3px);
            box-shadow:0 12px 28px rgba(49,176,4,.30)
        }

        .dashboard-intro{
            margin:0 2px 12px;
            color:#7b8da5;
            font-size:11px;
            font-weight:700
        }

        .dashboard-mini-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:9px;
            margin-top:10px
        }

        .dashboard-mini{
            padding:12px 13px;
            background:#fff;
            border:1px solid #e7edf4;
            border-radius:15px
        }

        .dashboard-mini-label{
            font-size:10px;
            color:#94a3b8;
            font-weight:800
        }

        .dashboard-mini-value{
            margin-top:4px;
            font-size:15px;
            color:#1d3557;
            font-weight:900
        }

        .dashboard-mini-note{
            margin-top:3px;
            font-size:9px;
            color:#8795a8;
            font-weight:700
        }

        .payment-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:12px 13px;
            border-bottom:1px solid #edf1f5
        }

        .payment-row:last-child{
            border-bottom:0
        }

        .payment-left{
            display:flex;
            align-items:center;
            gap:9px
        }

        .payment-icon{
            width:33px;
            height:33px;
            border-radius:10px;
            background:#eaf2ff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:13px
        }

        .payment-title{
            font-size:15px;
            font-weight:900;
            color:#344966
        }

        .payment-date{
            margin-top:3px;
            font-size:10px;
            color:#94a3b8
        }

        .payment-right{
            text-align:right
        }

        .payment-amount{
            font-size:15px;
            font-weight:900;
            color:#344966
        }

        .payment-status{
            margin-top:3px;
            font-size:15px;
            font-weight:800;
            color:#287646
        }

        .payment-status.pending{
            color:#b7791f
        }

        .empty-card{
            padding:17px;
            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:15px;
            font-weight:800;
            text-decoration:none
        }

        .nav a.active{
            color:#1769e0
        }

        .nav .icon{
            font-size:16px
        }

        @media(max-width:699px){

            .greeting h1{
                font-size:19px
            }

            .section-title{
                font-size:14px
            }

            .section-link{
                font-size:10px
            }

            .quick-label{
                font-size:10px
            }

            .loan-stat span{
                font-size:10px
            }

            .loan-stat strong{
                font-size:11px
            }

            .payment-title{
                font-size:10px
            }

            .payment-date{
                font-size:10px
            }

            .payment-amount{
                font-size:11px
            }

            .payment-status{
                font-size:10px
            }

            .nav a{
                font-size:10px
            }

            .quick-actions-modern{
                grid-template-columns:repeat(4,1fr);
                gap:6px
            }

            .quick-action-modern{
                min-height:94px;
                padding:8px 7px
            }

            .quick-action-modern strong{
                font-size:10px
            }

            .quick-action-modern span{
                font-size:7px
            }

            .quick-action-icon{
                width:32px;
                height:32px
            }
        }

        @media(max-width:420px){

            .quick-actions-modern{
                gap:6px
            }

            .quick-action-modern{
                min-height:94px;
                padding:8px 6px
            }

            .quick-action-modern strong{
                font-size:9px
            }

            .quick-action-modern span{
                font-size:7px
            }

            .quick-action-icon{
                width:30px;
                height:30px;
                font-size:15px
            }

            .quick-action-icon i{
                font-size:15px
            }
        }

        @media(max-width:380px){

            .section-title{
                font-size:13px
            }

            .section-link{
                font-size:10px
            }

            .quick-label{
                font-size:10px
            }

            .loan-stat span{
                font-size:9px
            }

            .loan-stat strong{
                font-size:10px
            }

            .quick-actions-modern{
                grid-template-columns:repeat(2,1fr);
                gap:7px
            }

            .quick-action-modern{
                min-height:96px
            }

            .quick-action-modern strong{
                font-size:11px
            }

            .quick-action-modern span{
                font-size:8px
            }
        }

        @media(min-width:700px){
            body{
                background:#e8eef5
            }

            .app{
                box-shadow:0 0 50px rgba(31,41,55,.08)
            }
        }

        .profile-menu-wrap{
            position:relative;
            flex:none
        }

        .profile-menu-btn{
            position:relative;
            width:42px;
            height:42px;
            padding:0;
            border:0;
            background:transparent;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center
        }

        .profile-menu-btn .avatar{
            width:39px;
            height:39px;
            box-shadow:0 2px 8px rgba(23,105,224,.12)
        }

        .profile-menu-arrow{
            position:absolute;
            right:-2px;
            bottom:-1px;
            width:15px;
            height:15px;
            border-radius:50%;
            background:#fff;
            border:1px solid #e2e8f0;
            color:#64748b;
            font-size:10px;
            line-height:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:900
        }

        .profile-notification-badge{
            position:absolute;
            top:-3px;
            right:-4px;
            min-width:16px;
            height:16px;
            padding:0 4px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:20px;
            background:#dc3545;
            color:#fff;
            border:2px solid #f7f9fc;
            font-size:7px;
            font-weight:900;
            line-height:1
        }

        .profile-dropdown{
            position:absolute;
            top:49px;
            right:0;
            width:205px;
            padding:8px;
            background:#fff;
            border:1px solid #e4eaf1;
            border-radius:14px;
            box-shadow:0 12px 30px rgba(31,41,55,.14);
            display:none;
            z-index:100
        }

        .profile-dropdown.show{
            display:block
        }

        .profile-dropdown-user{
            display:flex;
            align-items:center;
            gap:9px;
            padding:7px 7px 9px
        }

        .profile-dropdown-user .avatar.small{
            width:34px;
            height:34px;
            font-size:10px
        }

        .profile-dropdown-user-info{
            min-width:0
        }

        .profile-dropdown-user-info strong{
            display:block;
            color:#1d3557;
            font-size:9px;
            font-weight:900;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis
        }

        .profile-dropdown-user-info span{
            display:block;
            margin-top:3px;
            color:#94a3b8;
            font-size:7px;
            font-weight:700
        }

        .profile-dropdown-divider{
            height:1px;
            background:#edf1f5;
            margin:4px 0
        }

        .profile-dropdown-item{
            width:100%;
            min-height:36px;
            display:flex;
            align-items:center;
            gap:9px;
            padding:0 9px;
            border:0;
            border-radius:9px;
            background:transparent;
            color:#344966;
            text-decoration:none;
            font-size:8px;
            font-weight:800;
            cursor:pointer;
            text-align:left
        }

        .profile-dropdown-item:hover{
            background:#f4f7fb;
            color:#1769e0
        }

        .dropdown-icon{
            width:25px;
            height:25px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:8px;
            background:#eaf2ff;
            font-size:12px;
            flex:none
        }

        .dropdown-count{
            margin-left:auto;
            min-width:17px;
            height:17px;
            padding:0 4px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:20px;
            background:#dc3545;
            color:#fff;
            font-size:7px;
            font-weight:900
        }

        .profile-logout-form{
            margin:0
        }

        .logout-item{
            color:#a52834
        }

        .logout-item:hover{
            background:#fff3f4;
            color:#a52834
        }

        @media(max-width:360px){

            .profile-dropdown{
                right:-4px;
                width:195px
            }
        }

        /* Larger, more readable client typography */
        .eyebrow{font-size:11px !important}
        .greeting h1{font-size:21px !important}
        .flash{font-size:13px !important}
        .hero-label{font-size:11px !important}
        .hero-number{font-size:14px !important}
        .hero-limit-label{font-size:11px !important}
        .hero-limit{font-size:29px !important}
        .hero-foot span{font-size:11px !important}
        .hero-foot strong{font-size:14px !important}
        .section-title{font-size:16px !important}
        .section-link{font-size:12px !important}
        .next-label{font-size:11px !important}
        .next-amount{font-size:20px !important}
        .next-meta{font-size:12px !important}
        .pay-btn{font-size:13px !important}
        .loan-number{font-size:13px !important}
        .loan-status{font-size:11px !important}
        .loan-stat span{font-size:11px !important}
        .loan-stat strong{font-size:13px !important}
        .quick-label{font-size:12px !important}
        .payment-title{font-size:12px !important}
        .payment-date{font-size:11px !important}
        .payment-amount{font-size:13px !important}
        .payment-status{font-size:11px !important}
        .empty-card{font-size:12px !important}
        .nav a{font-size:11px !important}
        .profile-dropdown-user-info strong{font-size:12px !important}
        .profile-dropdown-user-info span{font-size:11px !important}
        .profile-dropdown-item{font-size:12px !important}
        .dropdown-count{font-size:9px !important}

        /* Premium dark-blue fintech theme */
        .app{background:#f5f7fb}
        .top{padding-top:19px}
        .greeting h1{color:#102a43}
        .avatar{background:#0b2d5c}

        .hero{
            background:linear-gradient(135deg,#061b3a 0%,#0b2d5c 48%,#123f78 100%);
            box-shadow:0 16px 38px rgba(6,27,58,.24);
            border:1px solid rgba(255,255,255,.08)
        }

        .hero:after{
            width:220px;
            height:220px;
            right:-105px;
            top:-125px;
            background:rgba(75,151,255,.12)
        }

        .hero-limit{
            font-size:30px !important;
            letter-spacing:.2px
        }

        .hero-number{
            color:#dbeafe
        }

        .hero-foot{
            border-top-color:rgba(255,255,255,.16)
        }

        .section-title{
            color:#102a43 !important
        }

        .section-link{
            color:#0b5ed7 !important
        }

        .next-card,
        .loan-card,
        .payment-card,
        .empty-card,
        .dashboard-mini{
            border-color:#dfe7f1;
            box-shadow:0 7px 22px rgba(16,42,67,.055)
        }

        .next-card:before{
            background:#0b5ed7
        }

        .next-amount{
            color:#0b2d5c
        }

        .pay-btn{
            background:linear-gradient(135deg,#0b2d5c,#0b5ed7);
            box-shadow:0 7px 16px rgba(11,45,92,.16)
        }

        .loan-number{
            color:#0b5ed7
        }

        .loan-status{
            background:#eaf7ef;
            color:#247a48
        }

        .loan-stat{
            background:#f5f8fc
        }

        .quick-action-modern{
            background:linear-gradient(180deg,#ffffff,#f8fafc);
            border-color:#dce5f0;
            box-shadow:0 7px 20px rgba(16,42,67,.055)
        }

        .quick-action-modern:hover{
            border-color:#b9cce3;
            box-shadow:0 12px 28px rgba(16,42,67,.10)
        }

        .quick-action-icon{
            box-shadow:inset 0 0 0 1px rgba(11,45,92,.04)
        }

        .quick-action-arrow{
            color:#0b5ed7;
            background:#eef4fb
        }

        .quick-action-modern strong{
            color:#102a43
        }

        .dashboard-mini{
            background:linear-gradient(135deg,#f9fbff,#ffffff)
        }

        .dashboard-mini-value{
            color:#0b2d5c
        }

        .payment-row{
            border-bottom-color:#e9eef5
        }

        .payment-icon{
            background:#e8f1ff;
            color:#0b5ed7
        }

        .payment-title,
        .payment-amount{
            color:#102a43
        }

        .nav{
            background:#fff;
            border-top-color:#dfe7f1;
            box-shadow:0 -5px 20px rgba(16,42,67,.045)
        }

        .nav a.active{
            color:#0b5ed7
        }

        .profile-dropdown{
            border-color:#dce5f0;
            box-shadow:0 14px 32px rgba(16,42,67,.14)
        }

        .dropdown-icon{
            background:#e8f1ff
        }

        .profile-dropdown-item:hover{
            background:#f0f5fb;
            color:#0b5ed7
        }

        @media(max-width:699px){

            .hero{
                border-radius:20px
            }

            .quick-action-modern{
                border-radius:17px
            }
        }

        /* Compact card/button spacing */
        .hero{
            padding:15px 16px;
            border-radius:18px
        }

        .hero-limit{
            font-size:27px !important
        }

        .next-card{
            padding:12px 13px;
            border-radius:15px
        }

        .loan-card{
            padding:12px 13px;
            border-radius:15px
        }

        .payment-card{
            padding:11px 12px;
            border-radius:15px
        }

        .empty-card{
            padding:18px 14px
        }

        .dashboard-mini{
            padding:10px 11px;
            border-radius:13px
        }

        .dashboard-mini-grid{
            gap:7px;
            margin-top:8px
        }

        .quick-actions-modern{
            gap:7px
        }

        .quick-action-modern{
            min-height:96px;
            padding:9px 9px;
            border-radius:14px
        }

        .quick-action-icon{
            width:34px;
            height:34px;
            border-radius:10px;
            font-size:16px
        }

        .quick-action-arrow{
            width:21px;
            height:21px;
            font-size:11px
        }

        .quick-action-modern strong{
            font-size:11px
        }

        .quick-action-modern span{
            font-size:8px;
            margin-top:3px
        }

        .pay-btn{
            padding:8px 12px;
            border-radius:9px;
            font-size:10px
        }

        .nav{
            height:62px
        }

        .nav a{
            padding:7px 4px
        }

        /* Final corner radius */
        .hero,
        .next-card,
        .loan-card,
        .payment-card,
        .empty-card,
        .dashboard-mini,
        .quick-action-modern,
        .profile-dropdown,
        .pay-btn,
        .loan-status,
        .loan-stat,
        .quick-action-icon,
        .quick-action-arrow,
        .payment-icon,
        .dropdown-icon,
        .avatar{
            border-radius:8px
        }

        /* EMI card size */
        .hero{
            padding:20px 18px;
            min-height:150px
        }

        .hero-limit{
            font-size:30px !important
        }
    </style>
</head>

<body>

<div class="app">

    <header class="top">

        <div class="greeting">
            <div class="eyebrow">Welcome back</div>

            <h1>
                Hello, <?php echo e($user->name ?? 'Client'); ?> 👋
            </h1>
        </div>

        <div class="profile-menu-wrap">

            <button
                type="button"
                class="profile-menu-btn"
                onclick="toggleProfileMenu()"
                aria-label="Open profile menu"
                aria-expanded="false"
            >

                <div class="avatar">
                    <?php echo e(strtoupper(substr($user->name ?? 'C',0,1))); ?>

                </div>

                <span class="profile-menu-arrow">⌄</span>

                <?php
                    $unreadNotifications = Auth::user()
                        ->unreadNotifications()
                        ->count();
                ?>

                <?php if($unreadNotifications > 0): ?>

                    <span class="profile-notification-badge">
                        <?php echo e($unreadNotifications > 99 ? '99+' : $unreadNotifications); ?>

                    </span>

                <?php endif; ?>

            </button>

            <div class="profile-dropdown" id="profileDropdown">

                <div class="profile-dropdown-user">

                    <div class="avatar small">
                        <?php echo e(strtoupper(substr($user->name ?? 'C',0,1))); ?>

                    </div>

                    <div class="profile-dropdown-user-info">

                        <strong>
                            <?php echo e($user->name ?? 'Client'); ?>

                        </strong>

                        <span>
                            My Account
                        </span>

                    </div>

                </div>

                <div class="profile-dropdown-divider"></div>

                <a
                    href="<?php echo e(route('client.dashboard')); ?>"
                    class="profile-dropdown-item"
                >

                    <span class="dropdown-icon">
                        👤
                    </span>

                    <span>
                        Profile
                    </span>

                </a>

                <a
                    href="<?php echo e(route('notifications.index')); ?>"
                    class="profile-dropdown-item"
                >

                    <span class="dropdown-icon">
                        🔔
                    </span>

                    <span>
                        Notifications
                    </span>

                    <?php if($unreadNotifications > 0): ?>

                        <span class="dropdown-count">
                            <?php echo e($unreadNotifications > 99 ? '99+' : $unreadNotifications); ?>

                        </span>

                    <?php endif; ?>

                </a>

                <div class="profile-dropdown-divider"></div>

                <form
                    method="POST"
                    action="<?php echo e(route('logout')); ?>"
                    class="profile-logout-form"
                >

                    <?php echo csrf_field(); ?>

                    <button
                        type="submit"
                        class="profile-dropdown-item logout-item"
                    >

                        <span class="dropdown-icon">
                            ↪
                        </span>

                        <span>
                            Logout
                        </span>

                    </button>

                </form>

            </div>

        </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; ?>


        <div class="dashboard-intro">
            Manage your EMI card, loans and payments in one place.
        </div>


        <?php if($emiCard): ?>

            <section class="hero">

                <div class="hero-top">

                    <div>

                        <div class="hero-label">
                            EMI Card
                        </div>

                        <div class="hero-number">
                            <?php echo e(\App\Helpers\MoneyHelper::formatCardNumber($emiCard->card_number)); ?>

                        </div>

                    </div>

                    <div style="font-size:18px">
                        💳
                    </div>

                </div>


                <div class="hero-limit-label">
                    Available Limit
                </div>

                <div class="hero-limit">
                    <?php echo e(money((float)$emiCard->available_limit)); ?>

                </div>


                <div class="hero-foot">

                    <div>

                        <span>
                            Card Limit
                        </span>

                        <strong>
                            <?php echo e(money((float)($emiCard->card_limit ?? 0))); ?>

                        </strong>

                    </div>


                    <div style="text-align:right">

                        <span>
                            Status
                        </span>

                        <strong>
                            <?php echo e(ucfirst($emiCard->status ?? '—')); ?>

                        </strong>

                    </div>

                </div>

            </section>

        <?php endif; ?>


        <?php if($nextInstallment): ?>

            <section class="section">

                <div class="section-head">

                    <div class="section-title">
                        Next EMI
                    </div>

                    <a
                        href="<?php echo e(route('client.payments')); ?>"
                        class="section-link"
                    >
                        View Payments →
                    </a>

                </div>


                <div class="next-card">

                    <div class="next-top">

                        <div>

                            <div class="next-label">
                                EMI #<?php echo e($nextInstallment->installment_number); ?>

                            </div>

                            <div class="next-meta">

                                <?php echo e($nextInstallment->due_date
                                    ? \Illuminate\Support\Carbon::parse($nextInstallment->due_date)->format('d M Y')
                                    : 'Due date not set'); ?>


                            </div>

                        </div>

                        <div class="next-amount">
                            <?php echo e(money($nextEmiAmount)); ?>

                        </div>

                    </div>


                    <a
                        href="<?php echo e(route('client.payments')); ?>"
                        class="pay-btn"
                    >
                        Pay EMI
                    </a>

                </div>

            </section>

        <?php endif; ?>


        <section class="section">

            <div class="section-head">

                <div class="section-title">
                    Loan Summary
                </div>

                <a
                    href="<?php echo e(route('client.loans')); ?>"
                    class="section-link"
                >
                    View Loans →
                </a>

            </div>


            <?php if($activeLoans->count()): ?>

                <?php $__currentLoopData = $activeLoans->take(2); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $loan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                    <div
                        class="loan-card"
                        style="margin-bottom:9px"
                    >

                        <div class="loan-row">

                            <div class="loan-number">
                                <?php echo e($loan->loan_number); ?>

                            </div>

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

                            </div>

                        </div>


                        <div class="loan-stats">

                            <div class="loan-stat">

                                <span>
                                    Loan Amount
                                </span>

                                <strong>
                                    <?php echo e(money((float)$loan->loan_amount)); ?>

                                </strong>

                            </div>


                            <div class="loan-stat">

                                <span>
                                    Monthly EMI
                                </span>

                                <strong>
                                    <?php echo e(money((float)$loan->emi_amount)); ?>

                                </strong>

                            </div>


                            <div class="loan-stat">

                                <span>
                                    Outstanding
                                </span>

                                <strong>
                                    <?php echo e(money((float)$loan->outstanding_amount)); ?>

                                </strong>

                            </div>

                        </div>

                    </div>

                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            <?php else: ?>

                <div class="empty-card">
                    No active loan at the moment.
                </div>

            <?php endif; ?>

        </section>


        <!-- QUICK ACTIONS -->

        <section class="section">

            <div class="section-head">

                <div class="section-title">
                    Quick Actions
                </div>

            </div>


            <div class="quick-actions-modern">


                

                <a
                    href="#credit-score"
                    class="quick-action-modern credit red-gradient"
                    aria-label="Credit Score"
                >

                    <div class="quick-action-top">

                        <div class="quick-action-icon">
                            <i class="fa-solid fa-chart-column"></i>
                        </div>

                        <div class="quick-action-arrow">
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>

                    </div>


                    <div>

                        <strong>
                            Credit Score
                        </strong>

                        <span>
                            Check your score
                        </span>

                    </div>

                </a>


                

                <a
                    href="<?php echo e(route('client.loans.create')); ?>"
                    class="quick-action-modern loan violet-gradient"
                    aria-label="Apply Loan"
                >

                    <div class="quick-action-top">

                        <div class="quick-action-icon">
                            <i class="fa-solid fa-sack-dollar"></i>
                        </div>

                        <div class="quick-action-arrow">
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>

                    </div>


                    <div>

                        <strong>
                            Apply Loan
                        </strong>

                        <span>
                            Get funds easily
                        </span>

                    </div>

                </a>


                

                <a
                    href="#mobile-emi"
                    class="quick-action-modern mobile pink-gradient"
                    aria-label="Mobile on EMI"
                >

                    <div class="quick-action-top">

                        <div class="quick-action-icon">
                            <i class="fa-solid fa-mobile-screen-button"></i>
                        </div>

                        <div class="quick-action-arrow">
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>

                    </div>


                    <div>

                        <strong>
                            Mobile on EMI
                        </strong>

                        <span>
                            Shop with easy EMI
                        </span>

                    </div>

                </a>


                

                <a
                    href="#emi-calculator"
                    class="quick-action-modern green-gradient"
                    aria-label="EMI Calculator"
                >

                    <div class="quick-action-top">

                        <div class="quick-action-icon">
                            <i class="fa-solid fa-calculator"></i>
                        </div>

                        <div class="quick-action-arrow">
                            <i class="fa-solid fa-arrow-right"></i>
                        </div>

                    </div>


                    <div>

                        <strong>
                            EMI Calculator
                        </strong>

                        <span>
                            Calculate your EMI
                        </span>

                    </div>

                </a>


            </div>

        </section>


        <section class="section">

            <div class="section-head">

                <div class="section-title">
                    Recent Payments
                </div>

                <a
                    href="<?php echo e(route('client.payments')); ?>"
                    class="section-link"
                >
                    View All →
                </a>

            </div>


            <div class="payment-card">

                <?php $__empty_1 = true; $__currentLoopData = $payments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $payment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>

                    <div class="payment-row">

                        <div class="payment-left">

                            <div class="payment-icon">
                                <?php echo e(preg_replace('/[-+0-9.,\s]+/u', '', money(0))); ?>

                            </div>

                            <div>

                                <div class="payment-title">

                                    <?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="payment-date">

                                    <?php echo e($payment->paid_at?->format('d M Y')
                                        ?? $payment->created_at?->format('d M Y')); ?>


                                </div>

                            </div>

                        </div>


                        <div class="payment-right">

                            <div class="payment-amount">
                                <?php echo e(money((float)$payment->amount)); ?>

                            </div>

                            <div
                                class="payment-status <?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-card"
                        style="border:0;border-radius:0"
                    >
                        No payment history yet.
                    </div>

                <?php endif; ?>

            </div>

        </section>

    </main>


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

</div>


<script>

    function toggleProfileMenu() {

        const menu = document.getElementById('profileDropdown');
        const button = document.querySelector('.profile-menu-btn');

        if (!menu || !button) return;

        const isOpen = menu.classList.toggle('show');

        button.setAttribute(
            'aria-expanded',
            isOpen ? 'true' : 'false'
        );

    }


    document.addEventListener('click', function (event) {

        const wrap = document.querySelector('.profile-menu-wrap');
        const menu = document.getElementById('profileDropdown');
        const button = document.querySelector('.profile-menu-btn');

        if (!wrap || !menu || !button) return;

        if (!wrap.contains(event.target)) {

            menu.classList.remove('show');

            button.setAttribute(
                'aria-expanded',
                'false'
            );

        }

    });

</script>

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