@extends('admin.layouts.app')

@section('title', 'PG Finsev | Admin Dashboard')
@section('page-title', 'Admin Dashboard')

@section('page-description')
    Welcome back, {{ Auth::user()->name }}
@endsection

@push('styles')
<style>
/* =====================================================
           CONTENT
        ===================================================== */
.welcome {
            margin-bottom: 24px;
        }


        .welcome h2 {
            color: #1d3557;

            font-size: 20px;

            font-weight: 800;
        }


        .welcome p {
            margin-top: 5px;

            color: #8b98aa;

            font-size: 10px;
        }


        /* =====================================================
           STAT CARDS
        ===================================================== */

        .stats-grid {
            display: grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap: 15px;

            margin-bottom: 22px;
        }


        .stat-card {
            position: relative;

            padding: 19px;

            background: #ffffff;

            border: 1px solid #e3eaf3;

            border-radius: 14px;

            overflow: hidden;

            transition: .2s;
        }


        .stat-card:hover {
            transform: translateY(-2px);

            box-shadow:
                0 8px 25px
                rgba(31, 52, 80, .06);
        }


        .stat-icon {
            width: 38px;

            height: 38px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 13px;

            border-radius: 10px;

            font-size: 16px;
        }


        .icon-blue {
            background: #eaf2ff;

            color: #1769e0;
        }


        .icon-purple {
            background: #f2eaff;

            color: #7c3aed;
        }


        .icon-orange {
            background: #fff4df;

            color: #c27a13;
        }


        .icon-green {
            background: #e8f8ef;

            color: #27814b;
        }


        .stat-label {
            color: #8997aa;

            font-size: 9px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: .5px;
        }


        .stat-value {
            margin-top: 7px;

            color: #273b59;

            font-size: 25px;

            font-weight: 900;
        }


        .stat-link {
            display: inline-block;

            margin-top: 6px;

            color: #1769e0;

            font-size: 8px;

            font-weight: 700;
        }


        /* =====================================================
           TWO COLUMN
        ===================================================== */

        .dashboard-grid {
            display: grid;

            grid-template-columns:
                1.5fr 1fr;

            gap: 18px;

            margin-bottom: 18px;
        }


        .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: 13px;

            font-weight: 800;
        }


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

            font-size: 9px;

            font-weight: 700;
        }


        .card-body {
            padding: 18px;
        }


        /* =====================================================
           QUICK ACTIONS
        ===================================================== */

        .quick-actions {
            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 10px;
        }


        .quick-action {
            display: flex;

            align-items: center;

            gap: 11px;

            min-height: 65px;

            padding: 11px;

            background: #f8fafc;

            border: 1px solid #edf1f5;

            border-radius: 10px;

            color: #445a75;

            transition: .2s;
        }


        .quick-action:hover {
            background: #f1f6ff;

            border-color: #dce9fb;

            color: #1769e0;
        }


        .quick-icon {
            width: 36px;

            height: 36px;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            border-radius: 9px;

            background: #eaf2ff;

            font-size: 14px;
        }


        .quick-text strong {
            display: block;

            color: #344966;

            font-size: 10px;
        }


        .quick-text span {
            display: block;

            margin-top: 3px;

            color: #97a3b2;

            font-size: 8px;
        }


        /* =====================================================
           KYC STATUS
        ===================================================== */

        .kyc-row {
            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 12px 0;

            border-bottom: 1px solid #edf1f5;
        }


        .kyc-row:last-child {
            border-bottom: 0;
        }


        .kyc-left {
            display: flex;

            align-items: center;

            gap: 10px;
        }


        .kyc-icon {
            width: 32px;

            height: 32px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 8px;

            background: #f4f7fa;

            font-size: 13px;
        }


        .kyc-name {
            color: #435a76;

            font-size: 10px;

            font-weight: 700;
        }


        .kyc-count {
            color: #273b59;

            font-size: 14px;

            font-weight: 900;
        }


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

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


        table {
            width: 100%;

            border-collapse: collapse;

            min-width: 650px;
        }


        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: 9px;
        }


        .client {
            display: flex;

            align-items: center;

            gap: 9px;
        }


        .client-avatar {
            width: 31px;

            height: 31px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 8px;

            background: #eaf2ff;

            color: #1769e0;

            font-size: 10px;

            font-weight: 900;
        }


        .client-name {
            color: #344966;

            font-size: 9px;

            font-weight: 800;
        }


        .client-email {
            margin-top: 2px;

            color: #9aa6b6;

            font-size: 7px;
        }


        .badge {
            display: inline-flex;

            align-items: center;

            gap: 5px;

            padding:
                5px 8px;

            border-radius: 20px;

            font-size: 7px;

            font-weight: 800;
        }


        .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;
        }


        .view-btn {
            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding:
                6px 10px;

            border-radius: 7px;

            background: #eaf2ff;

            color: #1769e0;

            font-size: 8px;

            font-weight: 800;
        }


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

            color: #ffffff;
        }


        /* =====================================================
           PAYMENT AMOUNT
        ===================================================== */

        .amount {
            color: #287646;

            font-weight: 800;
        }


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

        @media (max-width: 1150px) {

            .stats-grid {
                grid-template-columns:
                    repeat(2, 1fr);
            }

            .dashboard-grid {
                grid-template-columns: 1fr;
            }

        }


        @media (max-width: 800px) {

            .sidebar {
                position: relative;

                width: 100%;

                height: auto;

                min-height: auto;

                overflow: visible;
            }

            .sidebar-menu {
                overflow: visible;
            }

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

            .main {
                margin-left: 0;
            }

            .topbar {
                padding: 0 18px;
            }

            .content {
                padding: 18px;
            }

        }


        @media (max-width: 550px) {

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .quick-actions {
                grid-template-columns: 1fr;
            }

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

            .topbar {
                padding: 0 12px;
            }

            .content {
                padding: 12px;
            }

            .notification {
                width:35px;
                height:35px;
                flex:none;
            }

        }

    
