@extends('admin.layout.master')
@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('admin/app-assets/vendors/css/charts/apexcharts.css') }}">
    <style>
        /* ── KPI cards ───────────────────────────────────────── */
        .neo-kpi-card {
            background: var(--neo-surface);
            border: 1px solid var(--neo-border);
            border-radius: var(--neo-radius);
            padding: 1.25rem 1.5rem;
            height: 100%;
            box-shadow: var(--neo-card-shadow);
            transition: transform .2s ease, box-shadow .2s ease;
            overflow: hidden;
        }
        .neo-kpi-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 32px rgba(0,0,0,.12);
        }
        .neo-kpi-icon {
            width: 46px; height: 46px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
            margin-bottom: .7rem;
        }
        .neo-kpi-label {
            font-size: .72rem;
            color: var(--neo-muted);
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 700;
            margin-bottom: .25rem;
        }
        .neo-kpi-value {
            font-size: 1.85rem;
            font-weight: 800;
            color: var(--neo-text);
            line-height: 1.1;
            margin-bottom: .35rem;
        }
        .neo-kpi-sub { font-size: .75rem; color: var(--neo-muted); }
        .neo-kpi-trend-up   { color: #22c55e; }
        .neo-kpi-trend-down { color: #ef4444; }

        /* ── Secondary stat pills ────────────────────────────── */
        .neo-stat-pill {
            background: var(--neo-surface-2);
            border: 1px solid var(--neo-border);
            border-radius: var(--neo-radius-sm);
            padding: .9rem 1.1rem;
            height: 100%;
            transition: transform .2s ease, border-color .2s ease;
        }
        .neo-stat-pill:hover { transform: translateY(-2px); border-color: var(--neo-accent); }

        /* ── Action cards ────────────────────────────────────── */
        .neo-action-card {
            background: var(--neo-surface);
            border: 1px solid var(--neo-border);
            border-radius: var(--neo-radius);
            padding: .9rem 1.1rem;
            height: 100%;
            box-shadow: var(--neo-card-shadow);
            text-decoration: none;
            display: flex; align-items: center; gap: .85rem;
            transition: transform .2s ease, border-color .2s ease;
            color: var(--neo-text);
        }
        .neo-action-card:hover {
            transform: translateY(-2px);
            border-color: var(--neo-accent);
            color: var(--neo-text);
            text-decoration: none;
        }
        .neo-action-icon {
            width: 42px; height: 42px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }

        /* ── Section labels ──────────────────────────────────── */
        .neo-section-header {
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: var(--neo-muted);
            font-weight: 700;
            margin-bottom: .65rem;
            margin-top: .25rem;
        }

        /* ── Icon colour helpers ─────────────────────────────── */
        .ib-blue   { background: rgba(59,130,246,.13);  color: #3b82f6; }
        .ib-green  { background: rgba(34,197,94,.13);   color: #22c55e; }
        .ib-yellow { background: rgba(234,179,8,.13);   color: #ca8a04; }
        .ib-purple { background: rgba(168,85,247,.13);  color: #a855f7; }
        .ib-orange { background: rgba(249,115,22,.13);  color: #f97316; }
        .ib-slate  { background: rgba(100,116,139,.13); color: #64748b; }
        .ib-red    { background: rgba(239,68,68,.13);   color: #ef4444; }
        .ib-teal   { background: rgba(20,184,166,.13);  color: #14b8a6; }

        html[data-textdirection="rtl"] .neo-dash-title {
            text-align: right;
        }

        a.neo-kpi-link,
        a.neo-stat-link {
            text-decoration: none;
            color: inherit;
            display: block;
            height: 100%;
        }
        a.neo-kpi-link:hover,
        a.neo-stat-link:hover {
            text-decoration: none;
            color: inherit;
        }
    </style>
@endsection

@section('content')

{{-- ══════════════════════════════════════════════════════════════
     Hero / Welcome Banner
══════════════════════════════════════════════════════════════ --}}
<div class="neo-dash-hero row mb-3">
    <div class="col-12">
        <div class="neo-dash-hero-inner d-flex align-items-center justify-content-between flex-wrap" style="gap:.75rem">
            <div>
                <p class="neo-dash-kicker mb-0">{{ __('admin.welcome') }}, {{ auth('admin')->user()->name }}</p>
                <h1 class="neo-dash-title mb-1">{{ __('routes.main_page') }}</h1>
                <p class="text-muted mb-0 small">
                    <i class="feather icon-calendar mr-1"></i>
                    {{ now()->locale(app()->getLocale())->translatedFormat('l، d F Y') }}
                </p>
            </div>
            <div class="d-flex flex-wrap" style="gap:.5rem">
                @if(($kpis['pending_providers'] ?? 0) > 0)
                    @haspermission('admin.providers.index')
                    <a href="{{ url('admin/providers?tab=pending') }}" class="btn btn-sm btn-warning waves-effect waves-light">
                        <i class="feather icon-user-check mr-1"></i>
                        {{ $kpis['pending_providers'] }} {{ __('admin.pending_providers') }}
                    </a>
                    @endhaspermission
                @endif
                @if(($kpis['pending_settlements'] ?? 0) > 0)
                    @haspermission('admin.settlements.index')
                    <a href="{{ route('admin.settlements.index', ['tab' => 'pending']) }}" class="btn btn-sm btn-danger waves-effect waves-light">
                        <i class="feather icon-alert-circle mr-1"></i>
                        {{ $kpis['pending_settlements'] }} {{ __('admin.pending_settlements') }}
                    </a>
                    @endhaspermission
                @endif
            </div>
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════
     Today KPI cards
══════════════════════════════════════════════════════════════ --}}
<p class="neo-section-header">{{ __('admin.today') }}</p>
<div class="row mb-1">

    {{-- Clients --}}
    <div class="col-xl-3 col-md-6 mb-2">
        @haspermission('admin.clients.index')
        <a href="{{ route('admin.clients.index') }}" class="neo-kpi-link">
        @endif
        <div class="neo-kpi-card">
            <div class="neo-kpi-icon ib-blue"><i class="feather icon-users"></i></div>
            <div class="neo-kpi-label">{{ __('admin.clients') }}</div>
            <div class="neo-kpi-value">{{ number_format($kpis['total_clients'] ?? 0) }}</div>
            <div class="neo-kpi-sub">
                @if(($kpis['new_clients_today'] ?? 0) > 0)
                    <span class="neo-kpi-trend-up">
                        <i class="feather icon-trending-up"></i>
                        +{{ $kpis['new_clients_today'] }} {{ __('admin.today') }}
                    </span>
                @else
                    <span><i class="feather icon-minus"></i> {{ __('admin.today') }}</span>
                @endif
            </div>
        </div>
        @haspermission('admin.clients.index')
        </a>
        @endif
    </div>

    {{-- Rides today --}}
    <div class="col-xl-3 col-md-6 mb-2">
        @php $ridesPct = $kpis['rides_today_change_pct'] ?? 0; @endphp
        @haspermission('admin.rides.index')
        <a href="{{ route('admin.rides.index') }}" class="neo-kpi-link">
        @endif
        <div class="neo-kpi-card">
            <div class="neo-kpi-icon ib-green"><i class="feather icon-map"></i></div>
            <div class="neo-kpi-label">{{ __('admin.rides_today') }}</div>
            <div class="neo-kpi-value">{{ number_format($kpis['rides_today'] ?? 0) }}</div>
            <div class="neo-kpi-sub">
                @if($ridesPct > 0)
                    <span class="neo-kpi-trend-up"><i class="feather icon-trending-up"></i> +{{ $ridesPct }}%</span>
                @elseif($ridesPct < 0)
                    <span class="neo-kpi-trend-down"><i class="feather icon-trending-down"></i> {{ $ridesPct }}%</span>
                @else
                    <span><i class="feather icon-minus"></i></span>
                @endif
                {{ __('admin.vs_yesterday') }}
            </div>
        </div>
        @haspermission('admin.rides.index')
        </a>
        @endif
    </div>

    {{-- Revenue today --}}
    <div class="col-xl-3 col-md-6 mb-2">
        @php $revPct = $kpis['revenue_change_pct'] ?? 0; @endphp
        @haspermission('admin.rides.index')
        <a href="{{ route('admin.rides.index', ['status_tab' => App\Enums\RideStatus::COMPLETED]) }}" class="neo-kpi-link">
        @endif
        <div class="neo-kpi-card">
            <div class="neo-kpi-icon ib-yellow"><i class="feather icon-dollar-sign"></i></div>
            <div class="neo-kpi-label">{{ __('admin.revenue_today') }}</div>
            <div class="neo-kpi-value">
                {{ number_format($kpis['revenue_today'] ?? 0, 2) }}
                <span style="font-size:.85rem;font-weight:500;color:var(--neo-muted)"> {{ __('admin.sar') }}</span>
            </div>
            <div class="neo-kpi-sub">
                @if($revPct > 0)
                    <span class="neo-kpi-trend-up"><i class="feather icon-trending-up"></i> +{{ $revPct }}%</span>
                @elseif($revPct < 0)
                    <span class="neo-kpi-trend-down"><i class="feather icon-trending-down"></i> {{ $revPct }}%</span>
                @else
                    <span><i class="feather icon-minus"></i></span>
                @endif
                {{ __('admin.vs_yesterday') }}
            </div>
        </div>
        @haspermission('admin.rides.index')
        </a>
        @endif
    </div>

    {{-- Active scooters --}}
    <div class="col-xl-3 col-md-6 mb-2">
        @php
            $totalSc  = $kpis['total_scooters'] ?? 0;
            $activeSc = $kpis['active_scooters'] ?? 0;
            $activeRate = $totalSc > 0 ? round(($activeSc / $totalSc) * 100) : 0;
        @endphp
        @haspermission('admin.scooters.index')
        <a href="{{ route('admin.scooters.index', ['status_tab' => App\Enums\ScooterStatus::ACTIVE]) }}" class="neo-kpi-link">
        @endif
        <div class="neo-kpi-card">
            <div class="neo-kpi-icon ib-purple"><i class="feather icon-zap"></i></div>
            <div class="neo-kpi-label">{{ __('admin.active_scooters') }}</div>
            <div class="neo-kpi-value">
                {{ $activeSc }}
                <span style="font-size:.95rem;font-weight:500;color:var(--neo-muted)"> / {{ $totalSc }}</span>
            </div>
            <div class="neo-kpi-sub">
                <span class="{{ $activeRate >= 50 ? 'neo-kpi-trend-up' : 'neo-kpi-trend-down' }}">
                    {{ $activeRate }}% {{ __('admin.active') }}
                </span>
            </div>
        </div>
        @haspermission('admin.scooters.index')
        </a>
        @endif
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════
     Overview / Totals row
══════════════════════════════════════════════════════════════ --}}
<p class="neo-section-header mt-1">{{ __('admin.overview_statistics') }}</p>
<div class="row mb-1">

    {{-- Providers --}}
    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ url('admin/providers?tab=pending') }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-teal mb-0" style="flex-shrink:0"><i class="feather icon-users"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.providers') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">{{ number_format($kpis['total_providers'] ?? 0) }}</div>
                    @if(($kpis['pending_providers'] ?? 0) > 0)
                        <small class="text-warning">
                            <i class="feather icon-clock" style="font-size:.7rem"></i>
                            {{ $kpis['pending_providers'] }} {{ __('admin.pending') }}
                        </small>
                    @endif
                </div>
            </div>
        </a>
    </div>

    {{-- Total rides --}}
    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ route('admin.rides.index') }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-green mb-0" style="flex-shrink:0"><i class="feather icon-map"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.rides') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">{{ number_format($kpis['total_rides'] ?? 0) }}</div>
                    <small class="text-muted">
                        {{ number_format($kpis['rides_this_month'] ?? 0) }} {{ __('admin.month') }}
                    </small>
                </div>
            </div>
        </a>
    </div>

    {{-- Total revenue --}}
    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ route('admin.rides.index', ['status_tab' => App\Enums\RideStatus::COMPLETED]) }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-yellow mb-0" style="flex-shrink:0"><i class="feather icon-trending-up"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.total_revenue') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">{{ number_format($kpis['total_revenue'] ?? 0, 2) }}</div>
                    <small class="text-muted">
                        {{ number_format($kpis['revenue_this_month'] ?? 0, 2) }} {{ __('admin.sar') }} {{ __('admin.month') }}
                    </small>
                </div>
            </div>
        </a>
    </div>

    {{-- Pending settlements --}}
    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ route('admin.settlements.index', ['tab' => 'pending']) }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-orange mb-0" style="flex-shrink:0"><i class="feather icon-clock"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.settlements') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">{{ $kpis['pending_settlements'] ?? 0 }}</div>
                    <small class="{{ ($kpis['pending_settlements'] ?? 0) > 0 ? 'text-warning' : 'text-muted' }}">
                        {{ __('admin.pending') }}
                    </small>
                </div>
            </div>
        </a>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════
     Ride & support metrics
══════════════════════════════════════════════════════════════ --}}
<p class="neo-section-header mt-1">{{ __('admin.additional_statistics') }}</p>
<div class="row mb-1">

    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ route('admin.rides.index', ['status_tab' => App\Enums\RideStatus::COMPLETED]) }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-green mb-0" style="flex-shrink:0"><i class="feather icon-check-circle"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.completed_rides_today') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">{{ number_format($kpis['completed_rides_today'] ?? 0) }}</div>
                    <small class="text-muted">{{ __('admin.today') }}</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ route('admin.rides.index', ['status_tab' => App\Enums\RideStatus::ACTIVE]) }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-blue mb-0" style="flex-shrink:0"><i class="feather icon-navigation"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.active_rides_now') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">{{ number_format($kpis['active_rides'] ?? 0) }}</div>
                    <small class="text-muted">{{ __('admin.in_progress') }}</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ route('admin.rides.index', ['status_tab' => App\Enums\RideStatus::COMPLETED]) }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-yellow mb-0" style="flex-shrink:0"><i class="feather icon-bar-chart-2"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.avg_ride_cost') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">
                        {{ number_format($kpis['avg_ride_cost'] ?? 0, 2) }}
                        <span style="font-size:.75rem;font-weight:500;color:var(--neo-muted)">{{ __('admin.sar') }}</span>
                    </div>
                    <small class="text-muted">{{ __('admin.completed') }}</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-xl-3 col-md-6 mb-2">
        <a href="{{ route('admin.complains.index') }}" class="d-block text-decoration-none">
            <div class="neo-stat-pill d-flex align-items-center" style="gap:.85rem">
                <div class="neo-kpi-icon ib-red mb-0" style="flex-shrink:0"><i class="feather icon-alert-triangle"></i></div>
                <div>
                    <span class="neo-stat-label" style="font-size:.7rem">{{ __('admin.open_complaints') }}</span>
                    <div class="neo-kpi-value" style="font-size:1.35rem">{{ number_format($kpis['open_complaints'] ?? 0) }}</div>
                    <small class="{{ ($kpis['open_complaints'] ?? 0) > 0 ? 'text-warning' : 'text-muted' }}">
                        {{ __('admin.pending') }}
                    </small>
                </div>
            </div>
        </a>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════
     Quick Actions
