@extends('components.layouts.app')

@section('content')
<div class="container">
    <h1 class="mb-4">Crear 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.store') }}">
    @csrf
        <div class="row">
            <!-- Nro de Pedido -->
            <div class="col-md-4 mb-3">
                <label class="form-label">Nro de Pedido</label>
                <input type="text" class="form-control" name="nro_pedido">
            </div>

            <!-- Tipo de Pedido -->
            <div class="col-md-4 mb-3">
                <label class="form-label">Tipo de Pedido</label>
                <select class="form-select" name="tipo_pedido">
                    <option value="">Seleccionar</option>
                    <option>SOPLADO</option>
                </select>
            </div>
            
            <!-- Vendedor -->
            <div class="col-md-4 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 }}">{{ $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 }}">{{ $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">
                    <option value="">Seleccionar máquina</option>
                    @foreach($maquinas as $maquina)
                        <option value="{{ $maquina->id }}">{{ $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">
            </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">
            </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">
            </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">
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Fecha Fin</label>
                <input type="date" class="form-control" name="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" rows="1"></textarea>
            </div>
        </div>
        <!-- Botón de Guardar -->
        <button type="submit" class="btn btn-primary">Guardar 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>`;
        });
    });
</script>
@endsection