@extends('layouts.dashboard')

@section('dashboard')

    <style>
        .custom-table {
            width: 100%;
            border-collapse: collapse;
        }

        .custom-table th,
        .custom-table td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .custom-table th {
            cursor: pointer;
        }

        .custom-table th.sort-asc::after {
            content: "↑";
            font-size: 18px;
        }

        .custom-table th.sort-desc::after {
            content: "↓";
            font-size: 18px;
        }

        .custom-table .hide {
            display: none;
        }

        .custom-table .search-input {
            margin-bottom: 10px;
        }
    </style>

    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Inventario</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1">Inventario</h1>
        </div>
                {{-- <div class="col-md-auto">
            <div class="dropdown">
                <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton-1"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Opciones</button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-1" style="">
                    <a href="{{ route('ajuste-de-inventario') }}" class="dropdown-item small">Ajuste de inventario</a>
                </div>
            </div>
        </div> --}}
        <div class="col-md">
            <form class="d-flex align-items-end justify-content-end form-registro form-enter" id="form-filtro">
                @php
                    $permiso = \FCRD::permiso();
                @endphp
                @if (array_intersect($permiso, [1]))
                    <div class="col col-md-auto my-1 pr-md-0">
                        <label for="excluir" class="small mb-0">Sucursales</label>
                        @php $sucursales = \FCRD::listSucursalesEmpresa(); @endphp
                        <select class="form-control form-control-sm select2" id="sucursal"
                            onchange="cargarInventarioSucursal(this.value), cargarBodegasSucursal(this.value)"
                            name="sucursal">
                            <option value="">Seleccione la sucursal</option>
                                                        <option value="todas">Todas</option>
                        </select>
                    </div>
                @endif

                <div class="col col-md-auto my-1 pr-md-0">
                    <label for="excluir" class="small mb-0">Bodegas</label>
                    @php $bodegas = \FCRD::getBodegasUsuario(); @endphp
                    <select class="form-control form-control-sm select2" id="bodega"
                        onchange="cargarInventarioBodega(this.value), cargarCategoriasBodega(this.value)" name="bodega">
                        <option value="">Seleccione la bodega de origen</option>
                                                <option value="todas">Todas</option>
                    </select>
                </div>


                <div class="col col-md-auto my-1 pr-md-0">
                    <label for="categoria" class="small mb-0">Categorias</label>

                    <select class="form-control form-control-sm select2 text-capitalize" id="categoria"
                        onchange="cargarInventarioPorCategoria(this.value)" name="categoria">
                        <option value="">Seleccione la categoria</option>
                    </select>
                </div>

            </form>
        </div>
            </div>
    @if (session('actualizar_correcto'))
        <div class="alert alert-success mb-4">La información ya fue actualizada de forma correcta</div>
    @endif
    @if (session('error_actualizar') && is_array(session('error_actualizar')) && !empty(session('error_actualizar')))
        <div class="col-12">
            <div class="alert alert-warning mb-3" role="alert">
                <h6 class="mb-3">Los siguientes códigos no se procesaron porque no tienen un valor numérico en las
                    columnas
                    de ID o CANTIDAD A CARGAR (#N/A, #N/D, etc), favor de revisar:
                </h6>
                <ul>
                    @foreach (session('error_actualizar') as $c)
                        <li>{{ $c }}</li>
                    @endforeach
                </ul>
                <strong class="font-italic">Corregir detalles antes de procesar</strong>
            </div>
        </div>
    @endif
    @if (session('producto_no_existe') && is_array(session('producto_no_existe')) && !empty(session('producto_no_existe')))
        <div class="col-12">
            <div class="alert alert-warning mb-3" role="alert">
                <h6 class="mb-3">Los siguientes códigos no se encuentran registrados para ingresar al inventario, favor de
                    revisar:
                </h6>
                <ul>
                    @foreach (session('producto_no_existe') as $c)
                        <li>{{ $c }}</li>
                    @endforeach
                </ul>
                <strong class="font-italic">Corregir detalles antes de procesar</strong>
            </div>
        </div>
    @endif
    @if (session('sin_posicion'))
        <div class="col-12">
            <div class="alert alert-danger mb-3" role="alert">
                <h6 class="mb-3">Lo sentimos actualmente no hay una posición disponible para la bodega seleccionada
                </h6>

                <strong class="font-italic">Corregir detalles antes de procesar</strong>
            </div>
        </div>
    @endif
    <div class="card">
        <div class="card-body">
            <div id="box-inventario" class="table-responsive box-inventario">

                <table class="table table-hover table-inventario" id="table1">
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-center">Ubicación</th>
                            <th class="text-center">Fecha</th>
                            {{-- <th class="text-center">Opciones</th> --}}
                        </tr>
                    </thead>
                    <tbody id="body-inventario" class="body-inventario">
                        <tr class="text-center">
                            <td colspan="4">¿Desea cargar el inventario? <button type="button"
                                    class="btn btn-primary btn-sm ml-3" onclick="cargarInventario()">Cargar
                                    Inventario</button></td>
                        </tr>

                        {{-- @include('dashboard.inventario.table-inventario') --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        function cargarCategoriasBodega(bodegaId) {
            var data = new URLSearchParams();
            data.append('bodegaId', bodegaId);

            var categoriaSelect = document.querySelector('select[name="categoria"]');
            //var opcionesOriginales = categoriaSelect.innerHTML; // Guardar el estado original

            // Mostrar el modal de carga si es necesario
            modalCargando();

            // Enviar la solicitud fetch
            fetch('/dashboard/cargar-categorias-bodega', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Añade el token CSRF para la protección contra ataques CSRF
                    },
                    body: data.toString()
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json(); // Parsear la respuesta JSON
                })
                .then(data => {
                    if (data.success && data.categorias && data.categorias.length > 0) {
                        // Actualizar el selector de categoría
                        categoriaSelect.innerHTML =
                            '<option value="">Seleccione la categoria</option>'; // Limpiar las opciones anteriores

                        data.categorias.forEach(categoria => {
                            var option = document.createElement('option');
                            option.value = categoria.categoria_id;
                            // Capitalizar el texto
                            option.textContent = categoria.categoria_nombre.charAt(0).toUpperCase() + categoria
                                .categoria_nombre.slice(1);
                            categoriaSelect.appendChild(option);
                        });

                    } else {
                        // Restaurar el estado original si no hay categorías
                        categoriaSelect.innerHTML =
                            '<option value="">Seleccione la categoria</option>'; // Opciones por defecto
                        //alert('No se encontraron categorías.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Restaurar el estado original en caso de error
                    categoriaSelect.innerHTML =
                        '<option value="">Seleccione la categoria</option>'; // Opciones por defecto
                    //alert('Ocurrió un error al cargar las categorías. Por favor, inténtelo de nuevo.');
                })
                .finally(() => {
                    cerrarCargando(); // Asegurarse de que el modal de carga se cierre
                });
        }




        function cargarInventarioPorCategoria(categoriaId, offset = 0) {
            var bodega = document.getElementById('bodega');
            var bodegaId = bodega.value;

            modalCargando(); // Mostrar modal de carga al inicio

            fetch("/dashboard/cargar-inventario-por-categoria", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": token
                    },
                    body: JSON.stringify({
                        categoriaId: categoriaId,
                        bodegaId: bodegaId,
                        offset: offset
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || 'Error en la solicitud.');
                        });
                    }
                    return response.json(); // Parsear la respuesta JSON
                })
                .then(data => {
                    if (data.success) {
                        // Actualizar el contenido del tbody
                        document.querySelector('.box-inventario').innerHTML = data.view;
                        initializeDataTable('table1', 'searchInput1');

                    } else {
                        alert('Error: ' + (data.error || 'No se pudieron cargar los datos.'));
                    }
                })
                .catch(error => {
                    console.error("There was a problem with the fetch operation:", error);
                })
                .finally(() => {
                    cerrarCargando(); // Asegurarse de que el modal de carga se cierre
                });
        }



        // Espera a que el contenido del DOM se haya cargado completamente
        document.addEventListener('DOMContentLoaded', () => {
            // Inicializa la tabla de datos cuando el DOM esté listo
            const tableId = 'table1'; // ID de la tabla
            const searchInputId = 'searchInput1'; // ID del campo de búsqueda
            initializeDataTable(tableId, searchInputId); // Llama a la función para inicializar la tabla
        });

        function initializeDataTable(tableId, searchInputId) {
            // Obtiene la referencia a la tabla y sus elementos
            const table = document.getElementById(tableId); // Selecciona la tabla por su ID
            const headers = table.querySelectorAll('th'); // Selecciona todos los encabezados de columna
            const searchInput = document.getElementById(searchInputId); // Selecciona el campo de búsqueda
            let sortOrder = 'asc'; // Orden inicial de clasificación (ascendente)
            let currentColumn = 0; // Índice de la columna actualmente ordenada (inicia en la primera)

            // Muestra la flecha ascendente por defecto en la primera columna
            updateSortIndicator(headers[currentColumn], sortOrder);

            // Agrega un evento de click a cada encabezado de columna para ordenar
            headers.forEach(header => {
                header.addEventListener('click', () => {
                    const columnIndex = Array.from(headers).indexOf(
                    header); // Obtiene el índice de la columna clicada
                    // Alterna el orden de clasificación entre ascendente y descendente
                    sortOrder = currentColumn === columnIndex && sortOrder === 'asc' ? 'desc' : 'asc';
                    currentColumn = columnIndex; // Actualiza el índice de la columna actualmente ordenada
                    updateSortIndicator(header, sortOrder); // Actualiza el indicador de ordenación
                    loadTableData(); // Carga los datos de la tabla con el nuevo orden y filtro
                });
            });

            // Agrega un evento de input al campo de búsqueda para filtrar las filas
            searchInput.addEventListener('input', () => {
                loadTableData(); // Carga los datos de la tabla con el nuevo valor de búsqueda
            });

            function loadTableData() {
                // Obtiene el valor del campo de búsqueda en minúsculas
                const searchValue = searchInput.value.toLowerCase();
                // Obtiene el nombre de la columna actualmente ordenada desde el atributo 'data-name'
                const sortBy = headers[currentColumn]?.getAttribute('data-name') || '';

                // Obtiene los valores de los campos de filtro adicionales (bodega y categoría)
                var bodega = document.getElementById('bodega');
                var bodegaId = bodega.value;
                var categoria = document.getElementById('categoria');
                var categoriaId = categoria.value;

                // Realiza una solicitud POST usando fetch para obtener los datos filtrados
                fetch('/dashboard/filtrar-inventario', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json', // Define el tipo de contenido como JSON
                            'X-CSRF-TOKEN': '{{ csrf_token() }}' // Incluye el token CSRF para seguridad
                        },
                        body: JSON.stringify({
                            search: searchValue, // Valor de búsqueda
                            sort_by: sortBy, // Columna por la que ordenar
                            sort_order: sortOrder, // Orden de clasificación
                            bodegaId: bodegaId, // ID de la bodega
                            categoriaId: categoriaId // ID de la categoría
                        })
                    })
                    .then(response => response.json()) // Convierte la respuesta a JSON
                    .then(data => {
                        if (data.success) {
                            // Si la solicitud es exitosa, actualiza el contenido del cuerpo de la tabla
                            document.querySelector('#body-inventario').innerHTML = data.html;
                        }
                    })
                    .catch(error => {
                        console.error("Error al filtrar inventario", error); // Maneja errores en la solicitud
                    });
            }

            function updateSortIndicator(header, order) {
                // Limpia todos los indicadores de ordenación
                headers.forEach(h => h.querySelector('.sort-indicator').textContent = '');
                // Selecciona el indicador de ordenación en el encabezado clicado
                const indicator = header.querySelector('.sort-indicator');
                // Muestra la flecha de ordenación adecuada según el orden
                indicator.textContent = order === 'asc' ? '↑' : '↓';
            }
        }
    </script>
@endsection