@extends('layouts.app')

@section('content')
    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome/css/fontawesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome/css/all.min.css') }}">

    <style>
        .table-responsive {
            overflow-x: auto;
        }
        .product-img img {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 5px;
            margin-right: 10px;
        }
        .productimgname {
            display: flex;
            align-items: center;
        }
        .edit-delete-action {
            display: flex;
            align-items: center;
        }
        .edit-icon, .confirm-text {
            padding: 5px;
        }
        .error-message {
            padding: 20px;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            margin-bottom: 20px;
        }
    </style>

    <div class="page-header">
        <div class="add-item d-flex">
            <div class="page-title">
                <h4>Liste des produits expirés</h4>
                <h6>Gérer tous les produits expirés</h6>
            </div>
        </div>
        <ul class="table-top-head">
            <li>
                <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Rafraîchir">
                    <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>

    @if (session('error'))
        <div class="error-message">
            <p class="text-danger">{{ session('error') }}</p>
        </div>
    @endif

    <div class="card table-list-card">
        <div class="card-body">
            @if($products->isNotEmpty())
                <div class="table-top">
                    <div class="search-set">
                        <div class="search-input">
                            <input type="text" id="search" class="form-control" placeholder="Rechercher un produit...">
                            <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>Date d'expiration</th>
                                <th>Créé par</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="product-list">
                            @foreach($products as $product)
                                <tr>
                                    <td>
                                        <label class="checkboxs">
                                            <input type="checkbox" class="product-checkbox" data-id="{{ $product->id }}">
                                            <span class="checkmarks"></span>
                                        </label>
                                    </td>
                                    <td>
                                        <div class="productimgname">
                                            <a href="javascript:void(0);" class="product-img stock-img">
                                                <img src="{{ $product->image ? asset('images/products/' . $product->image) : asset('assets/img/default.jpg') }}"
                                                     alt="image-{{ Str::slug($product->name) }}">
                                            </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->date_expiration ?? '-' }}</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"></i>
                                            </a>
                                            <a class="me-2 edit-icon p-2" href="{{ route('inventory.products.details', $product->id) }}">
                                                <i data-feather="eye"></i>
                                            </a>
                                            <a class="me-2 p-2" href="{{ route('inventory.products.edit', $product->id) }}">
                                                <i data-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"></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])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                @include('partials.empty-state', [
                    'icon' => 'calendar',
                    'title' => 'Aucun produit expiré',
                    'description' => 'Bonne nouvelle : aucun produit n’a dépassé sa date d’expiration'
                        . (isset($magasin) && $magasin ? ' pour « ' . $magasin->name . ' »' : '')
                        . '.',
                    'actionUrl' => route('inventory.add-product'),
                    'actionLabel' => 'Ajouter un produit',
                ])
            @endif
        </div>
    </div>

    <!-- Required Scripts -->
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/feather.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            // Initialize Feather Icons
            if (typeof feather !== 'undefined') {
                feather.replace();
            }

            // Select all checkbox
            $('#select-all').on('change', function () {
                $('.product-checkbox').prop('checked', $(this).prop('checked'));
            });

            // Individual checkboxes
            $(document).on('change', '.product-checkbox', function () {
                const totalCheckboxes = $('.product-checkbox').length;
                const checkedCheckboxes = $('.product-checkbox:checked').length;
                $('#select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
            });

            // Search functionality
            $('#search').on('input', function () {
                const query = $(this).val().trim().toLowerCase();
                const rows = $('#product-list tr');

                if (query.length < 3 && query.length > 0) {
                    rows.hide();
                    $('#product-list').append('<tr><td colspan="8" class="text-center">Veuillez entrer au moins 3 caractères</td></tr>');
                    return;
                }

                if (query.length === 0) {
                    rows.show();
                    $('#product-list td[colspan="8"]').remove();
                    return;
                }

                rows.each(function () {
                    const productName = $(this).find('td:eq(1) a:last-child').text().toLowerCase();
                    if (productName.includes(query)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });

                if ($('#product-list tr:visible').length === 0) {
                    $('#product-list').append('<tr><td colspan="8" class="text-center">Aucun produit trouvé</td></tr>');
                } else {
                    $('#product-list td[colspan="8"]').remove();
                }
            });
        });
    </script>
@endsection