{{-- filepath: resources/views/board/produccion/show.blade.php --}}
@extends('components.layouts.app')

@push('styles')
    @vite(['resources/css/app.css'])
@endpush

@section('content')
<div class="container">
    <h1 class="mb-4">INICIO DE PRODUCCIÓN</h1>

    <!-- CABECERA DEL PEDIDO -->
    <x-pedido-cabecera :pedido="$pedido" />

    <div class="card mb-4" id="detalle-pedido">
        <div class="card-header">

        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <strong>Producto:</strong> {{ $pedido->producto?->nombre_producto ?? '-' }}
                </div>
                <div class="col-md-3">
                    <strong>Cantidad:</strong> {{ $pedido->cantidad }}<br>
                </div>
                <div class="col-md-3">
                    <strong>Prod. No Conforme:</strong> {{ $pedido->maquina->porcentaje_pnc }}<br>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <strong>Máquina:</strong> {{ $pedido->maquina->nombre ?? '-' }}<br>
                </div>
                <div class="col-md-3">
                    <strong>Peso Bruto:</strong> {{ $pedido->maquina->peso_bruto ?? '-' }}<br>
                </div>
                <div class="col-md-3">
                    <strong>Mat. Pruebas:</strong> {{ $pedido->fecha_fin }}<br>
                </div>
                <div class="col-md-3">
                    <strong>Mat. Arranque:</strong> {{ $pedido->maquina->arranque }}<br>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md">
                    <strong>Total de Material (kg):</strong> {{ $pedido->cantidad }}<br>
                </div>
            </div>

        </div>
    </div>

    <!-- BARRA DE ESTADOS -->
    <x-estados :pedido="$pedido" />

    <!-- Resto del contenido existente -->
    @if(($pedido->formulacion_1 != 0 || $pedido->formulacion_2 != 0))
        <div class="alert alert-success">
            <div class="row">
                <strong>FORMULACIÓN CONFIRMADA</strong><br>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Formula {{ $pedido->formulacion_1 }}</strong>
                        </div>
                        <div class="col-md-6">
                            <strong>Uso Material: {{ $pedido->cant_formulacion_1 }} kg</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div id="valores-formulacion1-confirmada"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Formula {{ $pedido->formulacion_2 }}</strong>
                        </div>
                        <div class="col-md-6">
                            <strong>Uso Material: {{ $pedido->cant_formulacion_2 }} kg</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div id="valores-formulacion2-confirmada"></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                mostrarValoresPorNumero('{{ $pedido->formulacion_1 }}', 'valores-formulacion1-confirmada');
                mostrarValoresPorNumero('{{ $pedido->formulacion_2 }}', 'valores-formulacion2-confirmada');
            });
        </script>
    @else
        <form method="POST" action="{{ route('board.produccion.formulacion.store', $pedido->id) }}">
            @csrf
                <!-- Seleccionar Formulación -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        Formulación
                    </div>
                    <div class="card-body row">
                        <div class="row">
                            <div class="col-md-2">
                                <label class="form-label">Uso de Material</label>
                            </div>
                            <div class="col-md-5">
                                <input type="number" name="cant_formulacion_1" id="cant_formulacion_1" class="form-control" step="0.1" min="0" value="{{ $pedido->cantidad }}" required>
                            </div>
                            <div class="col-md-5">
                                <input type="number" name="cant_formulacion_2" id="cant_formulacion_2" class="form-control" step="0.1" min="0" value="0.0" readonly required>
                            </div>
                        </div>
                        <div>
                            <div id="error-material" class="text-danger mt-2"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <label class="form-label">Formulación</label>
                            </div>
                            <div class="col-md-5 mb-3">
                                    <select class="form-select" name="formulacion_1" id="formulacion_select1">
                                        <option value="">Seleccionar</option>
                                        <option value="1">Formula 1</option>
                                        <option value="2">Formula 2</option>
                                        <option value="3">Formula 3</option>
                                        <option value="4">Formula 4</option>
                                        <option value="5">Formula 5</option>
                                        <option value="6">Formula 6</option>
                                    </select>
                                    <div id="valores-formulacion1" class="mt-3"></div> 
                            </div>
                            <div class="col-md-5 mb-3">
                                    <select class="form-select" name="formulacion_2" id="formulacion_select2">
                                        <option value="">Seleccionar</option>
                                        <option value="1">Formula 1</option>
                                        <option value="2">Formula 2</option>
                                        <option value="3">Formula 3</option>
                                        <option value="4">Formula 4</option>
                                        <option value="5">Formula 5</option>
                                        <option value="6">Formula 6</option>
                                    </select>
                                    <div id="valores-formulacion2" class="mt-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-9">
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-success">Confirmar Formulación</button>
                    </div>
                </div>
        </form>
    @endif

    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            Registrar avance de producción
        </div>
        <div class="card-body row">
            <form method="POST" action="{{ route('board.pedidos.store', $pedido->id) }}">
                @csrf
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Fecha</label>
                        <input type="date" class="form-control" name="fecha_registro">
                    </div>
                </div>                
                <div class="row">
                    <div class="col-md-10">
                        <div class="row">
                            <div class="col-md text-center">
                                <strong>Cantidad (kg)</strong>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 text-center">
                                <strong>Retirada</strong>
                            </div>
                            <div class="col-md-6 text-center">
                                <strong>Acumulada</strong>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="number" name="cantidad_retirada" class="form-control" min="0" required>
                            </div>
                            <div class="col-md-6">
                                <input type="number" name="cantidad_acumulada" class="form-control" min="0" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-success">Añadir</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <div class="mb-3">
        <label class="form-label">Observaciones</label>
        <textarea name="observaciones" class="form-control"></textarea>
    </div>    
    {{-- Aquí puedes agregar botones o acciones para iniciar la producción --}}
    <a href="{{ route('board.produccion.inicio-reporte.preview', $pedido->id) }}" class="btn btn-info" target="_blank">
        Ver Reporte
    </a>
    <a href="{{ route('board.produccion.inicio-reporte.pdf', $pedido->id) }}" class="btn btn-danger" target="_blank">
        Descargar Reporte
    </a>
