@php use App\Enums\OrderStatusEnum;use App\Enums\PermissionEnum; @endphp
@extends('layouts.master')
@section('title', trans('admin.dashboard'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/apex-charts/apexcharts.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/animate-css/animate.css') }}"/>
@endsection

@section('page-style')
    <style>
        :root {
            --glass-bg: rgba(255, 255, 255, 0.8);
            --glass-border: rgba(255, 255, 255, 0.4);
            --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
            --text-main: #444;
        }

        .dark-style {
            --glass-bg: rgba(21, 23, 42, 0.5);
            --glass-border: rgba(255, 255, 255, 0.08);
            --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
            --text-main: #cbcde9;
        }

        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--card-shadow);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 16px !important;
        }

        .glass-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            border-color: var(--bs-primary);
        }

        .stat-icon {
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            font-size: 26px;
            margin-bottom: 1.2rem;
            transition: all 0.3s ease;
        }

        .glass-card:hover .stat-icon {
            transform: scale(1.1);
        }

        .trend-indicator {
            font-size: 0.8rem;
            padding: 4px 10px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .section-title {
            position: relative;
            padding-bottom: 12px;
            margin-bottom: 24px;
            font-weight: 800;
            letter-spacing: 0.5px;
            font-size: 1.1rem;
            color: var(--text-main);
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 4px;
            background: linear-gradient(90deg, var(--bs-primary), transparent);
            border-radius: 10px;
        }

        .chart-container {
            min-height: 380px;
        }

        .list-group-item {
            background: transparent !important;
            border-color: var(--glass-border) !important;
            padding: 1rem 0;
        }

        .gradient-primary {
            background: linear-gradient(135deg, #7367f0 0%, #4831ff 100%);
            color: white;
        }

        .gradient-success {
            background: linear-gradient(135deg, #28c76f 0%, #15a05b 100%);
            color: white;
        }

        .gradient-info {
            background: linear-gradient(135deg, #00cfe8 0%, #009cb0 100%);
            color: white;
        }

        .gradient-warning {
            background: linear-gradient(135deg, #ff9f43 0%, #e67e22 100%);
            color: white;
        }

        .gradient-danger {
            background: linear-gradient(135deg, #ea5455 0%, #b32d2e 100%);
            color: white;
        }

        .dark-style h3, .dark-style h4, .dark-style h5, .dark-style h6, .dark-style p {
            color: var(--text-main);
        }

        .dark-style .text-muted {
            color: #8285a0 !important;
        }

        .dark-style .alert-label-warning {
            background-color: rgba(255, 159, 67, 0.08) !important;
            border-color: rgba(255, 159, 67, 0.2) !important;
            color: #ff9f43 !important;
        }
    </style>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <h3 class="fw-bold py-3 mb-2 animate__animated animate__fadeInDown">
                <span
                    class="text-muted fw-light">{{ trans('admin.welcome_back') }} /</span> {{ trans('admin.dashboard') }}
            </h3>
            <p class="text-muted animate__animated animate__fadeInUp animate__delay-1s">{{ trans('admin.overview_summary') }}</p>
        </div>
    </div>

    @can(PermissionEnum::DASHBOARD_GENERAL_STATS)
        <!-- General Statistics -->
        <div class="row g-4 mb-5">
            <div class="col-xl-3 col-md-4 col-sm-6 animate__animated animate__fadeInUp">
                <div class="card glass-card h-100 p-3">
                    <div class="stat-icon bg-label-primary"><i class="ti ti-users"></i></div>
                    <h6 class="mb-1">{{ trans('admin.total_app_users') }}</h6>
                    <h3 class="mb-1 fw-bold">{{ number_format($stats['general']['total_users']) }}</h3>
                    <div class="mt-2">
                        <span
                            class="badge bg-label-info me-1">{{ $stats['general']['providers_count'] }} {{ trans('admin.providers') }}</span>
                        <span
                            class="badge bg-label-secondary">{{ $stats['general']['clients_count'] }} {{ trans('admin.clients') }}</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 animate__animated animate__fadeInUp animate__delay-100ms">
                <div class="card glass-card h-100 p-3">
                    <div class="stat-icon bg-label-success"><i class="ti ti-shopping-cart"></i></div>
                    <h6 class="mb-1">{{ trans('admin.total_orders') }}</h6>
                    <h3 class="mb-1 fw-bold">{{ number_format($stats['general']['total_orders']) }}</h3>
                    <div class="mt-2 d-flex gap-2">
                        <small class="text-success"><i
                                class="ti ti-check"></i> {{ $stats['general']['completed_orders'] }}</small>
                        <small class="text-danger"><i class="ti ti-x"></i> {{ $stats['general']['cancelled_orders'] }}
                        </small>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 animate__animated animate__fadeInUp animate__delay-200ms">
                <div class="card glass-card h-100 p-3">
                    <div class="stat-icon bg-label-info"><i class="ti ti-currency-dollar"></i></div>
                    <h6 class="mb-1">{{ trans('admin.total_revenue') }}</h6>
                    <h3 class="mb-1 fw-bold text-truncate">{{ number_format($stats['general']['total_revenue'], 2) }}
                        <small class="fw-normal fs-6">{{ trans('admin.sar') }}</small></h3>
                    <div class="mt-2">
                        <span class="trend-indicator bg-label-success"><i class="ti ti-trending-up"></i> {{ $stats['orders']['time']['mom_growth'] }}% MoM</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-sm-6 animate__animated animate__fadeInUp animate__delay-300ms">
                <div class="card glass-card h-100 p-3">
                    <div class="stat-icon bg-label-warning"><i class="ti ti-wallet"></i></div>
                    <h6 class="mb-1">{{ trans('admin.pending_balance') }}</h6>
                    <h3 class="mb-1 fw-bold">{{ number_format($stats['general']['pending_balance'], 2) }}</h3>
                    <small class="text-muted">{{ trans('admin.escrow_funds') }}</small>
                </div>
            </div>
        </div>
    @endcan

    <!-- Order Statistics -->
    <div class="row">
        @can(PermissionEnum::DASHBOARD_ORDER_STATS)
            <div class="col-lg-8 mb-4">
                <div class="card glass-card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="section-title">{{ trans('admin.order_statistics') }}</h5>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-label-primary dropdown-toggle" type="button"
                                    data-bs-toggle="dropdown">{{ trans('admin.today') }}</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row g-3 mb-4">
                            <div class="col-sm-3 col-6 text-center border-end">
                                <h4 class="mb-0 fw-bold">{{ $stats['orders']['time']['today'] }}</h4>
                                <small class="text-muted">{{ trans('admin.today_orders') }}</small>
                            </div>
                            <div class="col-sm-3 col-6 text-center border-end">
                                <h4 class="mb-0 fw-bold">{{ $stats['orders']['time']['weekly'] }}</h4>
                                <small class="text-muted">{{ trans('admin.weekly_orders') }}</small>
                            </div>
                            <div class="col-sm-3 col-6 text-center border-end">
                                <h4 class="mb-0 fw-bold">{{ $stats['orders']['time']['monthly'] }}</h4>
                                <small class="text-muted">{{ trans('admin.monthly_orders') }}</small>
                            </div>
                            <div class="col-sm-3 col-6 text-center">
                                <h4 class="mb-0 fw-bold text-success">{{ $stats['orders']['time']['mom_growth'] }}%</h4>
                                <small class="text-muted">{{ trans('admin.mom_growth') }}</small>
                            </div>
                        </div>

                        <div id="ordersOverTimeChart" class="chart-container"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-4">
                <div class="card glass-card h-100">
                    <div class="card-header">
                        <h5 class="section-title">{{ trans('admin.order_by_status') }}</h5>
                    </div>
                    <div class="card-body">
                        <div id="orderStatusChart" class="chart-container"></div>
                        <div class="mt-4">
                            @foreach($stats['orders']['status'] as $status => $count)
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">{{ OrderStatusEnum::tryFrom($status)->name() }}</span>
                                    <span class="fw-bold">{{ $count }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endcan
    </div>

    <!-- Financial & Withdrawal -->
    <div class="row g-4 mb-5">
        @can(PermissionEnum::DASHBOARD_FINANCIAL_STATS)
            <div class="col-md-6 col-lg-4">
                <div class="card glass-card h-100">
                    <div class="card-header"><h5 class="section-title">{{ trans('admin.financial_statistics') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="badge bg-label-primary p-2 me-3"><i class="ti ti-credit-card"></i></div>
                            <div>
                                <h6 class="mb-0">{{ trans('admin.total_payments') }}</h6>
                                <p class="mb-0 fw-bold">{{ number_format($stats['financial']['payments']['total_count']) }}</p>
                            </div>
                        </div>
                        <div class="row mb-4">
                            <div class="col-6">
                                <small class="text-muted">{{ trans('admin.successful_payments') }}</small>
                                <h5 class="mb-0 text-success">{{ $stats['financial']['payments']['success_count'] }}</h5>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">{{ trans('admin.failed_payments') }}</small>
                                <h5 class="mb-0 text-danger">{{ $stats['financial']['payments']['failed_count'] }}</h5>
                            </div>
                        </div>
                        <hr>
                        <div class="mt-3">
                            <h6>{{ trans('admin.revenue_summary') }}</h6>
                            <div class="d-flex justify-content-between mb-2">
                                <span>{{ trans('admin.app_commission') }}</span>
                                <span
                                    class="text-primary fw-bold">{{ number_format($stats['financial']['revenue']['commission'], 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>{{ trans('admin.avg_per_order') }}</span>
                                <span
                                    class="fw-bold">{{ number_format($stats['financial']['revenue']['avg_per_order'], 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="card glass-card h-100">
                    <div class="card-header"><h5 class="section-title">{{ trans('admin.wallet_statistics') }}</h5></div>
                    <div class="card-body">
                        <div id="walletStatsChart" style="height: 150px"></div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex justify-content-between px-0">
                                <span><i class="ti ti-user-circle me-2 text-info"></i> {{ trans('admin.client_balances') }}</span>
                                <span
                                    class="fw-bold">{{ number_format($stats['financial']['wallets']['client_total'], 2) }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between px-0">
                                <span><i class="ti ti-briefcase me-2 text-warning"></i> {{ trans('admin.provider_balances') }}</span>
                                <span
                                    class="fw-bold">{{ number_format($stats['financial']['wallets']['provider_total'], 2) }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between px-0">
                                <span class="text-danger"><i class="ti ti-alert-triangle me-2"></i> {{ trans('admin.negative_wallets') }}</span>
                                <span
                                    class="badge bg-danger">{{ $stats['financial']['wallets']['negative_count'] }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        @endcan

        @can(PermissionEnum::DASHBOARD_WITHDRAWAL_STATS)
            <div class="col-md-6 col-lg-4">
                <div class="card glass-card h-100 gradient-primary">
                    <div class="card-body">
                        <h5 class="text-white mb-4">{{ trans('admin.withdrawal_summary') }}</h5>
                        <div class="text-center mb-4">
                            <small class="opacity-75">{{ trans('admin.total_withdrawn_amount') }}</small>
                            <h2 class="text-white fw-bold">{{ number_format($stats['withdrawals']['total_amount'], 2) }}</h2>
                        </div>
                        <div class="row g-2 text-center">
                            <div class="col-4">
                                <h5 class="text-white mb-0">{{ $stats['withdrawals']['requests_count'] }}</h5>
                                <small class="opacity-75">{{ trans('admin.requests') }}</small>
                            </div>
                            <div class="col-4">
                                <h5 class="text-white mb-0">{{ $stats['withdrawals']['completed'] }}</h5>
                                <small class="opacity-75">{{ trans('admin.completed') }}</small>
                            </div>
                            <div class="col-4">
                                <h5 class="text-white mb-0">{{ $stats['withdrawals']['pending'] }}</h5>
                                <small class="opacity-75">{{ trans('admin.pending') }}</small>
                            </div>
                        </div>
                        <div class="mt-4 pt-2 border-top border-white border-opacity-25">
                            <div class="d-flex justify-content-between align-items-center">
                                <small>{{ trans('admin.avg_processing_time') }}</small>
                                <span class="badge bg-white text-primary">{{ $stats['withdrawals']['avg_processing_hours'] }} hrs</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
    </div>

    <!-- Subscription Statistics -->
    @can(PermissionEnum::DASHBOARD_SUBSCRIPTION_STATS)
        <div class="row g-4 mb-5">
            <div class="col-12">
                <div class="card glass-card">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="section-title">{{ trans('admin.subscription_statistics') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-3 border-end">
                                <small class="text-muted d-block mb-1">{{ trans('admin.active_subscriptions') }}</small>
                                <h4 class="mb-0 fw-bold text-success">{{ $stats['subscriptions']['active'] }}</h4>
                            </div>
                            <div class="col-md-3 border-end">
                                <small
                                    class="text-muted d-block mb-1">{{ trans('admin.expired_subscriptions') }}</small>
                                <h4 class="mb-0 fw-bold text-danger">{{ $stats['subscriptions']['expired'] }}</h4>
                            </div>
                            <div class="col-md-3 border-end">
                                <small class="text-muted d-block mb-1">{{ trans('admin.subscription_revenue') }}</small>
                                <h4 class="mb-0 fw-bold text-primary">{{ number_format($stats['subscriptions']['revenue'], 2) }}</h4>
                            </div>
                            <div class="col-md-3">
                                <small class="text-muted d-block mb-1">{{ trans('admin.renewal_rate') }}</small>
                                <h4 class="mb-0 fw-bold">{{ $stats['subscriptions']['renewal_rate'] }}%</h4>
                            </div>
                        </div>
                        <div class="mt-4 alert alert-label-warning mb-0">
                            <i class="ti ti-star me-2"></i> {{ trans('admin.most_used_plan') }}:
                            <strong>{{ $stats['subscriptions']['most_used_plan'] }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <!-- Support & System -->
    <div class="row g-4">
        @can(PermissionEnum::DASHBOARD_CHAT_STATS)
            <div class="col-md-4">
                <div class="card glass-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="stat-icon bg-label-info mb-0 me-3"><i class="ti ti-messages"></i></div>
                            <h5 class="mb-0">{{ trans('admin.chat_support') }}</h5>
                        </div>
                        <div class="row text-center mb-4">
                            <div class="col-6">
                                <h4 class="mb-0">{{ $stats['chat']['conversations'] }}</h4>
                                <small class="text-muted">{{ trans('admin.conversations') }}</small>
                            </div>
                            <div class="col-6">
                                <h4 class="mb-0">{{ $stats['chat']['messages'] }}</h4>
                                <small class="text-muted">{{ trans('admin.messages') }}</small>
                            </div>
                        </div>
                        <div class="alert alert-label-info d-flex align-items-center" role="alert">
                            <span class="alert-icon me-2"><i class="ti ti-info-circle"></i></span>
                            <small>{{ trans('admin.avg_response_time') }}
                                : {{ $stats['chat']['avg_response_time_min'] }} {{ trans('admin.mins') }}</small>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
        @can(PermissionEnum::DASHBOARD_USER_STATS)
            <div class="col-md-4">
                <div class="card glass-card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="stat-icon bg-label-success mb-0 me-3"><i class="ti ti-user-plus"></i></div>
                            <h5 class="mb-0">{{ trans('admin.user_growth') }}</h5>
                        </div>
                        <div class="d-flex justify-content-between mb-3 mt-4">
                            <span>{{ trans('admin.new_today') }}</span>
                            <span class="badge bg-label-success">+{{ $stats['users']['new_today'] }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-3">
                            <span>{{ trans('admin.new_monthly') }}</span>
                            <span class="badge bg-label-primary">+{{ $stats['users']['new_monthly'] }}</span>
                        </div>
                        <div class="progress mb-2" style="height: 8px;">
                            @php $growth = ($stats['general']['total_users'] > 0) ? ($stats['users']['active'] / $stats['general']['total_users']) * 100 : 0 @endphp
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ $growth }}%"
                                 aria-valuenow="{{ $growth }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <small class="text-muted">{{ $stats['users']['active'] }} {{ trans('admin.active_users') }}
                            ({{ round($growth) }}%)</small>
                    </div>
                </div>
            </div>
        @endcan
        @can(PermissionEnum::DASHBOARD_SYSTEM_STATS)
            <div class="col-md-4">
                <div class="card glass-card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="stat-icon bg-label-danger mb-0 me-3"><i class="ti ti-settings"></i></div>
                            <h5 class="mb-0">{{ trans('admin.system_health') }}</h5>
                        </div>
                        <ul class="list-unstyled mb-0 mt-4">
                            <li class="d-flex justify-content-between mb-3">
                                <span><i class="ti ti-bell me-2"></i> {{ trans('admin.notifications_sent') }}</span>
                                <span class="fw-bold">{{ $stats['system']['sent_notifications'] }}</span>
                            </li>
                            <li class="d-flex justify-content-between mb-3">
                                <span><i class="ti ti-login me-2"></i> {{ trans('admin.login_attempts') }}</span>
                                <span class="fw-bold">{{ $stats['system']['login_attempts'] }}</span>
                            </li>
                            <li class="d-flex justify-content-between">
                                <span class="text-danger"><i class="ti ti-bug me-2"></i> {{ trans('admin.system_errors') }}</span>
                                <span class="badge bg-label-danger">{{ $stats['system']['errors_count'] }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        @endcan
    </div>

    <!-- Extra Charts -->
    <div class="row g-4 mt-4 mb-5">
        @can(PermissionEnum::DASHBOARD_FINANCIAL_STATS)
            <div class="col-md-6">
                <div class="card glass-card">
                    <div class="card-header"><h5>{{ trans('admin.payment_methods') }}</h5></div>
                    <div class="card-body">
                        <div id="paymentMethodsChart"></div>
                    </div>
                </div>
            </div>
        @endcan
        @can(PermissionEnum::DASHBOARD_ORDER_STATS)
            <div class="col-md-6">
                <div class="card glass-card">
                    <div class="card-header"><h5>{{ trans('admin.popular_services') }}</h5></div>
                    <div class="card-body">
                        <div id="popularServicesChart"></div>
                    </div>
                </div>
            </div>
        @endcan
    </div>

    <!-- User & Provider Lists/Stats -->
    @can(PermissionEnum::DASHBOARD_RATING_STATS)
        <div class="row g-4 mb-5">
            <div class="col-lg-6">
                <div class="card glass-card">
                    <div class="card-header border-bottom">
                        <h5 class="mb-0">{{ trans('admin.top_10_most_requested_services') }}</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            @foreach($stats['orders']['services']['top'] as $service)
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-0">{{ $service->name }}</h6>
                                        <small class="text-muted">{{ $service->category->name ?? '' }}</small>
                                    </div>
                                    <span
                                        class="badge bg-label-primary rounded-pill">{{ $service->orders_count }} {{ trans('admin.orders') }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card glass-card">
                    <div class="card-header border-bottom d-flex justify-content-between">
                        <h5 class="mb-0">{{ trans('admin.top_providers') }}</h5>
                        <span
                            class="badge bg-label-warning">{{ trans('admin.avg_rating') }}: {{ $stats['ratings']['avg_rating'] }}</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-borderless">
                                <thead>
                                <tr>
                                    <th>{{ trans('admin.provider') }}</th>
                                    <th>{{ trans('admin.orders') }}</th>
                                    <th>{{ trans('admin.rating') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($stats['ratings']['top_providers'] as $provider)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar avatar-xs me-2"><span
                                                        class="avatar-initial rounded-circle bg-label-info">{{ substr($provider->name, 0, 1) }}</span>
                                                </div>
                                                <span>{{ $provider->name }}</span>
                                            </div>
                                        </td>
                                        <td>{{ $provider->provider_orders_count }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span
                                                    class="text-warning me-1">{{ number_format($provider->reviews_avg_rating, 1) }}</span>
                                                <i class="ti ti-star-filled text-warning ti-xs"></i>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endcan
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const isDark = document.documentElement.classList.contains('dark-style');
            const themeMode = isDark ? 'dark' : 'light';
            const labelColor = isDark ? '#b6bee3' : '#a1a1a1';
            const borderColor = isDark ? 'rgba(255,255,255,0.08)' : '#e6e6e6';

            // 1. Orders Over Time (Line Chart)
            const ordersOverTimeEl = document.querySelector('#ordersOverTimeChart');
            const ordersOverTimeConfig = {
                series: [{
                    name: "{{ trans('admin.orders') }}",
                    data: {!! json_encode($chartData['orders_over_time']) !!}
                }],
                chart: {
                    height: 380,
                    type: 'area',
                    toolbar: {show: false},
                    animations: {enabled: true, easing: 'easeinout', speed: 800}
                },
                theme: {mode: themeMode},
                dataLabels: {enabled: false},
                stroke: {curve: 'smooth', width: 4},
                colors: ['#7367f0'],
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.6,
                        opacityTo: 0.1,
                        stops: [0, 95, 100]
                    }
                },
                grid: {borderColor: borderColor, strokeDashArray: 5},
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    labels: {style: {colors: labelColor, fontSize: '13px'}},
                    axisBorder: {show: false},
                    axisTicks: {show: false}
                },
                yaxis: {labels: {style: {colors: labelColor, fontSize: '13px'}}}
            };
            new ApexCharts(ordersOverTimeEl, ordersOverTimeConfig).render();

            // 2. Order Status (Pie Chart)
            const orderStatusEl = document.querySelector('#orderStatusChart');
            const orderStatusConfig = {
                series: {!! json_encode(array_column($chartData['order_statuses']->toArray(), 'count')) !!},
                labels: {!! json_encode(array_column($chartData['order_statuses']->toArray(), 'status')) !!},
                chart: {type: 'donut', height: 380},
                theme: {mode: themeMode},
                colors: {!! json_encode(array_column($chartData['order_statuses']->toArray(), 'color')) !!},
                stroke: {show: false},
                dataLabels: {enabled: false},
                legend: {
                    position: 'bottom',
                    labels: {colors: labelColor, useSeriesColors: false},
                    fontFamily: 'Public Sans',
                    fontSize: '14px'
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '75%',
                            labels: {
                                show: true,
                                value: {fontSize: '26px', fontFamily: 'Public Sans', color: labelColor, offsetTop: -5},
                                total: {show: true, label: 'Total', fontSize: '15px', color: labelColor}
                            }
                        }
                    }
                }
            };
            new ApexCharts(orderStatusEl, orderStatusConfig).render();

            // 3. Payment Methods (Doughnut)
            const paymentMethodsEl = document.querySelector('#paymentMethodsChart');
            const paymentMethodsConfig = {
                series: {!! json_encode(array_column($chartData['payment_methods']->toArray(), 'count')) !!},
                labels: {!! json_encode(array_column($chartData['payment_methods']->toArray(), 'method')) !!},
                chart: {type: 'donut', height: 350},
                theme: {mode: themeMode},
                colors: ['#7367f0', '#28c76f', '#ff9f43'],
                stroke: {width: 0},
                legend: {position: 'bottom', labels: {colors: labelColor}}
            };
            new ApexCharts(paymentMethodsEl, paymentMethodsConfig).render();

            // 4. Popular Services (Bar Chart)
            const popularServicesEl = document.querySelector('#popularServicesChart');
            const popularServicesConfig = {
                series: [{
                    data: {!! json_encode(array_column($chartData['popular_services']->toArray(), 'count')) !!}
                }],
                chart: {type: 'bar', height: 350, toolbar: {show: false}},
                theme: {mode: themeMode},
                plotOptions: {
                    bar: {
                        borderRadius: 8,
                        horizontal: true,
                        barHeight: '60%',
                        distributed: true
                    }
                },
                dataLabels: {enabled: false},
                colors: ['#7367f0', '#28c76f', '#ff9f43', '#ea5455', '#00cfe8'],
                grid: {borderColor: borderColor},
                xaxis: {
                    categories: {!! json_encode(array_column($chartData['popular_services']->toArray(), 'name')) !!},
                    labels: {style: {colors: labelColor}}
                },
                yaxis: {labels: {style: {colors: labelColor}}},
                legend: {show: false}
            };
            new ApexCharts(popularServicesEl, popularServicesConfig).render();

            // 5. Wallet Stats Chart
            const walletStatsEl = document.querySelector('#walletStatsChart');
            const walletStatsConfig = {
                series: [{
                    name: 'Balance',
                    data: [{{ $stats['financial']['wallets']['client_total'] }}, {{ $stats['financial']['wallets']['provider_total'] }}]
                }],
                chart: {type: 'bar', height: 150, sparkline: {enabled: true}},
                theme: {mode: themeMode},
                colors: ['#00cfe8', '#ff9f43'],
                plotOptions: {bar: {columnWidth: '50%', borderRadius: 5, distributed: true}},
                tooltip: {enabled: true}
            };
            new ApexCharts(walletStatsEl, walletStatsConfig).render();
        });
    </script>
@endsection