@extends('layouts.app')

@section('title', 'Gestión de Productos')

@section('header', 'Gestión de Productos')

@section('content')
    <div class="page-container">
        <div class="page-header">
            <h2 class="page-title">
                <i class="fa-solid fa-spray-can-sparkles" style="color: var(--primary-color);"></i>
                Listado de Productos
            </h2>
            <a href="{{ route('productos.create') }}" class="btn btn-primary">
                <i class="fa-solid fa-plus"></i>
                Nuevo Producto
            </a>
        </div>

        <div class="card">
            <div class="search-filter-container">
                <div class="filter-form">
                    <div class="filter-group">
                        <div class="search-box" style="max-width: 100%; flex: 1;">
                            <i class="fa-solid fa-magnifying-glass search-icon"></i>
                            <input type="text" id="searchInput" placeholder="Buscar por código o nombre..."
                                class="search-input">
                            <button id="clearSearch" class="search-clear" style="display: none;">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>

                        <select id="filterCategoria" class="form-control">
                            <option value="">Todas las categorías</option>
                            @foreach ($categorias as $categoria)
                                <option value="{{ $categoria->nombre }}">{{ $categoria->nombre }}</option>
                            @endforeach
                        </select>

                        <label class="filter-checkbox">
                            <input type="checkbox" id="filterBajoStock">
                            Solo productos con bajo stock
                        </label>
                    </div>
                    <div id="searchResults" class="search-results"></div>
                </div>
            </div>

            <div class="card-body p-0">
                @if ($productos->count() > 0)
                    <div class="table-container-scroll">
                        <table class="table text-nowrap" id="productosTable">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Nombre</th>
                                    <th>Categoría</th>
                                    <th>Stock</th>
                                    <th>Precio Compra</th>
                                    <th>Costos</th>
                                    <th>Costo Total</th>
                                    <th>Precio Venta</th>
                                    <th>Ganancia</th>
                                    <th>Estado</th>
                                    <th>Presentación</th>
                                    <th class="text-center">Costos</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="productosTableBody">
                                @foreach ($productos as $producto)
                                    <tr
                                        class="{{ $producto->stock_actual <= $producto->stock_minimo ? 'row-warning' : '' }}">
                                        <td class="fw-bold">{{ $producto->codigo }}</td>
                                        <td>{{ $producto->nombre }}</td>
                                        <td>
                                            <span class="badge badge-info">
                                                {{ $producto->categoria->nombre }}
                                            </span>
                                        </td>
                                        <td>
                                            @if ($producto->stock_actual <= $producto->stock_minimo)
                                                <span class="badge badge-danger">
                                                    {{ $producto->stock_actual }} ⚠️
                                                </span>
                                            @else
                                                <span class="badge badge-success">
                                                    {{ $producto->stock_actual }}
                                                </span>
                                            @endif
                                        </td>
                                        <td>${{ number_format($producto->precio_compra, 0, ',', '.') }}</td>
                                        <td>
                                            @php
                                                $totalCostos = $producto->costos->sum('valor');
                                            @endphp
                                            <span >
                                                <b> ${{ number_format($totalCostos, 0, ',', '.') }}</b>
                                            </span>
                                        </td>
                                        <td>
                                            @php
                                                $costoTotal = $producto->precio_compra + $totalCostos;
                                            @endphp
                                            <span style="color: red;">
                                                <b>
                                                    ${{ number_format($costoTotal, 0, ',', '.') }}

                                                </b>
                                            </span>
                                        </td>
                                        <td class="fw-bold">${{ number_format($producto->precio_venta, 0, ',', '.') }}</td>
                                        <td>
                                            @php
                                                $ganancia = $producto->precio_venta - $costoTotal;
                                            @endphp
                                            <span class="fw-bold"
                                                style="color: {{ $ganancia >= 0 ? '#059669' : '#ef4444' }}">
                                                ${{ number_format($ganancia, 0, ',', '.') }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge {{ $producto->estado ? 'badge-success' : 'badge-danger' }}">
                                                {{ $producto->estado ? 'Activo' : 'Inactivo' }}
                                            </span>
                                        </td>
                                        <td>{{ $producto->presentacion ?? 'N/A' }}</td>
                                        <td class="text-center">
                                            <a href="{{ route('productos.costos', $producto) }}" class="btn btn-sm"
                                                @if ($producto->costos->count() > 0) style="background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; border-color: #6ee7b7;"
                                                @else
                                                style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; border-color: #93c5fd;" @endif
                                                title="{{ $producto->costos->count() > 0 ? 'Ver Costos (' . $producto->costos->count() . ')' : 'Agregar Costos' }}">
                                                {{ $producto->costos->count() > 0 ? 'Ver' : 'Agregar' }}
                                            </a>
                                        </td>
                                        <td>
                                            <div class="action-buttons">
                                                <a href="{{ route('productos.show', $producto) }}"
                                                    class="btn-action btn-view" title="Ver">
                                                    <i class="fa-solid fa-eye"></i>
                                                </a>
                                                <a href="{{ route('productos.edit', $producto) }}"
                                                    class="btn-action btn-edit" title="Editar">
                                                    <i class="fa-solid fa-pen-to-square"></i>
                                                </a>
                                                <form action="{{ route('productos.destroy', $producto) }}" method="POST"
                                                    class="d-inline"
                                                    onsubmit="return confirmarEliminacion(event, 'Este producto será eliminado permanentemente.');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn-action btn-delete" title="Eliminar">
                                                        <i class="fa-solid fa-trash-can"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="custom-pagination">
                        <div class="pagination-info">
                            <span>Mostrando <strong id="startItem">1</strong> a <strong id="endItem">10</strong> de
                                <strong id="totalItems">{{ $productos->count() }}</strong> registros</span>
                        </div>
                        <div class="pagination-controls">
                            <button class="pagination-btn" id="firstPage" title="Primera página">
                                <i class="fa-solid fa-angles-left"></i>
                            </button>
                            <button class="pagination-btn" id="prevPage" title="Anterior">
                                <i class="fa-solid fa-chevron-left"></i>
                            </button>
                            <div class="pagination-pages" id="paginationPages"></div>
                            <button class="pagination-btn" id="nextPage" title="Siguiente">
                                <i class="fa-solid fa-chevron-right"></i>
                            </button>
                            <button class="pagination-btn" id="lastPage" title="Última página">
                                <i class="fa-solid fa-angles-right"></i>
                            </button>
                        </div>
                        <div class="pagination-select">
                            <label>Registros por página:</label>
                            <select id="itemsPerPage" class="form-control-sm">
                                <option value="5">5</option>
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>
                        </div>
                    </div>
                @else
                    <div class="empty-state">
                        <p class="empty-message">No hay productos registrados</p>
                        <a href="{{ route('productos.create') }}" class="btn btn-primary">
                            Crear primer producto
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <script>
        // Paginación y búsqueda personalizada
        const allRows = Array.from(document.querySelectorAll('#productosTableBody tr'));
        let filteredRows = [...allRows];
        let currentPage = 1;
        let itemsPerPage = 10;

        function renderPagination() {
            const totalPages = Math.ceil(filteredRows.length / itemsPerPage);

            // Mostrar/ocultar filas
            allRows.forEach(row => row.style.display = 'none');

            filteredRows.forEach((row, index) => {
                const start = (currentPage - 1) * itemsPerPage;
                const end = start + itemsPerPage;
                row.style.display = (index >= start && index < end) ? '' : 'none';
            });

            // Actualizar información
            const start = filteredRows.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0;
            const end = Math.min(currentPage * itemsPerPage, filteredRows.length);
            document.getElementById('startItem').textContent = start;
            document.getElementById('endItem').textContent = end;
            document.getElementById('totalItems').textContent = filteredRows.length;

            // Renderizar botones de página
            const pagesContainer = document.getElementById('paginationPages');
            pagesContainer.innerHTML = '';

            if (totalPages > 0) {
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, currentPage + 2);

                if (currentPage <= 3) {
                    endPage = Math.min(5, totalPages);
                }
                if (currentPage >= totalPages - 2) {
                    startPage = Math.max(1, totalPages - 4);
                }

                for (let i = startPage; i <= endPage; i++) {
                    const pageBtn = document.createElement('button');
                    pageBtn.className = 'pagination-page' + (i === currentPage ? ' active' : '');
                    pageBtn.textContent = i;
                    pageBtn.onclick = () => goToPage(i);
                    pagesContainer.appendChild(pageBtn);
                }
            }

            // Habilitar/deshabilitar botones
            document.getElementById('firstPage').disabled = currentPage === 1 || totalPages === 0;
            document.getElementById('prevPage').disabled = currentPage === 1 || totalPages === 0;
            document.getElementById('nextPage').disabled = currentPage === totalPages || totalPages === 0;
            document.getElementById('lastPage').disabled = currentPage === totalPages || totalPages === 0;
        }

        function goToPage(page) {
            const totalPages = Math.ceil(filteredRows.length / itemsPerPage);
            currentPage = Math.max(1, Math.min(page, totalPages));
            renderPagination();
        }

        function applyFilters() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase().trim();
            const categoriaFilter = document.getElementById('filterCategoria').value.toLowerCase();
            const bajoStockFilter = document.getElementById('filterBajoStock').checked;
            const clearSearchBtn = document.getElementById('clearSearch');
            const searchResults = document.getElementById('searchResults');

            // Mostrar/ocultar botón de limpiar
            clearSearchBtn.style.display = searchTerm ? 'flex' : 'none';

            // Filtrar filas
            filteredRows = allRows.filter(row => {
                const cells = row.getElementsByTagName('td');
                const codigo = cells[0].textContent.toLowerCase();
                const nombre = cells[1].textContent.toLowerCase();
                const categoria = cells[2].textContent.toLowerCase();
                const stockBadge = cells[3].querySelector('.badge');
                const isBajoStock = stockBadge && stockBadge.classList.contains('badge-danger');

                // Filtro de búsqueda
                const matchSearch = !searchTerm ||
                    codigo.includes(searchTerm) ||
                    nombre.includes(searchTerm);

                // Filtro de categoría
                const matchCategoria = !categoriaFilter || categoria.includes(categoriaFilter);

                // Filtro de bajo stock
                const matchBajoStock = !bajoStockFilter || isBajoStock;

                return matchSearch && matchCategoria && matchBajoStock;
            });

            // Actualizar resultados
            if ((searchTerm || categoriaFilter || bajoStockFilter) && filteredRows.length === 0) {
                searchResults.innerHTML = '<p class="no-results">No se encontraron resultados</p>';
                searchResults.style.display = 'block';
            } else if ((searchTerm || categoriaFilter || bajoStockFilter) && filteredRows.length > 0) {
                searchResults.innerHTML = '<p class="results-found">Se encontraron ' + filteredRows.length +
                    ' producto(s)</p>';
                searchResults.style.display = 'block';
            } else {
                searchResults.style.display = 'none';
            }

            // Resetear a la primera página
            currentPage = 1;
            renderPagination();
        }

        // Búsqueda en tiempo real
        const searchInput = document.getElementById('searchInput');
        const clearSearchBtn = document.getElementById('clearSearch');
        const filterCategoria = document.getElementById('filterCategoria');
        const filterBajoStock = document.getElementById('filterBajoStock');

        searchInput.addEventListener('input', applyFilters);
        filterCategoria.addEventListener('change', applyFilters);
        filterBajoStock.addEventListener('change', applyFilters);

        // Limpiar búsqueda
        clearSearchBtn.addEventListener('click', function() {
            searchInput.value = '';
            filterCategoria.value = '';
            filterBajoStock.checked = false;
            applyFilters();
            searchInput.focus();
        });

        // Event listeners de paginación
        document.getElementById('firstPage').addEventListener('click', () => goToPage(1));
        document.getElementById('prevPage').addEventListener('click', () => goToPage(currentPage - 1));
        document.getElementById('nextPage').addEventListener('click', () => goToPage(currentPage + 1));
        document.getElementById('lastPage').addEventListener('click', () => goToPage(Math.ceil(filteredRows.length /
            itemsPerPage)));

        document.getElementById('itemsPerPage').addEventListener('change', function() {
            itemsPerPage = parseInt(this.value);
            currentPage = 1;
            renderPagination();
        });

        // Inicializar paginación
        if (allRows.length > 0) {
            renderPagination();
        }
    </script>
@endsection