@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" style="margin-bottom: 1.5rem;">
            <div class="page-actions">
                <a href="{{ route('reportes.financiero') }}" class="btn btn-success">
                    <i class="fa-solid fa-chart-line"></i>
                    Reporte Financiero
                </a>
                <a href="{{ route('productos.importar') }}" class="btn btn-info">
                    <i class="fa-solid fa-file-excel"></i>
                    Importar Excel
                </a>
                <a href="{{ route('productos.create') }}" class="btn btn-primary">
                    <i class="fa-solid fa-plus"></i>
                    Nuevo Producto
                </a>
            </div>
        </div>

        <div class="card">
            <div class="search-filter-container">
                <div class="filter-form">
                    <div class="filter-group">
                        <div class="search-box" style="max-width: 300px;">
                            <i class="fa-solid fa-tag search-icon"></i>
                            <input type="text" id="searchProducto" placeholder="Buscar por producto..."
                                class="search-input">
                            <button id="clearProducto" class="search-clear" style="display: none;">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>

                        <div class="search-box" style="max-width: 300px;">
                            <i class="fa-solid fa-spray-can-sparkles search-icon"></i>
                            <input type="text" id="searchFragancia" placeholder="Buscar por fragancia..."
                                class="search-input">
                            <button id="clearFragancia" class="search-clear" style="display: none;">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>

                        <select id="filterCategoria" class="form-control" style="max-width: 250px;">
                            <option value="">Todas las categorías</option>
                            @foreach ($categorias as $categoria)
                                <option value="{{ $categoria->nombre }}">{{ Str::title(Str::lower($categoria->nombre)) }}</option>
                            @endforeach
                        </select>

                        <label class="filter-checkbox">
                            <input type="checkbox" id="filterBajoStock">
                            Solo bajo stock
                        </label>

                        <button id="clearAllFilters" class="btn btn-secondary btn-sm" style="display: none;">
                            <i class="fa-solid fa-filter-circle-xmark"></i>
                            Limpiar filtros
                        </button>
                    </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 table-sm" id="productosTable" style="font-size: 0.875rem;">
                            <thead>
                                <tr>
                                    <th style="width: 80px; white-space: nowrap;">#</th>
                                    <th style="width: 120px; white-space: nowrap;">CATEGORÍA</th>
                                    <th style="min-width: 150px; white-space: nowrap;">PRODUCTO</th>
                                    <th style="min-width: 150px; white-space: nowrap;">FRAGANCIA</th>
                                    <th style="width: 120px; white-space: nowrap;" class="text-end" title="Costo por kilogramo">COSTO 1K</th>
                                    <th style="width: 80px; white-space: nowrap;" class="text-end" title="IVA 19%">19%</th>
                                    <th style="width: 130px; white-space: nowrap;" class="text-end" title="COSTO 1K + IVA">COSTO 1K + IVA</th>
                                    <th style="width: 100px; white-space: nowrap;" class="text-end" title="Costo por gramo">COSTO GR</th>
                                    <th style="width: 110px; white-space: normal;" class="text-end" title="COSTO FRAG + CF + CV">FRAG + %CF+CV</th>
                                    <th style="width: 80px; white-space: nowrap;" class="text-end">30%</th>
                                    <th style="width: 80px; white-space: nowrap;" class="text-end">50%</th>
                                    <th style="width: 80px; white-space: nowrap;" class="text-end">75%</th>
                                    <th style="width: 80px; white-space: nowrap;" class="text-end">100%</th>
                                    <th style="width: 80px; white-space: nowrap;" class="text-center">STOCK</th>
                                    <th style="width: 120px; white-space: nowrap;" class="text-center">ACCIONES</th>
                                </tr>
                            </thead>
                            <tbody id="productosTableBody">
                                @foreach ($productos as $producto)
                                    <tr class="{{ $producto->stock_actual <= $producto->stock_minimo ? 'row-warning' : '' }}" data-categoria="{{ $producto->categoria->nombre }}">
                                        <td class="fw-bold">{{ $loop->iteration }}</td>
                                        <td style="white-space: nowrap;">
                                            <span class="badge badge-info">{{ Str::title(Str::lower($producto->categoria->nombre)) }}</span>
                                        </td>
                                        <td style="white-space: nowrap;">{{ Str::title(Str::lower($producto->nombre)) }}</td>
                                        <td style="font-weight: 600; white-space: nowrap; color: #1e40af;">{{ Str::title(Str::lower($producto->fragancia)) }}</td>
                                        <td class="text-end" style="background-color: #dcfce7;">{{ number_format($producto->costo_1k, 0, '', '.') }}</td>
                                        <td class="text-end">{{ number_format($producto->iva_19, 0, '', '.') }}</td>
                                        <td class="text-end">{{ number_format($producto->costo_1k_con_iva, 0, '', '.') }}</td>
                                        <td class="text-end">{{ number_format($producto->costo_gr, 0, '', '.') }}</td>
                                        <td class="text-end fw-bold" style="background-color: #fef3c7;">{{ number_format($producto->costo_frag_cf_cv, 0, '', '.') }}</td>
                                        <td class="text-end">{{ number_format($producto->precio_30, 0, '', '.') }}</td>
                                        <td class="text-end">{{ number_format($producto->precio_50, 0, '', '.') }}</td>
                                        <td class="text-end">{{ number_format($producto->precio_75, 0, '', '.') }}</td>
                                        <td class="text-end">{{ number_format($producto->precio_100, 0, '', '.') }}</td>
                                        <td class="text-center">
                                            @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>
                                            <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">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="all" selected>Todas</option>
                            </select>
                        </div>
                    </div>

                    <!-- Resumen Financiero (Temporalmente oculto) -->
                    {{-- <div class="financial-summary" id="financialSummary">
                        <div class="summary-header">
                            <h4><i class="fa-solid fa-chart-line"></i> Resumen Financiero</h4>
                            <span class="summary-subtitle">Basado en productos visibles</span>
                        </div>
                        <div class="summary-metrics">
                            <div class="summary-metric">
                                <div class="metric-icon" style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #3b82f6;">
                                    <i class="fa-solid fa-box"></i>
                                </div>
                                <div class="metric-info">
                                    <div class="metric-label">Productos</div>
                                    <div class="metric-value" id="totalProductosResumen">0</div>
                                </div>
                            </div>
                            <div class="summary-metric">
                                <div class="metric-icon" style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #f59e0b;">
                                    <i class="fa-solid fa-dollar-sign"></i>
                                </div>
                                <div class="metric-info">
                                    <div class="metric-label">Costo Promedio</div>
                                    <div class="metric-value" id="costoPromedioResumen">$0</div>
                                </div>
                            </div>
                            <div class="summary-metric">
                                <div class="metric-icon" style="background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #10b981;">
                                    <i class="fa-solid fa-sack-dollar"></i>
                                </div>
                                <div class="metric-info">
                                    <div class="metric-label">Ganancia Total 50%</div>
                                    <div class="metric-value" id="gananciaTotalResumen">$0</div>
                                </div>
                            </div>
                            <div class="summary-metric">
                                <div class="metric-icon" style="background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); color: #6366f1;">
                                    <i class="fa-solid fa-chart-pie"></i>
                                </div>
                                <div class="metric-info">
                                    <div class="metric-label">Ganancia Promedio</div>
                                    <div class="metric-value" id="gananciaPromedioResumen">$0</div>
                                </div>
                            </div>
                        </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 = 'all';

        function renderPagination() {
            // Si itemsPerPage es "all", mostrar todas las filas
            const showAll = itemsPerPage === 'all';
            const totalPages = showAll ? 1 : Math.ceil(filteredRows.length / itemsPerPage);

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

            if (showAll) {
                // Mostrar todas las filas filtradas
                filteredRows.forEach(row => {
                    row.style.display = '';
                });
            } else {
                // Mostrar solo las filas de la página actual
                filteredRows.forEach((row, index) => {
                    const start = (currentPage - 1) * itemsPerPage;
                    const end = start + itemsPerPage;
                    row.style.display = (index >= start && index < end) ? '' : 'none';
                });
            }

            // Actualizar información
            if (showAll) {
                document.getElementById('startItem').textContent = filteredRows.length > 0 ? 1 : 0;
                document.getElementById('endItem').textContent = filteredRows.length;
                document.getElementById('totalItems').textContent = filteredRows.length;
            } else {
                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 (!showAll && 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
            if (showAll) {
                document.getElementById('firstPage').disabled = true;
                document.getElementById('prevPage').disabled = true;
                document.getElementById('nextPage').disabled = true;
                document.getElementById('lastPage').disabled = true;
            } else {
                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;
            }

            // Actualizar resumen financiero (temporalmente deshabilitado)
            // updateFinancialSummary();
        }

        function goToPage(page) {
            if (itemsPerPage === 'all') return; // No hacer nada si se muestran todas
            const totalPages = Math.ceil(filteredRows.length / itemsPerPage);
            currentPage = Math.max(1, Math.min(page, totalPages));
            renderPagination();
        }

        function applyFilters() {
            const searchProducto = document.getElementById('searchProducto').value.toLowerCase().trim();
            const searchFragancia = document.getElementById('searchFragancia').value.toLowerCase().trim();
            const categoriaFilter = document.getElementById('filterCategoria').value.toLowerCase();
            const bajoStockFilter = document.getElementById('filterBajoStock').checked;

            const clearProductoBtn = document.getElementById('clearProducto');
            const clearFraganciaBtn = document.getElementById('clearFragancia');
            const clearAllBtn = document.getElementById('clearAllFilters');
            const searchResults = document.getElementById('searchResults');

            // Mostrar/ocultar botones de limpiar individuales
            clearProductoBtn.style.display = searchProducto ? 'flex' : 'none';
            clearFraganciaBtn.style.display = searchFragancia ? 'flex' : 'none';

            // Mostrar/ocultar botón de limpiar todos
            const hasActiveFilters = searchProducto || searchFragancia || categoriaFilter || bajoStockFilter;
            clearAllBtn.style.display = hasActiveFilters ? 'inline-flex' : 'none';

            // Filtrar filas
            filteredRows = allRows.filter(row => {
                const cells = row.getElementsByTagName('td');
                const categoria = row.getAttribute('data-categoria').toLowerCase();
                const producto = cells[2].textContent.toLowerCase();
                const fragancia = cells[3].textContent.toLowerCase();
                const stockBadge = cells[13].querySelector('.badge');
                const isBajoStock = stockBadge && stockBadge.classList.contains('badge-danger');

                // Filtro de producto
                const matchProducto = !searchProducto || producto.includes(searchProducto);

                // Filtro de fragancia
                const matchFragancia = !searchFragancia || fragancia.includes(searchFragancia);

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

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

                return matchProducto && matchFragancia && matchCategoria && matchBajoStock;
            });

            // Actualizar resultados
            if (hasActiveFilters && filteredRows.length === 0) {
                searchResults.innerHTML = '<p class="no-results"><i class="fa-solid fa-circle-exclamation"></i> No se encontraron resultados</p>';
                searchResults.style.display = 'block';
            } else if (hasActiveFilters && filteredRows.length > 0) {
                searchResults.innerHTML = '<p class="results-found"><i class="fa-solid fa-circle-check"></i> 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();
        }

        // Función temporalmente deshabilitada
        /*
        function updateFinancialSummary() {
            const totalProductos = filteredRows.length;
            let sumaGanancia50 = 0;
            let sumaCostos = 0;

            filteredRows.forEach(row => {
                const cells = row.getElementsByTagName('td');
                // Columna 8 = costo_frag_cf_cv (índice 8)
                // Columna 10 = precio_50 (índice 10)
                const costoText = cells[8].textContent.replace(/\./g, '');
                const precioText = cells[10].textContent.replace(/\./g, '');

                const costo = parseFloat(costoText) || 0;
                const precio = parseFloat(precioText) || 0;
                const ganancia = precio - costo;

                sumaCostos += costo;
                sumaGanancia50 += ganancia;
            });

            const costoPromedio = totalProductos > 0 ? sumaCostos / totalProductos : 0;
            const gananciaPromedio = totalProductos > 0 ? sumaGanancia50 / totalProductos : 0;

            // Formatear números con separador de miles
            const formatNumber = (num) => Math.round(num).toLocaleString('de-DE');

            document.getElementById('totalProductosResumen').textContent = totalProductos;
            document.getElementById('costoPromedioResumen').textContent = '$' + formatNumber(costoPromedio);
            document.getElementById('gananciaTotalResumen').textContent = '$' + formatNumber(sumaGanancia50);
            document.getElementById('gananciaPromedioResumen').textContent = '$' + formatNumber(gananciaPromedio);
        }
        */

        // Búsqueda en tiempo real
        const searchProducto = document.getElementById('searchProducto');
        const searchFragancia = document.getElementById('searchFragancia');
        const clearProductoBtn = document.getElementById('clearProducto');
        const clearFraganciaBtn = document.getElementById('clearFragancia');
        const clearAllBtn = document.getElementById('clearAllFilters');
        const filterCategoria = document.getElementById('filterCategoria');
        const filterBajoStock = document.getElementById('filterBajoStock');

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

        // Limpiar búsqueda de producto
        clearProductoBtn.addEventListener('click', function() {
            searchProducto.value = '';
            applyFilters();
            searchProducto.focus();
        });

        // Limpiar búsqueda de fragancia
        clearFraganciaBtn.addEventListener('click', function() {
            searchFragancia.value = '';
            applyFilters();
            searchFragancia.focus();
        });

        // Limpiar todos los filtros
        clearAllBtn.addEventListener('click', function() {
            searchProducto.value = '';
            searchFragancia.value = '';
            filterCategoria.value = '';
            filterBajoStock.checked = false;
            applyFilters();
        });

        // 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', () => {
            if (itemsPerPage !== 'all') {
                goToPage(Math.ceil(filteredRows.length / itemsPerPage));
            }
        });

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

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