</style>
@endpush

@section('content')

<div class="welcome">

            <h2>
                Overview
            </h2>

            <p>
                Monitor clients, applications, KYC verification and payments.
            </p>

        </div>



        <!-- =================================================
             STATISTICS
        ================================================== -->

        <div class="stats-grid">


            <!-- CLIENTS -->

            <div class="stat-card">

                <div class="stat-icon icon-blue">
                    👥
                </div>

                <div class="stat-label">
                    Total Clients
                </div>

                <div class="stat-value">
                    {{ $totalClients }}
                </div>

                <a
                    href="{{ route('admin.clients') }}"
                    class="stat-link"
                >
                    View Clients →
                </a>

            </div>


            <!-- APPLICATIONS -->

            <div class="stat-card">

                <div class="stat-icon icon-purple">
                    📋
                </div>

                <div class="stat-label">
                    Applications
                </div>

                <div class="stat-value">
                    {{ $totalApplications }}
                </div>

                <a
                    href="{{ route('admin.applications') }}"
                    class="stat-link"
                >
                    View Applications →
                </a>

            </div>


            <!-- KYC -->

            <div class="stat-card">

                <div class="stat-icon icon-orange">
                    🪪
                </div>

                <div class="stat-label">
                    Pending KYC
                </div>

                <div class="stat-value">
                    {{ $pendingKyc }}
                </div>

                <a
                    href="{{ route('admin.clients') }}"
                    class="stat-link"
                >
                    Review KYC →
                </a>

            </div>


            <!-- PAYMENTS -->

            <div class="stat-card">

                <div class="stat-icon icon-green">
                    💳
                </div>

                <div class="stat-label">
                    Total Payments
                </div>

                <div class="stat-value">
                    {{ $totalPayments }}
                </div>

                <a
                    href="{{ route('admin.payments') }}"
                    class="stat-link"
                >
                    View Payments →
                </a>

            </div>


        </div>



        <!-- =================================================
             LOAN OVERVIEW
        ================================================== -->

        <div class="stats-grid">

            <div class="stat-card">
                <div class="stat-icon icon-blue">💰</div>
                <div class="stat-label">Total Loans</div>
                <div class="stat-value">{{ $totalLoans }}</div>
                <a href="{{ route('admin.loans') }}" class="stat-link">View Loans →</a>
            </div>

            <div class="stat-card">
                <div class="stat-icon icon-orange">⏳</div>
                <div class="stat-label">Pending Loans</div>
                <div class="stat-value">{{ $pendingLoans }}</div>
                <a href="{{ route('admin.loans') }}" class="stat-link">Review Pending →</a>
            </div>

            <div class="stat-card">
                <div class="stat-icon icon-green">✓</div>
                <div class="stat-label">Active Loans</div>
                <div class="stat-value">{{ $activeLoans }}</div>
                <a href="{{ route('admin.loans') }}" class="stat-link">View Active →</a>
            </div>

            <div class="stat-card">
                <div class="stat-icon icon-purple">⚠</div>
                <div class="stat-label">Overdue Loans</div>
                <div class="stat-value">{{ $overdueLoans }}</div>
                <a href="{{ route('admin.loans') }}" class="stat-link">Review Overdue →</a>
            </div>

        </div>

        <div class="dashboard-grid">

            <div class="card">
                <div class="card-header">
                    <h3>Loan Financial Overview</h3>
                    <a href="{{ route('admin.loans') }}">Manage Loans →</a>
                </div>

                <div class="card-body">
                    <div class="quick-actions">

                        <div class="quick-action">
                            <div class="quick-icon">💵</div>
                            <div class="quick-text">
                                <strong>Loan Amount</strong>
                                <span>All applications</span>
                                <strong style="margin-top:4px;">
                                    ₹{{ number_format($totalLoanAmount, 2) }}
                                </strong>
                            </div>
                        </div>

                        <div class="quick-action">
                            <div class="quick-icon">📤</div>
                            <div class="quick-text">
                                <strong>Disbursed</strong>
                                <span>Disbursed loan value</span>
                                <strong style="margin-top:4px;">
                                    ₹{{ number_format($totalDisbursedAmount, 2) }}
                                </strong>
                            </div>
                        </div>

                        <div class="quick-action">
                            <div class="quick-icon">📊</div>
                            <div class="quick-text">
                                <strong>Outstanding</strong>
                                <span>Current active balance</span>
                                <strong style="margin-top:4px;">
                                    ₹{{ number_format($totalOutstandingAmount, 2) }}
                                </strong>
                            </div>
                        </div>

                        <div class="quick-action">
                            <div class="quick-icon">🧾</div>
                            <div class="quick-text">
                                <strong>Processing Fees</strong>
                                <span>Total configured fees</span>
                                <strong style="margin-top:4px;">
                                    ₹{{ number_format($totalProcessingFees, 2) }}
                                </strong>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3>Loan Status</h3>
                    <a href="{{ route('admin.loans') }}">View All →</a>
                </div>

                <div class="card-body">

                    <div class="kyc-row">
                        <div class="kyc-left">
                            <div class="kyc-icon">⏳</div>
                            <div class="kyc-name">Pending</div>
                        </div>
                        <div class="kyc-count">{{ $pendingLoans }}</div>
                    </div>

                    <div class="kyc-row">
                        <div class="kyc-left">
                            <div class="kyc-icon">✓</div>
                            <div class="kyc-name">Approved</div>
                        </div>
                        <div class="kyc-count">{{ $approvedLoans }}</div>
                    </div>

                    <div class="kyc-row">
                        <div class="kyc-left">
                            <div class="kyc-icon">●</div>
                            <div class="kyc-name">Active</div>
                        </div>
                        <div class="kyc-count">{{ $activeLoans }}</div>
                    </div>

                    <div class="kyc-row">
                        <div class="kyc-left">
                            <div class="kyc-icon">⚠</div>
                            <div class="kyc-name">Overdue</div>
                        </div>
                        <div class="kyc-count">{{ $overdueLoans }}</div>
                    </div>

                    <div class="kyc-row">
                        <div class="kyc-left">
                            <div class="kyc-icon">✓</div>
                            <div class="kyc-name">Completed</div>
                        </div>
                        <div class="kyc-count">{{ $completedLoans }}</div>
                    </div>

                </div>
            </div>

        </div>


        <!-- =================================================
             RECENT NOTIFICATIONS
        ================================================== -->

        @php
            $dashboardNotifications = Auth::user()
                ->notifications()
                ->latest()
                ->take(5)
                ->get();
        @endphp

        <div class="card" style="margin-bottom:18px;">

            <div class="card-header">
                <h3>Recent Notifications</h3>

                <a href="{{ route('notifications.index') }}">
                    View All →
                </a>
            </div>

            <div class="card-body" style="padding:10px 18px;">

                @forelse($dashboardNotifications as $notification)

                    @php
                        $notificationData = $notification->data ?? [];

                        $notificationTitle = data_get(
                            $notificationData,
                            'title',
                            'Notification'
                        );

                        $notificationMessage = data_get(
                            $notificationData,
                            'message',
                            ''
                        );

                        $notificationLevel = data_get(
                            $notificationData,
                            'level',
                            'info'
                        );

                        if (!in_array(
                            $notificationLevel,
                            ['success', 'warning', 'error', 'info'],
                            true
                        )) {
                            $notificationLevel = 'info';
                        }

                        $notificationLoan = data_get(
                            $notificationData,
                            'loan_number'
                        );
                    @endphp

                    <div
                        style="
                            display:flex;
                            align-items:flex-start;
                            gap:11px;
                            padding:12px 0;
                            border-bottom:1px solid #edf1f6;
                        "
                    >

                        <div
                            style="
                                width:30px;
                                height:30px;
                                flex:none;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                border-radius:8px;
                                background:
                                    {{ $notificationLevel === 'success'
                                        ? '#e8f8ef'
                                        : ($notificationLevel === 'warning'
                                            ? '#fff4df'
                                            : ($notificationLevel === 'error'
                                                ? '#fff1f2'
                                                : '#eaf2ff')) }};
                                font-size:12px;
                            "
                        >
                            {{
                                $notificationLevel === 'success'
                                    ? '✓'
                                    : ($notificationLevel === 'warning'
                                        ? '⚠'
                                        : ($notificationLevel === 'error'
                                            ? '!'
                                            : '🔔'))
                            }}
                        </div>

                        <div style="min-width:0;flex:1;">

                            <div
                                style="
                                    display:flex;
                                    align-items:flex-start;
                                    justify-content:space-between;
                                    gap:10px;
                                "
                            >

                                <strong
                                    style="
                                        color:#344966;
                                        font-size:9px;
                                        font-weight:800;
                                        line-height:1.35;
                                    "
                                >
                                    {{ $notificationTitle }}
                                </strong>

                                @if(!$notification->read_at)
                                    <span
                                        style="
                                            flex:none;
                                            width:6px;
                                            height:6px;
                                            margin-top:3px;
                                            border-radius:50%;
                                            background:#1769e0;
                                        "
                                        title="Unread"
                                    ></span>
                                @endif

                            </div>

                            <div
                                style="
                                    margin-top:3px;
                                    color:#7d8da1;
                                    font-size:8px;
                                    line-height:1.45;
                                "
                            >
                                {{ $notificationMessage }}
                            </div>

                            <div
                                style="
                                    margin-top:4px;
                                    color:#a0acba;
                                    font-size:7px;
                                "
                            >
                                {{ $notification->created_at?->diffForHumans() ?? '' }}

                                @if($notificationLoan)
                                    · {{ $notificationLoan }}
                                @endif
                            </div>

                        </div>

                        @if(!$notification->read_at)
                            <form
                                method="POST"
                                action="{{ route('notifications.read', $notification->id) }}"
                                style="flex:none;"
                            >
                                @csrf

                                <button
                                    type="submit"
                                    style="
                                        border:0;
                                        background:#edf5ff;
                                        color:#1769e0;
                                        border-radius:7px;
                                        padding:6px 8px;
                                        font-size:7px;
                                        font-weight:800;
                                        cursor:pointer;
                                    "
                                >
                                    Open
                                </button>
                            </form>
                        @endif

                    </div>

                @empty

                    <div
                        style="
                            padding:28px 10px;
                            text-align:center;
                            color:#9aa6b6;
                            font-size:9px;
                        "
                    >
                        <div style="font-size:20px;margin-bottom:7px;">
                            🔔
                        </div>

                        <strong
                            style="
                                display:block;
                                color:#536982;
                                font-size:11px;
                                margin-bottom:3px;
                            "
                        >
                            No notifications
                        </strong>

                        New loan and payment updates will appear here.
                    </div>

                @endforelse

            </div>

        </div>


        <!-- =================================================
             RECENT LOANS
        ================================================== -->

        <div class="card" style="margin-bottom:18px;">

            <div class="card-header">
                <h3>Recent Loans</h3>
                <a href="{{ route('admin.loans') }}">View All →</a>
            </div>

            <div class="table-wrap">
                <table>

                    <thead>
                        <tr>
                            <th>Loan</th>
                            <th>Client</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse($recentLoans as $loan)

                            @php
                                $loanStatus = strtolower((string) $loan->status);

                                $loanBadgeClass = match ($loanStatus) {
                                    'active', 'disbursed', 'completed' => 'badge-green',
                                    'pending', 'approved' => 'badge-orange',
                                    'overdue', 'rejected' => 'badge-red',
                                    default => 'badge-gray',
                                };
                            @endphp

                            <tr>

                                <td>
                                    <strong>
                                        {{ $loan->loan_number }}
                                    </strong>
                                </td>

                                <td>
                                    {{ $loan->user->name ?? 'Unknown' }}
                                </td>

                                <td>
                                    ₹{{ number_format((float) $loan->loan_amount, 2) }}
                                </td>

                                <td>
                                    <span class="badge {{ $loanBadgeClass }}">
                                        <span class="dot"></span>
                                        {{ ucfirst(str_replace('_', ' ', $loan->status)) }}
                                    </span>
                                </td>

                                <td>
                                    <a
                                        href="{{ route('admin.loans.show', $loan) }}"
                                        class="view-btn"
                                    >
                                        View
                                    </a>
                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td
                                    colspan="5"
                                    style="text-align:center;padding:30px;color:#9aa6b6;"
                                >
                                    No loans found.
                                </td>
                            </tr>

                        @endforelse

                    </tbody>

                </table>
            </div>

        </div>


        <!-- =================================================
             DASHBOARD GRID
        ================================================== -->

        <div class="dashboard-grid">


            <!-- QUICK ACTIONS -->

            <div class="card">

                <div class="card-header">

                    <h3>
                        Quick Actions
                    </h3>

                    <span>
                        Manage
                    </span>

                </div>


                <div class="card-body">

                    <div class="quick-actions">


                        <a
                            href="{{ route('admin.clients') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                👥
                            </div>

                            <div class="quick-text">

                                <strong>
                                    Clients
                                </strong>

                                <span>
                                    View all clients
                                </span>

                            </div>

                        </a>


                        <a
                            href="{{ route('admin.applications') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                📋
                            </div>

                            <div class="quick-text">

                                <strong>
                                    Applications
                                </strong>

                                <span>
                                    Review applications
                                </span>

                            </div>

                        </a>


                        <a
                            href="{{ route('admin.clients') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                🪪
                            </div>

                            <div class="quick-text">

                                <strong>
                                    KYC Verification
                                </strong>

                                <span>
                                    Verify client KYC
                                </span>

                            </div>

                        </a>


                        <a
                            href="{{ route('admin.payments') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                💳
                            </div>

                            <div class="quick-text">

                                <strong>
                                    Payments
                                </strong>

                                <span>
                                    View payment history
                                </span>

                            </div>

                        </a>


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

                        <a
                            href="{{ route('admin.emi-cards') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                🔐
                            </div>

                            <div class="quick-text">

                                <strong>
                                    EMI Cards
                                </strong>

                                <span>
                                    Manage EMI cards
                                </span>

                            </div>

                        </a>

                        @else

                        <a
                            href="{{ route('admin.clients') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                🔐
                            </div>

                            <div class="quick-text">

                                <strong>
                                    EMI Cards
                                </strong>

                                <span>
                                    Manage EMI cards
                                </span>

                            </div>

                        </a>

                        @endif


                        <a
                            href="{{ route('admin.loans') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                💰
                            </div>

                            <div class="quick-text">

                                <strong>
                                    Loans
                                </strong>

                                <span>
                                    Manage loan applications
                                </span>

                            </div>

                        </a>


                        <a
                            href="{{ route('admin.clients') }}"
                            class="quick-action"
                        >

                            <div class="quick-icon">
                                🔍
                            </div>

                            <div class="quick-text">

                                <strong>
                                    Client Search
                                </strong>

                                <span>
                                    Find a client
                                </span>

                            </div>

                        </a>


                    </div>

                </div>

            </div>



            <!-- KYC STATUS -->

            <div class="card">

                <div class="card-header">

                    <h3>
                        KYC Overview
                    </h3>

                    <a href="{{ route('admin.clients') }}">
                        View All →
                    </a>

                </div>


                <div class="card-body">


                    <div class="kyc-row">

                        <div class="kyc-left">

                            <div class="kyc-icon">
                                ⏳
                            </div>

                            <div class="kyc-name">
                                Pending Verification
                            </div>

                        </div>

                        <div class="kyc-count">
                            {{ $pendingKyc }}
                        </div>

                    </div>


                    <div class="kyc-row">

                        <div class="kyc-left">

                            <div class="kyc-icon">
                                ✓
                            </div>

                            <div class="kyc-name">
                                Verified
                            </div>

                        </div>

                        <div class="kyc-count">
                            {{ $verifiedKyc }}
                        </div>

                    </div>


                    <div class="kyc-row">

                        <div class="kyc-left">

                            <div class="kyc-icon">
                                ✕
                            </div>

                            <div class="kyc-name">
                                Rejected
                            </div>

                        </div>

                        <div class="kyc-count">
                            {{ $rejectedKyc }}
                        </div>

                    </div>


                </div>

            </div>


        </div>



        <!-- =================================================
             RECENT CLIENTS
        ================================================== -->

        <div class="card" style="margin-bottom:18px;">


            <div class="card-header">

                <h3>
                    Recent Clients
                </h3>

                <a href="{{ route('admin.clients') }}">
                    View All →
                </a>

            </div>


            <div class="table-wrap">


                <table>

                    <thead>

                        <tr>

                            <th>
                                Client
                            </th>

                            <th>
                                Mobile
                            </th>

                            <th>
                                Registered
                            </th>

                            <th>
                                KYC
                            </th>

                            <th>
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody>


                        @forelse($recentClients as $client)

                            @php

                                $initial =
                                    strtoupper(
                                        substr(
                                            $client->name,
                                            0,
                                            1
                                        )
                                    );

                                $kyc =
                                    $client->clientKyc;

                            @endphp


                            <tr>


                                <td>

                                    <div class="client">

                                        <div class="client-avatar">

                                            {{ $initial }}

                                        </div>


                                        <div>

                                            <div class="client-name">

                                                {{ $client->name }}

                                            </div>

                                            <div class="client-email">

                                                {{ $client->email }}

                                            </div>

                                        </div>

                                    </div>

                                </td>


                                <td>

                                    {{ $client->mobile ?? '-' }}

                                </td>


                                <td>

                                    {{ $client->created_at
                                        ? $client->created_at
                                            ->format('d M Y')
                                        : '-'
                                    }}

                                </td>


                                <td>

                                    @if(
                                        $kyc &&
                                        $kyc->status === 'verified'
                                    )

                                        <span
                                            class="badge badge-green"
                                        >

                                            <span class="dot"></span>

                                            Verified

                                        </span>

                                    @elseif(
                                        $kyc &&
                                        $kyc->status === 'rejected'
                                    )

                                        <span
                                            class="badge badge-red"
                                        >

                                            <span class="dot"></span>

                                            Rejected

                                        </span>

                                    @elseif($kyc)

                                        <span
                                            class="badge badge-orange"
                                        >

                                            <span class="dot"></span>

                                            Pending

                                        </span>

                                    @else

                                        <span
                                            class="badge badge-gray"
                                        >

                                            Not Submitted

                                        </span>

                                    @endif

                                </td>


                                <td>

                                    <a
                                        href="{{ route(
                                            'admin.clients.show',
                                            $client
                                        ) }}"
                                        class="view-btn"
                                    >
                                        View
                                    </a>

                                </td>


                            </tr>


                        @empty

                            <tr>

                                <td
                                    colspan="5"
                                    style="
                                        text-align:center;
                                        padding:30px;
                                        color:#9aa6b6;
                                    "
                                >

                                    No clients found.

                                </td>

                            </tr>

                        @endforelse


                    </tbody>

                </table>


            </div>

        </div>



        <!-- =================================================
             RECENT APPLICATIONS + PAYMENTS
        ================================================== -->

        <div class="dashboard-grid">


            <!-- APPLICATIONS -->

            <div class="card">


                <div class="card-header">

                    <h3>
                        Recent Applications
                    </h3>

                    <a href="{{ route('admin.applications') }}">
                        View All →
                    </a>

                </div>


                <div class="table-wrap">


                    <table>

                        <thead>

                            <tr>

                                <th>
                                    Client
                                </th>

                                <th>
                                    KYC
                                </th>

                                <th>
                                    Date
                                </th>

                            </tr>

                        </thead>


                        <tbody>


                            @forelse(
                                $recentApplications
                                as $application
                            )

                                <tr>


                                    <td>

                                        <div class="client">

                                            <div class="client-avatar">

                                                {{
                                                    strtoupper(
                                                        substr(
                                                            $application->name,
                                                            0,
                                                            1
                                                        )
                                                    )
                                                }}

                                            </div>


                                            <div>

                                                <div class="client-name">

                                                    {{
                                                        $application->name
                                                    }}

                                                </div>

                                                <div class="client-email">

                                                    {{
                                                        $application->email
                                                    }}

                                                </div>

                                            </div>

                                        </div>

                                    </td>


                                    <td>

                                        @if(
                                            $application->clientKyc &&
                                            $application->clientKyc->status
                                                === 'verified'
                                        )

                                            <span
                                                class="badge badge-green"
                                            >
                                                Verified
                                            </span>

                                        @elseif(
                                            $application->clientKyc &&
                                            $application->clientKyc->status
                                                === 'rejected'
                                        )

                                            <span
                                                class="badge badge-red"
                                            >
                                                Rejected
                                            </span>

                                        @elseif(
                                            $application->clientKyc
                                        )

                                            <span
                                                class="badge badge-orange"
                                            >
                                                Pending
                                            </span>

                                        @else

                                            <span
                                                class="badge badge-gray"
                                            >
                                                Not Submitted
                                            </span>

                                        @endif

                                    </td>


                                    <td>

                                        {{
                                            $application->created_at
                                                ? $application->created_at
                                                    ->format('d M Y')
                                                : '-'
                                        }}

                                    </td>


                                </tr>


                            @empty

                                <tr>

                                    <td
                                        colspan="3"
                                        style="
                                            text-align:center;
                                            padding:25px;
                                            color:#9aa6b6;
                                        "
                                    >
                                        No applications found.
                                    </td>

                                </tr>

                            @endforelse


                        </tbody>

                    </table>


                </div>


            </div>



            <!-- PAYMENTS -->

            <div class="card">


                <div class="card-header">

                    <h3>
                        Recent Payments
                    </h3>

                    <a href="{{ route('admin.payments') }}">
                        View All →
                    </a>

                </div>


                <div class="table-wrap">


                    <table>

                        <thead>

                            <tr>

                                <th>
                                    Client
                                </th>

                                <th>
                                    Amount
                                </th>

                                <th>
                                    Status
                                </th>

                            </tr>

                        </thead>


                        <tbody>


                            @forelse(
                                $recentPayments
                                as $payment
                            )

                                <tr>


                                    <td>

                                        {{
                                            $payment->user->name
                                            ?? 'Unknown'
                                        }}

                                    </td>


                                    <td>

                                        <span class="amount">

                                            ₹{{
                                                number_format(
                                                    $payment->amount ?? 0,
                                                    2
                                                )
                                            }}

                                        </span>

                                    </td>


                                    <td>

                                        @if(
                                            $payment->status === 'paid'
                                        )

                                            <span
                                                class="badge badge-green"
                                            >

                                                <span class="dot"></span>

                                                Paid

                                            </span>

                                        @elseif(
                                            $payment->status === 'pending'
                                        )

                                            <span
                                                class="badge badge-orange"
                                            >

                                                <span class="dot"></span>

                                                Pending

                                            </span>

                                        @elseif(
                                            $payment->status === 'failed'
                                        )

                                            <span
                                                class="badge badge-red"
                                            >

                                                <span class="dot"></span>

                                                Failed

                                            </span>

                                        @else

                                            <span
                                                class="badge badge-gray"
                                            >

                                                {{ ucfirst(
                                                    $payment->status
                                                ) }}

                                            </span>

                                        @endif

                                    </td>


                                </tr>


                            @empty

                                <tr>

                                    <td
                                        colspan="3"
                                        style="
                                            text-align:center;
                                            padding:25px;
                                            color:#9aa6b6;
                                        "
                                    >

                                        No payments found.

                                    </td>

                                </tr>

                            @endforelse


                        </tbody>

                    </table>


                </div>


            </div>


        </div>

@endsection