@section('title', ($indexTitle ?? ''))

<x-app-layout :assets="$assets ?? []">
    <div class="row">
        <div class="col-md-12">
            <div class="card" data-aos="fade-up" data-aos-delay="500">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="header-title">
                        <h4 class="card-title text-danger"><i class="fas fa-exclamation-triangle me-2"></i>Alertes Stock : Produits à Approvisionner</h4>
                        <p class="mb-0 text-muted">Affiche uniquement les produits dont le stock total est inférieur ou égal au seuil minimum défini.</p>
                    </div>
                    <div class="card-action">
                        <a href="{{ route('products.index') }}" class="btn btn-primary btn-sm">Gérer les produits</a>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="p-3 border-bottom">
                        <form method="GET" action="{{ route('dashboard') }}">
                            <div class="row g-3">
                                <div class="col-md-5">
                                    <label class="form-label">Produit</label>
                                    <select name="product_id" id="productSelect" class="form-control select2-product">
                                        <option value="">Rechercher un produit...</option>
                                        @foreach($products as $prod)
                                            <option value="{{ $prod->id }}" {{ request('product_id') == $prod->id ? 'selected' : '' }}>
                                                {{ $prod->designation }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Dépôt</label>
                                    <select name="warehouse_id" class="form-select">
                                        <option value="">Tous les dépôts</option>
                                        @foreach($warehouses as $w)
                                            <option value="{{ $w->id }}" {{ request('warehouse_id') == $w->id ? 'selected' : '' }}>{{ $w->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 align-self-end">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <svg class="me-2" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M3 7H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                                            <path d="M6 12H18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                                            <path d="M10 17H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                                        </svg>
                                        Filtrer
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="table-responsive mt-3">
                        <table class="table table-striped mb-0">
                            <thead class="bg-soft-danger">
                                <tr>
                                    <th class="ps-4">PRODUIT</th>
                                    <th>DÉPÔT</th>
                                    <th>FAMILLE</th>
                                    <th class="text-center">STOCK ACTUEL</th>
                                    <th class="text-center">SEUIL MINIMUM</th>
                                    <th class="text-center">STATUT</th>
                                    <th class="text-center pe-4">ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($lowStockProducts as $product)
                                    <tr>
                                        <td class="ps-4">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-40 rounded bg-soft-secondary me-3 d-flex align-items-center justify-content-center">
                                                    <i class="fas fa-box text-secondary"></i>
                                                </div>
                                                <h6>{{ $product->designation }}</h6>
                                            </div>
                                        </td>
                                        <td>{{ $product->warehouse_name }}</td>
                                        <td>{{ $product->category_name ?? '-' }}</td>
                                        <td class="text-center">
                                            <span class="h6 {{ $product->current_stock <= 0 ? 'text-danger' : 'text-warning' }}">
                                                {{ (float)$product->current_stock }} {{ $product->metric }}
                                            </span>
                                        </td>
                                        <td class="text-center">{{ (int)$product->min_stock }} {{ $product->metric }}</td>
                                        <td class="text-center">
                                            @if($product->current_stock <= 0)
                                                <span class="badge bg-danger">Rupture de stock</span>
                                            @else
                                                <span class="badge bg-warning text-dark">Stock faible</span>
                                            @endif
                                        </td>
                                        <td class="text-center pe-4">
                                            <div class="flex align-items-center list-user-action justify-content-center">
                                                <a class="btn btn-sm btn-icon btn-warning" data-bs-toggle="tooltip" title="Modifier le seuil" href="{{ route('products.edit', $product->product_id) }}">
                                                    <span class="btn-inner">
                                                        <svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M11.4925 2.78906H7.75349C4.67849 2.78906 2.75049 4.96606 2.75049 8.04806V16.3621C2.75049 19.4441 4.66949 21.6211 7.75349 21.6211H16.5775C19.6625 21.6211 21.5815 19.4441 21.5815 16.3621V12.3341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.82812 10.921L16.3011 3.44799C17.2321 2.51799 18.7411 2.51799 19.6721 3.44799L20.8891 4.66499C21.8201 5.59599 21.8201 7.10599 20.8891 8.03599L13.3801 15.545C12.9731 15.952 12.4211 16.181 11.8451 16.181H8.09912L8.19312 12.401C8.20712 11.845 8.43412 11.315 8.82812 10.921Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                            <path d="M15.1655 4.60254L19.7315 9.16854" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        </svg>
                                                    </span>
                                                </a>
                                                <a class="btn btn-sm btn-icon btn-success" data-bs-toggle="tooltip" title="Ajouter du stock" href="{{ route('stock.create') }}">
                                                    <span class="btn-inner">
                                                        <svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M12.0001 8.32739V15.6537" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                            <path d="M15.6666 11.9904H8.3335" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.0857 2.72388H7.91406C4.93506 2.72388 3.00006 4.88788 3.00006 7.87388V16.1259C3.00006 19.1119 4.92106 21.2759 7.91406 21.2759H16.0857C19.0787 21.2759 21.0007 19.1119 21.0007 16.1259V7.87388C21.0007 4.88788 19.0787 2.72388 16.0857 2.72388Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        </svg>
                                                    </span>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5">
                                            <i class="fas fa-check-circle text-success fa-3x mb-3"></i>
                                            <p class="h5">Tous les niveaux de stock sont corrects !</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>



<script>
    $(document).ready(function() {
        $('.select2-product').select2({
            placeholder: "Rechercher un produit...",
            allowClear: true,
            width: '100%' // Fix for bootstrap width issues
        });
    });
</script>