@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>

    @php
        $esNeto = !empty(session('tipoDePrecio')) && session('tipoDePrecio') === 'neto';
    @endphp
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Editar Lista de precios</strong></li>
    </ul>



    <div class="card mt-4">
        <div class="card-header">
            <h5>Información Basica</h5>
        </div>
        <div class="card-body bg-body-card ">
            <div class="card-body bg-body-card row justify-content-center">
                <form class="mb-3 col-6" method="POST" onsubmit="return editarListaDePrecios({{ $informacionListaDePrecio->lista_precio_id }})">
                    {{ csrf_field() }}
                    <div class="row mb-3">
                        <label for="nombre-lista" class="col-3 font-weight-bold">Nombre <span class="text-danger">*</span></label>
                        <input type="text" name="nombre-lista" id="nombre-lista" class="col-9 form-control form-control-sm"
                            placeholder="Nombre de la lista de precios" @if (isset($informacionListaDePrecio->nombre_lista) && !empty($informacionListaDePrecio->nombre_lista)) value="{{$informacionListaDePrecio->nombre_lista}}" @endif required="">
                    </div>
                    
                    <input type="hidden" id="lista-precio-id" value="{{ $informacionListaDePrecio->lista_precio_id }}">
                    <div class="row mb-3">
                        <label for="tipo-de-ajuste" class="col-3 font-weight-bold">Tipo de Ajuste <span class="text-danger">*</span></label>
                        <input type="hidden" readonly type="hidden" id="tipo-de-ajuste" name="tipo-de-ajuste" @if (isset($informacionListaDePrecio->tipo_ajuste) && !empty($informacionListaDePrecio->tipo_ajuste)) value="{{ $informacionListaDePrecio->tipo_ajuste }}" @endif>
                        @if (isset($informacionListaDePrecio->tipo_ajuste) && !empty($informacionListaDePrecio->tipo_ajuste))
                            <label class="text-capitalize">{{ $informacionListaDePrecio->tipo_ajuste }}</label> 
                        @endif
                    </div>
                    <div class="row mb-3">
                        <label for="porcentaje" class="col-3 font-weight-bold">Porcentaje <span class="text-danger">*</span></label>
                        <input type="hidden" readonly name="porcentaje" id="porcentaje" @if (isset($informacionListaDePrecio->porcentaje) && !empty($informacionListaDePrecio->porcentaje)) value="{{ $informacionListaDePrecio->porcentaje * 100}}" @endif>
                        @if (isset($informacionListaDePrecio->porcentaje) && !empty($informacionListaDePrecio->porcentaje))
                            <label>{{ $informacionListaDePrecio->porcentaje * 100}}%</label> 
                        @endif
                    </div>
                    <div class="row mb-3">
                        <label for="estado" class="col-3 font-weight-bold">Estado</label>
                        <div class="form-check">
                            <input class="form-check-input" name="checkbox-estado" type="checkbox" @if (isset($informacionListaDePrecio->estado_lista_precio) && !empty($informacionListaDePrecio->estado_lista_precio) && $informacionListaDePrecio->estado_lista_precio == 'vigente') value="{{ $informacionListaDePrecio->tipo_ajuste }}" checked="true" @endif id="checkboxEstado">
                            <label class="form-check-label" for="checkboxEstado">
                              Vigente
                            </label>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="estado" class="col-3 font-weight-bold">¿Depende de Lista Base?</label>
                        <div class="form-check pl-0">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" @if (isset($informacionListaDePrecio->lista_dependiente) && !empty($informacionListaDePrecio->lista_dependiente) && $informacionListaDePrecio->lista_dependiente == 1) checked="" @endif id="depende-lista-base">
                                <label class="custom-control-label" for="depende-lista-base"></label>
                              </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="fecha-valido" class="col-3 font-weight-bold">Valido Hasta</label>
                        <input type="date" name="fecha-valido" id="fecha-valido" @if (isset($informacionListaDePrecio->fecha_valido) && !empty($informacionListaDePrecio->fecha_valido)) value="{{ $informacionListaDePrecio->fecha_valido }}" @endif class="col-9 form-control form-control-sm">

                    </div>
                    <div class="mb-3 text-right row">
                        <div class="col-12 p-0">
                            <button type="submit" class="btn btn-blanco btn-sm">Cancelar</button>
                            <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                        </div>
                        
                    </div>
                </form>

               
                
                <div class="row col-12 pr-0 pl-0">

                    <div class="col-9 pl-0">
                        <h5>Lista de Productos</h5>
                    </div>
                    <input type="text" id="searchInput1" class="search-input form-control col-3 form-control-sm w-25 mb-2" placeholder="Buscar...">
                
                    {{-- <form method="post" action="{{ route('descargar-excel-inventario') }}">
                        {{ csrf_field() }}
                        <button type="submit" class="btn btn-success btn-sm blq-btn ml-2" > Descargar Excel</button>
                    </form> --}}
                   
                </div>
                <table class="table table-hover custom-table" id="table1">
                    <thead>
                        <tr>
                            <th class="w-75" data-name="producto_titulo">Producto <span class="sort-indicator" style="font-size:18px;"></th>
                            <th @if($esNeto) data-name="precio_normal_neto" @else data-name="precio_normal" @endif >Precio Normal @if ($esNeto) Neto @endif <span class="text-danger">*</span>  <span class="sort-indicator" style="font-size:18px;"></th>
                            <th @if($esNeto) data-name="precio_oferta_neto" @else data-name="precio_oferta" @endif>Precio Oferta @if ($esNeto) Neto @endif <span class="sort-indicator" style="font-size:18px;"></th>
                            <th><span class="sort-indicator" style="font-size:18px;"></th>
                        </tr>
                    </thead>

                    <tbody id="tbody-detalle-lista-precio" class="tbody-detalle-lista-precio">
                        @include('dashboard.lista-de-precios.tr-detalle-lista-de-precios')
                    </tbody>
                </table>
            </div>
        </div>
    @endsection

    @section('scripts')
        <script>

            
            function editarListaDePrecios(listaPrecioId) {

                var inputNombre = document.getElementById('nombre-lista');
                var nombreListaPrecio = inputNombre.value;

                var inputTipoAjuste = document.getElementById('tipo-de-ajuste');
                var tipoDeAjuste = inputTipoAjuste.value;

                var inputPorcentaje = document.getElementById('porcentaje');
                var porcentaje = inputPorcentaje.value;

                var inputFechaValida = document.getElementById('fecha-valido');
                var fechaValida = inputFechaValida.value;

                var estado = null;
                const checkbox = document.getElementById('checkboxEstado');
                // Verificar si está marcado y obtener el valor
                if (checkbox.checked) {
                    var estado = 'vigente';
                }

                var estadoDependeListaBase = 0;
                const checkboxDependeListaBase = document.getElementById('depende-lista-base');
                if (checkboxDependeListaBase.checked) {
                    var estadoDependeListaBase = 1;
                }
                
                if (!nombreListaPrecio || !tipoDeAjuste || !inputPorcentaje) {
                    alert('Por favor ingrese los campos obligatorios.');
                    return;
                }
               
                //initializeDataTable('table1', 'searchInput1');
                
                var data = new URLSearchParams();
                data.append('listaPrecioId', listaPrecioId);
                data.append('nombreListaPrecio', nombreListaPrecio);
                data.append('tipoDeAjuste', tipoDeAjuste);
                data.append('porcentaje', porcentaje);
                data.append('fechaValida', fechaValida);
                data.append('estado', estado);
                data.append('estadoDependeListaBase', estadoDependeListaBase);

                modalCargando();
                //Enviar la solicitud fetch
                fetch('/dashboard/actualizar-lista-de-precios', {
                        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 => {
                        cerrarCargando();
                        if (data.success) {
                            simpleAlertV2(data.message, 'Lista de precios');
                        } else {
                            alert(data.message)
                            //alert('Error: ' + (data.errors || 'No se pudieron cargar las bodegas.'));
                        }
                        
                    })
                    .catch(error => {
                        cerrarCargando();
                        console.error('Error:', error);
                        alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
                    });

                    return false;
            }

            function actualizarPrecioDetalleListaPrecio(listaPrecioDetalleId) {

                
                var tr = document.getElementById('tr-detalle-lista-precio-' + listaPrecioDetalleId);
                var inputPrecioNormal = tr.querySelector('input[name="precio-normal"]');
                var inputPrecioOferta = tr.querySelector('input[name="precio-oferta"]');

                var inputListaPrecioId = document.getElementById('lista-precio-id');
                var listaPrecioId = inputListaPrecioId.value;

                var precioNormal = inputPrecioNormal.value;
                var precioOferta = inputPrecioOferta.value;

                // Verificar si el campo está vacío, si no es un número o si el valor es menor o igual a 0
                if (isNaN(precioNormal) || precioNormal <= 0) {
                    alert("El campo Precio Normal no puede estar vacío y debe ser mayor a 0.");
                    return false;
                } 
                var data = new URLSearchParams();
                data.append('listaPrecioDetalleId', listaPrecioDetalleId);
                data.append('listaPrecioId', listaPrecioId);
                data.append('precioNormal', precioNormal);
                data.append('precioOferta', precioOferta);
                

                //Enviar la solicitud fetch
                fetch('/dashboard/editar-detalle-lista-de-precios', {
                    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) {
                        simpleAlertV2(data.message, 'Lista de precios');
                    } else {
                        alert('Error: ' + (data.error || 'No se pudo cargar el producto.'));

                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ocurrió un error al cargar el producto. Por favor, inténtelo de nuevo.');

                });

                return false;
            }





            // 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 inputListaPrecioId = document.getElementById('lista-precio-id');
                    var listaPrecioId = inputListaPrecioId.value;


                    // Realiza una solicitud POST usando fetch para obtener los datos filtrados
                    fetch('/dashboard/filtrar-detalle-lista-de-precios', {
                            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
                                listaPrecioId: listaPrecioId
                            })
                        })
                        .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('#tbody-detalle-lista-precio').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