@extends('layouts.provider')

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

@section('content')
<div class="space-y-4" x-data>

    <!-- Onboarding Block -->
    @include('provider.dashboard._onboarding')

    <!-- Period Selector -->
    <div class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
        <form method="GET" action="{{ route('provider.dashboard') }}">
            <x-date-range-picker 
                name-from="start_date" 
                name-to="end_date" 
                :value-from="$startDate->format('Y-m-d')" 
                :value-to="$endDate->format('Y-m-d')"
                :provider-created-at="auth()->user()->provider->created_at->format('Y-m-d')"
            />
        </form>
    </div>

    <!-- Period Insight (intelligent summary) -->
    @include('provider.dashboard._period_insight')

    <!-- Séparateur -->
    <div class="border-t border-gray-200 dark:border-gray-700"></div>

    <!-- Tous les blocs sur une ligne -->
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4 md:gap-4">
        <!-- Prochains rendez-vous -->
        <article class="rounded-xl border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-0.5">Chiffre d'affaires <span class="text-[10px] text-gray-400">(net)</span></p>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-0.5">{{ number_format($kpis['financial']['revenue']['value'], 0, ',', ' ') }} {{ $currency }}</h3>
            @if($kpis['financial']['revenue']['change'])
                @php $c = $kpis['financial']['revenue']['change']; $isNeutral = $c['percentage'] == 0; @endphp
                <p class="text-xs flex items-center gap-1 {{ $isNeutral ? 'text-gray-400 dark:text-gray-500' : ($c['direction'] === 'up' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400') }}">
                    @if(!$isNeutral)<span>{{ $c['direction'] === 'up' ? '▲' : '▼' }}</span>@endif
                    <span>{{ abs($c['percentage']) }}%</span>
                    <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">vs période précédente</span>
                </p>
            @endif
        </article>

        <article class="rounded-xl border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-0.5">Achats</p>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-0.5">{{ number_format($kpis['financial']['expenses']['value'], 0, ',', ' ') }} {{ $currency }}</h3>
            @if($kpis['financial']['expenses']['change'])
                @php $c = $kpis['financial']['expenses']['change']; $isNeutral = $c['percentage'] == 0; @endphp
                <p class="text-xs flex items-center gap-1 {{ $isNeutral ? 'text-gray-400 dark:text-gray-500' : ($c['direction'] === 'up' ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400') }}">
                    @if(!$isNeutral)<span>{{ $c['direction'] === 'up' ? '▲' : '▼' }}</span>@endif
                    <span>{{ abs($c['percentage']) }}%</span>
                    <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">vs période précédente</span>
                </p>
            @endif
        </article>

        <article class="rounded-xl border-2 bg-white p-4 shadow-md dark:bg-gray-800 {{ $kpis['financial']['net_profit']['value'] < 0 ? 'border-red-300 dark:border-red-700' : ($kpis['financial']['net_profit']['value'] > 0 ? 'border-green-300 dark:border-green-700' : 'border-gray-300 dark:border-gray-600') }}">
            <div class="flex items-center gap-2 mb-1">
                <p class="text-xs font-medium text-gray-600 dark:text-gray-300">Résultat net</p>
                <span class="text-[10px] px-2 py-0.5 rounded-full font-medium {{ $kpiStatuses['net_profit']['color'] === 'green' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : ($kpiStatuses['net_profit']['color'] === 'orange' ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300' : ($kpiStatuses['net_profit']['color'] === 'red' ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300')) }}">{{ $kpiStatuses['net_profit']['label'] }}</span>
            </div>
            <h3 class="text-lg font-semibold mb-1 {{ $kpis['financial']['net_profit']['value'] < 0 ? 'text-red-600 dark:text-red-400' : ($kpis['financial']['net_profit']['value'] > 0 ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400') }}">{{ number_format($kpis['financial']['net_profit']['value'], 0, ',', ' ') }} {{ $currency }}</h3>
            @if($kpis['financial']['net_profit']['change'])
                @php $c = $kpis['financial']['net_profit']['change']; $isNeutral = $c['percentage'] == 0; @endphp
                <p class="text-xs flex items-center gap-1 {{ $isNeutral ? 'text-gray-400 dark:text-gray-500' : ($c['direction'] === 'up' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400') }}">
                    @if(!$isNeutral)<span>{{ $c['direction'] === 'up' ? '▲' : '▼' }}</span>@endif
                    <span>{{ abs($c['percentage']) }}%</span>
                    @if($kpis['financial']['net_profit']['value'] < 0)
                        <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">• Achats > Revenus</span>
                    @else
                        <span class="text-[10px] text-gray-400 dark:text-gray-500 ml-1">vs période précédente</span>
                    @endif
                </p>
            @endif
        </article>

        <a href="{{ route('provider.appointments.index', ['date_from' => $startDate->format('Y-m-d'), 'date_to' => $endDate->format('Y-m-d'), 'status' => 'complete', 'billed' => 'no']) }}" class="rounded-xl border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800 hover:shadow-md transition-shadow">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-0.5">Factures en attente</p>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-0.5">{{ number_format($kpis['financial']['unbilled']['amount'], 0, ',', ' ') }} {{ $currency }}</h3>
            <p class="text-xs text-orange-600 dark:text-orange-400">{{ $kpis['financial']['unbilled']['count'] }} prestation{{ $kpis['financial']['unbilled']['count'] > 1 ? 's' : '' }} terminée{{ $kpis['financial']['unbilled']['count'] > 1 ? 's' : '' }} non facturée{{ $kpis['financial']['unbilled']['count'] > 1 ? 's' : '' }}</p>
        </a>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 gap-2 md:gap-3 lg:grid-cols-3">
        <!-- Prochains rendez-vous -->
        <div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
            <div class="flex-1 p-3">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-semibold text-black dark:text-white">Prochains rendez-vous</h3>
                    <span class="text-[10px] px-2 py-0.5 rounded-full font-medium {{ $kpiStatuses['upcoming_agenda']['color'] === 'green' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : ($kpiStatuses['upcoming_agenda']['color'] === 'orange' ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300') }}">{{ $kpiStatuses['upcoming_agenda']['label'] }}</span>
                </div>
                @if($upcomingAppointments->count() > 0)
                    <div class="space-y-1.5">
                        @foreach($upcomingAppointments as $appointment)
                            <div class="flex items-start gap-2 hover:bg-gray-50 dark:hover:bg-gray-800 p-1.5 rounded-lg transition">
                                <a href="{{ route('provider.appointments.calendar') }}?date={{ \Carbon\Carbon::parse($appointment->start_time)->format('Y-m-d') }}&highlight={{ $appointment->uuid }}" class="flex items-start gap-2 flex-1 min-w-0">
                                    <div class="flex-shrink-0 flex flex-col items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
                                        <span class="text-[9px] font-medium text-primary/70">{{ \Carbon\Carbon::parse($appointment->start_time)->format('d/m') }}</span>
                                        <span class="text-xs font-bold text-primary">{{ \Carbon\Carbon::parse($appointment->start_time)->format('H:i') }}</span>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-black dark:text-white truncate">
                                            {{ $appointment->client ? $appointment->client->first_name . ' ' . $appointment->client->last_name : 'Sans client' }}
                                            @if($appointment->client && $appointment->client->phone)
                                                <span class="text-xs text-gray-400 dark:text-gray-500 ml-1">
                                                    <svg class="w-3 h-3 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                                    </svg>
                                                    {{ $appointment->client->phone }}
                                                </span>
                                            @endif
                                        </p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                            {{ $appointment->service->name }}
                                            @if($appointment->start_time && $appointment->end_time)
                                                <span class="text-gray-400"> • {{ $appointment->start_time->diffInMinutes($appointment->end_time) }} min</span>
                                            @endif
                                        </p>
                                    </div>
                                </a>
                                <div x-data="{ open: false, currentStatus: '{{ $appointment->status }}' }" class="relative flex-shrink-0 self-center" @click.stop>
                                    <button @click="open = !open" type="button" class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 whitespace-nowrap hover:bg-gray-200 dark:hover:bg-gray-600">
                                        <span x-text="{
                                            'scheduled': 'Programmé',
                                            'in_progress': 'En cours',
                                            'complete': 'Terminé',
                                            'late': 'En retard',
                                            'cancelled': 'Annulé'
                                        }[currentStatus] || currentStatus"></span>
                                        <svg class="inline w-3 h-3 ml-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                                    </button>
                                    <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 mt-1 w-32 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50" style="display: none;">
                                        <button x-show="currentStatus !== 'scheduled'" @click="updateStatus('{{ $appointment->uuid }}', 'scheduled', $el.closest('[x-data]'))" type="button" class="block w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Programmé</button>
                                        <button x-show="currentStatus !== 'complete'" @click="updateStatus('{{ $appointment->uuid }}', 'complete', $el.closest('[x-data]'))" type="button" class="block w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Terminé</button>
                                        <button x-show="currentStatus !== 'cancelled'" @click="updateStatus('{{ $appointment->uuid }}', 'cancelled', $el.closest('[x-data]'))" type="button" class="block w-full text-left px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">Annulé</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500 dark:text-gray-400">Aucun rendez-vous prévu</p>
                @endif
            </div>
            <div class="border-t border-gray-200 p-3 dark:border-gray-700">
                <a href="{{ route('provider.appointments.calendar') }}" class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white p-2 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">
                    Voir le calendrier
                    <svg class="ml-2 fill-current" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4767 6.16664L6.00668 1.69664L7.18501 0.518311L13.6667 6.99998L7.18501 13.4816L6.00668 12.3033L10.4767 7.83331H0.333344V6.16664H10.4767Z" fill=""/>
                    </svg>
                </a>
            </div>
        </div>

        <!-- Actions prioritaires -->
        @include('provider.dashboard._priority_actions')

        <!-- Activité & Performance -->
        <div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
            <div class="flex-1 p-3">
                <h3 class="mb-2 text-sm font-semibold text-black dark:text-white">Activité & Performance</h3>
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Prestations réalisées</span>
                        <span class="text-base font-bold text-black dark:text-white">{{ $kpis['activity']['completed_appointments'] }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500 dark:text-gray-400">
                            Taux de remplissage
                            <span class="relative inline-block ml-1">
                                <button type="button" class="text-gray-400 hover:text-gray-600" x-data="{ tooltip: false }" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
                                    &#9432;
                                    <span x-show="tooltip" style="display: none;" class="pointer-events-none absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-1 w-48 rounded bg-black px-3 py-1.5 text-xs text-white after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-black">Heures réservées / heures disponibles<br><small class="opacity-75">(8h/jour ouvré, hors week-end)</small></span>
                                </button>
                            </span>
                        </span>
                        <div class="flex items-center gap-2">
                            <span class="text-base font-bold text-black dark:text-white">{{ $kpis['activity']['fill_rate'] }}%</span>
                            <span class="text-[10px] px-1.5 py-0.5 rounded-full font-medium {{ $kpiStatuses['fill_rate']['color'] === 'green' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : ($kpiStatuses['fill_rate']['color'] === 'orange' ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300') }}">{{ $kpiStatuses['fill_rate']['label'] }}</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Annulations</span>
                        <span class="text-base font-bold text-black dark:text-white">{{ $kpis['activity']['cancelled_appointments'] }} <span class="text-xs font-normal text-gray-500">sur {{ $kpis['activity']['total_appointments'] }} ({{ $kpis['activity']['cancellation_rate'] }}%)</span></span>
                    </div>
                </div>
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                    <div class="space-y-2">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500 dark:text-gray-400">Clients servis</span>
                            <span class="text-base font-bold text-black dark:text-white">{{ $kpis['clients']['served_clients'] }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500 dark:text-gray-400">Nouveaux clients</span>
                            <span class="text-base font-bold text-black dark:text-white">{{ $kpis['clients']['new_clients'] }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500 dark:text-gray-400">
                                Panier moyen <span class="text-[10px] text-gray-400">(net)</span>
                                <span class="relative inline-block ml-1">
                                    <button type="button" class="text-gray-400 hover:text-gray-600" x-data="{ tooltip: false }" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
                                        &#9432;
                                        <span x-show="tooltip" style="display: none;" class="pointer-events-none absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-1 w-48 rounded bg-black px-3 py-1.5 text-xs text-white after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-black">CA total ÷ nombre de prestations<br><small class="opacity-75">Indique le revenu moyen par séance</small></span>
                                    </button>
                                </span>
                            </span>
                            <span class="text-base font-bold text-black dark:text-white">{{ number_format($kpis['performance']['average_basket'], 0) }} {{ $currency }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500 dark:text-gray-400">Temps travaillé</span>
                            <span class="text-base font-bold text-black dark:text-white">{{ $kpis['performance']['worked_hours'] }} h <span class="text-xs font-normal text-gray-500">(période sélectionnée)</span></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-200 p-3 dark:border-gray-700">
                <a href="{{ route('provider.clients.index') }}" class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white p-2 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">
                    Voir tous les clients
                    <svg class="ml-2 fill-current" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4767 6.16664L6.00668 1.69664L7.18501 0.518311L13.6667 6.99998L7.18501 13.4816L6.00668 12.3033L10.4767 7.83331H0.333344V6.16664H10.4767Z" fill=""/>
                    </svg>
                </a>
            </div>
        </div>
    </div>  

    <!-- Graphiques sur une ligne (desktop et mobile) -->
    <div class="grid grid-cols-1 gap-3 md:gap-4 lg:grid-cols-3">
        <!-- Répartition CA par service -->
        <div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
                <h4 class="text-sm font-semibold text-black dark:text-white">Répartition du CA par service <span class="text-[10px] text-gray-400 font-normal">(net)</span></h4>
            </div>
            <div class="flex-1 p-3" style="overflow: visible;">
                @if(count($kpis['revenue_by_service_type']['items']) > 0)
                    <div class="flex items-center gap-4" style="overflow: visible;">
                        <div class="flex-shrink-0" style="overflow: visible;">
                            <div class="relative h-40 w-40" style="overflow: visible;">
                                <canvas id="servicesChart" style="overflow: visible; position: relative; z-index: 10;"></canvas>
                                <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none" style="z-index: 1;">
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Total</p>
                                    <p class="text-base font-bold text-black dark:text-white">{{ number_format($kpis['revenue_by_service_type']['total'], 0, ',', ' ') }} {{ $currency }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 space-y-2" id="servicesList">
                        @php
                            $serviceColors = ['#10b981', '#34d399', '#6ee7b7', '#a7f3d0', '#d1fae5'];
                        @endphp
                        @foreach($kpis['revenue_by_service_type']['items'] as $index => $service)
                            <div class="flex items-start justify-between {{ $index >= 3 ? 'hidden service-item-extra' : '' }}">
                                <div class="flex items-center gap-2 flex-1 min-w-0">
                                    <span class="h-2.5 w-2.5 rounded-full flex-shrink-0" style="background-color: {{ $serviceColors[$index % count($serviceColors)] }}"></span>
                                    <div class="flex-1 min-w-0">
                                        <div class="text-sm text-black dark:text-white truncate">{{ $service['label'] }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $service['percentage'] }}% – {{ number_format($service['amount'], 0, ',', ' ') }} {{ $currency }}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @if(count($kpis['revenue_by_service_type']['items']) > 3)
                            <button onclick="toggleServices()" id="servicesToggle" class="text-xs text-primary hover:underline">
                                Afficher plus ({{ count($kpis['revenue_by_service_type']['items']) - 3 }})
                            </button>
                        @endif
                        </div>
                    </div>
                @else
                    <p class="text-center text-sm text-gray-500 dark:text-gray-400 py-8">Aucun service</p>
                @endif
            </div>
            <div class="border-t border-gray-200 p-3 dark:border-gray-700">
                <a href="{{ route('provider.services.index') }}" class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white p-2 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">
                    Voir tous les services
                    <svg class="ml-2 fill-current" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4767 6.16664L6.00668 1.69664L7.18501 0.518311L13.6667 6.99998L7.18501 13.4816L6.00668 12.3033L10.4767 7.83331H0.333344V6.16664H10.4767Z" fill=""/>
                    </svg>
                </a>
            </div>
        </div>

        <!-- Répartition dépenses par type -->
        <div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
                <h4 class="text-sm font-semibold text-black dark:text-white">Répartition des achats</h4>
            </div>
            <div class="flex-1 p-3" style="overflow: visible;">
                @if(count($kpis['expenses_breakdown']['items']) > 0)
                    <div class="flex items-center gap-4" style="overflow: visible;">
                        <div class="flex-shrink-0" style="overflow: visible;">
                            <div class="relative h-40 w-40" style="overflow: visible;">
                                <canvas id="expensesChart" style="overflow: visible; position: relative; z-index: 10;"></canvas>
                                <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none" style="z-index: 1;">
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Total</p>
                                    <p class="text-base font-bold text-black dark:text-white">{{ number_format($kpis['expenses_breakdown']['total'], 0, ',', ' ') }} {{ $currency }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 space-y-2" id="expensesList">
                        @php
                            $colors = ['#2563eb', '#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe'];
                        @endphp
                        @foreach($kpis['expenses_breakdown']['items'] as $index => $expense)
                            <div class="flex items-start justify-between {{ $index >= 3 ? 'hidden expense-item-extra' : '' }}">
                                <div class="flex items-center gap-2 flex-1 min-w-0">
                                    <span class="h-2.5 w-2.5 rounded-full flex-shrink-0" style="background-color: {{ $colors[$index % count($colors)] }}"></span>
                                    <div class="flex-1 min-w-0">
                                        <div class="text-sm text-black dark:text-white truncate">{{ $expense['label'] }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $expense['percentage'] }}% – {{ number_format($expense['amount'], 0, ',', ' ') }} {{ $currency }}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @if(count($kpis['expenses_breakdown']['items']) > 3)
                            <button onclick="toggleExpenses()" id="expensesToggle" class="text-xs text-primary hover:underline">
                                Afficher plus ({{ count($kpis['expenses_breakdown']['items']) - 3 }})
                            </button>
                        @endif
                        </div>
                    </div>
                @else
                    <p class="text-center text-sm text-gray-500 dark:text-gray-400 py-8">Aucun achat</p>
                @endif
            </div>
            <div class="border-t border-gray-200 p-3 dark:border-gray-700">
                <a href="{{ route('provider.finances.index', ['tab' => 'achats']) }}" class="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white p-2 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">
                    Voir tous les achats
                    <svg class="ml-2 fill-current" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.4767 6.16664L6.00668 1.69664L7.18501 0.518311L13.6667 6.99998L7.18501 13.4816L6.00668 12.3033L10.4767 7.83331H0.333344V6.16664H10.4767Z" fill=""/>
                    </svg>
                </a>
            </div>
        </div>

        <!-- Graphique CA vs Dépenses -->
        <div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-default dark:border-gray-700 dark:bg-gray-800">
            <div class="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
                <h4 class="text-sm font-semibold text-black dark:text-white">Évolution CA vs Achats <span class="text-[10px] text-gray-400 font-normal">(CA net)</span></h4>
            </div>
            <div class="flex-1 p-3">
                @if(count($kpis['revenue_expenses_series']['points']) > 0 && ($kpis['revenue_expenses_series']['total_revenue'] > 0 || $kpis['revenue_expenses_series']['total_expenses'] > 0))
                    <div class="h-48">
                        <canvas id="revenueExpensesChart"></canvas>
                    </div>
                    <div class="flex items-center justify-center gap-4 mt-3 text-xs">
                        <div class="flex items-center gap-2">
                            <span class="h-2.5 w-2.5 rounded-full bg-green-500"></span>
                            <span class="text-black dark:text-white">CA: {{ number_format($kpis['revenue_expenses_series']['total_revenue'], 0, ',', ' ') }} {{ $currency }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="h-2.5 w-2.5 rounded-full bg-red-500"></span>
                            <span class="text-black dark:text-white">Achats: {{ number_format($kpis['revenue_expenses_series']['total_expenses'], 0, ',', ' ') }} {{ $currency }}</span>
                        </div>
                    </div>
                @else
                    <p class="text-center text-sm text-gray-500 dark:text-gray-400 py-8">Pas encore assez de données pour ce graphique</p>
                @endif
            </div>
        </div>
    </div>

    @include('provider.dashboard._actions_modal')
</div>
@endsection

@push('scripts')
<style>
    .chartjs-tooltip {
        z-index: 10000 !important;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        @if(count($kpis['expenses_breakdown']['items']) > 0)
        const expensesData = @json($kpis['expenses_breakdown']['items']);
        const ctx = document.getElementById('expensesChart');
        
        if (ctx) {
            let existingChart1 = Chart.getChart(ctx);
            if (existingChart1) {
                existingChart1.destroy();
            }
            const existingChart = Chart.getChart(ctx);
            if (existingChart) {
                existingChart.destroy();
            }
            
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: expensesData.map(item => item.label),
                    datasets: [{
                        data: expensesData.map(item => item.amount),
                        backgroundColor: ['#2563eb', '#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    layout: {
                        padding: 10
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: '#000',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            padding: 12,
                            cornerRadius: 6,
                            displayColors: false,
                            caretSize: 6,
                            caretPadding: 8,
                            callbacks: {
                                title: function(context) {
                                    return expensesData[context[0].dataIndex].label;
                                },
                                label: function(context) {
                                    const item = expensesData[context.dataIndex];
                                    return item.amount.toLocaleString() + ' {{ $currency }} (' + item.percentage + '%)';
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
        }
        @endif
        
        @if(count($kpis['revenue_by_service_type']['items']) > 0)
        const servicesData = @json($kpis['revenue_by_service_type']['items']);
        const ctxServices = document.getElementById('servicesChart');
        
        if (ctxServices) {
            let existingChart2 = Chart.getChart(ctxServices);
            if (existingChart2) {
                existingChart2.destroy();
            }
            new Chart(ctxServices, {
                type: 'doughnut',
                data: {
                    labels: servicesData.map(item => item.label),
                    datasets: [{
                        data: servicesData.map(item => item.amount),
                        backgroundColor: ['#10b981', '#34d399', '#6ee7b7', '#a7f3d0', '#d1fae5'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    layout: {
                        padding: 10
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: '#000',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            padding: 12,
                            cornerRadius: 6,
                            displayColors: false,
                            caretSize: 6,
                            caretPadding: 8,
                            callbacks: {
                                title: function(context) {
                                    return servicesData[context[0].dataIndex].label;
                                },
                                label: function(context) {
                                    const item = servicesData[context.dataIndex];
                                    return item.amount.toLocaleString() + ' {{ $currency }} (' + item.percentage + '%)';
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
        }
        @endif

        // Init mobile charts
        @if(count($kpis['revenue_by_service_type']['items']) > 0)
        const servicesDataMobile = @json($kpis['revenue_by_service_type']['items']);
        const ctxMobile = document.getElementById('servicesChartMobileCanvas');
        if (ctxMobile) {
            let existingChart3 = Chart.getChart(ctxMobile);
            if (existingChart3) {
                existingChart3.destroy();
            }
            new Chart(ctxMobile, {
                type: 'doughnut',
                data: {
                    labels: servicesDataMobile.map(item => item.label),
                    datasets: [{
                        data: servicesDataMobile.map(item => item.amount),
                        backgroundColor: ['#10b981', '#34d399', '#6ee7b7', '#a7f3d0', '#d1fae5'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#000',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            padding: 12,
                            cornerRadius: 6,
                            displayColors: false,
                            caretSize: 6,
                            caretPadding: 8,
                            callbacks: {
                                label: function(context) {
                                    const item = servicesDataMobile[context.dataIndex];
                                    return item.label + ': ' + item.amount.toLocaleString() + ' {{ $currency }} (' + item.percentage + '%)';
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
        }
        @endif

        @if(count($kpis['expenses_breakdown']['items']) > 0)
        const expensesDataMobile = @json($kpis['expenses_breakdown']['items']);
        const ctxExpMobile = document.getElementById('expensesChartMobileCanvas');
        if (ctxExpMobile) {
            let existingChart4 = Chart.getChart(ctxExpMobile);
            if (existingChart4) {
                existingChart4.destroy();
            }
            new Chart(ctxExpMobile, {
                type: 'doughnut',
                data: {
                    labels: expensesDataMobile.map(item => item.label),
                    datasets: [{
                        data: expensesDataMobile.map(item => item.amount),
                        backgroundColor: ['#2563eb', '#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#000',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            padding: 12,
                            cornerRadius: 6,
                            displayColors: false,
                            caretSize: 6,
                            caretPadding: 8,
                            callbacks: {
                                label: function(context) {
                                    const item = expensesDataMobile[context.dataIndex];
                                    return item.label + ': ' + item.amount.toLocaleString() + ' {{ $currency }} (' + item.percentage + '%)';
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
        }
        @endif

        // Graphique CA vs Dépenses
        @if(count($kpis['revenue_expenses_series']['points']) > 0)
        const revenueExpensesData = @json($kpis['revenue_expenses_series']);
        console.log('Revenue Expenses Data:', revenueExpensesData);
        const ctxRevExp = document.getElementById('revenueExpensesChart');
        
        if (ctxRevExp) {
            let existingChart5 = Chart.getChart(ctxRevExp);
            if (existingChart5) {
                existingChart5.destroy();
            }
            new Chart(ctxRevExp, {
                type: 'line',
                data: {
                    labels: revenueExpensesData.points.map(p => p.label),
                    datasets: [
                        {
                            label: 'CA',
                            data: revenueExpensesData.points.map(p => p.revenue),
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: 'Dépenses',
                            data: revenueExpensesData.points.map(p => p.expenses),
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            fill: true,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#000',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            padding: 12,
                            cornerRadius: 6,
                            displayColors: true,
                            caretSize: 6,
                            caretPadding: 8,
                            callbacks: {
                                label: function(context) {
                                    const label = context.dataset.label;
                                    const value = context.parsed.y.toLocaleString();
                                    return label + ': ' + value + ' {{ $currency }}';
                                },
                                footer: function(items) {
                                    const revenue = items.find(i => i.dataset.label === 'CA')?.parsed.y || 0;
                                    const expenses = items.find(i => i.dataset.label === 'Dépenses')?.parsed.y || 0;
                                    const profit = revenue - expenses;
                                    return 'Bénéfice: ' + profit.toLocaleString() + ' {{ $currency }}';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        }
        @endif

        // Graphique CA vs Dépenses mobile
        @if(count($kpis['revenue_expenses_series']['points']) > 0)
        const ctxRevExpMobile = document.getElementById('revenueExpensesChartMobile');
        if (ctxRevExpMobile) {
            let existingChart6 = Chart.getChart(ctxRevExpMobile);
            if (existingChart6) {
                existingChart6.destroy();
            }
            new Chart(ctxRevExpMobile, {
                type: 'line',
                data: {
                    labels: revenueExpensesData.points.map(p => p.label),
                    datasets: [
                        {
                            label: 'CA',
                            data: revenueExpensesData.points.map(p => p.revenue),
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            fill: true,
                            tension: 0.4
                        },
                        {
                            label: 'Dépenses',
                            data: revenueExpensesData.points.map(p => p.expenses),
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            fill: true,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#000',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            padding: 12,
                            cornerRadius: 6,
                            displayColors: true,
                            caretSize: 6,
                            caretPadding: 8,
                            callbacks: {
                                label: function(context) {
                                    const label = context.dataset.label;
                                    const value = context.parsed.y.toLocaleString();
                                    return label + ': ' + value + ' {{ $currency }}';
                                },
                                footer: function(items) {
                                    const revenue = items.find(i => i.dataset.label === 'CA')?.parsed.y || 0;
                                    const expenses = items.find(i => i.dataset.label === 'Dépenses')?.parsed.y || 0;
                                    const profit = revenue - expenses;
                                    return 'Bénéfice: ' + profit.toLocaleString() + ' {{ $currency }}';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        }
        @endif
    });

    function toggleServices() {
        const extras = document.querySelectorAll('.service-item-extra');
        const btn = document.getElementById('servicesToggle');
        const isHidden = extras[0].classList.contains('hidden');
        
        extras.forEach(item => {
            if (isHidden) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
        
        btn.textContent = isHidden ? 'Afficher moins' : 'Afficher plus ({{ count($kpis['revenue_by_service_type']['items']) - 3 }})';
    }

    function toggleExpenses() {
        const extras = document.querySelectorAll('.expense-item-extra');
        const btn = document.getElementById('expensesToggle');
        const isHidden = extras[0].classList.contains('hidden');
        
        extras.forEach(item => {
            if (isHidden) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
        
        btn.textContent = isHidden ? 'Afficher moins' : 'Afficher plus ({{ count($kpis['expenses_breakdown']['items']) - 3 }})';
    }

    function toggleServicesMobile() {
        const extras = document.querySelectorAll('.service-item-extra-mobile');
        const btn = document.getElementById('servicesToggleMobile');
        const isHidden = extras[0].classList.contains('hidden');
        
        extras.forEach(item => {
            if (isHidden) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
        
        btn.textContent = isHidden ? 'Afficher moins' : 'Afficher plus ({{ count($kpis['revenue_by_service_type']['items']) - 3 }})';
    }

    function toggleExpensesMobile() {
        const extras = document.querySelectorAll('.expense-item-extra-mobile');
        const btn = document.getElementById('expensesToggleMobile');
        const isHidden = extras[0].classList.contains('hidden');
        
        extras.forEach(item => {
            if (isHidden) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
        
        btn.textContent = isHidden ? 'Afficher moins' : 'Afficher plus ({{ count($kpis['expenses_breakdown']['items']) - 3 }})';
    }

    function updateStatus(uuid, status, dropdown) {
        fetch('{{ route("provider.appointments.updateStatus", "APPOINTMENT_UUID") }}'.replace('APPOINTMENT_UUID', uuid), {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ status: status })
        }).then(response => {
            if (response.ok) {
                if (dropdown._x_dataStack) {
                    dropdown._x_dataStack[0].currentStatus = status;
                    dropdown._x_dataStack[0].open = false;
                }
                
                const statusLabels = {
                    'scheduled': 'Programmé',
                    'complete': 'Terminé',
                    'cancelled': 'Annulé'
                };
                
                window.dispatchEvent(new CustomEvent('toast', {
                    detail: { 
                        message: 'Statut changé en ' + statusLabels[status],
                        type: 'success'
                    }
                }));
            } else {
                window.dispatchEvent(new CustomEvent('toast', {
                    detail: { 
                        message: 'Erreur lors du changement de statut',
                        type: 'error'
                    }
                }));
            }
        }).catch(() => {
            window.dispatchEvent(new CustomEvent('toast', {
                detail: { 
                    message: 'Erreur de connexion',
                    type: 'error'
                }
            }));
        });
    }
</script>
@endpush