<?php
    use function Laravel\Folio\{middleware, name};
    use App\Models\Client;
    use App\Models\Order;
    use App\Models\Payment;
    use App\Models\FibreType;
    use Livewire\Volt\Component;
	middleware('auth');
    name('dashboard');

    new class extends Component {
        public $totalCredits = 0;
        public $totalOrdersCount = 0;
        public $totalOrdersAmount = 0;
        public $mostSoldFibreType = null;
        public $mostSoldQuantity = 0;

        public function mount()
        {
            // Calculer le total des crédits de tous les clients
            // Total crédits = SUM(orders.total_price) - SUM(payments.amount)
            $totalOrders = Order::sum('total_price');
            $totalPayments = Payment::sum('amount');
            $this->totalCredits = $totalOrders - $totalPayments;
            
            // Calculer le nombre total de commandes effectuées
            $this->totalOrdersCount = Order::count();
            
            // Calculer la somme des prix totaux des commandes
            $this->totalOrdersAmount = $totalOrders;
            
            // Trouver le type de fibre le plus vendu (par quantité totale)
            $mostSold = Order::selectRaw('fibre_type_id, SUM(quantity) as total_quantity')
                ->groupBy('fibre_type_id')
                ->orderByDesc('total_quantity')
                ->first();
            
            if ($mostSold) {
                $this->mostSoldFibreType = FibreType::find($mostSold->fibre_type_id);
                $this->mostSoldQuantity = $mostSold->total_quantity;
            }
        }
    };
?>

<x-layouts.app>
	@volt('dashboard')
	<x-app.container x-data class=" lg:space-y-6" x-cloak>
        
		<x-app.alert id="dashboard_alert" class="hidden lg:flex">This is the user dashboard where users can manage settings and access features. <a href="https://devdojo.com/wave/docs" target="_blank" class="mx-1 underline">View the docs</a> to learn more.</x-app.alert>

        <x-app.heading
                title="Tableau de bord"
                description="Bienvenue sur le tableau de bord"
                :border="false"
            />
			<div class="space-y-6 max-w-full">
				<!-- Cartes statistiques en haut -->
				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-full">
					<!-- Carte Total Crédits Clients -->
					<div class="flex overflow-hidden relative p-5 w-full bg-white dark:bg-zinc-800 rounded-lg border border-slate-200 dark:border-zinc-700 justify-between">
						<span class="flex relative flex-col justify-center items-start pr-0 pb-1 space-y-3 h-full">
							<span class="block text-lg font-bold tracking-tight leading-tight text-slate-700 dark:text-white">
								Total Crédits Clients
							</span>
							<span class="block text-sm opacity-60 dark:text-zinc-200">
								Crédit total de tous les clients
							</span>
							<span class="inline-flex relative justify-start items-center -mt-1 mb-2 w-auto text-2xl font-bold tracking-tight leading-none {{ $this->totalCredits >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
								{{ number_format($this->totalCredits, 2) }} DT
							</span>
						</span>
						<svg class="w-auto h-20 opacity-40 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>

					<!-- Carte Total Commandes -->
					<div class="flex overflow-hidden relative p-5 w-full bg-white dark:bg-zinc-800 rounded-lg border border-slate-200 dark:border-zinc-700">
						<span class="flex relative flex-col justify-center items-start pr-0 pb-1 space-y-3 h-full w-full">
							<span class="block text-lg font-bold tracking-tight leading-tight text-slate-700 dark:text-white">
								Total Commandes
							</span>
							<span class="block text-sm opacity-60 dark:text-zinc-200">
								Nombre et montant total des commandes
							</span>
							<div class="flex flex-col space-y-2 w-full">
								<div class="inline-flex relative justify-start items-center w-auto">
									<span class="text-xl font-bold tracking-tight leading-none text-indigo-600 dark:text-indigo-400">
										{{ number_format($this->totalOrdersCount, 0) }} commande{{ $this->totalOrdersCount > 1 ? 's' : '' }}
									</span>
								</div>
								<div class="inline-flex relative justify-start items-center w-auto">
									<span class="text-2xl font-bold tracking-tight leading-none text-slate-700 dark:text-white">
										{{ number_format($this->totalOrdersAmount, 2) }} DT
									</span>
								</div>
							</div>
						</span>
						<svg class="w-auto h-20 opacity-40 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
						</svg>
					</div>

					<!-- Carte Type de Fibre le Plus Vendu -->
					<div class="flex overflow-hidden relative p-5 w-full bg-white dark:bg-zinc-800 rounded-lg border border-slate-200 dark:border-zinc-700">
						<span class="flex relative flex-col justify-center items-start pr-0 pb-1 space-y-3 h-full w-full">
							<span class="block text-lg font-bold tracking-tight leading-tight text-slate-700 dark:text-white">
								Type de Fibre le Plus Vendu
							</span>
							@if($this->mostSoldFibreType)
								<span class="block text-sm opacity-60 dark:text-zinc-200">
									{{ $this->mostSoldFibreType->name }}
								</span>
								<div class="flex flex-col space-y-2 w-full">
									<div class="inline-flex relative justify-start items-center w-auto">
										<span class="text-sm font-medium text-gray-600 dark:text-gray-400">
											Couleur: {{ $this->mostSoldFibreType->color }}
										</span>
									</div>
									<div class="inline-flex relative justify-start items-center w-auto">
										<span class="text-2xl font-bold tracking-tight leading-none text-purple-600 dark:text-purple-400">
											{{ number_format($this->mostSoldQuantity, 2) }} kg
										</span>
									</div>
								</div>
							@else
								<span class="block text-sm opacity-60 dark:text-zinc-200">
									Aucune vente enregistrée
								</span>
							@endif
						</span>
						<svg class="w-auto h-20 opacity-40 text-purple-500 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
						</svg>
					</div>
				</div>

				<!-- Les cartes de navigation en bas -->
				<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-full">
					<x-app.dashboard-card
						title="Clients"
						description="Voir tous les clients"
						href="/client"
					/>
					<x-app.dashboard-card
						title="Commandes"
						description="Voir toutes les commandes"
						href="/order"
					/>
				</div>
			</div>
		

    </x-app.container>
	@endvolt
</x-layouts.app>
