@extends('admin.layouts.master')

@section('title', __('admin.dashboard.title'))

@section('css')
    <style>
        /* ═══════════════════════════════════════════════════════════
           Premium Dashboard — Finishes Company Management System
           ════════════════════════════════════════════════════════ */
        .welcome-banner {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
            border-radius: 16px;
            padding: 28px 32px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(15, 52, 96, 0.35);
        }

        .welcome-banner::before {
            content: '';
            position: absolute;
            top: -60px;
            right: -60px;
            width: 220px;
            height: 220px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 50%;
        }

        .welcome-banner::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: 30%;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50%;
        }

        .welcome-banner .greeting-text {
            font-size: 0.88rem;
            opacity: .75;
            font-weight: 500;
            letter-spacing: .5px;
        }

        .welcome-banner h2 {
            font-size: 1.65rem;
            font-weight: 800;
            margin: 4px 0;
            color: #fff !important;
        }

        .welcome-banner p {
            font-size: 0.88rem;
            opacity: .7;
            margin: 0;
            color: #fff !important;
        }

        .quick-action-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 10px;
            padding: 10px 16px;
            color: #fff;
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 600;
            transition: all .25s ease;
            white-space: nowrap;
        }

        .quick-action-btn:hover {
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
        }

        .kpi-card {
            border-radius: 14px !important;
            border: none !important;
            box-shadow: 0 2px 16px rgba(0, 0, 0, .07) !important;
            transition: transform .25s, box-shadow .25s;
            overflow: hidden;
            height: 100%;
        }

        .kpi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px rgba(0, 0, 0, .13) !important;
        }

        .kpi-card .card-body {
            padding: 20px 22px;
        }

        .kpi-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        .kpi-label {
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .4px;
            text-transform: uppercase;
            margin-bottom: 4px;
        }

        .kpi-value {
            font-size: 1.55rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 4px;
        }

        .kpi-sub {
            font-size: .78rem;
        }

        .kpi-revenue {
            background: linear-gradient(145deg, #f0fff4, #dcfce7);
        }

        .kpi-revenue .kpi-icon {
            background: #16a34a;
            color: #fff;
        }

        .kpi-revenue .kpi-value {
            color: #15803d;
        }

        .kpi-expenses {
            background: linear-gradient(145deg, #fff5f5, #fee2e2);
        }

        .kpi-expenses .kpi-icon {
            background: #dc2626;
            color: #fff;
        }

        .kpi-expenses .kpi-value {
            color: #b91c1c;
        }

        .kpi-profit {
            background: linear-gradient(145deg, #eff6ff, #dbeafe);
        }

        .kpi-profit .kpi-icon {
            background: #2563eb;
            color: #fff;
        }

        .kpi-profit .kpi-value {
            color: #1d4ed8;
        }

        .kpi-margin {
            background: linear-gradient(145deg, #fdf4ff, #f3e8ff);
        }

        .kpi-margin .kpi-icon {
            background: #9333ea;
            color: #fff;
        }

        .kpi-margin .kpi-value {
            color: #7e22ce;
        }

        .kpi-clients {
            background: linear-gradient(145deg, #fff7ed, #fed7aa);
        }

        .kpi-clients .kpi-icon {
            background: #ea580c;
            color: #fff;
        }

        .kpi-clients .kpi-value {
            color: #c2410c;
        }

        .kpi-active {
            background: linear-gradient(145deg, #f0fdfa, #ccfbf1);
        }

        .kpi-active .kpi-icon {
            background: #0d9488;
            color: #fff;
        }

        .kpi-active .kpi-value {
            color: #0f766e;
        }

        .kpi-workers {
            background: linear-gradient(145deg, #fefce8, #fef08a);
        }

        .kpi-workers .kpi-icon {
            background: #ca8a04;
            color: #fff;
        }

        .kpi-workers .kpi-value {
            color: #a16207;
        }

        .kpi-inspections {
            background: linear-gradient(145deg, #fdf2f8, #fce7f3);
        }

        .kpi-inspections .kpi-icon {
            background: #db2777;
            color: #fff;
        }

        .kpi-inspections .kpi-value {
            color: #be185d;
        }

        .chart-card {
            border-radius: 14px !important;
            border: 1px solid #f1f5f9 !important;
            box-shadow: 0 2px 16px rgba(0, 0, 0, .06) !important;
        }

        .chart-card .card-header {
            background: transparent !important;
            border-bottom: 1px solid #f1f5f9 !important;
            padding: 16px 20px !important;
        }

        .project-progress-item {
            background: #fafafa;
            border: 1px solid #f1f5f9;
            border-radius: 12px;
            padding: 14px 16px;
            transition: all .2s;
            margin-bottom: 10px;
        }

        .project-progress-item:hover {
            background: #fff;
            box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
            transform: translateX(4px);
        }

        .project-progress-item:last-child {
            margin-bottom: 0;
        }

        .progress-bar-custom {
            height: 7px;
            border-radius: 10px;
        }

        .progress-custom {
            height: 7px;
            border-radius: 10px;
            background: #e2e8f0;
        }

        .status-badge {
            font-size: .7rem;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 20px;
            letter-spacing: .3px;
            text-transform: uppercase;
        }

        .badge-draft {
            background: #f1f5f9;
            color: #64748b;
        }

        .badge-quotation {
            background: #fff7ed;
            color: #c2410c;
        }

        .badge-approved {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .badge-in_progress {
            background: #f0fdf4;
            color: #15803d;
        }

        .badge-on_hold {
            background: #fefce8;
            color: #a16207;
        }

        .badge-completed {
            background: #dcfce7;
            color: #166534;
        }

        .badge-cancelled {
            background: #fee2e2;
            color: #991b1b;
        }

        .deadline-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 14px;
            border-radius: 10px;
            border: 1px solid #f1f5f9;
            background: #fafafa;
            transition: all .2s;
            margin-bottom: 8px;
        }

        .deadline-item:last-child {
            margin-bottom: 0;
        }

        .deadline-item:hover {
            background: #fff;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
        }

        .deadline-days {
            min-width: 52px;
            height: 52px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            flex-shrink: 0;
        }

        .deadline-days .days-num {
            font-size: 1.15rem;
            line-height: 1;
        }

        .deadline-days .days-text {
            font-size: .62rem;
            font-weight: 600;
            opacity: .8;
        }

        .fin-table td, .fin-table th {
            vertical-align: middle;
            font-size: .83rem;
            padding: 10px 12px;
        }

        .fin-table thead th {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .4px;
            font-size: .72rem;
            background: #f8fafc;
            border: none;
        }

        .fin-table tbody tr:hover {
            background: #f8fafc;
        }

        .nav-tabs-custom {
            border: none;
            gap: 6px;
        }

        .nav-tabs-custom .nav-link {
            border: 1px solid #e2e8f0 !important;
            border-radius: 8px !important;
            font-size: .8rem;
            font-weight: 700;
            padding: 7px 16px;
            color: #64748b;
            background: #f8fafc;
        }

        .nav-tabs-custom .nav-link.active {
            background: #0f3460 !important;
            border-color: #0f3460 !important;
            color: #fff !important;
        }

        .amount-positive {
            color: #16a34a;
            font-weight: 700;
        }

        .amount-negative {
            color: #dc2626;
            font-weight: 700;
        }

        [dir="rtl"] .project-progress-item:hover {
            transform: translateX(-4px);
        }

        @media (max-width: 991.98px) {
            .welcome-banner {
                padding: 20px;
            }

            .welcome-banner h2 {
                font-size: 1.35rem;
            }

            .quick-action-btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 767.98px) {
            .kpi-value {
                font-size: 1.25rem;
            }

            .kpi-icon {
                width: 44px;
                height: 44px;
                font-size: 1.15rem;
            }

            .chart-card .card-header {
                padding: 12px 14px !important;
            }

            .nav-tabs-custom {
                flex-wrap: wrap;
            }

            .nav-tabs-custom .nav-link {
                width: 100%;
                text-align: center;
            }
        }
    </style>
@endsection

@section('content')
    @php
        $hour   = now()->hour;
        $locale = app()->getLocale();
        $isAr   = $locale === 'ar';
        if ($isAr) {
            if ($hour < 12)     $greeting = 'صباح الخير';
            elseif ($hour < 17) $greeting = 'مساء الخير';
            else                $greeting = 'مساء النور';
        } else {
            if ($hour < 12)     $greeting = 'Good Morning';
            elseif ($hour < 17) $greeting = 'Good Afternoon';
            else                $greeting = 'Good Evening';
        }
        $user  = auth()->user();
        $today = now()->locale($locale)->isoFormat($isAr ? 'dddd، D MMMM YYYY' : 'dddd, D MMMM YYYY');
        $statusColors = [
            'draft'       => '#94a3b8',
            'quotation'   => '#f97316',
            'approved'    => '#3b82f6',
            'in_progress' => '#22c55e',
            'on_hold'     => '#eab308',
            'completed'   => '#10b981',
            'cancelled'   => '#ef4444',
        ];
    @endphp
    <div class="page-content-wrapper">
        <div class="content-container">
            <div class="page-content">

                {{-- ── WELCOME BANNER ──────────────────────────────────────── --}}
                <div class="welcome-banner mb-4">
                    <div class="row align-items-center g-3">
                        <div class="col-md-8 col-12">
                            <div class="d-flex align-items-center gap-3">
                                <div
                                    style="width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);flex-shrink:0">
                                    <i class="ti ti-building-community" style="color:#60a5fa;font-size:1.8rem"></i>
                                </div>
                                <div>
                                    <div class="greeting-text text-white">{{ $greeting }}</div>
                                    <h2>{{ $user?->name ?? __('admin.dashboard.title') }}</h2>
                                    <p class="mb-0 text-white d-flex align-items-center flex-wrap gap-2">
    <span>
        <i class="ti ti-calendar me-1" style="opacity:.75"></i>
        <span id="liveDate">{{ $today }}</span>
    </span>
                                        <span>
        <i class="ti ti-clock me-1" style="opacity:.75"></i>
        <span id="liveTime"></span>
    </span>
                                    </p></div>

                            </div>
                        </div>
                        <div class="col-md-4 col-12">
                            <div class="d-flex flex-wrap gap-2 justify-content-md-end">
                                @can('create_clients')
                                    <a href="{{ route('admin.clients.create') }}" class="quick-action-btn">
                                        <i class="ti ti-user-plus"></i>
                                        <span>{{ __('admin.clients.add') }}</span>
                                    </a>
                                @endcan
                                @can('create_projects')
                                    <a href="{{ route('admin.projects.create') }}" class="quick-action-btn">
                                        <i class="ti ti-plus"></i>
                                        <span>{{ __('admin.projects.add') }}</span>
                                    </a>
                                @endcan
                                @can('view_reports')
                                    <a href="{{ route('admin.reports.index') }}" class="quick-action-btn">
                                        <i class="ti ti-chart-bar"></i>
                                        <span>{{ __('admin.reports.title') }}</span>
                                    </a>
                                @endcan
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── FINANCIAL KPIs ──────────────────────────────────────── --}}
                <div class="row g-3 mb-3">
                    <div class="col-xl-3 col-md-6 col-12">
                        <div class="card kpi-card kpi-revenue">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-wallet"></i></div>
                                    <div class="flex-grow-1">
                                        <div
                                            class="kpi-label text-muted">{{ __('admin.dashboard.total_revenue') }}</div>
                                        <div
                                            class="kpi-value">{{ number_format($stats['total_client_payments'], 0) }}</div>
                                        <div
                                            class="kpi-sub text-muted">{{ __('admin.dashboard.total_payments_received') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-12">
                        <div class="card kpi-card kpi-expenses">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-receipt"></i></div>
                                    <div class="flex-grow-1">
                                        <div
                                            class="kpi-label text-muted">{{ __('admin.dashboard.total_expenses') }}</div>
                                        <div class="kpi-value">{{ number_format($stats['total_expenses'], 0) }}</div>
                                        <div class="kpi-sub text-muted">{{ __('admin.dashboard.total_costs') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-12">
                        <div class="card kpi-card kpi-profit">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-trending-up"></i></div>
                                    <div class="flex-grow-1">
                                        <div class="kpi-label text-muted">{{ __('admin.dashboard.net_profit') }}</div>
                                        <div
                                            class="kpi-value {{ $stats['net_profit'] < 0 ? 'text-danger' : '' }}">{{ number_format($stats['net_profit'], 0) }}</div>
                                        <div
                                            class="kpi-sub text-muted">{{ __('admin.dashboard.revenue_minus_expenses') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-12">
                        <div class="card kpi-card kpi-margin">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-percentage"></i></div>
                                    <div class="flex-grow-1">
                                        <div
                                            class="kpi-label text-muted">{{ __('admin.dashboard.profit_margin') }}</div>
                                        <div class="kpi-value">{{ $stats['profit_margin'] }}%</div>
                                        <div class="kpi-sub text-muted">{{ __('admin.dashboard.of_revenue') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── OPERATIONAL KPIs ────────────────────────────────────── --}}
                <div class="row g-3 mb-4">
                    <div class="col-xl-3 col-md-6 col-6">
                        <div class="card kpi-card kpi-clients">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-users"></i></div>
                                    <div>
                                        <div
                                            class="kpi-label text-muted">{{ __('admin.dashboard.total_clients') }}</div>
                                        <div class="kpi-value">{{ number_format($stats['total_clients']) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-6">
                        <div class="card kpi-card kpi-active">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-progress-check"></i></div>
                                    <div>
                                        <div
                                            class="kpi-label text-muted">{{ __('admin.dashboard.active_projects') }}</div>
                                        <div class="kpi-value">{{ number_format($stats['active_projects']) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-6">
                        <div class="card kpi-card kpi-workers">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-hammer"></i></div>
                                    <div>
                                        <div
                                            class="kpi-label text-muted">{{ __('admin.dashboard.active_workers') }}</div>
                                        <div class="kpi-value">{{ number_format($stats['total_workers']) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 col-6">
                        <div class="card kpi-card kpi-inspections">
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="kpi-icon"><i class="ti ti-checklist"></i></div>
                                    <div>
                                        <div
                                            class="kpi-label text-muted">{{ __('admin.dashboard.pending_inspections') }}</div>
                                        <div
                                            class="kpi-value">{{ number_format($stats['pending_delivery_inspections']) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── CHARTS ROW ──────────────────────────────────────────── --}}
                <div class="row g-3 mb-4">
                    <div class="col-lg-7 col-12">
                        <div class="card chart-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <div>
                                    <h5 class="mb-1 fw-800">{{ __('admin.dashboard.monthly_chart_title') }}</h5>
                                    <p class="mb-0 text-muted"
                                       style="font-size:.78rem">{{ __('admin.dashboard.last_6_months') }}</p>
                                </div>
                                <div class="d-flex gap-3">
                    <span class="d-flex align-items-center gap-1" style="font-size:.78rem;font-weight:600">
                        <span
                            style="width:12px;height:12px;background:#22c55e;border-radius:3px;display:inline-block"></span>
                        {{ __('admin.dashboard.revenue_label') }}
                    </span>
                                    <span class="d-flex align-items-center gap-1"
                                          style="font-size:.78rem;font-weight:600">
                        <span
                            style="width:12px;height:12px;background:#ef4444;border-radius:3px;display:inline-block"></span>
                        {{ __('admin.dashboard.expenses_label') }}
                    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="monthlyFinancialChart" style="min-height:280px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-12">
                        <div class="card chart-card h-100">
                            <div class="card-header">
                                <h5 class="mb-1 fw-800">{{ __('admin.dashboard.projects_by_status') }}</h5>
                                <p class="mb-0 text-muted"
                                   style="font-size:.78rem">{{ $stats['total_projects'] }} {{ __('admin.dashboard.total_projects') }}</p>
                            </div>
                            <div class="card-body d-flex align-items-center justify-content-center">
                                @if($projectStatusSummary->isEmpty())
                                    <div class="text-center text-muted py-5">
                                        <i class="ti ti-chart-donut" style="font-size:3rem;opacity:.3"></i>
                                        <p class="mt-2">{{ __('admin.dashboard.no_data') }}</p>
                                    </div>
                                @else
                                    <div id="projectStatusChart" style="width:100%;min-height:260px"></div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── ACTIVE PROJECTS + DEADLINES ─────────────────────────── --}}
                <div class="row g-3 mb-4">
                    <div class="col-lg-7 col-12">
                        <div class="card chart-card h-100">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="mb-0 fw-800">{{ __('admin.dashboard.active_projects_progress') }}</h5>
                                @can('view_projects')
                                    <a href="{{ route('admin.projects.index') }}"
                                       class="btn btn-sm btn-outline-secondary" style="font-size:.75rem">
                                        {{ __('admin.dashboard.view_all') }} <i
                                            class="ti ti-arrow-{{ $isAr ? 'left' : 'right' }}"></i>
                                    </a>
                                @endcan
                            </div>
                            <div class="card-body">
                                @forelse($activeProjects as $project)
                                    @php
                                        $pct = $project->progress_percentage ?? 0;
                                        $barColor = $pct >= 75 ? '#22c55e' : ($pct >= 40 ? '#3b82f6' : '#f97316');
                                    @endphp
                                    <div class="project-progress-item">
                                        <div class="d-flex align-items-center justify-content-between mb-2">
                                            <div class="d-flex align-items-center gap-2 flex-grow-1 overflow-hidden">
                                                <a href="{{ route('admin.projects.show', $project) }}"
                                                   class="fw-700 text-truncate text-dark"
                                                   style="font-size:.87rem;max-width:55%;text-decoration:none">
                                                    {{ $project->project_name ?: $project->name }}
                                                </a>
                                                <span class="status-badge badge-{{ $project->status }}">
                                {{ __('admin.projects.statuses.'.$project->status) }}
                            </span>
                                            </div>
                                            <span class="fw-800 ms-2 flex-shrink-0"
                                                  style="font-size:.9rem;color:{{ $barColor }}">{{ $pct }}%</span>
                                        </div>
                                        <div class="progress-custom">
                                            <div class="progress-bar-custom"
                                                 style="width:{{ $pct }}%;background:{{ $barColor }}"></div>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-between mt-1">
                                            <small class="text-muted"><i
                                                    class="ti ti-user me-1"></i>{{ $project->client?->name ?? '—' }}
                                            </small>
                                            @if($project->expected_end_date)
                                                <small class="text-muted"><i
                                                        class="ti ti-calendar me-1"></i>{{ $project->expected_end_date?->format('d/m/Y') }}
                                                </small>
                                            @endif
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center py-5 text-muted">
                                        <i class="ti ti-building" style="font-size:3rem;opacity:.25"></i>
                                        <p class="mt-2 mb-0">{{ __('admin.dashboard.no_active_projects') }}</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-12">
                        <div class="card chart-card h-100">
                            <div class="card-header">
                                <h5 class="mb-1 fw-800">{{ __('admin.dashboard.upcoming_deadlines') }}</h5>
                                <p class="mb-0 text-muted"
                                   style="font-size:.78rem">{{ __('admin.dashboard.next_30_days') }}</p>
                            </div>
                            <div class="card-body">
                                @forelse($upcomingDeadlines as $project)
                                    @php
                                        $daysLeft = (int) now()->diffInDays($project->expected_end_date, false);
                                        if ($daysLeft <= 3)      { $dBg = '#fee2e2'; $dColor = '#991b1b'; }
                                        elseif ($daysLeft <= 7)  { $dBg = '#fff7ed'; $dColor = '#c2410c'; }
                                        elseif ($daysLeft <= 14) { $dBg = '#fefce8'; $dColor = '#a16207'; }
                                        else                     { $dBg = '#f0fdf4'; $dColor = '#15803d'; }
                                    @endphp
                                    <div class="deadline-item">
                                        <div class="deadline-days" style="background:{{ $dBg }};color:{{ $dColor }}">
                                            <span class="days-num">{{ $daysLeft }}</span>
                                            <span class="days-text">{{ __('admin.dashboard.days') }}</span>
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden">
                                            <a href="{{ route('admin.projects.show', $project) }}"
                                               class="d-block fw-700 text-dark text-truncate"
                                               style="font-size:.85rem;text-decoration:none">
                                                {{ $project->project_name ?: $project->name }}
                                            </a>
                                            <small class="text-muted d-block"><i
                                                    class="ti ti-user me-1"></i>{{ $project->client?->name ?? '—' }}
                                            </small>
                                            <small style="color:{{ $dColor }};font-weight:600"><i
                                                    class="ti ti-clock me-1"></i>{{ $project->expected_end_date?->format('d/m/Y') }}
                                            </small>
                                        </div>
                                        <span
                                            style="background:{{ $dBg }};color:{{ $dColor }};font-size:.7rem;font-weight:700;padding:4px 9px;border-radius:20px;flex-shrink:0">
                        {{ $project->progress_percentage ?? 0 }}%
                    </span>
                                    </div>
                                @empty
                                    <div class="text-center py-5 text-muted">
                                        <i class="ti ti-calendar-check" style="font-size:3rem;opacity:.25"></i>
                                        <p class="mt-2 mb-0">{{ __('admin.dashboard.no_deadlines') }}</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── FINANCIAL ACTIVITY TABS ─────────────────────────────── --}}
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="card chart-card">
                            <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <h5 class="mb-0 fw-800">{{ __('admin.dashboard.financial_activity') }}</h5>
                                <ul class="nav nav-tabs-custom" id="finTab" role="tablist">
                                    <li class="nav-item">
                                        <button class="nav-link active" data-bs-toggle="tab"
                                                data-bs-target="#tab-payments" type="button">
                                            <i class="ti ti-arrow-down-circle me-1"></i>{{ __('admin.dashboard.recent_payments') }}
                                        </button>
                                    </li>
                                    <li class="nav-item">
                                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-expenses"
                                                type="button">
                                            <i class="ti ti-arrow-up-circle me-1"></i>{{ __('admin.dashboard.recent_expenses') }}
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body p-0">
                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="tab-payments">
                                        <div class="table-responsive">
                                            <table class="table fin-table mb-0">
                                                <thead>
                                                <tr>
                                                    <th>{{ __('admin.client_payments.fields.client_id') }}</th>
                                                    <th>{{ __('admin.client_payments.fields.project_id') }}</th>
                                                    <th>{{ __('admin.client_payments.fields.payment_type') }}</th>
                                                    <th>{{ __('admin.client_payments.fields.payment_date') }}</th>
                                                    <th class="text-end">{{ __('admin.client_payments.fields.amount') }}</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @forelse($recentPayments as $payment)
                                                    <tr>
                                                        <td class="fw-600">{{ $payment->client?->name ?? '—' }}</td>
                                                        <td class="text-muted">{{ $payment->project?->project_name ?? '—' }}</td>
                                                        <td><span class="badge bg-light text-dark"
                                                                  style="font-size:.72rem">{{ __('admin.client_payments.types.'.$payment->payment_type) }}</span>
                                                        </td>
                                                        <td class="text-muted">{{ $payment->payment_date?->format('d/m/Y') }}</td>
                                                        <td class="text-end amount-positive">{{ number_format($payment->amount, 2) }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="5"
                                                            class="text-center text-muted py-4">{{ __('admin.dashboard.no_data') }}</td>
                                                    </tr>
                                                @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="tab-expenses">
                                        <div class="table-responsive">
                                            <table class="table fin-table mb-0">
                                                <thead>
                                                <tr>
                                                    <th>{{ __('admin.expenses.fields.title') }}</th>
                                                    <th>{{ __('admin.expenses.fields.project_id') }}</th>
                                                    <th>{{ __('admin.expenses.fields.category') }}</th>
                                                    <th>{{ __('admin.expenses.fields.expense_date') }}</th>
                                                    <th class="text-end">{{ __('admin.expenses.fields.amount') }}</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @forelse($recentExpenses as $expense)
                                                    <tr>
                                                        <td><a href="{{ route('admin.expenses.show', $expense) }}"
                                                               class="fw-600 text-dark">{{ $expense->title }}</a></td>
                                                        <td class="text-muted">{{ $expense->project?->project_name ?? '—' }}</td>
                                                        <td><span class="badge bg-light text-dark"
                                                                  style="font-size:.72rem">{{ $expense->expense_category ?? $expense->category ?? '—' }}</span>
                                                        </td>
                                                        <td class="text-muted">{{ $expense->expense_date?->format('d/m/Y') }}</td>
                                                        <td class="text-end amount-negative">{{ number_format($expense->amount, 2) }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="5"
                                                            class="text-center text-muted py-4">{{ __('admin.dashboard.no_data') }}</td>
                                                    </tr>
                                                @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── RECENT PROJECTS TABLE ───────────────────────────────── --}}
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="card chart-card">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="mb-0 fw-800">{{ __('admin.dashboard.recent_projects') }}</h5>
                                @can('view_projects')
                                    <a href="{{ route('admin.projects.index') }}"
                                       class="btn btn-sm btn-outline-secondary" style="font-size:.75rem">
                                        {{ __('admin.dashboard.view_all') }} <i
                                            class="ti ti-arrow-{{ $isAr ? 'left' : 'right' }}"></i>
                                    </a>
                                @endcan
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table fin-table mb-0">
                                        <thead>
                                        <tr>
                                            <th>{{ __('admin.projects.fields.project_name') }}</th>
                                            <th>{{ __('admin.projects.fields.client_id') }}</th>
                                            <th>{{ __('admin.projects.fields.status') }}</th>
                                            <th>{{ __('admin.dashboard.progress') }}</th>
                                            <th>{{ __('admin.projects.fields.start_date') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @forelse($recentProjects as $project)
                                            <tr>
                                                <td><a href="{{ route('admin.projects.show', $project) }}"
                                                       class="fw-700 text-dark">{{ $project->project_name ?: $project->name }}</a>
                                                </td>
                                                <td class="text-muted">{{ $project->client?->name ?? '—' }}</td>
                                                <td><span
                                                        class="status-badge badge-{{ $project->status }}">{{ __('admin.projects.statuses.'.$project->status) }}</span>
                                                </td>
                                                <td style="min-width:110px">
                                                    @php $pct = $project->progress_percentage ?? 0; @endphp
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="progress-custom flex-grow-1">
                                                            <div class="progress-bar-custom"
                                                                 style="width:{{ $pct }}%;background:{{ $pct >= 75 ? '#22c55e' : ($pct >= 40 ? '#3b82f6' : '#f97316') }}"></div>
                                                        </div>
                                                        <span style="font-size:.75rem;font-weight:700;min-width:30px">{{ $pct }}%</span>
                                                    </div>
                                                </td>
                                                <td class="text-muted">{{ $project->start_date?->format('d/m/Y') ?? '—' }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5"
                                                    class="text-center text-muted py-4">{{ __('admin.dashboard.no_data') }}</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>{{-- page-content --}}
        </div>{{-- content-container --}}
    </div>{{-- page-content-wrapper --}}
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const locale     = '{{ app()->getLocale() }}';
            const fontFamily = "'Cairo', sans-serif";

            // ── Live Date & Time (12h + AM/PM) ───────────────────
            const liveDateEl = document.getElementById('liveDate');
            const liveTimeEl = document.getElementById('liveTime');

            function updateLiveDateTime() {
                const now = new Date();

                const dateOptions = {
                    weekday: 'long',
                    day: 'numeric',
                    month: 'long',
                    year: 'numeric'
                };

                const timeOptions = {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: true
                };

                if (liveDateEl) {
                    liveDateEl.textContent = now.toLocaleDateString(locale === 'ar' ? 'ar-EG' : 'en-US', dateOptions);
                }

                // AM / PM دايمًا إنجليزي
                if (liveTimeEl) {
                    liveTimeEl.textContent = now.toLocaleTimeString('en-US', timeOptions);
                }
            }

            updateLiveDateTime();
            setInterval(updateLiveDateTime, 1000);

            // ── Monthly Revenue vs Expenses Bar Chart ─────────────
            const months   = @json($monthlyChartData['months']);
            const revenue  = @json($monthlyChartData['revenue']);
            const expenses = @json($monthlyChartData['expenses']);
            const revLabel = '{{ __('admin.dashboard.revenue_label') }}';
            const expLabel = '{{ __('admin.dashboard.expenses_label') }}';

            new ApexCharts(document.querySelector('#monthlyFinancialChart'), {
                series: [
                    { name: revLabel,  data: revenue  },
                    { name: expLabel,  data: expenses }
                ],
                chart: {
                    type: 'bar', height: 280, fontFamily,
                    toolbar: { show: false },
                    animations: { enabled: true, easing: 'easeinout', speed: 600 },
                },
                plotOptions: {
                    bar: { horizontal: false, columnWidth: '55%', borderRadius: 6, borderRadiusApplication: 'end' }
                },
                dataLabels: { enabled: false },
                colors: ['#22c55e', '#ef4444'],
                xaxis: {
                    categories: months,
                    labels: { style: { fontFamily, fontSize: '11px', fontWeight: 600 } },
                    axisBorder: { show: false }, axisTicks: { show: false }
                },
                yaxis: {
                    labels: {
                        style: { fontFamily, fontSize: '11px' },
                        formatter: (v) => Number(v).toLocaleString()
                    }
                },
                grid: { borderColor: '#f1f5f9', strokeDashArray: 4 },
                tooltip: {
                    theme: 'light',
                    y: { formatter: (v) => Number(v).toLocaleString() }
                },
                legend: { position: 'top', fontFamily, fontSize: '12px', fontWeight: 600 },
            }).render();

            // ── Project Status Donut Chart ────────────────────────
            @if(!$projectStatusSummary->isEmpty())
            @php
                $statusLabelsArr = array_map(fn($s) => __('admin.projects.statuses.'.$s), array_keys($projectStatusSummary->toArray()));
                $statusColorsArr = array_map(fn($s) => $statusColors[$s] ?? '#94a3b8', array_keys($projectStatusSummary->toArray()));
            @endphp
            new ApexCharts(document.querySelector('#projectStatusChart'), {
                series: @json(array_values($projectStatusSummary->toArray())),
                chart: { type: 'donut', height: 260, fontFamily, toolbar: { show: false } },
                labels: @json($statusLabelsArr),
                colors: @json($statusColorsArr),
                plotOptions: {
                    pie: {
                        donut: {
                            size: '65%',
                            labels: {
                                show: true,
                                total: {
                                    show: true,
                                    label: '{{ __('admin.dashboard.total_label') }}',
                                    fontFamily, fontSize: '13px', fontWeight: 700,
                                    formatter: (w) => w.globals.seriesTotals.reduce((a, b) => a + b, 0)
                                },
                                value: { fontFamily, fontSize: '22px', fontWeight: 800 }
                            }
                        }
                    }
                },
                dataLabels: { enabled: false },
                legend: { position: 'bottom', fontFamily, fontSize: '11px', fontWeight: 600 },
                tooltip: { style: { fontFamily } },
            }).render();
            @endif
        });
    </script>
@endpush