══════════════════════════════════════════════════════════════ --}}
@if(!empty($quickActions))
<p class="neo-section-header mt-1">{{ __('admin.quick_actions') }}</p>
<div class="row mb-1">
    @php
        $actionColors = ['ib-yellow', 'ib-orange', 'ib-purple', 'ib-teal'];
        $ai = 0;
    @endphp
    @foreach($quickActions as $action)
        <div class="col-xl-3 col-md-6 mb-2">
            <a href="{{ $action['url'] }}" class="neo-action-card">
                <div class="neo-action-icon {{ $actionColors[$ai % count($actionColors)] }}">
                    <i class="feather {{ $action['icon'] }}"></i>
                </div>
                <div class="flex-grow-1" style="min-width:0">
                    <div style="font-weight:600;font-size:.9rem;color:var(--neo-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                        {{ $action['label'] }}
                    </div>
                    <div style="font-size:.75rem;color:var(--neo-muted)">
                        {{ number_format($action['count'] ?? 0) }} {{ __('admin.total_amount') }}
                    </div>
                </div>
                @if(($action['count'] ?? 0) > 0)
                    <span class="badge badge-pill badge-danger">{{ $action['count'] }}</span>
                @endif
                <i class="feather icon-chevron-{{ app()->isLocale('ar') ? 'left' : 'right' }} text-muted" style="flex-shrink:0"></i>
            </a>
        </div>
        @php $ai++; @endphp
    @endforeach
</div>
@endif

{{-- ══════════════════════════════════════════════════════════════
     Charts row — monthly performance & fleet
══════════════════════════════════════════════════════════════ --}}
<p class="neo-section-header mt-1">{{ __('admin.financial_statistics') }}</p>
<div class="row mb-2">

    <div class="col-xl-8 col-12 mb-2">
        <div class="card h-100 mb-0">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap" style="gap:.5rem">
                <h5 class="mb-0">{{ __('admin.monthly_performance') }}</h5>
                <div class="d-flex flex-wrap" style="gap:.35rem">
                    <span class="badge badge-light-warning">{{ __('admin.revenue') }} ({{ __('admin.sar') }})</span>
                    <span class="badge badge-light-primary">{{ __('admin.rides') }}</span>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="revenue-chart" style="min-height:300px"></div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-12 mb-2">
        <div class="card h-100 mb-0">
            <div class="card-header">
                <h5 class="mb-0">{{ __('admin.scooter_status_chart') }}</h5>
            </div>
            <div class="card-body d-flex flex-column align-items-center justify-content-center pt-0">
                <div id="scooter-chart" style="min-height:260px;width:100%"></div>
            </div>
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════
     Charts row — daily activity & ride status
══════════════════════════════════════════════════════════════ --}}
<p class="neo-section-header">{{ __('admin.recent_activity') }}</p>
<div class="row mb-2">

    <div class="col-xl-8 col-12 mb-2">
        <div class="card h-100 mb-0">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap" style="gap:.5rem">
                <h5 class="mb-0">{{ __('admin.daily_activity') }}</h5>
                <span class="badge badge-light-info">{{ __('admin.last_14_days') }}</span>
            </div>
            <div class="card-body pt-0">
                <div id="daily-chart" style="min-height:280px"></div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-12 mb-2">
        <div class="card h-100 mb-0">
            <div class="card-header">
                <h5 class="mb-0">{{ __('admin.ride_status_chart') }}</h5>
            </div>
            <div class="card-body d-flex flex-column align-items-center justify-content-center pt-0">
                <div id="ride-status-chart" style="min-height:260px;width:100%"></div>
            </div>
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════
     Charts row — user growth
══════════════════════════════════════════════════════════════ --}}
<p class="neo-section-header">{{ __('admin.users_statistics') }}</p>
<div class="row mb-2">
    <div class="col-12 mb-2">
        <div class="card h-100 mb-0">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap" style="gap:.5rem">
                <h5 class="mb-0">{{ __('admin.user_growth') }}</h5>
                <div class="d-flex flex-wrap" style="gap:.35rem">
                    <span class="badge badge-light-primary">{{ __('admin.clients') }}</span>
                    <span class="badge badge-light-success">{{ __('admin.providers') }}</span>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="user-growth-chart" style="min-height:260px"></div>
            </div>
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════════════════
     Legacy menu cards (only shown if non-empty)
══════════════════════════════════════════════════════════════ --}}
@if(count($menus ?? []) > 0)
<p class="neo-section-header mt-1">{{ __('admin.dashboard') }}</p>
<div class="row mb-2">
    @foreach($menus as $key => $menu)
        @php $color = $colores[array_rand($colores)] @endphp
        <a href="{{ $menu['url'] }}" class="col-xl-2 col-md-4 col-sm-6 mb-2">
            <div class="card text-center mb-0" style="border-radius:var(--neo-radius);border:1px solid var(--neo-border);box-shadow:var(--neo-card-shadow)">
                <div class="card-body py-2">
                    <div class="avatar bg-rgba-{{ $color }} p-50 m-0 mb-1">
                        <i class="feather {!! $menu['icon'] !!} text-{{ $color }} font-medium-5"></i>
                    </div>
                    <h2 class="text-bold-700">{{ $menu['count'] ?? '' }}</h2>
                    <p class="mb-0 small">{{ $menu['name'] }}</p>
                </div>
            </div>
        </a>
    @endforeach
