@extends('layouts.app')

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

@section('content')
<div class="space-y-8 min-w-0">
    <!-- Actions rapides -->
    @unless(auth()->user()->hasRole('Responsable du département'))
    <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-5">Actions rapides</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            <a href="{{ route('product-stocks.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">Produits & Stocks</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>

        </div>
    </div>
    @endunless

    <!-- Statistiques principales -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 sm:gap-6">
        <!-- Total Produits -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Total Produits</p>
                    <p class="text-3xl font-bold text-white">{{ $totalProducts ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" 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" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Stock Total -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Stock Total</p>
                    <p class="text-3xl font-bold text-white">{{ $totalStock ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Mouvements aujourd'hui -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Mouvements aujourd'hui</p>
                    <p class="text-3xl font-bold text-white">{{ $movementsToday ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Total équipements -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Total équipements</p>
                    <p class="text-3xl font-bold text-white">{{ $equipmentCount ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Demandes en attente -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Demandes en attente</p>
                    <p class="text-3xl font-bold text-white">{{ $pendingRequests ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" 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>
                </div>
            </div>
        </div>

        <!-- Demandes validées -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #059669 0%, #047857 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Demandes validées</p>
                    <p class="text-3xl font-bold text-white">{{ $validatedRequests ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Demandes rejetées -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Demandes rejetées</p>
                    <p class="text-3xl font-bold text-white">{{ $rejectedRequests ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Nombre de fournisseurs -->
        <div class="rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 group overflow-hidden" style="background: linear-gradient(135deg, #b45309 0%, #92400e 100%);">
            <div class="flex items-start justify-between relative">
                <div class="flex-1 relative z-10">
                    <p class="text-sm font-medium mb-1" style="color: rgba(255,255,255,0.95);">Fournisseurs</p>
                    <p class="text-3xl font-bold text-white">{{ $suppliersCount ?? 0 }}</p>
                </div>
                <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-white relative z-10 group-hover:scale-110 transition-transform" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">
                    <svg class="w-6 h-6" 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 0z" />
                    </svg>
                </div>
            </div>
        </div>


    </div>

    <!-- Graphiques et tableaux -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8">
        <!-- 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-5">
            <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 lg:gap-8 mt-8">
    <!-- 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>
@endsection
