@extends('layouts.app')

@section('title', 'Inventaire')

@section('content')
<div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-3 py-4">
        <div class="max-w-7xl mx-auto">
            
            {{-- Guide d'utilisation de l'inventaire --}}
            @if(($totalItems ?? 0) == 0)
                <x-help-box type="info" title="📦 Gérez votre stock facilement" :dismissible="true" storageKey="inventory-intro-tip">
                    <p class="mb-2">L'inventaire vous permet de suivre vos produits et leur rentabilité :</p>
                    <ul class="space-y-1">
                        <li>• <strong>Prix d'achat vs vente</strong> – Calculez automatiquement vos marges</li>
                        <li>• <strong>Alertes stock bas</strong> – Soyez prévenu quand réapprovisionner</li>
                        <li>• <strong>Ventes flash</strong> – Écoulez rapidement votre stock en promotion</li>
                    </ul>
                </x-help-box>
            @endif

            {{-- En-tête compact --}}
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
                <div>
                    <h1 class="text-xl sm:text-2xl font-bold text-gray-900 flex items-center gap-2">
                        <span class="text-2xl">📦</span> Inventaire
                    </h1>
                    <p class="text-sm text-gray-500">{{ $totalItems ?? 0 }} article(s) en stock</p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('prestataire.inventory.create') }}" class="inline-flex items-center px-3 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        Nouvel Article
                    </a>
                    <a href="{{ route('prestataire.urgent-sales.create') }}" class="inline-flex items-center px-3 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium hover:bg-orange-600 transition">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        Vente Flash
                    </a>
                </div>
            </div>

            {{-- Statistiques compactes en ligne --}}
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 sm:gap-3 mb-4">
                <div class="bg-white rounded-lg shadow-sm p-3 border border-gray-100">
                    <div class="flex items-center gap-2">
                        <div class="p-1.5 bg-blue-100 rounded-lg">
                            <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-gray-900">{{ $totalItems ?? 0 }}</p>
                            <p class="text-xs text-gray-500">Articles</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm p-3 border border-gray-100">
                    <div class="flex items-center gap-2">
                        <div class="p-1.5 bg-purple-100 rounded-lg">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-gray-900">{{ number_format($totalCost ?? 0, 0) }}€</p>
                            <p class="text-xs text-gray-500">Coût</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm p-3 border border-gray-100">
                    <div class="flex items-center gap-2">
                        <div class="p-1.5 bg-green-100 rounded-lg">
                            <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-gray-900">{{ number_format($totalSellingValue ?? 0, 0) }}€</p>
                            <p class="text-xs text-gray-500">Vente</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm p-3 border border-gray-100">
                    <div class="flex items-center gap-2">
                        <div class="p-1.5 bg-emerald-100 rounded-lg">
                            <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-emerald-600">+{{ number_format($totalProfit ?? 0, 0) }}€</p>
                            <p class="text-xs text-gray-500">Bénéfice</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm p-3 border border-gray-100">
                    <div class="flex items-center gap-2">
                        <div class="p-1.5 bg-amber-100 rounded-lg">
                            <svg class="w-4 h-4 text-amber-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>
                        <div>
                            <p class="text-lg font-bold text-gray-900">{{ number_format($averageMargin ?? 0, 0) }}%</p>
                            <p class="text-xs text-gray-500">Marge</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Alertes Stock --}}
            @if(isset($lowStockItems) && $lowStockItems > 0)
            <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4 flex items-center gap-3">
                <div class="p-2 bg-amber-100 rounded-full">
                    <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-amber-800">{{ $lowStockItems }} article(s) en stock faible</p>
                </div>
                <button onclick="filterLowStock()" class="px-3 py-1.5 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition text-xs font-medium">
                    Voir
                </button>
            </div>
            @endif

            {{-- Filtres compacts --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-3 mb-4">
                <div class="flex flex-wrap items-center gap-2">
                    <div class="flex-1 min-w-[200px]">
                        <div class="relative">
                            <input type="text" id="searchInput" placeholder="Rechercher..." 
                                   class="w-full pl-8 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                            <svg class="w-4 h-4 text-gray-400 absolute left-2.5 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                    </div>
                    <select id="categoryFilter" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                        <option value="">Catégorie</option>
                        <option value="equipment">Équipement</option>
                        <option value="material">Matériel</option>
                        <option value="consumable">Consommable</option>
                        <option value="accessory">Accessoire</option>
                        <option value="other">Autre</option>
                    </select>
                    <select id="stockFilter" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                        <option value="">Stock</option>
                        <option value="available">En stock</option>
                        <option value="low">Faible</option>
                        <option value="out">Rupture</option>
                    </select>
                    <form action="{{ route('prestataire.inventory.export') }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition flex items-center gap-1.5 text-sm">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                            Export
                        </button>
                    </form>
                </div>
            </div>

            {{-- Liste des Articles --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                @if(isset($items) && $items->count() > 0)
                    {{-- Vue Mobile (Cards) --}}
                    <div class="block sm:hidden divide-y divide-gray-100">
                        @foreach($items as $item)
                            @php
                                $costPrice = $item->cost_per_unit ?? 0;
                                $sellingPrice = $item->selling_price ?? 0;
                                $margin = $costPrice > 0 ? (($sellingPrice - $costPrice) / $costPrice) * 100 : 0;
                                $stockStatus = $item->quantity <= 0 ? 'out' : ($item->quantity <= ($item->reorder_level ?? 5) ? 'low' : 'ok');
                                $photos = is_array($item->photos) ? $item->photos : json_decode($item->photos, true);
                                $firstPhoto = $photos[0] ?? null;
                            @endphp
                            <div class="p-3 item-row" data-name="{{ strtolower($item->name) }}" data-category="{{ $item->category }}" data-stock="{{ $stockStatus }}">
                                <div class="flex gap-3">
                                    {{-- Image --}}
                                    @if($firstPhoto)
                                        <img src="{{ asset('storage/' . $firstPhoto) }}" alt="{{ $item->name }}" class="w-14 h-14 rounded-lg object-cover border border-gray-200 flex-shrink-0">
                                    @else
                                        <div class="w-14 h-14 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <svg class="w-6 h-6 text-gray-400" 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>
                                    @endif
                                    {{-- Infos --}}
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-start justify-between gap-2">
                                            <div class="min-w-0">
                                                <p class="font-medium text-gray-900 text-sm truncate">{{ $item->name }}</p>
                                                <p class="text-xs text-gray-400">{{ $item->sku ?? 'N/A' }} @if($item->urgent_sale_id)⚡@endif</p>
                                            </div>
                                            <span class="font-bold text-sm text-gray-900 whitespace-nowrap">{{ number_format($sellingPrice, 0) }}€</span>
                                        </div>
                                        <div class="flex items-center justify-between mt-2">
                                            <div class="flex items-center gap-2">
                                                <span class="text-xs font-medium px-1.5 py-0.5 rounded {{ $stockStatus === 'out' ? 'bg-red-100 text-red-600' : ($stockStatus === 'low' ? 'bg-amber-100 text-amber-600' : 'bg-green-100 text-green-600') }}">
                                                    Qté: {{ $item->quantity }}
                                                </span>
                                                <span class="text-xs px-1.5 py-0.5 rounded {{ $margin >= 15 ? 'bg-emerald-100 text-emerald-600' : ($margin >= 0 ? 'bg-amber-100 text-amber-600' : 'bg-red-100 text-red-600') }}">
                                                    {{ $margin >= 0 ? '+' : '' }}{{ number_format($margin, 0) }}%
                                                </span>
                                            </div>
                                            <div class="flex items-center gap-1">
                                                <a href="{{ route('prestataire.inventory.edit', $item) }}" class="p-1.5 text-indigo-600 hover:bg-indigo-50 rounded">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                                </a>
                                                <button onclick="openStockModal({{ $item->id }}, '{{ addslashes($item->name) }}', {{ $item->quantity }})" class="p-1.5 text-green-600 hover:bg-green-50 rounded">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
                                                </button>
                                                <a href="{{ route('prestataire.urgent-sales.from-inventory', $item->id) }}" class="p-1.5 text-orange-600 hover:bg-orange-50 rounded">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Vue Desktop (Table) --}}
                    <div class="hidden sm:block overflow-x-auto">
                        <table class="w-full" id="inventoryTable">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase">Article</th>
                                    <th class="px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase hidden md:table-cell">Cat.</th>
                                    <th class="px-3 py-2.5 text-center text-xs font-semibold text-gray-600 uppercase">Qté</th>
                                    <th class="px-3 py-2.5 text-right text-xs font-semibold text-gray-600 uppercase hidden lg:table-cell">Achat</th>
                                    <th class="px-3 py-2.5 text-right text-xs font-semibold text-gray-600 uppercase">Vente</th>
                                    <th class="px-3 py-2.5 text-right text-xs font-semibold text-gray-600 uppercase hidden lg:table-cell">Marge</th>
                                    <th class="px-3 py-2.5 text-right text-xs font-semibold text-gray-600 uppercase hidden xl:table-cell">Profit</th>
                                    <th class="px-3 py-2.5 text-center text-xs font-semibold text-gray-600 uppercase">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($items as $item)
                                    @php
                                        $costPrice = $item->cost_per_unit ?? 0;
                                        $sellingPrice = $item->selling_price ?? 0;
                                        $margin = $costPrice > 0 ? (($sellingPrice - $costPrice) / $costPrice) * 100 : 0;
                                        $totalItemProfit = ($sellingPrice - $costPrice) * $item->quantity;
                                        $stockStatus = $item->quantity <= 0 ? 'out' : ($item->quantity <= ($item->reorder_level ?? 5) ? 'low' : 'ok');
                                        $photos = is_array($item->photos) ? $item->photos : json_decode($item->photos, true);
                                        $firstPhoto = $photos[0] ?? null;
                                    @endphp
                                    <tr class="hover:bg-gray-50 transition item-row" 
                                        data-name="{{ strtolower($item->name) }}" 
                                        data-category="{{ $item->category }}"
                                        data-stock="{{ $stockStatus }}">
                                        <td class="px-3 py-2.5">
                                            <div class="flex items-center gap-2.5">
                                                @if($firstPhoto)
                                                    <img src="{{ asset('storage/' . $firstPhoto) }}" alt="{{ $item->name }}" 
                                                         class="w-10 h-10 rounded-lg object-cover border border-gray-200">
                                                @else
                                                    <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                                                        <svg class="w-5 h-5 text-gray-400" 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>
                                                @endif
                                                <div class="min-w-0">
                                                    <p class="font-medium text-gray-900 text-sm truncate max-w-[150px]">{{ $item->name }}</p>
                                                    <div class="flex items-center gap-1.5">
                                                        <span class="text-xs text-gray-400">{{ $item->sku ?? 'N/A' }}</span>
                                                        @if($item->urgent_sale_id)
                                                            <span class="text-xs text-orange-500">⚡</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-3 py-2.5 hidden md:table-cell">
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                                {{ $item->category === 'equipment' ? 'bg-blue-100 text-blue-700' : '' }}
                                                {{ $item->category === 'material' ? 'bg-purple-100 text-purple-700' : '' }}
                                                {{ $item->category === 'consumable' ? 'bg-green-100 text-green-700' : '' }}
                                                {{ $item->category === 'accessory' ? 'bg-pink-100 text-pink-700' : '' }}
                                                {{ !in_array($item->category, ['equipment', 'material', 'consumable', 'accessory']) ? 'bg-gray-100 text-gray-700' : '' }}">
                                                {{ ucfirst(substr($item->category ?? 'Autre', 0, 6)) }}
                                            </span>
                                        </td>
                                        <td class="px-3 py-2.5 text-center">
                                            <span class="text-sm font-semibold {{ $stockStatus === 'out' ? 'text-red-600' : ($stockStatus === 'low' ? 'text-amber-600' : 'text-gray-900') }}">
                                                {{ $item->quantity }}
                                            </span>
                                            @if($stockStatus === 'low')
                                                <span class="text-amber-500 text-xs">⚠</span>
                                            @elseif($stockStatus === 'out')
                                                <span class="text-red-500 text-xs">✗</span>
                                            @endif
                                        </td>
                                        <td class="px-3 py-2.5 text-right hidden lg:table-cell">
                                            <span class="text-gray-600 text-sm">{{ number_format($costPrice, 0) }}€</span>
                                        </td>
                                        <td class="px-3 py-2.5 text-right">
                                            <span class="text-gray-900 font-semibold text-sm">{{ number_format($sellingPrice, 0) }}€</span>
                                        </td>
                                        <td class="px-3 py-2.5 text-right hidden lg:table-cell">
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold
                                                {{ $margin >= 30 ? 'bg-emerald-100 text-emerald-700' : '' }}
                                                {{ $margin >= 15 && $margin < 30 ? 'bg-green-100 text-green-700' : '' }}
                                                {{ $margin >= 0 && $margin < 15 ? 'bg-amber-100 text-amber-700' : '' }}
                                                {{ $margin < 0 ? 'bg-red-100 text-red-700' : '' }}">
                                                {{ $margin >= 0 ? '+' : '' }}{{ number_format($margin, 0) }}%
                                            </span>
                                        </td>
                                        <td class="px-3 py-2.5 text-right hidden xl:table-cell">
                                            <span class="font-semibold text-sm {{ $totalItemProfit >= 0 ? 'text-emerald-600' : 'text-red-600' }}">
                                                {{ $totalItemProfit >= 0 ? '+' : '' }}{{ number_format($totalItemProfit, 0) }}€
                                            </span>
                                        </td>
                                        <td class="px-3 py-2.5">
                                            <div class="flex items-center justify-center gap-1">
                                                <a href="{{ route('prestataire.inventory.edit', $item) }}" 
                                                   class="p-1.5 text-indigo-600 hover:bg-indigo-50 rounded-lg transition" title="Modifier">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                                    </svg>
                                                </a>
                                                <button onclick="openStockModal({{ $item->id }}, '{{ addslashes($item->name) }}', {{ $item->quantity }})" 
                                                        class="p-1.5 text-green-600 hover:bg-green-50 rounded-lg transition" title="Stock">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                                                    </svg>
                                                </button>
                                                <a href="{{ route('prestataire.urgent-sales.from-inventory', $item->id) }}" 
                                                   class="p-1.5 text-orange-600 hover:bg-orange-50 rounded-lg transition" title="Flash">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                                    </svg>
                                                </a>
                                                <form action="{{ route('prestataire.inventory.destroy', $item) }}" method="POST" class="inline"
                                                      onsubmit="return confirm('Supprimer cet article ?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition" title="Supprimer">
                                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                                        </svg>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    @if($items->hasPages())
                        <div class="p-3 border-t border-gray-100 bg-gray-50">
                            {{ $items->links() }}
                        </div>
                    @endif
                @else
                    {{-- État Vide --}}
                    <div class="p-10 text-center">
                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-indigo-500" 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>
                        <h3 class="text-lg font-bold text-gray-900 mb-1">Inventaire vide</h3>
                        <p class="text-gray-500 text-sm mb-4">Ajoutez des articles pour gérer vos stocks.</p>
                        <div class="flex flex-wrap items-center justify-center gap-2">
                            <a href="{{ route('prestataire.inventory.create') }}" 
                               class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                </svg>
                                Ajouter un article
                            </a>
                            <a href="{{ route('prestataire.urgent-sales.create') }}" 
                               class="inline-flex items-center px-4 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium hover:bg-orange-600 transition">
                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
                                Vente flash
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Modal Ajustement Stock --}}
<div id="stockModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-2xl max-w-sm w-full mx-4 overflow-hidden">
        <div class="bg-indigo-600 px-4 py-3 flex items-center justify-between">
            <div>
                <h3 class="text-base font-bold text-white">Ajuster le stock</h3>
                <p id="stockItemName" class="text-white/80 text-xs"></p>
            </div>
            <button type="button" onclick="closeStockModal()" class="text-white/80 hover:text-white">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <form id="stockForm" method="POST" class="p-4">
            @csrf
            
            <div class="flex items-center justify-between mb-4">
                <span class="text-sm text-gray-600">Stock actuel</span>
                <span class="text-2xl font-bold text-indigo-600" id="currentStock">0</span>
            </div>

            <div class="mb-4">
                <div class="grid grid-cols-2 gap-2">
                    <button type="button" onclick="setStockAction('add')" id="btnAdd"
                            class="px-3 py-2 border-2 rounded-lg text-center text-sm font-medium transition
                                   border-green-500 text-green-600 bg-green-50">
                        ➕ Ajouter
                    </button>
                    <button type="button" onclick="setStockAction('remove')" id="btnRemove"
                            class="px-3 py-2 border-2 rounded-lg text-center text-sm font-medium transition
                                   border-gray-300 text-gray-600 hover:border-red-500 hover:text-red-600">
                        ➖ Retirer
                    </button>
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Quantité</label>
                <input type="number" name="quantity" id="stockQuantity" min="1" value="1" required
                       class="w-full px-3 py-2 text-lg font-bold text-center border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200">
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Raison (optionnel)</label>
                <input type="text" name="reason" placeholder="Ex: Réappro, Vente, Casse..."
                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200">
            </div>

            <input type="hidden" name="action" id="stockAction" value="add">

            <div class="flex gap-2">
                <button type="button" onclick="closeStockModal()" 
                        class="flex-1 px-3 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition">
                    Annuler
                </button>
                <button type="submit" 
                        class="flex-1 px-3 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
                    Confirmer
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Filtres
    document.getElementById('searchInput').addEventListener('input', filterItems);
    document.getElementById('categoryFilter').addEventListener('change', filterItems);
    document.getElementById('stockFilter').addEventListener('change', filterItems);

    function filterItems() {
        const search = document.getElementById('searchInput').value.toLowerCase();
        const category = document.getElementById('categoryFilter').value;
        const stock = document.getElementById('stockFilter').value;
        
        document.querySelectorAll('.item-row').forEach(row => {
            const name = row.dataset.name;
            const rowCategory = row.dataset.category;
            const rowStock = row.dataset.stock;
            
            let show = true;
            
            if (search && !name.includes(search)) show = false;
            if (category && rowCategory !== category) show = false;
            if (stock) {
                if (stock === 'available' && rowStock !== 'ok') show = false;
                if (stock === 'low' && rowStock !== 'low') show = false;
                if (stock === 'out' && rowStock !== 'out') show = false;
            }
            
            row.style.display = show ? '' : 'none';
        });
    }

    function filterLowStock() {
        document.getElementById('stockFilter').value = 'low';
        filterItems();
    }

    // Modal Stock
    let currentItemId = null;
    
    function openStockModal(id, name, quantity) {
        currentItemId = id;
        document.getElementById('stockItemName').textContent = name;
        document.getElementById('currentStock').textContent = quantity;
        document.getElementById('stockForm').action = `/prestataire/inventory/${id}/adjust-stock`;
        document.getElementById('stockModal').classList.remove('hidden');
        document.getElementById('stockModal').classList.add('flex');
        setStockAction('add');
    }
    
    function closeStockModal() {
        document.getElementById('stockModal').classList.add('hidden');
        document.getElementById('stockModal').classList.remove('flex');
    }
    
    function setStockAction(action) {
        document.getElementById('stockAction').value = action;
        const btnAdd = document.getElementById('btnAdd');
        const btnRemove = document.getElementById('btnRemove');
        
        if (action === 'add') {
            btnAdd.classList.add('border-green-500', 'text-green-600', 'bg-green-50');
            btnAdd.classList.remove('border-gray-300', 'text-gray-600');
            btnRemove.classList.remove('border-red-500', 'text-red-600', 'bg-red-50');
            btnRemove.classList.add('border-gray-300', 'text-gray-600');
        } else {
            btnRemove.classList.add('border-red-500', 'text-red-600', 'bg-red-50');
            btnRemove.classList.remove('border-gray-300', 'text-gray-600');
            btnAdd.classList.remove('border-green-500', 'text-green-600', 'bg-green-50');
            btnAdd.classList.add('border-gray-300', 'text-gray-600');
        }
    }
    
    // Fermer modal avec Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeStockModal();
    });
</script>
@endpush

@endsection