@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">{{ __('CREAR NUEVO DESPACHO PARA BLENDING') }}</h6>
                    <a class="btn btn-danger btn-sm" href="{{ route('despachos.index') }}">
                        {{ __('VOLVER') }}
                    </a>
                </div>
            </div>

            <div class="card-body">
                <div class="mb-4">
                    <h5>{{ __('DATOS DEL BLENDING') }}</h5>
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
                        <p>
                            <strong>{{ __('CÓDIGO:') }}</strong> {{ $blending->cod }}
                        </p>
                        <p>
                            <strong>{{ __('TIPO DE MATERIAL:') }}</strong> {{ $blending->lista }}
                        </p>
                        <p>
                            <strong>{{ __('NOTAS:') }}</strong> {{ $blending->notas }}
                        </p>
                    </div>
                </div>

                <div class="mt-2">
                    @if($blending->ingresos->isEmpty())
                        <p>{{ __('No hay ingresos asociados a este blending.') }}</p>
                    @else
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{{ __('Fecha de Ingreso') }}</th>
                                    <th>{{ __('Cliente') }}</th>
                                    <th>{{ __('Lote') }}</th>
                                    <th>{{ __('Peso') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($blending->ingresos as $ingreso)
                                    <tr>
                                        <td>{{ $ingreso->fecha_ingreso }}</td>
                                        <td>{{ $ingreso->nom_iden }}</td>
                                        <td>{{ $ingreso->ref_lote }}</td>
                                        <td>{{ $ingreso->peso_total }} </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                    <div class="mb-3 d-flex justify-content-end">
                        <strong>{{ __('TMH TOTAL') }}:</strong>
                        <span class="ms-2">{{ $blending->pesoblending }} </span>
                    </div>
                </div>

                <!-- Botón para abrir el modal de registro de ingresos -->
                <div class="d-flex justify-content-end mb-3">
                    <button class="btn btn-success" onclick="abrirModal()">REGISTRAR INFORMACION DESPACHO</button>
                </div>

                <!-- Tabla de ingresos (ahora en la vista principal) -->
                <table class="table table-bordered mt-3" id="tablaDespacho">
                    <thead>
                        <tr>
                            <th>{{ __('N° Ticket') }}</th>
                            <th>{{ __('Precinto') }}</th>
                            <th>{{ __('Guia Remision') }}</th>
                            <th>{{ __('Peso Bruto') }}</th>
                            <th>{{ __('Peso Tara') }}</th>
                            <th>{{ __('Peso Neto') }}</th>
                            <th>{{ __('Placa Tracto') }}</th>
                            <th>{{ __('Placa Carreta') }}</th>
                            <th>{{ __('Acción') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
                <div class="mb-3 d-flex justify-content-end">
                    <strong>{{ __('TONELAJE TOTAL DESPACHADO TMH') }}:</strong>
                    <span class="ms-2" id="totalTMH">0</span> <!-- Aquí se mostrará el total -->
                </div>
                <!-- Modal para ingresar información del despacho (sin tabla) -->
                <div id="modalIngreso" class="modal">
                    <div class="modal-content">
                        <span class="close" onclick="cerrarModal()">&times;</span>
                        <h2>{{ __('INFORMACION DESPACHO') }}</h2>
                        <form id="formIngreso">
                            <!-- NroSalida select -->
                            <div class="form-group">
                                <label for="NroSalida" class="text-muted">{{ __('N° SALIDA') }}</label>
                                <select name="NroSalida" id="NroSalida" class="form-control" required>
                                    <option value="">Seleccionar N° Salida</option>
                                    @foreach($NroSalida as $nro)
                                        <option value="{{ $nro->NroSalida }}" 
                                                data-bruto="{{ $nro->Bruto }}" 
                                                data-neto="{{ $nro->Neto }}" 
                                                data-tara="{{ $nro->Tara }}">
                                            {{ $nro->NroSalida }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="precinto" class="text-muted">{{ __('PRECINTO') }}</label>
                                <input type="text" class="form-control" id="precinto" name="precinto">
                            </div>
                            <div class="form-group">
                                <label for="guia" class="text-muted">{{ __('GUIA REMISION REMITENTE') }}</label>
                                <input type="text" class="form-control" id="guia" name="guia">
                            </div>

                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label for="Bruto" class="text-muted">{{ __('PESO BRUTO') }}</label>
                                    <input type="text" class="form-control" id="Bruto" name="Bruto" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label for="Tara" class="text-muted">{{ __('PESO TARA') }}</label>
                                    <input type="text" class="form-control" id="Tara" name="Tara" readonly>
                                </div>

                                <div class="col-md-4">
                                    <label for="Neto" class="text-muted">{{ __('PESO NETO (TMH)') }}</label>
                                    <input type="text" class="form-control" id="Neto" name="Neto" readonly>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="tracto" class="text-muted">{{ __('PLACA TRACTO') }}</label>
                                <input type="text" class="form-control" id="tracto" name="tracto">
                            </div>

                            <div class="form-group">
                                <label for="carreta" class="text-muted">{{ __('PLACA CARRETA') }}</label>
                                <input type="text" class="form-control" id="carreta" name="carreta">
                            </div>

                            <!-- Botón para agregar los datos a la tabla -->
                            <div class="form-group">
                                <button type="button" id="agregarIngreso" class="btn btn-primary btn-block">
                                    {{ __('Agregar a la tabla') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <style>
                    /* Estilo para la ventana modal */
                    .modal {
                        display: none;
                        position: fixed;
                        z-index: 1;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        overflow: auto;
                        background-color: rgba(0, 0, 0, 0.4);
                    }

                    .modal-content {
                        background-color: #fefefe;
                        margin: 10% auto;
                        padding: 20px;
                        border: 1px solid #888;
                        width: 80%;
                        max-width: 700px;
                        border-radius: 8px;
                    }

                    .close {
                        color: #aaa;
                        float: right;
                        font-size: 28px;
                        font-weight: bold;
                    }

                    .close:hover,
                    .close:focus {
                        color: black;
                        text-decoration: none;
                        cursor: pointer;
                    }
                </style>

                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                <script>
                    $(document).ready(function() {
                        // Función para abrir el modal
                        window.abrirModal = function() {
                            document.getElementById("modalIngreso").style.display = "block";
                        };
                
                        // Función para cerrar el modal
                        window.cerrarModal = function() {
                            document.getElementById("modalIngreso").style.display = "none";
                        };
                
                        // Llenado automático de los campos Bruto, Neto y Tara al seleccionar un NroSalida
                        $('#NroSalida').on('change', function() {
                            var selectedOption = $(this).find('option:selected');
                            var Bruto = selectedOption.data('bruto');
                            var Neto = selectedOption.data('neto');
                            var Tara = selectedOption.data('tara');
                
                            // Llenar los campos con los valores extraídos
                            if (Bruto && Neto && Tara) {
                                $('#Bruto').val(Bruto);
                                $('#Neto').val(Neto);
                                $('#Tara').val(Tara);
                            }
                        });
                
                        // Función para actualizar el total TMH
                        function actualizarTotalTMH() {
                            let totalTMH = 0;
                
                            // Iterar sobre todas las filas de la tabla para sumar los pesos netos
                            $('#tablaDespacho tbody tr').each(function() {
                                // Obtener el valor de "Peso Neto" (en la columna 5)
                                let pesoNeto = parseFloat($(this).find('td').eq(5).text().replace('.', '').replace(',', '')); // Eliminamos puntos y comas
                
                                if (!isNaN(pesoNeto)) {
                                    totalTMH += pesoNeto;  // Sumar el valor al total
                                }
                            });
                
                            // Formatear el número con separador de miles usando la configuración de 'es-CL' (puntos como separador de miles)
                            let formattedTotal = totalTMH.toLocaleString('es-CL', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
                
                            // Mostrar el total actualizado con punto como separador de miles
                            $('#totalTMH').text(formattedTotal);
                
                            // Calcular la diferencia "masomenos"
                            calcularMasomenos(totalTMH);
                        }
                
                        // Función para calcular la diferencia "masomenos"
                        function calcularMasomenos(totalTMH) {
                            // Obtener el valor de pesoblending desde el servidor (pasado al JavaScript desde Blade)
                            let pesoblending = parseFloat("{{ $blending->pesoblending }}");
                
                            // Calcular la diferencia
                            let masomenos = pesoblending - totalTMH;
                
                            // Formatear la diferencia con punto como separador de miles
                            let formattedMasomenos = masomenos.toLocaleString('es-CL', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
                
                            // Mostrar el resultado en el campo "masomenos"
                            $('#masomenos').val(formattedMasomenos);
                        }
                
                        // Función para agregar los datos a la tabla
                        $('#agregarIngreso').on('click', function() {
                            var NroSalida = $('#NroSalida').val();
                            var Precinto = $('#precinto').val();
                            var Guia = $('#guia').val();
                            var Bruto = $('#Bruto').val();
                            var Tara = $('#Tara').val();
                            var Neto = $('#Neto').val();
                            var Tracto = $('#tracto').val();
                            var Carreta = $('#carreta').val();
                
                            // Validar que todos los campos estén completos
                            if (!NroSalida || !Precinto || !Guia || !Bruto || !Tara || !Neto || !Tracto || !Carreta) {
                                alert('Por favor, complete todos los campos.');
                                return;
                            }
                
                            // Agregar fila a la tabla principal
                            $('#tablaDespacho tbody').append(`
                                <tr>
                                    <td>${NroSalida}</td>
                                    <td>${Precinto}</td>
                                    <td>${Guia}</td>
                                    <td>${Bruto}</td>
                                    <td>${Tara}</td>
                                    <td>${Neto}</td>
                                    <td>${Tracto}</td>
                                    <td>${Carreta}</td>
                                    <td><button class="btn btn-danger btn-sm eliminar">Eliminar</button></td>
                                </tr>
                            `);
                
                            // Limpiar los campos del formulario después de agregar a la tabla
                            $('#formIngreso')[0].reset();
                
                            // Actualizar el total TMH
                            actualizarTotalTMH();
                        });
                
                        // Función para eliminar una fila de la tabla
                        $('#tablaDespacho').on('click', '.eliminar', function() {
                            $(this).closest('tr').remove();
                            // Actualizar el total TMH
                            actualizarTotalTMH();
                        });
                
                        // Inicializar el total TMH al cargar la página
                        actualizarTotalTMH();
                    });
                </script>
                

                <!-- Formulario de despacho -->
                <form action="{{ route('despachos.store') }}" method="POST" id="despachoForm">
                    @csrf
                    <input type="hidden" name="blending_id" value="{{ $blending->id }}">
                    <input type="hidden" id="ingresos_data" name="ingresos_data">
                    <div class="row mt-4">
                        <div class="form-group col-md-4">
                            <label for="masomenos" class="text-muted">{{ __('FALTA (-) Y EXEDE  (+)') }}</label>
                            <input type="text" class="form-control" id="masomenos" name="masomenos" readonly>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="fecha" class="text-muted">{{ __('FECHA DESPACHO') }}</label>
                            <input type="date" name="fecha" id="fecha" class="form-control" required>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="empresa" class="text-muted">{{ __('EMPRESA DESPACHO') }}</label>
                            <input type="text" class="form-control" name="empresa" required>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="codigo" class="text-muted">{{ __('CÓDIGO') }}</label>
                            <input type="text" class="form-control" name="codigo" required>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="deposito" class="text-muted">{{ __('DEPÓSITO') }}</label>
                            <input type="text" class="form-control" name="deposito" required>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="destino" class="text-muted">{{ __('DESTINO') }}</label>
                            <input type="text" class="form-control" name="destino" required>
                        </div>
                    </div>

                    <!-- Botón para guardar el despacho -->
                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary btn-block">
                                {{ __('GUARDAR DESPACHO') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection