<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>
        @yield('title', 'PG Finsev Admin')
    </title>


    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        body {
            font-family:
                Inter,
                Arial,
                Helvetica,
                sans-serif;

            background: #f5f8fc;

            color: #172b4d;
        }


        a {
            text-decoration: none;
        }


        button,
        input,
        select {
            font-family: inherit;
        }


        /* =====================================================
           SIDEBAR
        ===================================================== */

        .sidebar {
            position: fixed;

            top: 0;
            left: 0;
            bottom: 0;

            width: 250px;

            background: #ffffff;

            border-right: 1px solid #e6ebf2;

            z-index: 100;

            display: flex;

            flex-direction: column;

            overflow-y: auto;
            overflow-x: hidden;

            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }

        .sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 20px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }


        .logo {
            height: 82px;

            display: flex;

            align-items: center;

            padding: 0 22px;

            border-bottom: 1px solid #edf1f5;
        }


        .logo a {
            display: flex;

            align-items: center;
        }


        .logo img {
            display: block;

            width: 175px;

            max-width: 100%;

            max-height: 52px;

            height: auto;

            object-fit: contain;
        }


        .logo-text {
            color: #1265d8;

            font-size: 22px;

            font-weight: 900;
        }


        .section-title {
            padding:
                22px 22px 8px;

            color: #9aa6b6;

            font-size: 9px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 1px;
        }


        .sidebar-menu {
            flex: none;
            min-height: auto;
            overflow: visible;
            padding-bottom: 10px;
        }

        .sidebar-menu::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar-menu::-webkit-scrollbar-track {
            background: transparent;
        }

        .sidebar-menu::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 20px;
        }

        .sidebar-menu::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .nav {
            padding: 0 11px;
        }


        .nav a {
            display: flex;

            align-items: center;

            gap: 12px;

            min-height: 43px;

            padding: 0 13px;

            margin-bottom: 3px;

            border-radius: 9px;

            color: #617089;

            font-size: 12px;

            font-weight: 600;

            transition: all .2s ease;
        }


        .nav a:hover {
            background: #f1f6ff;

            color: #1769e0;
        }


        .nav a.active {
            background: #eaf2ff;

            color: #1769e0;

            font-weight: 800;
        }


        .nav-icon {
            width: 28px;

            height: 28px;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            border-radius: 8px;

            background: #f5f7fa;

            font-size: 13px;
        }


        .nav a.active .nav-icon {
            background: #dceaff;
        }


        /* =====================================================
           SIDEBAR BOTTOM
        ===================================================== */

        .sidebar-bottom {
            margin-top: 0;

            padding: 14px;
        }


        .admin-mini {
            display: flex;

            align-items: center;

            gap: 10px;

            padding: 11px;

            margin-bottom: 9px;

            background: #f7f9fc;

            border: 1px solid #e8edf4;

            border-radius: 11px;
        }


        .avatar {
            width: 36px;

            height: 36px;

            flex-shrink: 0;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            background: #1769e0;

            color: #ffffff;

            font-size: 12px;

            font-weight: 800;
        }


        .admin-info {
            min-width: 0;
        }


        .admin-info strong {
            display: block;

            color: #273b59;

            font-size: 10px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;
        }


        .admin-info span {
            display: block;

            margin-top: 3px;

            color: #97a3b2;

            font-size: 9px;
        }


        .logout {
            width: 100%;

            height: 38px;

            border: 1px solid #e2e8f0;

            border-radius: 8px;

            background: #ffffff;

            color: #64748b;

            cursor: pointer;

            font-size: 10px;

            font-weight: 700;

            transition: .2s;
        }


        .logout:hover {
            background: #fff5f5;

            border-color: #fecaca;

            color: #dc2626;
        }


        /* =====================================================
           MAIN
        ===================================================== */

        .main {
            min-height: 100vh;

            margin-left: 250px;
        }


        /* =====================================================
           TOPBAR
        ===================================================== */

        .topbar {
            height: 82px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding:
                0 32px;

            background: #ffffff;

            border-bottom: 1px solid #e6ebf2;
        }


        .topbar-title h1 {
            color: #172b4d;

            font-size: 22px;

            font-weight: 800;
        }


        .topbar-title p {
            margin-top: 4px;

            color: #97a3b2;

            font-size: 12px;
        }


        .topbar-right {
            display: flex;

            align-items: center;

            gap: 12px;
        }


        .notification {
            width: 38px;

            height: 38px;

            display: flex;

            align-items: center;

            justify-content: center;

            border: 1px solid #e5eaf1;

            border-radius: 9px;

            background: #ffffff;

            color: #64748b;

            font-size: 15px;
        }


        .top-profile {
            width: 38px;

            height: 38px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            background: #1769e0;

            color: #ffffff;

            font-size: 12px;

            font-weight: 800;
        }


        /* =====================================================
           PAGE CONTENT
        ===================================================== */

        .content {
            padding: 30px;
        }


        /* =====================================================
           COMMON CARDS
        ===================================================== */

        .card {
            background: #ffffff;

            border: 1px solid #e3eaf3;

            border-radius: 14px;

            overflow: hidden;
        }


        .card-header {
            display: flex;

            align-items: center;

            justify-content: space-between;

            padding:
                17px 19px;

            border-bottom: 1px solid #edf1f6;
        }


        .card-header h3 {
            color: #273b59;

            font-size: 15px;

            font-weight: 800;
        }


        .card-header a,
        .card-header span {
            color: #1769e0;

            font-size: 10px;

            font-weight: 700;
        }


        .card-body {
            padding: 18px;
        }


        /* =====================================================
           TABLE
        ===================================================== */

        .table-wrap {
            overflow-x: auto;
        }


        table {
            width: 100%;

            border-collapse: collapse;

            min-width: 700px;
        }


        th {
            padding:
                11px 15px;

            background: #f8fafc;

            color: #9aa6b6;

            font-size: 8px;

            font-weight: 800;

            text-align: left;

            text-transform: uppercase;
        }


        td {
            padding:
                13px 15px;

            border-top: 1px solid #edf1f6;

            color: #536982;

            font-size: 11px;
        }


        tbody tr:hover {
            background: #fbfdff;
        }


        /* =====================================================
           BADGES
        ===================================================== */

        .badge {
            display: inline-flex;

            align-items: center;

            gap: 5px;

            padding:
                5px 8px;

            border-radius: 20px;

            font-size: 9px;

            font-weight: 800;

            white-space: nowrap;
        }


        .dot {
            width: 5px;

            height: 5px;

            border-radius: 50%;

            background: currentColor;
        }


        .badge-green {
            color: #287646;

            background: #eaf8ef;
        }


        .badge-orange {
            color: #b7791f;

            background: #fff7e8;
        }


        .badge-red {
            color: #be123c;

            background: #fff1f2;
        }


        .badge-gray {
            color: #64748b;

            background: #f1f5f9;
        }


        .badge-blue {
            color: #1769e0;

            background: #eaf2ff;
        }


        /* =====================================================
           BUTTONS
        ===================================================== */

        .btn {
            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-height: 36px;

            padding:
                0 13px;

            border: 0;

            border-radius: 8px;

            cursor: pointer;

            font-size: 10px;

            font-weight: 800;
        }


        .btn-primary {
            background: #1769e0;

            color: #ffffff;
        }


        .btn-primary:hover {
            background: #0f5bc7;
        }


        .btn-secondary {
            background: #f1f5f9;

            color: #64748b;
        }


        .btn-danger {
            background: #fff1f2;

            color: #be123c;
        }


        .btn-success {
            background: #eaf8ef;

            color: #287646;
        }


        /* =====================================================
           VIEW BUTTON
        ===================================================== */

        .view-btn {
            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding:
                6px 10px;

            border-radius: 7px;

            background: #eaf2ff;

            color: #1769e0;

            font-size: 10px;

            font-weight: 800;
        }


        .view-btn:hover {
            background: #1769e0;

            color: #ffffff;
        }


        /* =====================================================
           ALERTS
        ===================================================== */

        .alert {
            padding:
                11px 14px;

            margin-bottom: 18px;

            border-radius: 9px;

            font-size: 11px;

            font-weight: 600;
        }


        .alert-success {
            background: #eaf8ef;

            border: 1px solid #c9ecd6;

            color: #287646;
        }


        .alert-error {
            background: #fff1f2;

            border: 1px solid #fecdd3;

            color: #be123c;
        }


        /* =====================================================
           PAGINATION
        ===================================================== */

        .pagination-area {
            padding:
                15px 20px;

            border-top: 1px solid #edf1f6;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;
        }


        /* =====================================================
           RESPONSIVE
        ===================================================== */

        @media (max-width: 900px) {

            .sidebar {
                width: 220px;
            }

            .main {
                margin-left: 220px;
            }

            .content {
                padding: 20px;
            }

            .topbar {
                padding: 0 20px;
            }

        }


        @media (max-width: 700px) {

            .sidebar {
                position: relative;

                width: 100%;

                height: auto;

                min-height: auto;

                overflow: visible;
            }

            .sidebar-menu {
                overflow: visible;
            }

            .sidebar-bottom {
                margin-top: 15px;
            }

            .main {
                margin-left: 0;
            }

            .topbar {
                height: 72px;

                padding:
                    0 16px;
            }

            .content {
                padding: 15px;
            }

        }


        @media (max-width: 480px) {

            .topbar-title h1 {
                font-size: 17px;
            }

            .topbar-title p {
                font-size: 8px;
            }

            .notification {
                display: none;
            }

        }

    
        /* =====================================================
           GLOBAL ADMIN CONTENT TYPOGRAPHY
        ===================================================== */
        .content {
            font-size: 13px;
        }

        .content p,
        .content span,
        .content label {
            line-height: 1.45;
        }

        .content input,
        .content select,
        .content textarea {
            font-size: 12px;
        }

        @media (max-width: 480px) {
            .topbar-title h1 {
                font-size: 19px;
            }

            .topbar-title p {
                font-size: 10px;
            }

            .content {
                font-size: 12px;
            }
        }


        /* ADMIN TYPOGRAPHY STANDARD - SIDEBAR UNCHANGED */
        .content { font-size: 14px; line-height: 1.5; }
        .content h1 { font-size: 24px; line-height: 1.25; }
        .content h2 { font-size: 21px; line-height: 1.3; }
        .content h3 { font-size: 16px; line-height: 1.35; }
        .content h4, .content h5, .content h6 { font-size: 14px; line-height: 1.4; }
        .content p, .content span, .content label, .content li { font-size: inherit; line-height: 1.5; }
        .content small { font-size: 12px; }
        .content table { font-size: 13px; }
        .content table th { font-size: 11px; }
        .content table td { font-size: 13px; }
        .content input, .content select, .content textarea { font-size: 13px; min-height: 38px; }
        .content button, .content .btn, .content a.btn { font-size: 12px; }
        .content .badge { font-size: 10px; }
        .content .view-btn { font-size: 11px; }
        .content .card-header h3 { font-size: 16px; }
        .content .card-header a, .content .card-header span { font-size: 11px; }
        .content .alert { font-size: 13px; }
        .content .stat-value { font-size: 28px; }
        .content .stat-label { font-size: 11px; }
        .content .quick-text strong { font-size: 12px; }
        .content .quick-text span { font-size: 11px; }

        @media (max-width: 700px) {
            .content { font-size: 13px; }
            .content h1 { font-size: 21px; }
            .content h2 { font-size: 19px; }
            .content h3 { font-size: 15px; }
            .content table th { font-size: 10px; }
            .content table td { font-size: 12px; }
            .content input, .content select, .content textarea { font-size: 13px; }
        }

        @media (max-width: 480px) {
            .content { font-size: 13px; }
            .content h1 { font-size: 20px; }
            .content h2 { font-size: 18px; }
            .content h3 { font-size: 15px; }
        }

    </style>

    @stack('styles')

