@extends('voyager::master')

@section('page_title', 'Crear factura')

@section('head')
    <style>
        .table-1.table-hover>tbody>tr:hover {
            background-color: initial !important;
        }

        .voyager .table-1.table>thead>tr>th {
            background-color: #e6e6e6 !important;
        }

        .table-1.table>tbody>tr>td {
            border-top: none;
        }

        .cantInput input {
            width: 50px;
        }

        .precioInput input {
            width: 120px;
        }

        .bonifInput input {
            width: 40px;
        }

        .discount-container {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
        }

        .header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .header .icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }

        h3 {
            font-size: 18px;
            margin: 0;
        }

        .discount-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .discount-row label {
            font-size: 14px;
            flex: 1;
        }

        .discount-row input {
            width: 50px;
            padding: 5px;
            text-align: right;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 5px;
        }

        .discount-row span {
            font-size: 14px;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
        }

        .btn-close {
            background-color: #337ab7;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-close:hover {
            background-color: #286090;
        }

        .btn-edit {
            background-color: #5cb85c;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-edit:hover {
            background-color: #4cae4c;
        }

        .productos .dropdown-menu {
            position: absolute;
            background-color: white;
            border: 1px solid #ddd;
            list-style-type: none;
            padding: 0;
            margin: 0;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1050;
            /* Asegúrate de que el z-index sea alto para que se muestre sobre otros elementos */
            width: 100%;
            /* Esto hará que el dropdown tenga el mismo ancho que el input */
        }
    </style>
@endsection


