@extends('admin.layouts.app')

@section('title', 'EMI CREDITS | Admin Dashboard')
@section('page-title', 'Admin Dashboard')

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

@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/dashboard.css') }}">
@endpush



@section('content')

<div class="dashboard-page">

    {{-- =====================================================
         WELCOME
    ====================================================== --}}

    <div class="welcome">

        <h2>Dashboard Overview</h2>

        <p>
            Monitor clients, applications, loans, KYC verification and payments from one place.
        </p>

    </div>


    {{-- =====================================================
         8 STAT CARDS
    ====================================================== --}}

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


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


        {{-- TOTAL LOANS --}}
        <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>


        {{-- PENDING LOANS --}}
        <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>


        {{-- ACTIVE LOANS --}}
        <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>


        {{-- OVERDUE LOANS --}}
        <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>


    {{-- =====================================================
         GRAPH + LOAN STATUS
    ====================================================== --}}

    @php

        /*
         * Only existing dashboard variables are used.
         * No new database query / controller logic required.
         */

        $loanGraphValues = [
            (float) $pendingLoans,
            (float) $approvedLoans,
            (float) $activeLoans,
            (float) $overdueLoans,
            (float) $completedLoans,
        ];

        $loanGraphMax = max(1, max($loanGraphValues));

        $pendingPercent =
            $totalLoans > 0
                ? min(100, ($pendingLoans / $totalLoans) * 100)
                : 0;

        $approvedPercent =
            $totalLoans > 0
                ? min(100, ($approvedLoans / $totalLoans) * 100)
                : 0;

        $activePercent =
            $totalLoans > 0
                ? min(100, ($activeLoans / $totalLoans) * 100)
                : 0;

        $overduePercent =
            $totalLoans > 0
                ? min(100, ($overdueLoans / $totalLoans) * 100)
                : 0;

        $completedPercent =
            $totalLoans > 0
                ? min(100, ($completedLoans / $totalLoans) * 100)
                : 0;

    @endphp


    <div class="analytics-grid">

        {{-- =================================================
             LOAN GRAPH
        ================================================== --}}

        <div class="dashboard-card">

            <div class="dashboard-card-header">

                <div class="dashboard-card-title">

                    <h3>
                        Loan Overview
                    </h3>

                    <p>
                        Current loan portfolio status
                    </p>

                </div>

                <a href="{{ route('admin.loans') }}">
                    Manage Loans →
                </a>

            </div>


            <div class="dashboard-card-body">

                <div class="loan-graph">

                    <div class="graph-summary">

                        <div class="graph-summary-item">
                            <span>Total Loan Value</span>
                            <strong>
                                {{ money($totalLoanAmount) }}
                            </strong>
                        </div>

                        <div class="graph-summary-item">
                            <span>Disbursed</span>
                            <strong>
                                {{ money($totalDisbursedAmount) }}
                            </strong>
                        </div>

                        <div class="graph-summary-item">
                            <span>Outstanding</span>
                            <strong>
                                {{ money($totalOutstandingAmount) }}
                            </strong>
                        </div>

                    </div>


                    <div class="graph-area">

                        <div class="graph-grid">

                            <div class="graph-line"></div>
                            <div class="graph-line"></div>
                            <div class="graph-line"></div>
                            <div class="graph-line"></div>
                            <div class="graph-line"></div>

                        </div>


                        <div class="graph-bars">


                            {{-- PENDING --}}
                            <div class="graph-column">

                                @php
                                    $height =
                                        max(
                                            5,
                                            ($pendingLoans / $loanGraphMax) * 100
                                        );
                                @endphp

                                <span
                                    class="graph-value"
                                    style="
                                        --bar-height: {{ $height }}%;
                                    "
                                >
                                    {{ $pendingLoans }}
                                </span>

                                <div
                                    class="graph-bar"
                                    style="height: {{ $height }}%;"
                                ></div>

                            </div>


                            {{-- APPROVED --}}
                            <div class="graph-column">

                                @php
                                    $height =
                                        max(
                                            5,
                                            ($approvedLoans / $loanGraphMax) * 100
                                        );
                                @endphp

                                <span
                                    class="graph-value"
                                    style="
                                        --bar-height: {{ $height }}%;
                                    "
                                >
                                    {{ $approvedLoans }}
                                </span>

                                <div
                                    class="graph-bar"
                                    style="height: {{ $height }}%;"
                                ></div>

                            </div>


                            {{-- ACTIVE --}}
                            <div class="graph-column">

                                @php
                                    $height =
                                        max(
                                            5,
                                            ($activeLoans / $loanGraphMax) * 100
                                        );
                                @endphp

                                <span
                                    class="graph-value"
                                    style="
                                        --bar-height: {{ $height }}%;
                                    "
                                >
                                    {{ $activeLoans }}
                                </span>

                                <div
                                    class="graph-bar"
                                    style="height: {{ $height }}%;"
                                ></div>

                            </div>


                            {{-- OVERDUE --}}
                            <div class="graph-column">

                                @php
                                    $height =
                                        max(
                                            5,
                                            ($overdueLoans / $loanGraphMax) * 100
                                        );
                                @endphp

                                <span
                                    class="graph-value"
                                    style="
                                        --bar-height: {{ $height }}%;
                                    "
                                >
                                    {{ $overdueLoans }}
                                </span>

                                <div
                                    class="graph-bar"
                                    style="height: {{ $height }}%;"
                                ></div>

                            </div>


                            {{-- COMPLETED --}}
                            <div class="graph-column">

                                @php
                                    $height =
                                        max(
                                            5,
                                            ($completedLoans / $loanGraphMax) * 100
                                        );
                                @endphp

                                <span
                                    class="graph-value"
                                    style="
                                        --bar-height: {{ $height }}%;
                                    "
                                >
                                    {{ $completedLoans }}
                                </span>

                                <div
                                    class="graph-bar"
                                    style="height: {{ $height }}%;"
                                ></div>

                            </div>

                        </div>


                        <div class="graph-labels">

                            <span>Pending</span>
                            <span>Approved</span>
                            <span>Active</span>
                            <span>Overdue</span>
                            <span>Completed</span>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        {{-- =================================================
             LOAN STATUS
        ================================================== --}}

        <div class="dashboard-card">

            <div class="dashboard-card-header">

                <div class="dashboard-card-title">

                    <h3>
                        Loan Status
                    </h3>

                    <p>
                        Portfolio distribution
                    </p>

                </div>

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

            </div>


            <div class="dashboard-card-body">

                <div class="status-list">


                    {{-- PENDING --}}
                    <div class="status-item">

                        <div class="status-name">

                            <span class="status-dot dot-pending"></span>

                            Pending

                        </div>

                        <div class="status-track">

                            <div
                                class="status-fill fill-pending"
                                style="width:{{ $pendingPercent }}%;"
                            ></div>

                        </div>

                        <div class="status-count">
                            {{ $pendingLoans }}
                        </div>

                    </div>


                    {{-- APPROVED --}}
                    <div class="status-item">

                        <div class="status-name">

                            <span class="status-dot dot-approved"></span>

                            Approved

                        </div>

                        <div class="status-track">

                            <div
                                class="status-fill fill-approved"
                                style="width:{{ $approvedPercent }}%;"
                            ></div>

                        </div>

                        <div class="status-count">
                            {{ $approvedLoans }}
                        </div>

                    </div>


                    {{-- ACTIVE --}}
                    <div class="status-item">

                        <div class="status-name">

                            <span class="status-dot dot-active"></span>

                            Active

                        </div>

                        <div class="status-track">

                            <div
                                class="status-fill fill-active"
                                style="width:{{ $activePercent }}%;"
                            ></div>

                        </div>

                        <div class="status-count">
                            {{ $activeLoans }}
                        </div>

                    </div>


                    {{-- OVERDUE --}}
                    <div class="status-item">

                        <div class="status-name">

                            <span class="status-dot dot-overdue"></span>

                            Overdue

                        </div>

                        <div class="status-track">

                            <div
                                class="status-fill fill-overdue"
                                style="width:{{ $overduePercent }}%;"
                            ></div>

                        </div>

                        <div class="status-count">
                            {{ $overdueLoans }}
                        </div>

                    </div>


                    {{-- COMPLETED --}}
                    <div class="status-item">

                        <div class="status-name">

                            <span class="status-dot dot-completed"></span>

                            Completed

                        </div>

                        <div class="status-track">

                            <div
                                class="status-fill fill-completed"
                                style="width:{{ $completedPercent }}%;"
                            ></div>

                        </div>

                        <div class="status-count">
                            {{ $completedLoans }}
                        </div>

                    </div>


                </div>

            </div>

        </div>

    </div>


    {{-- =====================================================
         FINANCIAL OVERVIEW
    ====================================================== --}}

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

        <div class="dashboard-card-header">

            <div class="dashboard-card-title">

                <h3>
                    Financial Overview
                </h3>

                <p>
                    Loan portfolio financial summary
                </p>

            </div>

            <a href="{{ route('admin.loans') }}">
                Manage Loans →
            </a>

        </div>


        <div class="dashboard-card-body">

            <div class="finance-grid">


                <div class="finance-item">

                    <div class="finance-icon">
                        💵
                    </div>

                    <span>
                        Total Loan Amount
                    </span>

                    <strong>
                        {{ money($totalLoanAmount) }}
                    </strong>

                </div>


                <div class="finance-item">

                    <div class="finance-icon">
                        📤
                    </div>

                    <span>
                        Total Disbursed
                    </span>

                    <strong>
                        {{ money($totalDisbursedAmount) }}
                    </strong>

                </div>


                <div class="finance-item">

                    <div class="finance-icon">
                        📊
                    </div>

                    <span>
                        Outstanding
                    </span>

                    <strong>
                        {{ money($totalOutstandingAmount) }}
                    </strong>

                </div>


                <div class="finance-item">

                    <div class="finance-icon">
                        🧾
                    </div>

                    <span>
                        Processing Fees
                    </span>

                    <strong>
                        {{ money($totalProcessingFees) }}
                    </strong>

                </div>


            </div>

        </div>

    </div>


    {{-- =====================================================
         KYC + QUICK ACTIONS
    ====================================================== --}}

    <div class="bottom-grid">


        {{-- =================================================
             KYC OVERVIEW
        ================================================== --}}

        <div class="dashboard-card">

            <div class="dashboard-card-header">

                <div class="dashboard-card-title">

                    <h3>
                        KYC Overview
                    </h3>

                    <p>
                        Client verification status
                    </p>

                </div>

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

            </div>


            <div class="dashboard-card-body">

                <div class="kyc-list">


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


        {{-- =================================================
             QUICK ACTIONS
        ================================================== --}}

        <div class="dashboard-card">

            <div class="dashboard-card-header">

                <div class="dashboard-card-title">

                    <h3>
                        Quick Actions
                    </h3>

                    <p>
                        Frequently used management tools
                    </p>

                </div>

                <span style="
                    color:#9aa6b6;
                    font-size:8px;
                    font-weight:800;
                ">
                    Manage
                </span>

            </div>


            <div class="dashboard-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>


                </div>

            </div>

        </div>

    </div>


    {{-- =====================================================
         RECENT NOTIFICATIONS
    ====================================================== --}}

    @php

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

    @endphp


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

        <div class="dashboard-card-header">

            <div class="dashboard-card-title">

                <h3>
                    Recent Notifications
                </h3>

                <p>
                    Latest system and loan updates
                </p>

            </div>

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

        </div>


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

            <div class="notification-list">

                @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'
                            );

                        $notificationBg =
                            $notificationLevel === 'success'
                                ? '#e8f8ef'
                                : (
                                    $notificationLevel === 'warning'
                                        ? '#fff4df'
                                        : (
                                            $notificationLevel === 'error'
                                                ? '#fff1f2'
                                                : '#eaf2ff'
                                        )
                                );

                        $notificationIcon =
                            $notificationLevel === 'success'
                                ? '✓'
                                : (
                                    $notificationLevel === 'warning'
                                        ? '⚠'
                                        : (
                                            $notificationLevel === 'error'
                                                ? '!'
                                                : '🔔'
                                        )
                                );

                    @endphp


                    <div class="notification-row">

                        <div
                            class="notification-icon"
                            style="
                                background:{{ $notificationBg }};
                            "
                        >
                            {{ $notificationIcon }}
                        </div>


                        <div class="notification-content">

                            <div class="notification-title">
                                {{ $notificationTitle }}
                            </div>

                            <div class="notification-message">
                                {{ $notificationMessage }}
                            </div>

                            <div class="notification-time">

                                {{ $notification->created_at?->diffForHumans() ?? '' }}

                                @if($notificationLoan)
                                    · {{ $notificationLoan }}
                                @endif

                            </div>

                        </div>


                        @if(!$notification->read_at)

                            <form
                                method="POST"
                                action="{{ route(
                                    'notifications.read',
                                    $notification->id
                                ) }}"
                            >

                                @csrf

                                <button
                                    type="submit"
                                    class="notification-open"
                                >
                                    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>

    </div>

</div>

@endsection