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

<head>

    <meta charset="UTF-8">

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

    <title>
        @yield('title', 'EMI CREDITS Admin')
    </title>

    {{-- COMMON ADMIN CSS --}}
    <link
        rel="stylesheet"
        href="{{ asset('admin/css/admin.css') }}"
    >

    {{-- PAGE SPECIFIC CSS --}}
    @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="EMI CREDITS"
                >

            </a>

        @else

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

        @endif

    </div>


    <!-- SCROLLABLE MENU -->

    <div class="sidebar-menu" id="adminSidebarMenu">

        <!-- MAIN MENU -->

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


        {{-- DASHBOARD --}}

        <div class="nav">

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

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

                Dashboard

            </a>

        </div>


        {{-- CLIENTS --}}

        <div class="nav">

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

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

                Clients

            </a>

        </div>


        {{-- APPLICATIONS --}}

        <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>


        {{-- KYC --}}

        <div class="nav">

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

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

                KYC Verification

            </a>

        </div>


        {{-- PAYMENTS --}}

        <div class="nav">

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

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

                Payments

            </a>

        </div>


        {{-- LOANS --}}

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

            <div class="nav">

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

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

                    Loans

                </a>

            </div>

        @endif


        {{-- OVERDUE --}}

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

            <div class="nav">

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

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

                    Overdue

                </a>

            </div>

        @endif


        {{-- EMI CARDS --}}

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

            <div class="nav">

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

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

                    EMI Cards

                </a>

            </div>

        @endif


        {{-- REPORTS --}}

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

            <div class="nav">

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

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

                    Reports

                </a>

            </div>

        @endif


        <!-- CUSTOMER CARE -->

        <div class="section-title">
            Customer Care
        </div>


        {{-- SUPPORT CHAT --}}

        @if(Route::has('admin.support.index'))

            <div class="nav">

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

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

                    Support Chat

                </a>

            </div>

        @endif


        <!-- SYSTEM -->

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


        {{-- LOAN SETTINGS --}}

        @if(Route::has('admin.loan-settings.edit'))

            <div class="nav">

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

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

                    Loan Settings

                </a>

            </div>

        @endif


        {{-- CURRENCY & AMOUNT --}}

        @if(Route::has('admin.system-settings.edit'))

            <div class="nav">

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

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

                    Currency & Amount

                </a>

            </div>

        @endif


        {{-- PROFILE SETTINGS --}}

        @if(Route::has('admin.profile-settings.edit'))

            <div class="nav">

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

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

                    Profile Settings

                </a>

            </div>

        @endif

    </div>


    <!-- =====================================================
         ADMIN PROFILE / LOGOUT
    ====================================================== -->

    <div class="sidebar-bottom">

        <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',
                    'EMI CREDITS 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')


<script>

document.addEventListener('DOMContentLoaded', function () {

    const sidebar =
        document.getElementById('adminSidebarMenu');

    if (!sidebar) {
        return;
    }

    const storageKey =
        'admin_sidebar_scroll_position';


    /* Restore previous scroll position */

    const savedPosition =
        sessionStorage.getItem(storageKey);

    if (savedPosition !== null) {

        requestAnimationFrame(function () {

            sidebar.scrollTop =
                parseInt(savedPosition, 10) || 0;

        });

    }


    /* Save scroll position */

    sidebar.addEventListener('scroll', function () {

        sessionStorage.setItem(
            storageKey,
            sidebar.scrollTop
        );

    });

});

</script>


</body>

</html>