@extends('app')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading"><center>Receta del Combo: <strong>{{ $combo->nombre_combo }}</strong></center></div>
                <div class="panel-body">
                    <a href="{{ route('insumos.indexReceta') }}" class="btn btn-default" style="margin-bottom: 20px;">&larr; Volver al Listado</a>

                    <h4>Insumos Adicionales del Combo</h4>
                    <p class="text-info">Nota: Estos son los insumos que se consumen ADEMÁS de los insumos de cada producto individual dentro del combo.</p>
                    
                    {{-- ========================================================== --}}
                    {{-- ||           CÓDIGO DE LA TABLA RESTAURADO              || --}}
                    {{-- ========================================================== --}}
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Insumo Requerido</th>
                                <th>Cantidad a Descontar</th>
                                <th>Unidad de medida</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($receta as $ingrediente)
                                <tr>
                                    <td>{{ $ingrediente->insumo->nombre_insumo }}</td>
                                    <td>{{ $ingrediente->cantidad }}</td>
                                    <td>{{ $ingrediente->volumen->nombre }}</td>
                                    <td>
                                        {!! Form::open(['route' => ['insumos.destroyReceta', $ingrediente->idReceta], 'method' => 'DELETE', 'style' => 'display:inline;', 'id' => 'form-eliminar-'.$ingrediente->idReceta]) !!}
                                            <button type="button" class="btn btn-danger btn-sm btn-eliminar" data-id="{{ $ingrediente->idReceta }}">Eliminar</button>
                                        {!! Form::close() !!}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">Este combo aún no tiene insumos adicionales asignados.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    {{-- ========================================================== --}}

                    <hr>

                    <h4>Agregar Nuevo Insumo al Combo</h4>
                     @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                        </div>
                    @endif

                    {!! Form::open(['route' => 'insumos.storeReceta', 'method' => 'POST', 'class' => 'form-horizontal']) !!}
                        {!! Form::hidden('comboId', $combo->idCombos) !!}
                        
                        <div class="form-group">
                            {!! Form::label('insumoId', 'Insumo', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::select('insumoId', ['' => 'Seleccione un insumo...'] + $insumos_para_select->toArray(), null, ['class' => 'form-control', 'required', 'id' => 'insumo_select']) !!}
                            </div>
                        </div>
                        
                        <div class="form-group" id="unidad_display_wrapper" style="display: none;">
                            <label class="col-md-4 control-label">Unidad de Medida</label>
                            <div class="col-md-6">
                                <div class="well well-sm" style="margin-bottom: 0;">
                                    <strong id="unidad_display"></strong>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            {!! Form::label('cantidad', 'Cantidad', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::number('cantidad', null, ['class' => 'form-control', 'required', 'step' => '0.01', 'min' => '0.01']) !!}
                            </div>
                        </div>

                        <input type="hidden" name="volumenId" id="volumen_id_hidden" value="">

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-success">
                                    <i class="fa fa-plus"></i> Agregar Insumo
                                </button>
                            </div>
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

{{-- El script de SweetAlert es idéntico al de show_producto.blade.php --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        @if (session('alert-success'))
            Swal.fire({
                toast: true, position: 'top-end', icon: 'success',
                title: "{{ session('alert-success') }}",
                showConfirmButton: false, timer: 3000, timerProgressBar: true
            });
        @endif
        document.querySelectorAll('.btn-eliminar').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                const id = this.getAttribute('data-id');
                Swal.fire({
                    title: '¿Estás seguro?', text: "¡El insumo será eliminado de la receta del combo!",
                    icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6', confirmButtonText: 'Sí, ¡eliminar!', cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.getElementById('form-eliminar-' + id).submit();
                    }
                });
            });
        });
    });
</script>

<script>
    // Este código necesita la corrección para versiones antiguas de Laravel
        const insumosData = {!! json_encode($insumosParaJs) !!};

    document.addEventListener('DOMContentLoaded', function() {
        const insumoSelect = document.getElementById('insumo_select');
        const unidadWrapper = document.getElementById('unidad_display_wrapper');
        const unidadDisplay = document.getElementById('unidad_display');
        const volumenHiddenInput = document.getElementById('volumen_id_hidden');

        insumoSelect.addEventListener('change', function() {
            const selectedInsumoId = this.value;
            if (!selectedInsumoId) {
                unidadWrapper.style.display = 'none';
                volumenHiddenInput.value = '';
                return;
            }
            const insumoInfo = insumosData[selectedInsumoId];
            if (insumoInfo && insumoInfo.volumenId) {
                unidadDisplay.textContent = insumoInfo.volumenNombre;
                volumenHiddenInput.value = insumoInfo.volumenId;
                unidadWrapper.style.display = 'block';
            } else {
                unidadWrapper.style.display = 'none';
                volumenHiddenInput.value = '';
            }
        });
    });
</script>
@endsection