</div>
<script>
    const sopladora11 = @json($sopladora11);
    const sopladora12 = @json($sopladora12);
    const productoId = "{{ $pedido->producto_id }}";
    const cantidadPedido = {{ $pedido->cantidad ?? 0 }};

    // Buscar el producto en la tabla correspondiente
    let producto = null;
    if (productoId.startsWith('11')) {
        producto = sopladora11.find(p => p.id == productoId);
    } else if (productoId.startsWith('12')) {
        producto = sopladora12.find(p => p.id == productoId);
    }

    function mostrarValoresPorNumero(formulaNumero, valoresDivId) {
        // Buscar el producto cada vez que se llama la función
        let producto = null;
        if (productoId.startsWith('11')) {
            producto = sopladora11.find(p => p.id == productoId);
        } else if (productoId.startsWith('12')) {
            producto = sopladora12.find(p => p.id == productoId);
        }

        if (!producto || !formulaNumero) {
            document.getElementById(valoresDivId).innerHTML = '';
            return;
        }
        const campos = [
            'hdpe_soplado_f', 'scrap1_f', 'mb_f',
            'dioxidotitanio_f', 'estearatozinc_f', 'aditivo_uv_f',
            'scrap2_f', 'peletizado_translucido_f', 'peletizado_azul_f'
        ];

        let html = '<div class="row mb-2">';
        campos.forEach(campo => {
            const key = campo + formulaNumero;
            const valor = parseFloat(producto[key]) || 0;
            const total = (cantidadPedido * valor/100).toFixed(2);

            html += `
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md">
                            <strong class="" style="font-size:0.65rem;">${key.replace('_', ' ').toUpperCase()}</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 bg-secondary rounded">
                            <span class="text-white" style="font-size:0.65rem;">${total} kg</span>
                        </div>
                        <div class="col-md-6 bg-info rounded">
                            <span class="text-dark" style="font-size:0.65rem;">${valor} %</span>
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        document.getElementById(valoresDivId).innerHTML = html;
    }

document.addEventListener('DOMContentLoaded', function() {
    const select1 = document.getElementById('formulacion_select1');
    const select2 = document.getElementById('formulacion_select2');
    const inputCant1 = document.getElementById('cant_formulacion_1');
    const inputCant2 = document.getElementById('cant_formulacion_2');
    const errorDiv = document.getElementById('error-material');
    const cantidadPedido = {{ $pedido->cantidad ?? 0 }};

    function calcularMaterialRestante() {
        const cant1 = parseFloat(inputCant1.value) || 0;
        const restante = cantidadPedido - cant1;
        inputCant2.value = restante.toFixed(2);

        if (restante < 0) {
            errorDiv.textContent = 'Error: El material restante no puede ser negativo.';
            inputCant2.classList.add('is-invalid');
        } else {
            errorDiv.textContent = '';
            inputCant2.classList.remove('is-invalid');
        }
    }

    function actualizarEstadoSelect2() {
        const restante = parseFloat(inputCant2.value) || 0;
        if (restante > 0) {
            select2.disabled = false;
        } else {
            select2.disabled = true;
            select2.value = ""; // Limpia la selección si se desactiva
        }
    }

    // Actualiza el estado cada vez que cambia cant_formulacion_1
    inputCant1.addEventListener('input', function() {
        calcularMaterialRestante();
        actualizarEstadoSelect2();
    });

    // Inicializa al cargar
    calcularMaterialRestante();
    actualizarEstadoSelect2();

    document.querySelector('form').addEventListener('submit', function(e) {
        let errorMsg = '';

        // Validar material restante negativo
        if (parseFloat(inputCant2.value) < 0) {
            errorMsg = 'No puedes guardar si el material restante es negativo.';
        }

        // Validar select de formulación 1 (siempre obligatorio)
        if (!select1.value) {
            errorMsg = 'Debes seleccionar una opción en Formulación 1.';
        }

        // Validar select de formulación 2 solo si está activo
        if (!select2.disabled && !select2.value) {
            errorMsg = 'Debes seleccionar una opción en Formulación 2 si el campo está activo.';
        }

        if (errorMsg) {
            e.preventDefault();
            errorDiv.textContent = errorMsg;
        } else {
            errorDiv.textContent = '';
        }
    });
});
</script>
@endsection