@extends('layouts.app')

@section('title', 'Tableau de bord')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">Tableau de bord</h1>
            <p class="text-gray-600 mt-2 text-lg">Vue d'ensemble de votre activité</p>
        </div>
        {{-- <div class="bg-white rounded-xl shadow-md px-6 py-3 border border-gray-200">
            <div class="text-sm text-gray-500 font-medium">{{ now()->format('l') }}
    </div>
    <div class="text-lg font-bold text-gray-900">{{ now()->format('d F Y') }}</div>
</div> --}}
</div>

<!-- Quick Stats -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="group relative bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 rounded-2xl shadow-xl p-6 text-white overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <p class="text-blue-100 text-sm font-medium mb-1">Aujourd'hui</p>
                <p class="text-3xl font-bold mt-1">{{ number_format($todayRevenue, 0, ',', ' ') }} FCFA</p>
            </div>
            {{-- <div class="w-16 h-16 bg-white bg-opacity-25 rounded-2xl flex items-center justify-center backdrop-blur-sm transform group-hover:rotate-12 transition-transform duration-300">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>  --}}
        </div>
    </div>

    <div class="group relative bg-gradient-to-br from-emerald-500 via-green-500 to-teal-600 rounded-2xl shadow-xl p-6 text-white overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm font-medium mb-1">Cette semaine</p>
                <p class="text-3xl font-bold mt-1">{{ number_format($weekRevenue, 0, ',', ' ') }} FCFA</p>
            </div>
            {{-- <div class="w-16 h-16 bg-white bg-opacity-25 rounded-2xl flex items-center justify-center backdrop-blur-sm transform group-hover:rotate-12 transition-transform duration-300">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>  --}}
        </div>
    </div>

    <div class="group relative bg-gradient-to-br from-purple-500 via-violet-600 to-indigo-600 rounded-2xl shadow-xl p-6 text-white overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <p class="text-purple-100 text-sm font-medium mb-1">Ce mois</p>
                <p class="text-3xl font-bold mt-1">{{ number_format($monthRevenue, 0, ',', ' ') }} FCFA</p>
            </div>
            {{-- <div class="w-16 h-16 bg-white bg-opacity-25 rounded-2xl flex items-center justify-center backdrop-blur-sm transform group-hover:rotate-12 transition-transform duration-300">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                    </svg>
                </div>  --}}
        </div>
    </div>

    <div class="group relative bg-gradient-to-br from-rose-500 via-red-500 to-pink-600 rounded-2xl shadow-xl p-6 text-white overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-10 rounded-full -mr-16 -mt-16"></div>
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <p class="text-red-100 text-sm font-medium mb-1">Dépenses aujourd'hui</p>
                <p class="text-3xl font-bold mt-1">{{ number_format($todayExpenses, 0, ',', ' ') }} FCFA</p>
            </div>
            {{-- <div class="w-16 h-16 bg-white bg-opacity-25 rounded-2xl flex items-center justify-center backdrop-blur-sm transform group-hover:rotate-12 transition-transform duration-300">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>  --}}
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-8">
    <div class="bg-white rounded-2xl shadow-md p-6 border border-gray-100 hover:shadow-xl hover:border-blue-200 transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Clients</p>
                <p class="text-3xl font-bold text-gray-900 mt-2">{{ $stats['total_customers'] }}</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-md p-6 border border-gray-100 hover:shadow-xl hover:border-green-200 transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Dépôts</p>
                <p class="text-3xl font-bold text-gray-900 mt-2">{{ $stats['total_deposits'] }}</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center shadow-lg">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-md p-6 border border-gray-100 hover:shadow-xl hover:border-indigo-200 transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Chiffre d'affaires</p>
                <p class="text-2xl font-bold text-indigo-600 mt-2">{{ number_format($stats['total_revenue'], 0, ',', ' ') }} FCFA</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-md p-6 border border-gray-100 hover:shadow-xl hover:border-rose-200 transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Dépenses</p>
                <p class="text-2xl font-bold text-rose-600 mt-2">{{ number_format($stats['total_expenses'], 0, ',', ' ') }} FCFA</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-rose-500 to-red-600 rounded-2xl flex items-center justify-center shadow-lg">
                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Revenue Chart -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50">
            <h2 class="text-xl font-bold text-gray-900 flex items-center">
                <span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
                Revenus (7 derniers jours)
            </h2>
        </div>
        <div class="p-6">
            <canvas id="revenueChart" height="120"></canvas>
        </div>
    </div>

    <!-- Revenue vs Expenses -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-emerald-50 to-teal-50">
            <h2 class="text-xl font-bold text-gray-900 flex items-center">
                <span class="w-2 h-2 bg-emerald-500 rounded-full mr-3"></span>
                Revenus vs Dépenses (6 mois)
            </h2>
        </div>
        <div class="p-6">
            <canvas id="revenueExpensesChart" height="120"></canvas>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Deposits by Type -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-purple-50 to-pink-50">
            <h2 class="text-xl font-bold text-gray-900 flex items-center">
                <span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>
                Répartition par type de lavage
            </h2>
        </div>
        <div class="p-6 h-96">
            <canvas id="depositsByTypeChart" class="w-full h-full"></canvas>
        </div>
    </div>

    <!-- Top Customers -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-purple-50">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    <span class="w-2 h-2 bg-indigo-500 rounded-full mr-3"></span>
                    Top clients
                </h2>
                <a href="{{ route('customers.index') }}" class="text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors">Voir tout →</a>
            </div>
        </div>
        <div class="p-6">
            @if($topCustomers->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Client</th>
                            {{-- <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Téléphone</th>  --}}
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Nombre de dépôts</th>
                            <th class="px-6 py-4 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100">
                        @foreach($topCustomers as $index => $customer)
                        <tr class="hover:bg-blue-50 transition-colors duration-150">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold mr-3">
                                        {{ strtoupper(substr($customer->full_name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <div class="text-sm font-bold text-gray-900">{{ $customer->full_name }}</div>
                                        @if($customer->email)
                                        <div class="text-sm text-gray-500">{{ $customer->email }}</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            {{-- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700">
                                    {{ $customer->phone }}
                            </td> --}}
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md">
                                    {{ $customer->deposits_count }} dépôt(s)
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <a href="{{ route('customers.show', $customer) }}" class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 transition-colors">
                                    Voir
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="text-center py-12">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <p class="text-gray-500 font-medium">Aucun client</p>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- Pending Deposits -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-orange-50 to-amber-50">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    <span class="w-2 h-2 bg-orange-500 rounded-full mr-3"></span>
                    Dépôts en attente
                </h2>
                <a href="{{ route('deposits.index') }}" class="text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors">Voir tout →</a>
            </div>
        </div>
        <div class="p-6">
            @if($pendingDeposits->count() > 0)
            <div class="space-y-3">
                @foreach($pendingDeposits as $deposit)
                <div class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:shadow-md transition-all duration-200 border border-gray-200 hover:border-orange-300">
                    <div class="flex-1">
                        <p class="font-bold text-gray-900">{{ $deposit->customer->full_name }}</p>
                        <p class="text-sm text-gray-600 mt-1">{{ $deposit->date_of_deposit->format('d/m/Y') }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-lg text-gray-900">{{ number_format($deposit->total, 0, ',', ' ') }} FCFA</p>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 mt-1">
                            {{ ucfirst($deposit->wash_type) }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="text-center py-12">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                    </svg>
                </div>
                <p class="text-gray-500 font-medium">Aucun dépôt en attente</p>
            </div>
            @endif
        </div>
    </div>

    <!-- Recent Deposits -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    <span class="w-2 h-2 bg-blue-500 rounded-full mr-3"></span>
                    Dépôts récents
                </h2>
                <a href="{{ route('deposits.index') }}" class="text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors">Voir tout →</a>
            </div>
        </div>
        <div class="p-6">
            @if($recentDeposits->count() > 0)
            <div class="space-y-3">
                @foreach($recentDeposits->take(5) as $deposit)
                <div class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:shadow-md transition-all duration-200 border border-gray-200 hover:border-blue-300">
                    <div class="flex-1">
                        <p class="font-bold text-gray-900">{{ $deposit->customer->full_name }}</p>
                        <p class="text-sm text-gray-600 mt-1">{{ $deposit->created_at->format('d/m/Y H:i') }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-bold text-lg text-gray-900">{{ number_format($deposit->total, 0, ',', ' ') }} FCFA</p>
                        @if($deposit->withdrawal_date)
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800 mt-1">
                            ✓ Récupéré
                        </span>
                        @else
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800 mt-1">
                            ⏱ En attente
                        </span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="text-center py-12">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <p class="text-gray-500 font-medium">Aucun dépôt récent</p>
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Top clients déplacé plus haut (côte à côte avec la répartition par lavage) --}}
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    // Revenue Chart (7 days)
    const revenueCtx = document.getElementById('revenueChart');
    if (revenueCtx) {
        const revenueData = @json($revenueLast7Days);

        // Créer un tableau de 7 jours avec les données
        const last7Days = [];
        const revenueValues = [];

        for (let i = 6; i >= 0; i--) {
            const date = new Date();
            date.setDate(date.getDate() - i);
            const dateStr = date.toISOString().split('T')[0];
            const dayName = date.toLocaleDateString('fr-FR', {
                weekday: 'short'
            });

            last7Days.push(dayName);
            const dayData = revenueData.find(d => d.date === dateStr);
            revenueValues.push(dayData ? parseFloat(dayData.total) : 0);
        }

        new Chart(revenueCtx, {
            type: 'line'
            , data: {
                labels: last7Days
                , datasets: [{
                    label: 'Revenus'
                    , data: revenueValues
                    , borderColor: 'rgb(59, 130, 246)'
                    , backgroundColor: 'rgba(59, 130, 246, 0.1)'
                    , borderWidth: 3
                    , fill: true
                    , tension: 0.4
                    , pointRadius: 5
                    , pointHoverRadius: 7
                    , pointBackgroundColor: 'rgb(59, 130, 246)'
                    , pointBorderColor: '#fff'
                    , pointBorderWidth: 2
                }]
            }
            , options: {
                responsive: true
                , maintainAspectRatio: false
                , plugins: {
                    legend: {
                        display: false
                    }
                    , tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)'
                        , padding: 12
                        , titleFont: {
                            size: 14
                            , weight: 'bold'
                        }
                        , bodyFont: {
                            size: 13
                        }
                        , callbacks: {
                            label: function(context) {
                                return new Intl.NumberFormat('fr-FR').format(context.parsed.y) + ' FCFA';
                            }
                        }
                    }
                }
                , scales: {
                    y: {
                        beginAtZero: true
                        , grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                        , ticks: {
                            callback: function(value) {
                                return new Intl.NumberFormat('fr-FR').format(value) + ' FCFA';
                            }
                        }
                    }
                    , x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    }

    // Revenue vs Expenses Chart
    const revenueExpensesCtx = document.getElementById('revenueExpensesChart');
    if (revenueExpensesCtx) {
        const revenueByMonth = @json($revenueByMonthValues);
        const expensesByMonth = @json($expensesByMonthValues);
        const monthLabels = @json($monthLabels);

        new Chart(revenueExpensesCtx, {
            type: 'bar'
            , data: {
                labels: monthLabels
                , datasets: [{
                    label: 'Revenus'
                    , data: revenueByMonth
                    , backgroundColor: 'rgba(16, 185, 129, 0.9)'
                    , borderColor: 'rgb(16, 185, 129)'
                    , borderWidth: 2
                    , borderRadius: 8
                    , borderSkipped: false
                }, {
                    label: 'Dépenses'
                    , data: expensesByMonth
                    , backgroundColor: 'rgba(239, 68, 68, 0.9)'
                    , borderColor: 'rgb(239, 68, 68)'
                    , borderWidth: 2
                    , borderRadius: 8
                    , borderSkipped: false
                }]
            }
            , options: {
                responsive: true
                , maintainAspectRatio: false
                , plugins: {
                    legend: {
                        position: 'top'
                        , labels: {
                            padding: 15
                            , font: {
                                size: 13
                                , weight: 'bold'
                            }
                            , usePointStyle: true
                            , pointStyle: 'circle'
                        }
                    }
                    , tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)'
                        , padding: 12
                        , titleFont: {
                            size: 14
                            , weight: 'bold'
                        }
                        , bodyFont: {
                            size: 13
                        }
                        , callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + new Intl.NumberFormat('fr-FR').format(context.parsed.y) + ' FCFA';
                            }
                        }
                    }
                }
                , scales: {
                    y: {
                        beginAtZero: true
                        , grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                        , ticks: {
                            callback: function(value) {
                                return new Intl.NumberFormat('fr-FR').format(value) + ' FCFA';
                            }
                        }
                    }
                    , x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    }

    // Deposits by Type Chart
    const depositsByTypeCtx = document.getElementById('depositsByTypeChart');
    if (depositsByTypeCtx) {
        const depositsByType = @json($depositsByWashType);
        const labels = depositsByType.map(d => {
            const types = {
                'normal': 'Normal'
                , 'express': 'Express'
                , 'super_express': 'Super Express'
            };
            return types[d.wash_type] || d.wash_type;
        });
        const data = depositsByType.map(d => d.count);

        new Chart(depositsByTypeCtx, {
            type: 'doughnut'
            , data: {
                labels: labels
                , datasets: [{
                    data: data
                    , backgroundColor: [
                        'rgba(59, 130, 246, 0.9)'
                        , 'rgba(16, 185, 129, 0.9)'
                        , 'rgba(251, 146, 60, 0.9)'
                    ]
                    , borderColor: [
                        'rgb(59, 130, 246)'
                        , 'rgb(16, 185, 129)'
                        , 'rgb(251, 146, 60)'
                    ]
                    , borderWidth: 3
                    , hoverOffset: 10
                }]
            }
            , options: {
                responsive: true
                , maintainAspectRatio: false
                , plugins: {
                    legend: {
                        position: 'bottom'
                        , labels: {
                            padding: 20
                            , font: {
                                size: 13
                                , weight: 'bold'
                            }
                            , usePointStyle: true
                            , pointStyle: 'circle'
                        }
                    }
                    , tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)'
                        , padding: 12
                        , titleFont: {
                            size: 14
                            , weight: 'bold'
                        }
                        , bodyFont: {
                            size: 13
                        }
                    }
                }
            }
        });
    }

</script>
@endpush
@endsection