@extends('layouts.app')

@section('title', 'Inventaire')
@section('page-title', 'Inventaire')

@section('content')
<div class="space-y-6">
    <!-- En-tête -->
    <div class="flex justify-between items-center flex-wrap gap-3">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Inventaire</h1>
            <p class="mt-1 text-sm text-gray-600">Vue d'ensemble des stocks par catégorie</p>
        </div>
        <a href="{{ route('inventory.export', request()->query()) }}" class="inline-flex items-center px-4 py-2.5 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
            Exporter
        </a>
    </div>

    <!-- Filtre -->
    <div class="bg-white shadow-sm border border-gray-200 rounded-xl p-4">
        <form method="GET" action="{{ route('inventory.index') }}" class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label for="inventory-search" class="block text-xs font-medium text-gray-600 mb-1">Rechercher une catégorie</label>
                <input id="inventory-search" type="text" name="search" value="{{ request('search') }}" placeholder="Nom de la catégorie..." class="w-full px-4 py-2.5 border border-gray-200 rounded-lg bg-white text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                    Filtrer
                </button>
                @if(request()->has('search'))
                <a href="{{ route('inventory.index') }}" class="px-5 py-2.5 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    Réinitialiser
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Boutons Tout ouvrir / Tout fermer -->
    @if($categories->isNotEmpty())
    <div class="flex gap-2">
        <button type="button" id="inventory-expand-all" class="text-sm font-medium text-blue-600 hover:text-blue-700">
            Tout ouvrir
        </button>
        <span class="text-gray-300">|</span>
        <button type="button" id="inventory-collapse-all" class="text-sm font-medium text-gray-600 hover:text-gray-700">
            Tout fermer
        </button>
    </div>
    @endif

    <!-- Inventaire par catégories (accordéon) -->
    <div id="inventory-accordion" class="space-y-2">
        @forelse($categories as $category)
        @php
            $categoryTotal = $category->products->sum(fn($p) => (int) ($p->total_stock ?? 0));
        @endphp
        <details class="group bg-white shadow-sm border border-gray-200 rounded-xl overflow-hidden" id="category-{{ $category->id }}">
            <summary class="flex items-center justify-between px-6 py-3 cursor-pointer list-none hover:bg-blue-50/50 transition-colors select-none">
                <span class="flex items-center gap-3">
                    <svg class="w-5 h-5 text-blue-500 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                    <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                        </svg>
                    </div>
                    <div>
                        <span class="font-semibold text-gray-900">{{ $category->name }}</span>
                        <span class="text-xs text-gray-500 ml-2">{{ $category->reference ?? '' }} · {{ $category->products->count() }} produit(s)</span>
                    </div>
                </span>
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium
                    {{ $categoryTotal <= 0 ? 'bg-red-100 text-red-800' : ($categoryTotal <= 20 ? 'bg-amber-100 text-amber-800' : 'bg-green-100 text-green-800') }}">
                    {{ $categoryTotal }} unités
                </span>
            </summary>
            <div class="border-t border-gray-200 overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Produit</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Référence</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Fournisseur</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Unité</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Stock</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Statut</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($category->products as $product)
                        <tr class="hover:bg-blue-50/50 transition-colors">
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ $product->name }}</td>
                            <td class="px-6 py-3 text-sm text-gray-600">{{ $product->reference ?? '-' }}</td>
                            <td class="px-6 py-3 text-sm text-gray-700">{{ $product->supplier?->name ?? '-' }}</td>
                            <td class="px-6 py-3 text-sm text-gray-700">{{ $product->unit?->abbreviation ?? $product->unit?->name ?? '-' }}</td>
                            <td class="px-6 py-3">
                                @php $qty = (int) ($product->total_stock ?? 0); @endphp
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {{ $qty <= 0 ? 'bg-red-100 text-red-800' : ($qty <= 10 ? 'bg-amber-100 text-amber-800' : 'bg-green-100 text-green-800') }}">
                                    {{ $qty }}
                                </span>
                            </td>
                            <td class="px-6 py-3">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $product->status === 'actif' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ $product->status === 'actif' ? 'Actif' : 'Archivé' }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-6 text-center text-sm text-gray-500">Aucun produit dans cette catégorie</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </details>
        @empty
        <div class="bg-white shadow-sm border border-gray-200 rounded-xl p-12 text-center">
            <svg class="mx-auto h-16 w-16 text-gray-300 mb-4" 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 2" />
            </svg>
            <p class="text-sm font-medium text-gray-600 mb-1">Aucune catégorie trouvée</p>
            <p class="text-xs text-gray-500">Utilisez un autre critère de recherche ou vérifiez que des catégories existent.</p>
        </div>
        @endforelse
    </div>
</div>

@if($categories->isNotEmpty())
<script>
document.addEventListener('DOMContentLoaded', function() {
    var expandBtn = document.getElementById('inventory-expand-all');
    var collapseBtn = document.getElementById('inventory-collapse-all');
    var getDetails = function() { return document.querySelectorAll('#inventory-accordion details'); };
    if (expandBtn) expandBtn.addEventListener('click', function() { getDetails().forEach(function(el) { el.setAttribute('open', ''); }); });
    if (collapseBtn) collapseBtn.addEventListener('click', function() { getDetails().forEach(function(el) { el.removeAttribute('open'); }); });
});
</script>
@endif
@endsection
