@extends('user.layouts')

@section('title', 'Dashboard')

@section('header')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    .dashboard-page {
        padding-top: 22px;
        padding-bottom: 35px;
    }

    .dashboard-page-header {
        margin-bottom: 22px;
    }

    .dashboard-page-title {
        margin: 0;
        color: #1e293b;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.25;
    }

    .dashboard-page-subtitle {
        margin: 5px 0 0;
        color: #94a3b8;
        font-size: 13px;
        font-weight: 400;
    }

    .dashboard-stats-row {
        row-gap: 18px;
    }

    .dashboard-stat-link {
        display: block;
        height: 100%;
        text-decoration: none !important;
    }

    .dashboard-stat-card {
        height: 100%;
        min-height: 145px;
        position: relative;
        overflow: hidden;
        border: 1px solid #e8edf3 !important;
        border-radius: 14px !important;
        background: #ffffff;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
    }

    .dashboard-stat-card:hover {
        transform: translateY(-3px);
        border-color: #e1e7ee !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    }

    .dashboard-stat-card .card-body {
        padding: 20px;
    }

    .dashboard-stat-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 15px;
    }

    .dashboard-stat-title {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
    }

    .dashboard-stat-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 12px;
    }

    .dashboard-stat-icon img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .dashboard-stat-icon.agent {
        background: #eff6ff;
    }

    .dashboard-stat-icon.business {
        background: #f5f3ff;
    }

    .dashboard-stat-icon.subscription {
        background: #fff7ed;
    }

    .dashboard-stat-icon.payout {
        background: #ecfdf5;
    }

    .dashboard-stat-value {
        margin: 18px 0 0;
        color: #1e293b;
        font-size: 27px;
        font-weight: 700;
        line-height: 1;
    }

    .dashboard-stat-footer {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        color: #94a3b8;
        font-size: 11px;
        font-weight: 500;
    }

    .dashboard-stat-footer i {
        font-size: 9px;
    }

    .dashboard-card-accent {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .dashboard-stat-card:hover .dashboard-card-accent {
        opacity: 1;
    }

    .dashboard-card-accent.agent {
        background: #3b82f6;
    }

    .dashboard-card-accent.business {
        background: #8b5cf6;
    }

    .dashboard-card-accent.subscription {
        background: #f59e0b;
    }

    .dashboard-card-accent.payout {
        background: #10b981;
    }

    .dashboard-chart-section {
        margin-top: 22px;
    }

    .dashboard-chart-card {
        border: 1px solid #e8edf3 !important;
        border-radius: 14px !important;
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    }

    .dashboard-chart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 19px 22px;
        border-bottom: 1px solid #edf1f5;
        background: #ffffff;
    }

    .chart-heading-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .chart-heading-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 10px;
        background: rgba(254, 93, 186, 0.10);
        color: #fe5dba;
        font-size: 15px;
    }

    .dashboard-chart-title {
        margin: 0;
        color: #1e293b;
        font-size: 16px;
        font-weight: 700;
    }

    .dashboard-chart-subtitle {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: 11px;
    }

    .chart-period-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 11px;
        border: 1px solid #e8edf3;
        border-radius: 7px;
        background: #f8fafc;
        color: #64748b;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .chart-period-badge i {
        color: #fe5dba;
    }

    .dashboard-chart-body {
        padding: 22px;
    }

    .chart-wrapper {
        position: relative;
        width: 100%;
        height: 390px;
    }

    .dashboard-empty-chart {
        height: 390px;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        color: #94a3b8;
    }

    .dashboard-empty-chart i {
        margin-bottom: 10px;
        color: #cbd5e1;
        font-size: 30px;
    }

    .dashboard-empty-chart p {
        margin: 0;
        font-size: 12px;
    }

    @media (max-width: 1199px) {
        .dashboard-stat-value {
            font-size: 24px;
        }
    }

    @media (max-width: 991px) {
        .dashboard-stat-card {
            min-height: 135px;
        }

        .chart-wrapper {
            height: 350px;
        }
    }

    @media (max-width: 767px) {
        .dashboard-page {
            padding-top: 15px;
        }

        .dashboard-page-title {
            font-size: 23px;
        }

        .dashboard-page-subtitle {
            font-size: 12px;
        }

        .dashboard-chart-header {
            align-items: flex-start;
            padding: 17px;
        }

        .dashboard-chart-body {
            padding: 17px;
        }

        .chart-wrapper {
            height: 320px;
        }
    }

    @media (max-width: 575px) {
        .dashboard-stat-card {
            min-height: 125px;
        }

        .dashboard-stat-card .card-body {
            padding: 17px;
        }

        .dashboard-stat-icon {
            width: 43px;
            height: 43px;
        }

        .dashboard-stat-icon img {
            width: 22px;
            height: 22px;
        }

        .dashboard-stat-value {
            margin-top: 14px;
            font-size: 23px;
        }

        .dashboard-chart-header {
            flex-direction: column;
        }

        .chart-period-badge {
            margin-left: 52px;
        }

        .chart-wrapper {
            height: 285px;
        }
    }
