@extends('layouts.dashboard')

@section('dashboard')
@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>Crear factura de compra</strong></li>
    </ul>
    <div class="row">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-4">Crear factura de compra</h1>
        </div>
    </div>

    <form class="row mx-0 form-registro" action="{{ route('ins-factura-compra') }}" id="form-registro-compra" method="post"
        enctype="multipart/form-data" onsubmit="return validarSucursal(this.id)">
        {{ csrf_field() }}
        <div class="col-md pl-0">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            <label for="rut-proveedor" class="d-block font-weight-bold">RUT Proveedor: </label>
                            <input type="text" name="rut-proveedor" id="rut"                                 class="form-control" placeholder="RUT Proveedor" oninput="buscarRutProveedor(this.value)" onfocusout="buscarInformacionProveedor(this.value)"
                                required="">
                        </div>
                        <div class="col-4">
                            <label for="razon-social" class="d-block font-weight-bold">Razón Social </label>
                            <input type="text" id="razon-social" name="razon-social" class="form-control"
                                placeholder="Razón Social"  required="">
                        </div>
                        <div class="col-4">
                            @php
                                $listar_centro_costo = \FCRD::listarCentroCosto();
                            @endphp
                            <label for="centro-costo" class="d-block font-weight-bold">Centro Costo </label>
                            <select class="form-control select2" name="centro-costo" required>
                                <option value="">Elija el centro de costo</option>
                                @foreach ($listar_centro_costo as $centroCosto)
                                    <option value="{{ $centroCosto->centro_costo_id }}">{{ $centroCosto->centro_costo_nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3 mt-3">
                            <label for="nombre-sucursal" class="d-block font-weight-bold">N° de Documento </label>
                            <input type="text" id="numero-documento" name="numero-documento" class="form-control"
                                 placeholder="N° de Documento"
                                onfocusout="validarFolioFacturaCompra(this.value)" required="">
                        </div>
                        <div class="col-3 mt-3">
                            <label for="nombre-sucursal" class="d-block font-weight-bold">Monto </label>
                            <input type="text" readonly id="monto" class="form-control">
                        </div>
                        <div class="col-3 mt-3">
                            <label for="orden-compra" class="d-block font-weight-bold">OC </label>
                            <input type="text" id="orden-compra" name="orden-compra" class="form-control">
                        </div>
                        @php
                            $formasPredefinidas = ['contado', '30 dias', '45 dias', '60 dias', '90 dias', '120 dias', 'transferencia'];
                            $valorCondicion = isset($ordenDeCompra->condiciones_pago) ? strtolower($ordenDeCompra->condiciones_pago) : '';
                            $esOtra = $valorCondicion && !in_array($valorCondicion, $formasPredefinidas);
                        @endphp


                        <div class="col-3 mt-3">
                            <label for="forma-de-pago">Formas de pago <span class="href-rosa">*</span></label>
                            <select name="forma-de-pago" id="forma-de-pago" class="form-control select2" required onchange="mostrarOtraFormaDePago()">
                                <option value="contado" {{ (isset($ordenDeCompra->condiciones_pago) && strtolower($ordenDeCompra->condiciones_pago) == 'contado') ? 'selected' : '' }}>Contado</option>
                                <option value="30 dias" {{ (isset($ordenDeCompra->condiciones_pago) && strtolower($ordenDeCompra->condiciones_pago) == '30 dias') ? 'selected' : '' }}>30 días</option>
                                <option value="45 dias" {{ (isset($ordenDeCompra->condiciones_pago) && strtolower($ordenDeCompra->condiciones_pago) == '45 dias') ? 'selected' : '' }}>45 días</option>
                                <option value="60 dias" {{ (isset($ordenDeCompra->condiciones_pago) && strtolower($ordenDeCompra->condiciones_pago) == '60 dias') ? 'selected' : '' }}>60 días</option>
                                <option value="90 dias" {{ (isset($ordenDeCompra->condiciones_pago) && strtolower($ordenDeCompra->condiciones_pago) == '90 dias') ? 'selected' : '' }}>90 días</option>
                                <option value="120 dias" {{ (isset($ordenDeCompra->condiciones_pago) && strtolower($ordenDeCompra->condiciones_pago) == '120 dias') ? 'selected' : '' }}>120 días</option>
                                <option value="transferencia" {{ (isset($ordenDeCompra->condiciones_pago) && strtolower($ordenDeCompra->condiciones_pago) == 'transferencia') ? 'selected' : '' }}>Transferencia</option>
                                <option value="otra" {{ $esOtra ? 'selected' : '' }}>Otra</option>
                            </select>

                            <input
                                type="text"
                                name="otra-forma-de-pago"
                                id="otra-forma-de-pago"
                                class="form-control mt-2"
                                placeholder="Especificar otra forma de pago"
                                value="{{ $esOtra ? $ordenDeCompra->condiciones_pago : '' }}"
                                style="{{ $esOtra ? '' : 'display: none;' }}"
                            >
                        </div>

                        <div class="col-3 mt-3">
                            <label for="direccion-proveedor" >Direcciones <span class="href-rosa">*</span></label>
                            {{-- <div class="list-direccion-proveedor"> --}}
                                <select name="direccion-proveedor" id="direccion-proveedor" onchange="buscarDireccionProveedor(this.value)" class="form-control">
                                    <option value="">Otra</option>
                                </select>
                            {{-- </div> --}}
                        </div>
                        <div class="col-3 mt-3">
		            		<label for="region">Región <span class="href-rosa">*</span></label>
							@php $regiones = \FCR::getRegiones(); @endphp
		    				<select name="region" id="region" class="form-control select2" required="required" onchange="updComunas(this.value)">
		    					<option value="">Seleccione...</option>
		    					@foreach($regiones as $r)
		    						<option value="{{ $r->region_id }}">{{ $r->region_nombre }}</option>
		    					@endforeach
		    				</select>
			            </div>
			            <div class="col-3 mt-3">
		            		<label for="comuna">Comuna <span class="href-rosa">*</span></label>
							<select name="comuna" id="comuna" class="form-control select2" required="required">
		    					<option value="">Seleccione...</option>
		    				</select>
			            </div>
			            <div class="col-3 mt-3">
	            			<label for="direccion">Dirección <span class="href-rosa">*</span></label>
	            			<input type="text" class="form-control" name="direccion" id="direccion" required="required">
	            		</div>
                        <div class="col-6 mt-3">
                            <label for="fecha-emision" class="d-block font-weight-bold">Fecha de Emisión </label>
                            <input type="date" id="fecha-emision" name="fecha-emision" class="form-control input-date"required="">
                        </div>
                        <div class="col-6 mt-3">
                            <label for="fecha-vencimiento" class="d-block font-weight-bold">Fecha de Vencimiento </label>
                            <input type="date" id="fecha-vencimiento" name="fecha-vencimiento" class="form-control input-date"required="">
                        </div>
                        <div class="col-12 mt-3">
                            <label for="clasificacion" class="d-block font-weight-bold">Observación </label>
                            <textarea name="observacion-compra"  rows="3" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 mt-4 pl-0">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-auto">
                            <h3 class="titulo-h1 mb-3">Productos</h3>
                        </div>
                                                    <div class="col-auto">
                                <button type="button" class="btn btn-success btn-sm" onclick="agregarFilaProductoFacturaCompraManual()">+
                                    Agregar fila</button>
                            </div>
                                            </div>
                    <div class="table-responsive">
                        <table class="table" id="table-productos-documento">
                            <thead>
                                <tr>
                                    <th>Cod. Proveedor</th>
                                    <th>SKU</th>
                                    <th>Productos</th>
                                    <th>Costo (Neto)</th>
                                    <th>Cantidad</th>
                                    <th>Recibido</th>
                                    <th>$ Venta {{ $esNeto ? '(Neto)' : '(Bruto)' }}</th>
                                    <th>$ Oferta {{ $esNeto ? '(Neto)' : '(Bruto)' }}</th>
                                    <th>Subtotal (Factura)</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $num = 1;
                                    $factura_manual = 'si';
                                @endphp
                                @include('dashboard.dte.table-productos-factura-compra')
                            </tbody>
                        </table>
                    </div>
                    <div class="col-12 text-right">
                        <button type="submit" class="btn btn-primary btn-sm" name="button">Recepcionar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

   
@endsection

@section('scripts')
<script>

    function validarFolioFacturaCompra(folioFacturaCompra) {

        // Realizar la petición con `fetch`
        fetch("/dashboard/validar-folio-factura-compra", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": token // Asegúrate de que `token` esté definido globalmente
            },
            body: JSON.stringify({
                folioFacturaCompra: folioFacturaCompra
            })
        })
        .then(response => {
            if (!response.ok) {
            throw new Error(`Error: ${response.statusText}`);
            }
            return response.json(); // Obtener la respuesta como texto
        })
        .then(data => {
           if(data.success){
                alert('Lo sentimos, el folio ingresado no se encuentra disponible.');
                
                var input = document.getElementById('numero-documento');
                input.value = '';
                input.focus();
           }
        })
        .catch(error => {
            console.error("Hubo un problema con la solicitud:", error);
        });
    }

    function agregarFilaProductoFacturaCompraManual() {
        //let mostrar_posicion = "";
        
        try {
            mostrar_posicion = document.getElementById("mostrar-posicion").value;
        } catch (e) {
            // Si no se encuentra el elemento, mantener `mostrar_posicion` como cadena vacía
            mostrar_posicion = "";
        }

        // Realizar la petición con `fetch`
        fetch("/dashboard/cargar-fila-producto-factura-manual", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": token // Asegúrate de que `token` esté definido globalmente
            },
            body: JSON.stringify({
                agregarfilaproductocompra: true,
                mostrar_posicion: mostrar_posicion
            })
        })
        .then(response => {
            if (!response.ok) {
            throw new Error(`Error: ${response.statusText}`);
            }
            return response.text(); // Obtener la respuesta como texto
        })
        .then(data => {
            document.querySelector(".table tbody").insertAdjacentHTML('beforeend', data);
            numFilas(); // Llamar a la función `numFilas` para actualizar el número de filas
        })
        .catch(error => {
            console.error("Hubo un problema con la solicitud:", error);
        });
    }


    function obtenerProductosCompraDTE(skuProducto, idTr,esCodigoProveedor='no') {

        var idTr = "#table-productos-documento #producto-" + idTr;
        var data = new URLSearchParams();
        data.append('skuProducto', skuProducto);
        data.append('esCodigoProveedor', esCodigoProveedor);
        
        

        //Enviar la solicitud fetch
        fetch('/dashboard/buscar-producto-factura-manual', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            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) {
                //AGREGAR LA INFORMACION A LOS INPUT
                document.querySelector(idTr + " .producto").value = data.productoId;
                document.querySelector(idTr + " .titulo").value = data.productoTitulo;
                document.querySelector(idTr + " .cantidad").value = data.cantidad;
                document.querySelector(idTr + " .cantidad-recepcionada").value = data.cantidad;
                document.querySelector(idTr + " .precio-venta").value = data.precioNormal;
                document.querySelector(idTr + " .precio-oferta").value = data.precioOferta;
                document.querySelector(idTr + " .codigo-proveedor").value = data.codigoProveedor;
                document.querySelector(idTr + " .sku-interno").value = data.sku;


                document.querySelector(idTr + " .precio-normal").readOnly = false;
                document.querySelector(idTr + " .precio-venta").readOnly = false;
                document.querySelector(idTr + " .precio-oferta").readOnly = false;
                document.querySelector(idTr + " .sku-interno").readOnly = false;
                if(data.codigoProveedor != ''){
                    document.querySelector(idTr + " .codigo-proveedor").readOnly = true;
                }
                if(data.sku != ''){
                    document.querySelector(idTr + " .sku-interno").readOnly = true;
                }

            } else {
                if (data.message) {
                    alert(data.message, 'Factura de compra');
                    document.querySelector(idTr + " .titulo").value = '';
                    document.querySelector(idTr + " .precio-normal").value = '';
                    document.querySelector(idTr + " .cantidad").value = '';
                    document.querySelector(idTr + " .cantidad-recepcionada").value = '';
                    document.querySelector(idTr + " .precio-venta").value = '';
                    document.querySelector(idTr + " .precio-oferta").value = '';

                    //DEJAR LOS INPUT COMO READONLY EN CASO DE ERROR:
                    document.querySelector(idTr + " .precio-normal").readOnly = true;
                    document.querySelector(idTr + " .precio-venta").readOnly = true;
                    document.querySelector(idTr + " .precio-oferta").readOnly = true;
                    document.querySelector(idTr + " .sku-interno").readOnly = false;
                    document.querySelector(idTr + " .codigo-proveedor").readOnly = false;

                }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;
    }
    
    function buscarInformacionProveedor(rutProveedor = null, proveedorId = null) {

        var inputRut = document.getElementById('rut');
        var inputNombre = document.getElementById('razon-social');
        var inputDireccion = document.getElementById('direccion');

        const region = document.getElementById('region');
        const comuna = document.getElementById('comuna');

        var data = new URLSearchParams();
        data.append('rutProveedor', rutProveedor);
        data.append('proveedorId', proveedorId);

        

        fetch('/dashboard/buscar-informacion-proveedor', {
                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 => {
                document.querySelector("#list-autocomplete-rut")?.remove();
                if (data.success) {

                    
                    document.querySelector("#list-autocomplete-rut")?.remove();

                    if (inputRut) inputRut.value = data.rut || '';
                    if (inputNombre) inputNombre.value = data.nombre || 'holaaa';
                    if (inputDireccion) inputDireccion.value = data.direccion || '';

                    if (data.comuna) {
                        const opRegion = document.querySelector(
                            `#region option[value="${data.region}"], #region-despacho option[value="${data.region}"]`
                        );
                        if (opRegion) {
                            opRegion.selected = true;
                            document.querySelectorAll(
                                "#region + .select2-container .select2-selection__rendered, #region-despacho + .select2-container .select2-selection__rendered"
                            ).forEach(el => el.textContent = opRegion.textContent);
                        }

                        updComunas(data.region, "", "", data.comuna, "", false);
                        if (document.querySelector("#comuna-despacho")) {
                            updComunas(data.region, "", "", data.comuna, "comuna-despacho");
                        }
                    }

                    /*===============================================
                    DIRECCIONES PROVEEDOR
                    =================================================*/

                    const selectDireccion = document.getElementById('direccion-proveedor');

                    //Limpiar opciones anteriores
                    selectDireccion.innerHTML = '';

                    //Agregar las direcciones desde el backend
                    if (data.direccionesProveedor && Array.isArray(data.direccionesProveedor)) {
                        data.direccionesProveedor.forEach((direccion) => {
                            let nombreSucursal = direccion.nombre_sucursal ? direccion.nombre_sucursal
                                .trim() : '';
                            let direccionCalle = direccion.direccion_calle ? direccion.direccion_calle
                                .trim() : '';
                            let comunaProveedor = direccion.comuna_nombre ? direccion.comuna_nombre.trim() :
                                '';

                            let textoOpcion = nombreSucursal ?
                                `${nombreSucursal} - ${direccionCalle}, ${comunaProveedor}` :
                                `${direccionCalle}, ${comunaProveedor}`;

                            const option = document.createElement('option');
                            option.value = direccion.id; //Asegúrate que el backend retorne este campo
                            option.textContent = textoOpcion;

                            selectDireccion.appendChild(option);
                        });
                    }

                    //Agregar la opción "Otra" al final
                    const otraOption = document.createElement('option');
                    otraOption.value = '';
                    otraOption.textContent = 'Otra';
                    selectDireccion.appendChild(otraOption);
                } else {
                    inputNombre.value = '';
                    inputDireccion.value = '';

                    if (region) {
                        region.value = '';
                        $('#region').trigger('change');
                    }
                    if (comuna) {
                        comuna.innerHTML = '<option value="">Seleccione una comuna</option>';
                        $('#comuna').trigger('change');
                    }
                    //alert(data.error+ ' 1 ')
                    //alert('Error: ' + (data.error || 'No se pudo cargar la informacion del cliente 1.'));
                }

            })
            .catch(error => {

                inputNombre.value = '';
                inputDireccion.value = '';

                if (region) {
                    region.value = '';
                    $('#region').trigger('change');
                }
                if (comuna) {
                    comuna.innerHTML = '<option value="">Seleccione una comuna</option>';
                    $('#comuna').trigger('change');
                }
                //console.error('Error:', error);
                //alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
            });

        return false;
    }

    function buscarDireccionProveedor(proveedorDireccionId) {

        var inputDireccion = document.getElementById('direccion');

        const region = document.getElementById('region');
        const comuna = document.getElementById('comuna');

        var data = new URLSearchParams();
        data.append('proveedorDireccionId', proveedorDireccionId);


        fetch('/dashboard/buscar-direccion-proveedor', {
                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) {

                    if (inputDireccion) inputDireccion.value = data.direccion || '';

                    if (data.comuna) {
                        const opRegion = document.querySelector(
                            `#region option[value="${data.region}"], #region-despacho option[value="${data.region}"]`
                        );
                        if (opRegion) {
                            opRegion.selected = true;
                            document.querySelectorAll(
                                "#region + .select2-container .select2-selection__rendered, #region-despacho + .select2-container .select2-selection__rendered"
                            ).forEach(el => el.textContent = opRegion.textContent);
                        }

                        updComunas(data.region, "", "", data.comuna, "", false);
                        if (document.querySelector("#comuna-despacho")) {
                            updComunas(data.region, "", "", data.comuna, "comuna-despacho");
                        }
                    }

                } else {
                    //inputNombre.value = '';
                    inputDireccion.value = '';

                    if (region) {
                        region.value = '';
                        $('#region').trigger('change');
                    }
                    if (comuna) {
                        comuna.innerHTML = '<option value="">Seleccione una comuna</option>';
                        $('#comuna').trigger('change');
                    }

                }

            })
            .catch(error => {

                //inputNombre.value = '';
                inputDireccion.value = '';

                if (region) {
                    region.value = '';
                    $('#region').trigger('change');
                }
                if (comuna) {
                    comuna.innerHTML = '<option value="">Seleccione una comuna</option>';
                    $('#comuna').trigger('change');
                }

            });

        return false;
    }

    function mostrarOtraFormaDePago() {
        const select = document.getElementById('forma-de-pago');
        const inputOtra = document.getElementById('otra-forma-de-pago');

        if (select.value === 'otra') {
            inputOtra.style.display = 'block';
            inputOtra.required = true;
        } else {
            inputOtra.style.display = 'none';
            inputOtra.required = false;
            inputOtra.value = '';
        }
    }

    function buscarRutProveedor(rutONombreBusqueda) {

        var data = new URLSearchParams();
        data.append('rutONombreBusqueda', rutONombreBusqueda);


        fetch('/dashboard/buscar-rut-proveedor', {
                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) {
                    var inputRut = document.getElementById('rut');
                    const oldList = document.querySelector("#list-autocomplete-rut");
                    if (oldList) oldList.remove();

                    // if (document.activeElement === rutCliente && rut !== "") {
                    const tempContainer = document.createElement("div")
                    tempContainer.innerHTML = data.html;
                    inputRut.insertAdjacentElement("afterend", tempContainer.firstElementChild);
                    // }
                } else {
                    console.error(data.error)
                    //alert('Error: ' + (data.error || 'No se pudo cargar la informacion del cliente.'));
                }

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

        return false;
    }
</script>
@endsection