</head>


<body>


<!-- =====================================================
     SIDEBAR
====================================================== -->

<aside class="sidebar">


    <!-- LOGO -->

    <div class="logo">

        @if(file_exists(public_path('images/logo.png')))

            <a href="{{ route('admin.dashboard') }}">

                <img
                    src="{{ asset('images/logo.png') }}"
                    alt="PG Finsev"
                >

            </a>

        @else

            <a
                href="{{ route('admin.dashboard') }}"
                class="logo-text"
            >
                PG FINSEV
            </a>

        @endif

    </div>


    <!-- SCROLLABLE MENU -->

    <div class="sidebar-menu">

    <!-- MAIN MENU -->

    <div class="section-title">
        Main Menu
    </div>


    <div class="nav">

        <a
            href="{{ route('admin.dashboard') }}"
            class="{{ request()->routeIs('admin.dashboard')
                ? 'active'
                : ''
            }}"
        >

            <span class="nav-icon">
                🏠
            </span>

            Dashboard

        </a>

    </div>


    <div class="nav">

        <a
            href="{{ route('admin.clients') }}"
            class="{{ request()->routeIs('admin.clients*')
                ? 'active'
                : ''
            }}"
        >

            <span class="nav-icon">
                👥
            </span>

            Clients

        </a>

    </div>


    <div class="nav">

        <a
            href="{{ route('admin.applications') }}"
            class="{{ request()->routeIs('admin.applications*')
                ? 'active'
                : ''
            }}"
        >

            <span class="nav-icon">
                📋
            </span>

            Applications

        </a>

    </div>


    <!-- MANAGEMENT -->

    <div class="section-title">
        Management
    </div>


    <div class="nav">

        <a
            href="{{ route('admin.clients') }}"
            class="{{ request()->routeIs('admin.kyc*')
                ? 'active'
                : ''
            }}"
        >

            <span class="nav-icon">
                🪪
            </span>

            KYC Verification

        </a>

    </div>


    <div class="nav">

        <a
            href="{{ route('admin.payments') }}"
            class="{{ request()->routeIs('admin.payments*')
                ? 'active'
                : ''
            }}"
        >

            <span class="nav-icon">
                💳
            </span>

            Payments

        </a>

    </div>


    <!-- LOANS -->

    <div class="nav">

        @if(Route::has('admin.loans'))

            <a
                href="{{ route('admin.loans') }}"
                class="{{ request()->routeIs('admin.loans*')
                    ? 'active'
                    : ''
                }}"
            >

                <span class="nav-icon">
                    💰
                </span>

                Loans

            </a>

        @else

            <a href="{{ route('admin.dashboard') }}">

                <span class="nav-icon">
                    💰
                </span>

                Loans

            </a>

        @endif

    </div>


    <div class="nav">

        @if(Route::has('admin.emi-cards'))

            <a
                href="{{ route('admin.emi-cards') }}"
                class="{{ request()->routeIs('admin.emi-cards*')
                    ? 'active'
                    : ''
                }}"
            >

                <span class="nav-icon">
                    🔐
                </span>

                EMI Cards

            </a>

        @else

            <a href="{{ route('admin.clients') }}">

                <span class="nav-icon">
                    🔐
                </span>

                EMI Cards

            </a>

        @endif

    </div>


    <!-- SYSTEM -->

    <div class="section-title">
        System
    </div>


    <div class="nav">

        <a href="#">

            <span class="nav-icon">
                ⚙️
            </span>

            Settings

        </a>

    </div>


    </div>

    <!-- =====================================================
         ADMIN PROFILE
    ====================================================== -->

    <div class="sidebar-bottom">


        <div class="admin-mini">

            <div class="avatar">

                {{
                    strtoupper(
                        substr(
                            Auth::user()->name,
                            0,
                            1
                        )
                    )
                }}

            </div>


            <div class="admin-info">

                <strong>
                    {{ Auth::user()->name }}
                </strong>

                <span>
                    Administrator
                </span>

            </div>

        </div>


        <!-- LOGOUT -->

        <form
            method="POST"
            action="{{ route('admin.logout') }}"
        >

            @csrf

            <button
                type="submit"
                class="logout"
            >

                ↪ &nbsp; Logout

            </button>

        </form>


    </div>