</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper dashboard-page">

    {{-- PAGE HEADER --}}
    <div class="dashboard-page-header">

        <h3 class="dashboard-page-title">
            Dashboard
        </h3>

        <p class="dashboard-page-subtitle">
            Overview of agents, businesses, subscriptions and payouts
        </p>

    </div>


    {{-- SUMMARY CARDS --}}
    <div class="row dashboard-stats-row">

        {{-- TOTAL AGENT --}}
        <div class="col-12 col-sm-6 col-lg-3">

            <a href="{{ route('users') }}"
                class="dashboard-stat-link">

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

                    <div class="dashboard-card-accent agent"></div>

                    <div class="card-body">

                        <div class="dashboard-stat-top">

                            <div>
                                <p class="dashboard-stat-title">
                                    Total Agent
                                </p>
                            </div>

                            <div class="dashboard-stat-icon agent">

                                <img
                                    src="{{ asset('/assets') }}/images/icons/total-users.svg"
                                    alt="Total Agent">

                            </div>

                        </div>

                        <h2 class="dashboard-stat-value">
                            {{ $total_agent }}
                        </h2>

                        <div class="dashboard-stat-footer">

                            <span>
                                View all agents
                            </span>

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

                        </div>

                    </div>

                </div>

            </a>

        </div>


        {{-- ALL BUSINESS --}}
        <div class="col-12 col-sm-6 col-lg-3">

            <a href="{{ route('all_business') }}"
                class="dashboard-stat-link">

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

                    <div class="dashboard-card-accent business"></div>

                    <div class="card-body">

                        <div class="dashboard-stat-top">

                            <div>
                                <p class="dashboard-stat-title">
                                    All Business
                                </p>
                            </div>

                            <div class="dashboard-stat-icon business">

                                <img
                                    src="{{ asset('/assets') }}/images/icons/total-business.svg"
                                    alt="All Business">

                            </div>

                        </div>

                        <h2 class="dashboard-stat-value">
                            {{ $total_business }}
                        </h2>

                        <div class="dashboard-stat-footer">

                            <span>
                                View all businesses
                            </span>

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

                        </div>

                    </div>

                </div>

            </a>

        </div>


        {{-- SUBSCRIPTION --}}
        <div class="col-12 col-sm-6 col-lg-3">

            <a href="{{ route('transaction') }}"
                class="dashboard-stat-link">

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

                    <div class="dashboard-card-accent subscription"></div>

                    <div class="card-body">

                        <div class="dashboard-stat-top">

                            <div>
                                <p class="dashboard-stat-title">
                                    Subscription
                                </p>
                            </div>

                            <div class="dashboard-stat-icon subscription">

                                <img
                                    src="{{ asset('/assets') }}/images/icons/total-subscription.svg"
                                    alt="Subscription">

                            </div>

                        </div>

                        <h2 class="dashboard-stat-value">
                            {{ $total_subscription }}
                        </h2>

                        <div class="dashboard-stat-footer">

                            <span>
                                View subscriptions
                            </span>

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

                        </div>

                    </div>

                </div>

            </a>

        </div>


        {{-- PAYOUT --}}
        <div class="col-12 col-sm-6 col-lg-3">

            <a href="{{ route('withdraw_request_history') }}"
                class="dashboard-stat-link">

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

                    <div class="dashboard-card-accent payout"></div>

                    <div class="card-body">

                        <div class="dashboard-stat-top">

                            <div>
                                <p class="dashboard-stat-title">
                                    Payout
                                </p>
                            </div>

                            <div class="dashboard-stat-icon payout">

                                <img
                                    src="{{ asset('/assets') }}/images/icons/total-payout.svg"
                                    alt="Payout">

                            </div>

                        </div>

                        <h2 class="dashboard-stat-value">
                            {{ $total_payout }}
                        </h2>

                        <div class="dashboard-stat-footer">

                            <span>
                                View payout history
                            </span>

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

                        </div>

                    </div>

                </div>

            </a>

        </div>

    </div>


    {{-- CHART --}}
    <div class="row dashboard-chart-section">

        <div class="col-12">

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

                {{-- CHART HEADER --}}
                <div class="dashboard-chart-header">

                    <div class="chart-heading-wrapper">

                        <div class="chart-heading-icon">
                            <i class="fa-solid fa-chart-line"></i>
                        </div>

                        <div>

                            <h4 class="dashboard-chart-title">
                                User Registrations
                            </h4>

                            <p class="dashboard-chart-subtitle">
                                Registration activity over time
                            </p>

                        </div>

                    </div>


                    <div class="chart-period-badge">

                        <i class="fa-regular fa-calendar"></i>

                        Registration Overview

                    </div>

                </div>


                {{-- CHART BODY --}}
                <div class="dashboard-chart-body">

                    <div class="chart-wrapper"
                        id="chartWrapper">

                        <canvas id="canvas"></canvas>

                    </div>


                    <div class="dashboard-empty-chart"
                        id="emptyChart">

                        <i class="fa-solid fa-chart-line"></i>

                        <p>
                            No registration data available
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous">
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const dates = @json($dates);
    const userData = @json($user_data);

    const canvas =
        document.getElementById('canvas');

    const chartWrapper =
        document.getElementById('chartWrapper');

    const emptyChart =
        document.getElementById('emptyChart');


    if (
        !Array.isArray(dates) ||
        !Array.isArray(userData) ||
        dates.length === 0 ||
        userData.length === 0
    ) {

        chartWrapper.style.display =
            'none';

        emptyChart.style.display =
            'flex';

        return;

    }


    const ctx =
        canvas.getContext('2d');


    const gradient =
        ctx.createLinearGradient(
            0,
            0,
            0,
            350
        );


    gradient.addColorStop(
        0,
        'rgba(254, 93, 186, 0.20)'
    );


    gradient.addColorStop(
        1,
        'rgba(254, 93, 186, 0.01)'
    );


    new Chart(ctx, {

        type: 'line',

        data: {

            labels: dates,

            datasets: [

                {

                    label:
                        'User Registrations',

                    data:
                        userData,

                    borderColor:
                        '#fe5dba',

                    backgroundColor:
                        gradient,

                    borderWidth:
                        2,

                    fill:
                        true,

                    tension:
                        0.4,

                    pointRadius:
                        3,

                    pointHoverRadius:
                        5,

                    pointBackgroundColor:
                        '#ffffff',

                    pointBorderColor:
                        '#fe5dba',

                    pointBorderWidth:
                        2

                }

            ]

        },


        options: {

            responsive:
                true,

            maintainAspectRatio:
                false,


            interaction: {

                mode:
                    'index',

                intersect:
                    false

            },


            plugins: {

                legend: {

                    display:
                        true,

                    position:
                        'top',

                    align:
                        'end',

                    labels: {

                        color:
                            '#64748b',

                        usePointStyle:
                            true,

                        pointStyle:
                            'circle',

                        boxWidth:
                            7,

                        boxHeight:
                            7,

                        padding:
                            15,

                        font: {

                            size:
                                11,

                            weight:
                                '500'

                        }

                    }

                },


                tooltip: {

                    backgroundColor:
                        '#1e293b',

                    titleColor:
                        '#ffffff',

                    bodyColor:
                        '#e2e8f0',

                    padding:
                        11,

                    cornerRadius:
                        7,

                    displayColors:
                        true,

                    callbacks: {

                        title: function (
                            tooltipItems
                        ) {

                            if (
                                !tooltipItems.length
                            ) {
                                return '';
                            }


                            return 'Date: ' +
                                tooltipItems[0].label;

                        },


                        label: function (
                            context
                        ) {

                            return ' Registrations: ' +
                                context.parsed.y;

                        }

                    }

                }

            },


            scales: {

                x: {

                    grid: {

                        display:
                            false

                    },

                    border: {

                        display:
                            false

                    },

                    ticks: {

                        color:
                            '#94a3b8',

                        maxRotation:
                            0,

                        autoSkip:
                            true,

                        maxTicksLimit:
                            12,

                        font: {

                            size:
                                10

                        }

                    }

                },


                y: {

                    beginAtZero:
                        true,

                    border: {

                        display:
                            false

                    },

                    grid: {

                        color:
                            '#f1f5f9',

                        drawTicks:
                            false

                    },

                    ticks: {

                        color:
                            '#94a3b8',

                        padding:
                            10,

                        precision:
                            0,

                        font: {

                            size:
                                10

                        },

                        callback: function (
                            value
                        ) {

                            if (
                                Number.isInteger(
                                    value
                                )
                            ) {
                                return value;
                            }

                        }

                    }

                }

            }

        }

    });

});
</script>

@endsection