@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="card" style="margin-bottom: 10px;">
                            <div class="card-header">
                                <h5>Facturación</h5>
                            </div>
                        </div>
                        <table id="dataTable" class="table table-hover table-1">
                            <thead>
                                <tr>
                                    <th style="width: 10%;">Datos del cliente:</th>
                                    <th></th>
                                    <th style="width: 15%;">Datos de la operación</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-weight: bold;">Cliente:</td>
                                    <td>{{ $cliente->name }}</td>
                                    <td style="font-weight: bold;">Cond. IVA: </td>
                                    <td></td>
                                    <td style="font-weight: bold;">DNI: </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold;">Lista: </td>
                                    {{-- <td>[{{ $cliente->lista_precios }}] Lista de precios {{ $cliente->lista_precios }}</td> --}}
                                    <td>
                                        <select id="listaPrecios" class="form-control">
                                            <option value="1" {{ $cliente->lista_precios == 1 ? 'selected' : '' }}>
                                                Lista 1</option>
                                            <option value="2" {{ $cliente->lista_precios == 2 ? 'selected' : '' }}>
                                                Lista 2</option>
                                            <option value="3" {{ $cliente->lista_precios == 3 ? 'selected' : '' }}>
                                                Lista 3</option>
                                            <option value="4" {{ $cliente->lista_precios == 4 ? 'selected' : '' }}>
                                                Lista 4</option>
                                        </select>
                                    </td>
                                    <td style="font-weight: bold;">Cond. Venta: </td>
                                    <td></td>
                                    <td style="font-weight: bold;">Vencimiento: </td>
                                    <td>07/08/2024</td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold;">Cond. entrega: </td>
                                    <td></td>
                                    <td style="font-weight: bold;">Moneda: </td>
                                    <td>[1] Pesos argentinos</td>
                                    <td style="font-weight: bold;">Referencia / OC: </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold;">Vendedor: </td>
                                    <td></td>
                                    <td style="font-weight: bold;">Transporte: </td>
                                    <td>Transporte Interno</td>
                                    <td style="font-weight: bold;"></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>

                        <table id="articulosTable" class="table table-hover table-1 productos" style="position: relative">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Artículo</th>
                                    <th>Cantidad</th>
                                    <th>Precio Unitario</th>
                                    <th>Bonificación</th>
                                    <th>Subtotal</th>
                                    <th>Alicuota IVA</th>
                                    <th>Importe IVA</th>
                                    <th>Subtotal con IVA</th>
                                    <th>Acción</th>
                                </tr>
                            </thead>
                            <tbody id="articulosBody">
                                <!-- Filas dinámicas aquí -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="8" style="text-align: right; font-weight: bold;">Total:</td>
                                    <td><input type="text" id="totalFactura" class="form-control" readonly></td>
                                </tr>
                            </tfoot>
                        </table>

                        <div style="display: flex; justify-content: end; margin-bottom: 25px;">
                            <button id="agregarFila" class="link">
                                <img src="{{ voyager_asset('images/iconos/mas.webp') }}" alt="">
                                Agregar Producto
                            </button>
                        </div>

                        <div class="row" style="margin-top: 20px;">
                            <div class="col-md-4">
                                <label for="descuento">Descuento (%)</label>
                                <input type="number" id="descuento" class="form-control" value="0">
                            </div>
                        </div>

                        <div class="row" style="margin-top: 10px;">
                            <div class="col-md-4">
                                <label for="totalConDescuento">Total con Descuento</label>
                                <input type="text" id="totalConDescuento" class="form-control" readonly>
                            </div>
                        </div>

                        <table id="dataTable" class="table table-hover table-1">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" name="sumar" id="sumar">
                                        Sumar articulos al stock?
                                    </th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>

                        </table>

                        <table id="dataTable" class="table table-hover table-1">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" name="notificar" id="notificar">
                                        Al autorizar notificar al cliente
                                    </th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-weight: bold;">Domicilio:</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold;">Dirección: </td>
                                    <td></td>
                                    <td style="font-weight: bold;">Fecha de entrega: </td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                        <div style="display: flex; justify-content: end; margin: 20px;">
                            <button id="confirmarBtn" class="btn btn-success">Confirmar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#confirmarBtn').on('click', function(e) {
                e.preventDefault();

                // Obtener datos del cliente
                const cliente = {
                    nombre: '{{ $cliente->name }}',
                    lista_precios: $('#listaPrecios').val(),
                    cond_iva: '', // Agrega el valor adecuado
                    dni: '', // Agrega el valor adecuado
                    // Otros datos del cliente si es necesario
                };

                // Obtener si se debe sumar al stock y notificar al cliente
                const sumarStock = $('#sumar').is(':checked');
                const notificarCliente = $('#notificar').is(':checked');

                // Obtener los productos
                let productos = [];
                $('#articulosBody tr').each(function() {
                    const producto = {
                        codigo: $(this).find('input[name="codigo[]"]').val(),
                        articulo: $(this).find('input[name="articulo[]"]').val(),
                        cantidad: $(this).find('input[name="cantidad[]"]').val(),
                        precio_unitario: $(this).find('input[name="precio_unitario[]"]').val(),
                        bonificacion: $(this).find('input[name="bonificacion[]"]').val(),
                        subtotal: $(this).find('input[name="subtotal[]"]').val(),
                        alicuota_iva: $(this).find('input[name="alicuota_iva[]"]').val(),
                        importe_iva: $(this).find('input[name="importe_iva[]"]').val(),
                        subtotal_iva: $(this).find('input[name="subtotal_iva[]"]').val()
                    };
                    productos.push(producto);
                });

                // Obtener otros datos relevantes
                const descuento = $('#descuento').val();
                const totalConDescuento = $('#totalConDescuento').val();

                // Datos a enviar
                const data = {
                    cliente: cliente,
                    productos: productos,
                    sumarStock: sumarStock,
                    notificarCliente: notificarCliente,
                    descuento: descuento,
                    totalConDescuento: totalConDescuento,
                    // Otros datos que desees agregar
                };

                // Enviar datos al backend
                $.ajax({
                    url: '/generar-factura-cliente', // Cambia la ruta al endpoint que deseas usar
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    success: function(response) {
                        // Manejar respuesta del servidor
                        alert('Factura procesada correctamente.');
                    },
                    error: function(xhr, status, error) {
                        // Manejar errores
                        alert('Error al procesar la factura.');
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Cambio de lista de precios
            $('#listaPrecios').change(function() {
                let listaSeleccionada = $(this).val();

                $('input[name="codigo[]"]').each(function() {
                    let codigo = $(this).val();
                    let row = $(this).closest('tr');

                    if (codigo) {
                        $.ajax({
                            url: '/buscar-precios-productos',
                            type: 'GET',
                            data: {
                                codigo: codigo,
                                lista_precios: listaSeleccionada
                            },
                            success: function(data) {
                                row.find('input[name="precio_unitario[]"]').val(data
                                    .precio);
                                row.find('input[name="alicuota_iva[]"]').val(data
                                    .alicuota_iva);

                                // Recalcular los valores
                                recalcularFila(row);
                            }
                        });
                    }
                });
            });

            // Actualizar el total con descuento
            $('#descuento').on('input', function() {
                actualizarTotal();
            });

            // Función para actualizar el total general
            function actualizarTotal() {
                let total = 0;

                $('input[name="subtotal_iva[]"]').each(function() {
                    total += parseFloat($(this).val()) || 0;
                });

                // Descuento
                let descuento = parseFloat($('#descuento').val()) || 0;
                let totalConDescuento = total * (1 - descuento / 100);

                // Mostrar los totales
                $('#totalFactura').val(total.toFixed(2));
                $('#totalConDescuento').val(totalConDescuento.toFixed(2));
            }

            // Recalcular fila individual cuando cambian los valores
            function recalcularFila(row) {
                let cantidad = parseFloat(row.find('input[name="cantidad[]"]').val()) || 0;
                let precioUnitario = parseFloat(row.find('input[name="precio_unitario[]"]').val()) || 0;
                let bonificacion = parseFloat(row.find('input[name="bonificacion[]"]').val()) || 0;
                let alicuotaIva = parseFloat(row.find('input[name="alicuota_iva[]"]').val()) || 0;

                let subtotal = (cantidad * precioUnitario) * (1 - bonificacion / 100);
                let importeIva = subtotal * (alicuotaIva / 100);
                let subtotalIva = subtotal + importeIva;

                row.find('input[name="subtotal[]"]').val(subtotal.toFixed(2));
                row.find('input[name="importe_iva[]"]').val(importeIva.toFixed(2));
                row.find('input[name="subtotal_iva[]"]').val(subtotalIva.toFixed(2));

                // Actualizar el total general
                actualizarTotal();
            }
        });
    </script>

    <script>
        // Función para crear una nueva fila de artículo
        function crearFila() {
            const fila = `
                <tr>
                    <td><input type="text" name="codigo[]" class="form-control"></td>
                    <td><input type="text" name="articulo[]" class="form-control"></td>
                    <td><input type="number" name="cantidad[]" class="form-control"></td>
                    <td><input type="number" name="precio_unitario[]" class="form-control"></td>
                    <td><input type="number" name="bonificacion[]" class="form-control"></td>
                    <td><input type="number" name="subtotal[]" class="form-control" readonly></td>
                    <td><input type="number" name="alicuota_iva[]" class="form-control"></td>
                    <td><input type="number" name="importe_iva[]" class="form-control" readonly></td>
                    <td><input type="number" name="subtotal_iva[]" class="form-control" readonly></td>
                    <td><button type="button" class="btn btn-danger eliminarFila">Eliminar</button></td>
                </tr>
            `;
            document.getElementById('articulosBody').insertAdjacentHTML('beforeend', fila);
        }

        // Evento para agregar nueva fila
        document.getElementById('agregarFila').addEventListener('click', function() {
            crearFila();
        });

        // Delegación de eventos para eliminar filas
        document.getElementById('articulosBody').addEventListener('click', function(e) {
            if (e.target && e.target.classList.contains('eliminarFila')) {
                e.target.closest('tr').remove();
                actualizarTotal(); // Actualizar el total cuando se elimina una fila
            }
        });

        $(document).ready(function() {
            // Evento para cuando se escribe en el campo del código
            $(document).on('input', 'input[name="codigo[]"]', function() {
                let input = $(this);
                let search = input.val();

                // Realizar la búsqueda solo si hay al menos 2 caracteres
                if (search.length >= 2) {
                    $.ajax({
                        url: '/buscar-productos-facturacion',
                        type: 'GET',
                        data: {
                            search: search,
                            lista_precios: {{ $cliente->lista_precios }}
                        },
                        success: function(data) {
                            console.log(
                                data); // Esto muestra los productos devueltos en la consola

                            let dropdown = '<ul class="dropdown-menu show">';
                            data.forEach(function(producto) {
                                dropdown +=
                                    `<li class="dropdown-item" data-producto='${JSON.stringify(producto)}'>${producto.codigo} - ${producto.articulo}</li>`;
                            });
                            dropdown += '</ul>';

                            // Mostrar el dropdown justo debajo del input
                            input.next('.dropdown-menu').remove(); // Eliminar dropdown anterior
                            input.after(dropdown); // Añadir el nuevo dropdown
                        }
                    });
                }
            });

            $(document).on('click', '.dropdown-item', function() {
                let producto = $(this).data('producto');
                let row = $(this).closest('tr');

                // Asignar los valores seleccionados
                row.find('input[name="codigo[]"]').val(producto.codigo);
                row.find('input[name="articulo[]"]').val(producto.articulo);
                row.find('input[name="precio_unitario[]"]').val(producto.precio);
                row.find('input[name="alicuota_iva[]"]').val(21); // IVA del 21% por defecto

                // Eliminar el dropdown
                $(this).closest('.dropdown-menu').remove();
            });

            // Calcular los valores cuando se cambia la cantidad, precio unitario o bonificación
            $(document).on('input',
                'input[name="cantidad[]"], input[name="precio_unitario[]"], input[name="bonificacion[]"]',
                function() {
                    let row = $(this).closest('tr');

                    // Obtener los valores de la fila actual
                    let cantidad = parseFloat(row.find('input[name="cantidad[]"]').val()) || 0;
                    let precioUnitario = parseFloat(row.find('input[name="precio_unitario[]"]').val()) || 0;
                    let bonificacion = parseFloat(row.find('input[name="bonificacion[]"]').val()) || 0;
                    let alicuotaIva = parseFloat(row.find('input[name="alicuota_iva[]"]').val()) || 0;

                    // Calcular subtotal sin IVA
                    let subtotal = (cantidad * precioUnitario) * (1 - bonificacion / 100);

                    // Calcular el IVA
                    let importeIva = subtotal * (alicuotaIva / 100);

                    // Calcular el subtotal con IVA
                    let subtotalIva = subtotal + importeIva;

                    // Asignar los valores calculados
                    row.find('input[name="subtotal[]"]').val(subtotal.toFixed(2));
                    row.find('input[name="importe_iva[]"]').val(importeIva.toFixed(2));
                    row.find('input[name="subtotal_iva[]"]').val(subtotalIva.toFixed(2));

                    // Actualizar el total general
                    actualizarTotal();
                });

            // Función para actualizar el total general
            function actualizarTotal() {
                let total = 0;

                // Sumar los valores de subtotal con IVA de todas las filas
                $('input[name="subtotal_iva[]"]').each(function() {
                    total += parseFloat($(this).val()) || 0;
                });

                // Mostrar el total en el campo de total
                $('#totalFactura').val(total.toFixed(2));
            }
        });
    </script>


@endsection