</aside>



<!-- =====================================================
     MAIN
====================================================== -->

<main class="main">


    <!-- TOPBAR -->

    <header class="topbar">


        <div class="topbar-title">

            <h1>
                @yield('page-title', 'Admin Dashboard')
            </h1>

            <p>
                @yield(
                    'page-description',
                    'PG Finsev administration panel'
                )
            </p>

        </div>


        <div class="topbar-right">


            <a
                href="{{ route('notifications.index') }}"
                class="notification"
                style="position:relative;text-decoration:none"
                aria-label="Notifications"
            >
                🔔

                @php
                    $unreadNotifications = Auth::user()
                        ->unreadNotifications()
                        ->count();
                @endphp

                @if($unreadNotifications > 0)
                    <span
                        style="
                            position:absolute;
                            top:-5px;
                            right:-5px;
                            min-width:16px;
                            height:16px;
                            padding:0 4px;
                            border-radius:20px;
                            background:#dc3545;
                            color:#fff;
                            font-size:7px;
                            font-weight:900;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            line-height:1;
                        "
                    >
                        {{ $unreadNotifications > 99 ? '99+' : $unreadNotifications }}
                    </span>
                @endif
            </a>


            <div class="top-profile">

                {{
                    strtoupper(
                        substr(
                            Auth::user()->name,
                            0,
                            1
                        )
                    )
                }}

            </div>


        </div>

    </header>



    <!-- PAGE CONTENT -->

    <div class="content">


        {{-- SUCCESS MESSAGE --}}

        @if(session('success'))

            <div class="alert alert-success">

                {{ session('success') }}

            </div>

        @endif


        {{-- ERROR MESSAGE --}}

        @if(session('error'))

            <div class="alert alert-error">

                {{ session('error') }}

            </div>

        @endif


        {{-- VALIDATION ERRORS --}}

        @if($errors->any())

            <div class="alert alert-error">

                <strong>
                    Please fix the following:
                </strong>

                <ul
                    style="
                        margin-top:6px;
                        padding-left:18px;
                    "
                >

                    @foreach($errors->all() as $error)

                        <li>
                            {{ $error }}
                        </li>

                    @endforeach

                </ul>

            </div>

        @endif


        @yield('content')


    </div>


</main>


@stack('scripts')

</body>

</html>