@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des produits en faible stock</h4>
            <h6>Gérer les produits avec un stock inférieur ou égal au seuil d'alerte</h6>
        </div>
    </div>
    <ul class="table-top-head">
        <li>
            <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Refresh">
                <i data-feather="rotate-ccw"></i>
            </a>
        </li>
    </ul>
    <div class="page-btn">
        <a href="{{ route('inventory.add-product') }}" class="btn btn-added"><i data-feather="plus-circle" class="me-2"></i>Ajouter un produit</a>
    </div>
</div>
<div class="card table-list-card">
    <div class="card-body">
        @if($products->count() > 0)
        <div class="table-top">
            <div class="search-set">
                <div class="search-input">
                    <a href="javascript:void(0);" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
                </div>
            </div>
        </div>
        <div class="table-responsive product-list">
            <table class="table datanew">
                <thead>
                    <tr>
                        <th class="no-sort">
                            <label class="checkboxs">
                                <input type="checkbox" id="select-all">
                                <span class="checkmarks"></span>
                            </label>
                        </th>
                        <th>Produit</th>
                        <th>Catégorie</th>
                        <th>Prix</th>
                        <th>Quantité</th>
                        <th>Seuil d'alerte</th>
                        <th>Créé par</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                        <tr>
                            <td>
                                <label class="checkboxs">
                                    <input type="checkbox">
                                    <span class="checkmarks"></span>
                                </label>
                            </td>
                            <td>
                                <div class="productimgname">
                                    <a href="javascript:void(0);" class="product-img stock-img">
                                        @if($product->image !== 'NULL' && $product->image)
                                            <img src="{{ asset('images/products/' . $product->image) }}" alt="image-{{ $product->name }}">
                                        @else
                                            <img src="{{ asset('assets/img/default.jpg') }}" alt="image défaut">
                                        @endif
                                    </a>
                                    <a href="javascript:void(0);">{{ Str::limit($product->name, 15, '...') }}</a>
                                </div>
                            </td>
                            <td>{{ $product->category->name ?? '-' }}</td>
                            <td>{{ number_format($product->price, 0, ' ', ' ') }} FCFA</td>
                            <td>{{ $product->quantity }}</td>
                            <td>{{ $product->seuil_alert }}</td>
                            <td>{{ $product->user ? $product->user->nom . ' ' . $product->user->prenom : '-' }}</td>
                            <td class="action-table-data">
                                <div class="edit-delete-action">
                                    <a class="me-2 edit-icon p-2" href="#" data-bs-toggle="modal" data-bs-target="#edit-product-{{ $product->id }}">
                                        <i data-feather="plus-square" class="feather-plus-square"></i>
                                    </a>
                                    <a class="me-2 edit-icon p-2" href="{{ route('inventory.products.details', $product->id) }}">
                                        <i data-feather="eye" class="feather-eye"></i>
                                    </a>
                                    <a class="me-2 p-2" href="{{ route('inventory.products.edit', $product->id) }}">
                                        <i data-feather="edit" class="feather-edit"></i>
                                    </a>
                                    <a class="confirm-text p-2" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('delete-product-{{ $product->id }}').submit();">
                                        <i data-feather="trash-2" class="feather-trash-2"></i>
                                    </a>
                                    <form id="delete-product-{{ $product->id }}" action="{{ route('inventory.products.delete', $product->id) }}" method="POST" class="d-none">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @include('inventory.products.partials.edit_quantity', ['product' => $product])
                    @empty
                        <tr>
                            <td colspan="8" class="text-center">Aucun produit en faible stock trouvé.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <!-- Pagination links -->
            <div class="pagination">
                {{ $products->links('pagination::bootstrap-5') }}
            </div>
        </div>
        @else
            <p class="text-center text-danger">Aucun produit en faible stock.</p>
        @endif
    </div>
</div>
@endsection