@extends('layouts.dashboard')

@section('dashboard')
    @php
        $ordenDeCompraId = 0;
        $proveedorId = 0;
        if (isset($ordenDeCompra->id)) {
            $ordenDeCompraId = $ordenDeCompra->id;
        }
        if (isset($ordenDeCompra->proveedor_id)) {
            $proveedorId = $ordenDeCompra->proveedor_id;
        }
    @endphp
    <style type="text/css">
        .select2-container {
            width: 100% !important;
        }
    </style>

    @php
        $num = '';
    @endphp
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Ordenes de compra</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1 mb-0">Ordenes de compra</h1>
        </div>
    </div>

    @if (session('message'))
        <div class="alert {{ session('alert') }} mb-3">
            {!! session('message') !!}
        </div>
    @endif

    <div class="card mt-4" style="top: 0;">
        <div class="card-body">
            <form class="row row-mini align-items-end justify-content-end form-registro form-enter" method="post" class="form-inline"id="form-filtro" onsubmit="return buscarProductosOrdenDeCompra()">
                {{ csrf_field() }}
                @php $marcas = \FCR::getMarcas(); @endphp
                @if (count($marcas) > 0)
                    <div class="col form-group mb-lg-0">
                        <label for="marca-vehiculo" class="small mb-0">Marca Vehículo</label>
                        <select class="form-control select2" name="marcavehiculo" id="marca-vehiculo"
                            onchange="listModelos(this.value, '', 'true');">
                            <option value="">-- Marca --</option>
                            @foreach ($marcas as $marca)
                                <option value="{{ $marca->marca_id }}">{{ ucwords(mb_strtolower($marca->marca_nombre)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col form-group mb-lg-0">
                        <label for="modelo-vehiculo" class="small mb-0">Modelo Vehículo</label>
                        <select class="form-control select2" name="modelovehiculo" id="modelo-vehiculo"
                            onchange="listAnios(this.value, '', 'true');">
                            <option value="">-- Modelo --</option>
                        </select>
                    </div>
                    <div class="col form-group mb-lg-0">
                        <label for="anio-vehiculo" class="small mb-0">Año Vehículo</label>
                        <select class="form-control select2" name="aniovehiculo" id="anio-vehiculo">
                            <option value="">-- Año --</option>
                        </select>
                    </div>
                @endif
                <div class="col-4 form-group mb-lg-0">
                    <label for="buscar" class="small mb-0">Buscar Producto</label>
                    <input type="search" class="form-control input-filtrar-producto alert-warning" name="buscar" id="buscar"
                        style="background: #fff3cd;" autocomplete="off" autofocus="true">
                </div>
                
                <div class="col-auto form-group mb-lg-0 text-right">
                    <button type="submit" class="btn btn-primary btn-sm blq-btn"><i class="fa fa-search"></i> Filtrar</button>
                </div>
            
            </form>
            <div class="pt-3">
                <div class="table-scroll">
                    <table class="table table-hover mt-0 table-list-productos">
                        <thead>
                            <tr>
                                <th width="76">Imagen</th>
                                <th>Título</th>
                                <th class="text-center">Precio / Stock</th>
                                <th class="text-right">
                                    
                                    <button type="button" class="btn btn-primary btn-sm btn-mini"
                                        onclick="mostrarOcultar(this, 'tbody-productos')"><i class="fa fa-eye"></i></button>
                                    
                                </th>
                            </tr>
                        </thead>
                        <tbody class="tbody-productos">
                            @include('dashboard.panel-ordenes-de-compras.listado-productos')
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <form class="form-registro" id="form-cotizacion" target="_blank">
        {{ csrf_field() }}
        <div class="card mt-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-12 table-responsive">
                        <table class="table table-hover" id="table-productos-documento">
                            <thead>
                                <tr>
                                    <th>SKU <span class="href-rosa">*</span></th>
                                    <th>Codigo Proveedor</th>
                                    <th>Descripción <span class="href-rosa">*</span></th>
                                    <th>Cantidad <span class="href-rosa">*</span></th>
                                    <th>Precio Neto <span class="href-rosa">*</span></th>
                                    <th>Descuento (%)</th>
                                    <th>Subtotal Neto</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody class="tbody-productos-carrito">
                                @if (!empty($productosOrdenDeCompra) && $productosOrdenDeCompra->isNotEmpty())
                                    @foreach ($productosOrdenDeCompra as $producto)
                                        <tr class="producto-carrito-{{$producto->producto_id}}">
                                            <td>
                                                <span class="form-control border px-2 blq-btn codigo-sku"> @if ($producto->sku_producto){{$producto->sku_producto}}@endif</span>
                                                <input type="hidden" name="producto-id" id="producto-id" @if ($producto->producto_id)value="{{ $producto->producto_id }}" @endif> 
                                                
                                            </td>

                                            <td>
                                                <input type="text" name="codigo-proveedor[]" class="form-control border codigo-proveedor" @if ($producto->codigo_proveedor_producto) value="{{$producto->codigo_proveedor_producto}}" @endif>
                                            </td>

                                            <td class="w-25">
                                                <textarea name="descripcion[]" required class="form-control border titulo campo-enter" rows="1">@if ($producto->descripcion_producto){{$producto->descripcion_producto}}@endif</textarea>
                                            </td>
                                            <td style="width: 120px;">
                                                <input type="number" name="cantidad[]" class="form-control border cantidad campo-enter text-center" min="1" required="" @if ($producto->cantidad) value="{{$producto->cantidad}}" @endif>
                                            </td>
                                            <td style="width: 120px;">
                                                <input type="number" name="precio-unitario[]" class="form-control border input-number-decimal campo-enter text-center" @if ($producto->precio_unitario_neto) value="{{$producto->precio_unitario_neto}}" @endif required="" min="0">
                                            </td>
                                            <td style="width: 120px;">
                                                <input type="number" name="descuento[]" class="form-control border input-number-decimal descuento campo-enter text-center"value="{{$producto->descuento_porcentaje}}">
                                            </td>    
                                            <td>
                                                <input type="text" name="subtotal[]" class="form-control border disabled subtotal text-right" readonly="" @if ($producto->subtotal_bruto) value="{{$producto->subtotal_bruto}}" @endif>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-circle btn-xs btn-mini" onclick="eliminarProductoCarritoOrdenDeCompra({{$producto->producto_id}})">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-7">
                        <textarea name="observaciones" id="observaciones" class="form-control border" maxlength="450"
                            placeholder="Observaciones y/o comentarios (máx. 450 caracteres)" rows="6">@if (isset($ordenDeCompra->observaciones) && !empty($ordenDeCompra->observaciones)){{$ordenDeCompra->observaciones}}@endif
                        </textarea>
                    </div>
                    <div class="col-md">
                        <div class="bg-light border pt-2" id="total-cotizacion">
                            <div class="row m-0 align-items-center">
                                <div class="col-md-7">
                                    <p>Subtotal</p>
                                </div>
                                <div class="col-md-5 text-right">
                                    <p id="subtotal_general">$0</p>
                                </div>
                            </div>
                            <div class="row m-0 align-items-center">
                                <div class="col-md-7">
                                    <p>Neto</p>
                                </div>
                                <div class="col-md-5 text-right">
                                    <p id="neto_general">$0</p>
                                </div>
                            </div>
                            <div class="row m-0 align-items-center">
                                <div class="col-md-7">
                                    <p>IVA</p>
                                </div>
                                <div class="col-md-5 text-right">
                                    <p id="iva_general">$0</p>
                                </div>
                            </div>
                            <div class="row m-0 align-items-center">
                                <div class="col-md-7">
                                    <p class="font-weight-bold">Total</p>
                                </div>
                                <div class="col-md-5 text-right">
                                    <p id="total_general">$0</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 text-right mt-4">
                        <div class="row justify-content-end">
                            <div class="col-auto">
                                <button type="button" onclick="abrirModalFormCrearOrdenDeCompra({{$ordenDeCompraId}},{{$proveedorId}})" class="btn btn-primary ml-1 btn-sm blq-btn-producto"><i class="fa fa-check-square-o"></i> 
                                    @if ($ordenDeCompraId)
                                        Editar
                                    @else
                                        Crear
                                    @endif 
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

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

        var selectMarcaVehiculo = document.getElementById('marca-vehiculo');
        var marcaId = selectMarcaVehiculo.value;

        var selectModeloVehiculo = document.getElementById('modelo-vehiculo');
        var modeloId = selectModeloVehiculo.value;

        var selectAnioVehiculo = document.getElementById('anio-vehiculo');
        var anioVehiculo = selectAnioVehiculo.value;

        var inputBuscarProducto = document.getElementById('buscar');
        var buscarProducto = inputBuscarProducto.value;
        
        document.querySelector('.tbody-productos')?.classList.remove('d-none');

        var data = new URLSearchParams();
        data.append('marcaId', marcaId);
        data.append('modeloId', modeloId);
        data.append('anioVehiculo', anioVehiculo);
        data.append('buscarProducto', buscarProducto);

        modalCargando();
        fetch('/dashboard/buscar-productos-ordenes-de-compra', {
            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.text(); //Parsear la respuesta JSON
        })
        .then(data => {
            cerrarCargando();
            //alert(data)
            document.querySelector('.tbody-productos').innerHTML = data;
            
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
        });

        return false;
    }

    function agregarProductoCarritoOrdenDeCompra(productoDetalleId,productoId){
        
        
        var data = new URLSearchParams();
        data.append('productoDetalleId', productoDetalleId);
        data.append('productoId', productoId);

        modalCargando();
        fetch('/dashboard/agregar-producto-carrito-orden-de-compra', {
            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();
            //alert(data)
            if(data.success){
                const productoId     = data.productoId;
                const tbody          = document.querySelector('.tbody-productos-carrito');
                const existe         = tbody.querySelector(`.producto-carrito-${productoId}`);

                if (existe) {
                    alert('Este producto ya fue agregado al carrito.');
                    return;
                }

                // Agrega el nuevo <tr> sin borrar los existentes
                tbody.insertAdjacentHTML('beforeend', data.viewTrProducto);
            }else{
                alert(data.message);
            }
            
            
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ocurrió un error al cargar la informacion. Por favor, inténtelo de nuevo.');
        });

        return false;
    }

    function eliminarProductoCarritoOrdenDeCompra(productoId) {
        const fila = document.querySelector('.producto-carrito-' + productoId);
        
        if (fila) {
            fila.remove();
            recalcularTotales(); 
        } else {
            console.warn('No se encontró la fila para eliminar');
        }
    }

    function recalcularTotales() {
        let totalNeto = 0;

        document.querySelectorAll('.tbody-productos-carrito tr').forEach(function (fila) {
            const cantidad = parseFloat(fila.querySelector('[name="cantidad[]"]').value) || 0;
            const precioUnitario = parseFloat(fila.querySelector('[name="precio-unitario[]"]').value) || 0;
            const descuento = parseFloat(fila.querySelector('[name="descuento[]"]').value) || 0;

            // Calcular subtotal neto por producto
            let subtotalNeto = cantidad * precioUnitario;
            if (descuento > 0) {
                subtotalNeto = subtotalNeto * (1 - descuento / 100);
            }

            // Mostrar subtotal en el campo correspondiente
            const campoSubtotal = fila.querySelector('[name="subtotal[]"]');
            campoSubtotal.value = '$' + subtotalNeto.toLocaleString('es-CL', { minimumFractionDigits: 0 });

            totalNeto += subtotalNeto;
        });

        // Calcular IVA y Total
        const iva = Math.round(totalNeto * 0.19);
        const total = totalNeto + iva;

        // Mostrar resultados
        document.getElementById('subtotal_general').textContent = '$' + total.toLocaleString('es-CL');
        document.getElementById('neto_general').textContent = '$' + totalNeto.toLocaleString('es-CL');
        document.getElementById('iva_general').textContent = '$' + iva.toLocaleString('es-CL');
        document.getElementById('total_general').textContent = '$' + total.toLocaleString('es-CL');
    }


    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('.tbody-productos-carrito').addEventListener('input', function (e) {
            if (
                e.target.name === 'precio-unitario[]' ||
                e.target.name === 'cantidad[]' ||
                e.target.name === 'descuento[]'
            ) {
                recalcularTotales();
            }
        });
    });

    function abrirModalFormCrearOrdenDeCompra(ordenDeCompraId = null, provedorId = null){
        const filas = document.querySelectorAll('.tbody-productos-carrito tr');
        const productosCarrito = obtenerItemsDeCarrito();
        
        if (filas.length === 0) {
            alert('Debe agregar al menos un producto al carrito.');
            return false;
        }

        for (let i = 0; i < filas.length; i++) {
            const fila = filas[i];

            const cantidadInput = fila.querySelector('input[name="cantidad[]"]');
            const precioUnitarioInput = fila.querySelector('input[name="precio-unitario[]"]');
        
            const inputCodigoProveedor = fila.querySelector('input[name="codigo-proveedor[]"]');
            const textAreaDescripcion = fila.querySelector('textarea[name="descripcion[]"]');

            const cantidad = parseFloat(cantidadInput.value) || 0;
            const precioUnitario = parseFloat(precioUnitarioInput.value) || 0;

            
            if (cantidad <= 0) {
                alert('La cantidad del producto en la fila ' + (i + 1) + ' debe ser mayor a 0.');
                return false;
            }

            if (precioUnitario <= 0) {
                alert('El precio unitario del producto en la fila ' + (i + 1) + ' debe ser mayor a 0.');
                return false;
            }

            // if (!inputCodigoProveedor || inputCodigoProveedor.value.trim() === '') {
            //     alert('El código de proveedor de la fila ' + (i + 1) + ' no puede quedar vacío.');
            //     return false;
            // }

            if (!textAreaDescripcion || textAreaDescripcion.value.trim() === '') {
                alert('La descripción de la fila ' + (i + 1) + ' no puede quedar vacía.');
                return false;
            }
        }

        fetch("/dashboard/modal-crear-orden-de-compra", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                ordenDeCompraId: ordenDeCompraId,
                modalCrearOrdenDeCompra: true
            })
           
        })
        .then(response => response.json())
        .then(data => {
            
            if(data.success){
                // Insertar el contenido en el modal
                document.getElementById("modal-ajax").innerHTML = data.viewModalOrdenDeCompra;

                // Mostrar el modal (usando Bootstrap sin jQuery)
                if (provedorId) {
                    buscarInformacionProveedor(null,provedorId);
                }
                
                const modalElement = document.getElementById("modal-subajax");
                const bootstrapModal = new bootstrap.Modal(modalElement, {
                    backdrop: "static"
                });
                bootstrapModal.show();
                $(".select2").select2();
            }
            
        
        })
        .catch(error => {
            console.error("Error al cargar el modal:", error);
        });
    }


    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-busqueda');
                    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;
    }

    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 => {
                //document.querySelector("#list-autocomplete-rut")?.remove();
                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");
                        }
                    }

                    /*===============================================
                    DIRECCIONES PROVEEDOR
                    =================================================*/
                } 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 buscarInformacionProveedor(rutProveedor = null, proveedorId = null) {

        var inputRut = document.getElementById('rut-busqueda');
        var inputNombre = document.getElementById('nombre');
        var inputGiro = document.getElementById('giro');
        var inputDireccion = document.getElementById('direccion');
        const direccionActual = inputDireccion.value?.trim();
        
        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) {

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

                    
                    if (!direccionActual || direccionActual.trim() === data.direccion.trim()) {
                        
                        if (inputDireccion) inputDireccion.value = data.direccion || '';
                        if (inputRut) inputRut.value = data.rut || '';
                        if (inputNombre) inputNombre.value = data.nombre || '';
                        if (inputGiro) inputGiro.value = data.giro || '';
                        

                        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;
                            option.textContent = textoOpcion;

                            // Si coincide con el valor actual del input direccion, seleccionarla
                            if (direccionActual && direccionCalle.toLowerCase() === direccionActual.toLowerCase()) {
                                option.selected = true;
                            }

                            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 = '';
                    inputGiro.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 = '';
                inputGiro.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 crearOrdenDeCompra() {

        var inputRut                = document.getElementById('rut-busqueda');
        var rutProveedor            = inputRut.value;

        var inputNombreProveedor    = document.getElementById('nombre');
        var razonSocial             = inputNombreProveedor.value;

        var inputGiro               = document.getElementById('giro');
        var giro                    = inputGiro.value;

        var inputProveedorDireccion = document.getElementById('direccion-proveedor');
        var proveedorDireccionId    = inputProveedorDireccion.value;

        var selectRegion            = document.getElementById('region');
        var regionId                = selectRegion.value;

        var selectComuna            = document.getElementById('comuna');
        var comunaId                = selectComuna.value;

        var inputDireccion          = document.getElementById('direccion');
        var direccionProveedor      = inputDireccion.value;
        
        var inputValidez            = document.getElementById('validez');
        var validez                 = inputValidez.value;

        var inputPeriodoDeEntrega   = document.getElementById('periodo-de-entrega');
        var periodoDeEntrega        = inputPeriodoDeEntrega.value;

        var inputFormaDePago        = document.getElementById('forma-de-pago');
        var formaDePago             = inputFormaDePago.value;

        var inputOtraFormaDePago    = document.getElementById('otra-forma-de-pago');
        var otraFormaDePago         = inputOtraFormaDePago.value;

        var textAreaObservaciones   = document.getElementById('observaciones');
        var observaciones           = textAreaObservaciones.value;
        
        var neto = limpiarMonto(document.getElementById('neto_general').innerText);
        var iva = limpiarMonto(document.getElementById('iva_general').innerText);
        var total = limpiarMonto(document.getElementById('total_general').innerText);


        const productosCarrito = obtenerItemsDeCarrito();
        // console.log(productosCarrito)
        // return false;

        var data = new URLSearchParams();
        data.append('rutProveedor', rutProveedor);
        data.append('razonSocial', razonSocial);
        data.append('giro', giro);
        data.append('proveedorDireccionId', proveedorDireccionId);
        data.append('regionId', regionId);
        data.append('comunaId', comunaId);
        data.append('direccionProveedor', direccionProveedor);
        data.append('validez', validez);
        data.append('periodoDeEntrega', periodoDeEntrega);
        data.append('formaDePago', formaDePago);
        data.append('otraFormaDePago', otraFormaDePago);
        data.append('observaciones', observaciones);
        data.append('neto', neto);
        data.append('iva', iva);
        data.append('total', total);
        data.append('productosCarrito', JSON.stringify(productosCarrito));
        modalCargando();
        //Enviar la solicitud fetch
        fetch('/dashboard/crear-orden-de-compra', {
            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) {
                
                simpleAlert(data.message);
                cerrarModal();
                limpiarCarritoOrdenDeCompra();
                window.open(data.url, '_blank');


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

        return false;
    }

    function editarOrdenDeCompra(ordenDeCompraId) {

        var inputRut                = document.getElementById('rut-busqueda');
        var rutProveedor            = inputRut.value;

        var inputNombreProveedor    = document.getElementById('nombre');
        var razonSocial             = inputNombreProveedor.value;

        var inputGiro               = document.getElementById('giro');
        var giro                    = inputGiro.value;

        var inputProveedorDireccion = document.getElementById('direccion-proveedor');
        var proveedorDireccionId    = inputProveedorDireccion.value;

        var selectRegion            = document.getElementById('region');
        var regionId                = selectRegion.value;

        var selectComuna            = document.getElementById('comuna');
        var comunaId                = selectComuna.value;

        var inputDireccion          = document.getElementById('direccion');
        var direccionProveedor      = inputDireccion.value;
        
        var inputValidez            = document.getElementById('validez');
        var validez                 = inputValidez.value;

        var inputPeriodoDeEntrega   = document.getElementById('periodo-de-entrega');
        var periodoDeEntrega        = inputPeriodoDeEntrega.value;

        var inputFormaDePago        = document.getElementById('forma-de-pago');
        var formaDePago             = inputFormaDePago.value;

        var inputOtraFormaDePago    = document.getElementById('otra-forma-de-pago');
        var otraFormaDePago         = inputOtraFormaDePago.value;

        var textAreaObservaciones   = document.getElementById('observaciones');
        var observaciones           = textAreaObservaciones.value;
        
        var neto = limpiarMonto(document.getElementById('neto_general').innerText);
        var iva = limpiarMonto(document.getElementById('iva_general').innerText);
        var total = limpiarMonto(document.getElementById('total_general').innerText);

    
        const productosCarrito = obtenerItemsDeCarrito();
        var data = new URLSearchParams();
        data.append('ordenDeCompraId', ordenDeCompraId);
        data.append('rutProveedor', rutProveedor);
        data.append('razonSocial', razonSocial);
        data.append('giro', giro);
        data.append('proveedorDireccionId', proveedorDireccionId);
        data.append('regionId', regionId);
        data.append('comunaId', comunaId);
        data.append('direccionProveedor', direccionProveedor);
        data.append('validez', validez);
        data.append('periodoDeEntrega', periodoDeEntrega);
        data.append('formaDePago', formaDePago);
        data.append('otraFormaDePago', otraFormaDePago);
        data.append('observaciones', observaciones);
        data.append('neto', neto);
        data.append('iva', iva);
        data.append('total', total);
        data.append('productosCarrito', JSON.stringify(productosCarrito));
        modalCargando();
        //Enviar la solicitud fetch
        fetch('/dashboard/editar-orden-de-compra', {
            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) {
                
                simpleAlert(data.message);
                cerrarModal();
                window.open(data.url, '_blank');

                //cargarDireccionesProveedor(proveedorId);

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

        return false;
    }

    function limpiarMonto(valor) {
        return parseInt(valor.replace(/\$/g, '').replace(/\./g, '').trim()) || 0;
    }

    function obtenerItemsDeCarrito() {
        const filas = document.querySelectorAll('.tbody-productos-carrito tr');
        const items = [];

        filas.forEach((fila) => {
            const productoId = fila.querySelector('input[name="producto-id"]')?.value || null;
            const sku = fila.querySelector('.codigo-sku')?.innerText?.trim() || '';
            const codigoProveedor = parseInt(fila.querySelector('input[name="codigo-proveedor[]"]')?.value || '');
            const descripcion = fila.querySelector('textarea[name="descripcion[]"]')?.value?.trim() || '';
            const cantidad = parseInt(fila.querySelector('input[name="cantidad[]"]')?.value || 0);
            const precioUnitarioNeto = parseInt(fila.querySelector('input[name="precio-unitario[]"]')?.value?.replace(/\./g, '') || 0);
            const descuento = parseInt(fila.querySelector('input[name="descuento[]"]')?.value || 0);

            let subtotalNeto = cantidad * precioUnitarioNeto;

            if (descuento > 0) {
                subtotalNeto = subtotalNeto * (1 - descuento / 100);
            }

            const subtotalBruto = Math.round(subtotalNeto * 1.19);

            items.push({
                producto_id: productoId,
                sku_producto: sku,
                codigo_proveedor_producto: codigoProveedor,
                descripcion_producto: descripcion,
                cantidad: cantidad,
                precio_unitario_neto: precioUnitarioNeto,
                descuento_porcentaje: descuento,
                subtotal_neto: Math.round(subtotalNeto),
                subtotal_bruto: subtotalBruto
            });
        });

        return items;
    }


    function limpiarCarritoOrdenDeCompra() {
        const tbody = document.querySelector('.tbody-productos-carrito');
        if (tbody) {
            tbody.innerHTML = ''; // Elimina todas las filas
            recalcularTotales();  // Reinicia los totales a cero
        }
    }

    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 = '';
        }
    }

    // Ejecutar al cargar por si viene precargado como "otra"
    document.addEventListener('DOMContentLoaded', function() {
        mostrarOtraFormaDePago();
    });


    window.onload = function () {
        recalcularTotales();
    };
    

</script>   
@endsection