@extends('layouts.app')

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

@section('content')
<div class="space-y-6">
    <!-- Statistiques principales -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        <!-- Total Produits -->
        <div class="rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow" style="background: linear-gradient(to right, #3b82f6, #2563eb);">
            <div class="flex flex-col">
                <p class="text-sm font-medium mb-2" style="color: rgba(255, 255, 255, 0.9);">Total Produits</p>
                <p class="text-4xl font-bold" style="color: #ffffff;">0</p>
            </div>
        </div>

        <!-- Stock Total -->
        <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 dark:from-emerald-600 dark:to-emerald-700 rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex flex-col">
                <p class="text-sm font-medium text-white/90 dark:text-white/90 mb-2">Stock Total</p>
                <p class="text-4xl font-bold text-white dark:text-white">0</p>
            </div>
        </div>

        <!-- Demandes en attente -->
        <div class="bg-gradient-to-r from-violet-500 to-violet-600 dark:from-violet-600 dark:to-violet-700 rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex flex-col">
                <p class="text-sm font-medium text-white/90 dark:text-white/90 mb-2">Demandes en attente</p>
                <p class="text-4xl font-bold text-white dark:text-white">0</p>
            </div>
        </div>

        <!-- Mouvements aujourd'hui -->
        <div class="bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-600 dark:to-orange-600 rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="flex flex-col">
                <p class="text-sm font-medium text-white/90 dark:text-white/90 mb-2">Mouvements aujourd'hui</p>
                <p class="text-4xl font-bold text-white dark:text-white">0</p>
            </div>
        </div>
    </div>

    <!-- Graphiques et tableaux -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <!-- Graphique des mouvements (2 colonnes) -->
        <div class="lg:col-span-2 bg-white dark:bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-900">Mouvements de stock</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">7 derniers jours</p>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-600">Entrées</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-600">Sorties</span>
                    </div>
                </div>
            </div>
            <!-- Graphique simple (barres) -->
            <div class="h-64 flex items-end justify-between space-x-2">
                @for($i = 0; $i < 7; $i++) <div class="flex-1 flex flex-col items-center">
                    <div class="w-full flex flex-col justify-end h-full space-y-1">
                        <div class="bg-blue-500 rounded-t" style="height: {{ rand(20, 80) }}%"></div>
                        <div class="bg-red-500 rounded-t" style="height: {{ rand(10, 50) }}%"></div>
                    </div>
                    <span class="text-xs text-gray-500 dark:text-gray-500 mt-2">{{ ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'][$i] }}</span>
            </div>
            @endfor
        </div>
    </div>

    <!-- Produits à faible stock -->
    <div class="bg-white dark:bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-900">Stock faible</h3>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-100 dark:text-red-800">
                0
            </span>
        </div>
        <div class="space-y-3">
            <div class="text-center py-8 text-sm text-gray-500 dark:text-gray-500">
                <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <p>Aucun produit à faible stock</p>
            </div>
        </div>
    </div>
</div>

<!-- Tableaux récents -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
    <!-- Demandes récentes -->
    <div class="bg-white dark:bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-900">Demandes récentes</h3>
                <a href="{{ route('requests.index') }}" class="text-sm text-blue-600 dark:text-blue-600 hover:text-blue-700 dark:hover:text-blue-700 font-medium">
                    Voir tout →
                </a>
            </div>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-200">
            <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-50 transition-colors">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-900 dark:text-gray-900">Aucune demande</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">Aucune demande récente</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mouvements récents -->
    <div class="bg-white dark:bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-900">Mouvements récents</h3>
                <a href="{{ route('movements.index') }}" class="text-sm text-blue-600 dark:text-blue-600 hover:text-blue-700 dark:hover:text-blue-700 font-medium">
                    Voir tout →
                </a>
            </div>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-200">
            <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-50 transition-colors">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                            <div class="w-10 h-10 bg-green-100 dark:bg-green-100 rounded-lg flex items-center justify-center">
                                <svg class="w-5 h-5 text-green-600 dark:text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-900">Aucun mouvement</p>
                            <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">Aucun mouvement récent</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Actions rapides -->
<div class="bg-white dark:bg-white rounded-xl shadow-sm border border-gray-200 p-6">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-900 mb-4">Actions rapides</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <a href="{{ route('products.index') }}" class="flex items-center p-4 border border-gray-200 dark:border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-50 transition-all group">
            <div class="flex-shrink-0 w-10 h-10 bg-blue-100 dark:bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-200 dark:group-hover:bg-blue-200 transition-colors">
                <svg class="w-5 h-5 text-blue-600 dark:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </div>
            <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-700 group-hover:text-blue-600 dark:group-hover:text-blue-600">Nouveau produit</span>
        </a>

        <a href="{{ route('movements.index') }}" class="flex items-center p-4 border border-gray-200 dark:border-gray-200 rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-50 transition-all group">
            <div class="flex-shrink-0 w-10 h-10 bg-green-100 dark:bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200 dark:group-hover:bg-green-200 transition-colors">
                <svg class="w-5 h-5 text-green-600 dark:text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </div>
            <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-700 group-hover:text-green-600 dark:group-hover:text-green-600">Nouvelle entrée</span>
        </a>

        <a href="{{ route('requests.index') }}" class="flex items-center p-4 border border-gray-200 dark:border-gray-200 rounded-lg hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-50 transition-all group">
            <div class="flex-shrink-0 w-10 h-10 bg-purple-100 dark:bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-200 dark:group-hover:bg-purple-200 transition-colors">
                <svg class="w-5 h-5 text-purple-600 dark:text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </div>
            <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-700 group-hover:text-purple-600 dark:group-hover:text-purple-600">Nouvelle demande</span>
        </a>

        <a href="{{ route('stocks.index') }}" class="flex items-center p-4 border border-gray-200 dark:border-gray-200 rounded-lg hover:border-orange-500 hover:bg-orange-50 dark:hover:bg-orange-50 transition-all group">
            <div class="flex-shrink-0 w-10 h-10 bg-orange-100 dark:bg-orange-100 rounded-lg flex items-center justify-center group-hover:bg-orange-200 dark:group-hover:bg-orange-200 transition-colors">
                <svg class="w-5 h-5 text-orange-600 dark:text-orange-600" 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" />
                </svg>
            </div>
            <span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-700 group-hover:text-orange-600 dark:group-hover:text-orange-600">Voir les stocks</span>
        </a>
    </div>
</div>
</div>
@endsection
