@extends('components.layouts.app')

@section('content')
<div class="container">
    <h1 class="mb-4">Editar Pedido</h1>

    {{-- Mostrar errores de validación --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    {{-- Mostrar mensaje de éxito --}}
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('board.pedidos.update', $pedido->id) }}">
    @csrf
    @method('PUT')
        <div class="row">
            <!-- Nro de Pedido -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Nro de Pedido</label>
                <h3 class="form-control-plaintext">{{ $pedido->nro_pedido }}</h3>
            </div>

            <!-- Tipo de Pedido -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Tipo de Pedido</label>
                <h3 class="form-control-plaintext">{{ $pedido->tipo_pedido }}</h3>
            </div>
        </div>
        <div class="row">
            <!-- Vendedor -->
            <div class="col-md mb-3">
                <label class="form-label">Vendedor</label>
                <select class="form-select" name="vendedor_id">
                    <option value="">Seleccionar</option>
                    @foreach($vendedores as $vendedor)
                        <option value="{{ $vendedor->id }}"
                            {{ old('vendedor_id', $pedido->vendedor_id) == $vendedor->id ? 'selected' : '' }}>
                            {{ $vendedor->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <hr><!-- Línea divisoria -->
        <div class="row">
            <!-- Cliente -->
            <div class="col-md mb-3">
                <label class="form-label">Cliente</label>
                <select class="form-select" name="cliente_id">
                    <option value="">Seleccionar</option>
                    @foreach($clientes as $cliente)
                        <option value="{{ $cliente->id }}"
                            {{ old('cliente_id', $pedido->cliente_id) == $cliente->id ? 'selected' : '' }}>
                            {{ $cliente->razon_social }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row">
            <!-- Máquina -->
            <div class="col-md-4 mb-3">
                <label class="form-label">Máquina</label>
                <select class="form-select" name="maquina_id" id="maquina_select">
                    @foreach($maquinas as $maquina)
                        <option value="{{ $maquina->id }}"
                            {{ old('maquina_id', $pedido->maquina_id) == $maquina->id ? 'selected' : '' }}>
                            {{ $maquina->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>
            <!-- Producto -->
            <div class="col-md-4 mb-3">
                <label class="form-label">Producto</label>
                <select class="form-select" name="producto_id" id="producto_select">
                    <option value="">Seleccionar producto</option>
                </select>
            </div>
            <!-- Cantidad -->
            <div class="col-md-4 mb-3">
                <label class="form-label">Cantidad</label>
                <input type="number" class="form-control" name="cantidad" min="1" value="{{ old('cantidad', $pedido->cantidad) }}">
            </div>
        </div>
        <!-- filas .row con hasta 3 columnas .col-md-4 según tus campos -->
        <div class="row">
            <!-- Fechas -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Fecha Emisión</label>
                <input type="date" class="form-control" name="fecha_emision" value="{{ old('fecha_emision', $pedido->fecha_emision) }}">
            </div>
            <!-- Fecha de Entrega -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Fecha Entrega</label>
                <input type="date" class="form-control" name="fecha_entrega" value="{{ old('fecha_entrega', $pedido->fecha_entrega) }}">
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label">Fecha Inicio</label>
                <input type="date" class="form-control" name="fecha_inicio" value="{{ old('fecha_inicio', $pedido->fecha_inicio) }}">
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Fecha Fin</label>
                <input type="date" class="form-control" name="fecha_fin" value="{{ old('fecha_fin', $pedido->fecha_fin) }}">
            </div>
        </div>

        <div class="row">
            <!-- Observaciones -->
            <div class="col-md mb-5">
                <label class="form-label">Observaciones</label>
                <textarea class="form-control" name="observaciones">{{ old('observaciones', $pedido->observaciones) }}</textarea>            </div>
        </div>
        <!-- Botón de Actualizar -->
        <button type="submit" class="btn btn-primary">Actualizar Pedido</button>
    </form>
</div>
<script>
    const sopladora11 = @json($sopladora11);
    const sopladora12 = @json($sopladora12);

    // Escucha el evento 'change' en el select de máquinas
    document.getElementById('maquina_select').addEventListener('change', function() {
        // Obtiene el valor seleccionado (id de la máquina)
        const maquinaId = this.value;

        // Obtiene el select de productos
        const select = document.getElementById('producto_select');

        // Limpia las opciones actuales y deja solo la opción por defecto
        select.innerHTML = '<option value="">Seleccionar producto</option>';

        let productos = [];
        // Obtiene el texto de la opción seleccionada (nombre de la máquina)
        const maquinaNombre = this.options[this.selectedIndex].text;

        // Si el nombre de la máquina contiene '11', usa los productos de sopladora11
        if (maquinaNombre.includes('11')) {
            productos = sopladora11;
        // Si el nombre de la máquina contiene '12', usa los productos de sopladora12
        } else if (maquinaNombre.includes('12')) {
            productos = sopladora12;
        }

        // Recorre los productos y agrega cada uno como opción al select de productos
        productos.forEach(function(producto) {
            select.innerHTML += `<option value="${producto.id}">${producto.nombre_producto}</option>`;
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        // Selecciona la máquina actual
        const maquinaSelect = document.getElementById('maquina_select');
        const productoSelect = document.getElementById('producto_select');
        const maquinaNombre = maquinaSelect.options[maquinaSelect.selectedIndex].text;
        let productos = [];

        if (maquinaNombre.includes('11')) {
            productos = sopladora11;
        } else if (maquinaNombre.includes('12')) {
            productos = sopladora12;
        }

        // Llena el select de productos
        productoSelect.innerHTML = '<option value="">Seleccionar producto</option>';
        productos.forEach(function(producto) {
            productoSelect.innerHTML += `<option value="${producto.id}">${producto.nombre_producto}</option>`;
        });

        // Selecciona el producto actual
        const selectedProductoId = "{{ old('producto_id', $pedido->producto_id) }}";
        if (selectedProductoId) {
            productoSelect.value = selectedProductoId;
        }
    });
</script>
@endsection