@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>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 registrarListaDePrecios()">
                    {{ 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" required="">
                    </div>
                    

                    <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>
                        <select id="tipo-de-ajuste" id="tipo-de-ajuste" class="col-9 form-control form-control-sm" name="tipo-de-ajuste" required="">
                            <option value="sin ajuste">Sin ajuste</option>
                            <option value="descuento">Descuento</option>
                            <option value="recargo">Recargo</option>
                        </select>
                    </div>
                    <div class="row mb-3">
                        <label for="porcentaje" class="col-3 font-weight-bold">Porcentaje <span class="text-danger">*</span></label>
                        <input type="number" name="porcentaje" id="porcentaje"  class="col-9 form-control form-control-sm" placeholder="Ej. 30" required="">

                    </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" 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" 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>
        </div>
    @endsection

    @section('scripts')
        <script>
            function registrarListaDePrecios() {

                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 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;
                }
               
                var data = new URLSearchParams();
                data.append('nombreListaPrecio', nombreListaPrecio);
                data.append('tipoDeAjuste', tipoDeAjuste);
                data.append('porcentaje', porcentaje);
                data.append('fechaValida', fechaValida);
                data.append('estadoDependeListaBase', estadoDependeListaBase);

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

                    return false;
            }
        </script>
    @endsection