</div>
@endif

@endsection

@section('js')
    <script src="{{ asset('admin/app-assets/vendors/js/charts/apexcharts.min.js') }}"></script>
    <script>
        (function () {
            const isDark = document.body.classList.contains('dark-layout');
            const gridColor  = isDark ? '#2d2d2d' : '#e2e8f0';
            const labelColor = isDark ? '#a0a0a0' : '#64748b';
            const tooltipTheme = isDark ? 'dark' : 'light';

            const emptyChartMsg = '{{ __('admin.there_is_no_data_at_the_moment') }}';

            function renderEmptyChart(el, icon) {
                if (!el) return;
                el.innerHTML = '<div class="text-center text-muted py-4">'
                    + '<i class="feather ' + icon + ' font-large-2 d-block mb-1"></i>'
                    + emptyChartMsg
                    + '</div>';
            }

            /* ── Monthly performance (revenue + rides) ────────── */
            const chartData = @json($monthlyChart ?? []);
            const revenueEl = document.querySelector('#revenue-chart');
            if (chartData.length && revenueEl) {
                new ApexCharts(revenueEl, {
                    chart: { type: 'line', height: 300, toolbar: { show: false }, fontFamily: 'inherit', background: 'transparent' },
                    series: [
                        { name: '{{ __('admin.revenue') }}', type: 'column', data: chartData.map(r => r.revenue) },
                        { name: '{{ __('admin.rides') }}', type: 'line', data: chartData.map(r => r.rides) },
                    ],
                    stroke: { width: [0, 3], curve: 'smooth' },
                    xaxis: {
                        categories: chartData.map(r => r.label),
                        labels: { style: { colors: labelColor, fontSize: '12px' } },
                        axisBorder: { show: false }, axisTicks: { show: false },
                    },
                    yaxis: [
                        {
                            title: { text: '{{ __('admin.sar') }}', style: { color: labelColor, fontSize: '11px' } },
                            labels: { style: { colors: labelColor }, formatter: v => v.toLocaleString() },
                        },
                        {
                            opposite: true,
                            title: { text: '{{ __('admin.rides') }}', style: { color: labelColor, fontSize: '11px' } },
                            labels: { style: { colors: labelColor }, formatter: v => Math.round(v) },
                        },
                    ],
                    colors: ['#F5C518', '#3b82f6'],
                    grid: { borderColor: gridColor, strokeDashArray: 4, padding: { left: 4, right: 8 } },
                    plotOptions: { bar: { borderRadius: 6, columnWidth: '45%' } },
                    dataLabels: { enabled: false },
                    legend: { position: 'top', labels: { colors: labelColor } },
                    tooltip: {
                        theme: tooltipTheme,
                        shared: true,
                        intersect: false,
                        y: [
                            { formatter: v => v.toLocaleString() + ' {{ __('admin.sar') }}' },
                            { formatter: v => Math.round(v) },
                        ],
                    },
                    theme: { mode: isDark ? 'dark' : 'light' },
                }).render();
            } else {
                renderEmptyChart(revenueEl, 'icon-trending-up');
            }

            /* ── Daily activity area chart ────────────────────── */
            const dailyData = @json($dailyChart ?? []);
            const dailyEl = document.querySelector('#daily-chart');
            if (dailyData.length && dailyEl) {
                new ApexCharts(dailyEl, {
                    chart: { type: 'line', height: 280, toolbar: { show: false }, fontFamily: 'inherit', background: 'transparent' },
                    series: [
                        { name: '{{ __('admin.rides') }}', type: 'area', data: dailyData.map(r => r.rides) },
                        { name: '{{ __('admin.completed') }}', type: 'area', data: dailyData.map(r => r.completed) },
                        { name: '{{ __('admin.revenue') }}', type: 'line', data: dailyData.map(r => r.revenue) },
                    ],
                    xaxis: {
                        categories: dailyData.map(r => r.label),
                        labels: { style: { colors: labelColor, fontSize: '11px' }, rotate: -35 },
                        axisBorder: { show: false }, axisTicks: { show: false },
                    },
                    yaxis: [
                        {
                            title: { text: '{{ __('admin.rides') }}', style: { color: labelColor, fontSize: '11px' } },
                            labels: { style: { colors: labelColor }, formatter: v => Math.round(v) },
                            min: 0,
                        },
                        {
                            opposite: true,
                            title: { text: '{{ __('admin.sar') }}', style: { color: labelColor, fontSize: '11px' } },
                            labels: { style: { colors: labelColor }, formatter: v => v.toLocaleString() },
                            min: 0,
                        },
                    ],
                    colors: ['#3b82f6', '#22c55e', '#F5C518'],
                    fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.3, opacityTo: 0.04 } },
                    stroke: { curve: 'smooth', width: [2, 2, 3] },
                    grid: { borderColor: gridColor, strokeDashArray: 4 },
                    dataLabels: { enabled: false },
                    legend: { position: 'top', labels: { colors: labelColor } },
                    tooltip: {
                        theme: tooltipTheme,
                        shared: true,
                        intersect: false,
                        y: [
                            { formatter: v => Math.round(v) },
                            { formatter: v => Math.round(v) },
                            { formatter: v => v.toLocaleString() + ' {{ __('admin.sar') }}' },
                        ],
                    },
                    theme: { mode: isDark ? 'dark' : 'light' },
                }).render();
            } else {
                renderEmptyChart(dailyEl, 'icon-activity');
            }

            /* ── Ride status donut ────────────────────────────── */
            const rideStatus = @json($rideStatusChart ?? []);
            const rideStatusSeries = [
                rideStatus['completed']   ?? 0,
                rideStatus['cancelled']   ?? 0,
                rideStatus['active']      ?? 0,
                rideStatus['in_progress'] ?? 0,
            ];
            const rideStatusTotal = rideStatusSeries.reduce((a, b) => a + b, 0);
            const rideStatusEl = document.querySelector('#ride-status-chart');

            if (rideStatusTotal > 0 && rideStatusEl) {
                new ApexCharts(rideStatusEl, {
                    chart: { type: 'donut', height: 260, fontFamily: 'inherit', background: 'transparent' },
                    series: rideStatusSeries,
                    labels: [
                        '{{ __('admin.completed') }}',
                        '{{ __('admin.cancelled') }}',
                        '{{ __('admin.active') }}',
                        '{{ __('admin.in_progress') }}',
                    ],
                    colors: ['#22c55e', '#ef4444', '#3b82f6', '#f97316'],
                    legend: { position: 'bottom', fontSize: '12px', labels: { colors: labelColor } },
                    plotOptions: {
                        pie: {
                            donut: {
                                size: '62%',
                                labels: {
                                    show: true,
                                    total: {
                                        show: true,
                                        label: '{{ __('admin.rides') }}',
                                        color: labelColor,
                                        formatter: () => rideStatusTotal,
                                    },
                                    value: { color: isDark ? '#e1e1e1' : '#0f172a', fontWeight: 700 },
                                },
                            },
                        },
                    },
                    dataLabels: { enabled: false },
                    tooltip: { theme: tooltipTheme },
                    theme: { mode: isDark ? 'dark' : 'light' },
                }).render();
            } else {
                renderEmptyChart(rideStatusEl, 'icon-map');
            }

            /* ── User growth line chart ───────────────────────── */
            const growthData = @json($userGrowthChart ?? []);
            const growthEl = document.querySelector('#user-growth-chart');
            if (growthData.length && growthEl) {
                new ApexCharts(growthEl, {
                    chart: { type: 'line', height: 260, toolbar: { show: false }, fontFamily: 'inherit', background: 'transparent' },
                    series: [
                        { name: '{{ __('admin.clients') }}', data: growthData.map(r => r.clients) },
                        { name: '{{ __('admin.providers') }}', data: growthData.map(r => r.providers) },
                    ],
                    xaxis: {
                        categories: growthData.map(r => r.label),
                        labels: { style: { colors: labelColor, fontSize: '12px' } },
                        axisBorder: { show: false }, axisTicks: { show: false },
                    },
                    yaxis: { labels: { style: { colors: labelColor }, formatter: v => Math.round(v) }, min: 0 },
                    colors: ['#3b82f6', '#22c55e'],
                    stroke: { curve: 'smooth', width: 3 },
                    markers: { size: 4, strokeWidth: 0, hover: { size: 6 } },
                    grid: { borderColor: gridColor, strokeDashArray: 4 },
                    dataLabels: { enabled: false },
                    legend: { position: 'top', labels: { colors: labelColor } },
                    tooltip: { theme: tooltipTheme, shared: true, intersect: false },
                    theme: { mode: isDark ? 'dark' : 'light' },
                }).render();
            } else {
                renderEmptyChart(growthEl, 'icon-users');
            }

            /* ── Scooter status donut ─────────────────────────── */
            const sd = @json($scooterChart ?? []);
            const scooterSeries = [
                sd['active']         ?? 0,
                sd['in_ride']        ?? 0,
                sd['maintenance']    ?? 0,
                sd['inactive']       ?? 0,
                sd['out_of_service'] ?? 0,
            ];
            const scooterTotal = scooterSeries.reduce((a, b) => a + b, 0);
            const scooterEl = document.querySelector('#scooter-chart');

            if (scooterTotal > 0 && scooterEl) {
                new ApexCharts(scooterEl, {
                    chart: { type: 'donut', height: 240, fontFamily: 'inherit', background: 'transparent' },
                    series: scooterSeries,
                    labels: [
                        '{{ __('apis.scooter_status.active') }}',
                        '{{ __('apis.scooter_status.in_ride') }}',
                        '{{ __('apis.scooter_status.maintenance') }}',
                        '{{ __('apis.scooter_status.inactive') }}',
                        '{{ __('apis.scooter_status.out_of_service') }}',
                    ],
                    colors: ['#22c55e', '#3b82f6', '#f97316', '#94a3b8', '#ef4444'],
                    legend: {
                        position: 'bottom', fontSize: '12px',
                        labels: { colors: labelColor },
                    },
                    plotOptions: {
                        pie: {
                            donut: {
                                size: '62%',
                                labels: {
                                    show: true,
                                    total: {
                                        show: true,
                                        label: '{{ __('admin.total_amount') }}',
                                        color: labelColor,
                                        formatter: () => scooterTotal,
                                    },
                                    value: { color: isDark ? '#e1e1e1' : '#0f172a', fontWeight: 700 },
                                },
                            },
                        },
                    },
                    dataLabels: { enabled: false },
                    tooltip: { theme: tooltipTheme },
                    theme: { mode: isDark ? 'dark' : 'light' },
                }).render();
            } else {
                renderEmptyChart(scooterEl, 'icon-zap');
            }
        })();
    </script>
@endsection