@extends('components.layouts.app')

@section('content')
<div class="container">
    <h1 class="mb-4">Listado de Pedidos</h1>

    <!-- Cuadros de búsqueda -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">🔍 Buscar por Número de Pedido</h6>
                    <form method="GET" action="{{ route('board.pedidos.list') }}">
                        <div class="input-group">
                            <input type="text" 
                                   class="form-control" 
                                   name="nro_pedido" 
                                   placeholder="Ingrese número de pedido..."
                                   value="{{ request('nro_pedido') }}">
                            <button class="btn btn-primary" type="submit">Buscar</button>
                            @if(request('nro_pedido'))
                                <a href="{{ route('board.pedidos.list') }}" class="btn btn-outline-secondary">Limpiar</a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">📅 Buscar por Fecha</h6>
                    <form method="GET" action="{{ route('board.pedidos.list') }}">
                        <div class="input-group">
                            <input type="date" 
                                   class="form-control" 
                                   name="fecha" 
                                   value="{{ request('fecha') }}">
                            <button class="btn btn-success" type="submit">Buscar</button>
                            @if(request('fecha'))
                                <a href="{{ route('board.pedidos.list') }}" class="btn btn-outline-secondary">Limpiar</a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- 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
    
    <!-- Listado de Pedidos -->
    <table class="table table-bordered table-striped">
        <thead class="thead-small">
            <tr>
                <th>Nro Pedido</th>
                <th>Cliente</th>
                <th>Máquina</th>
                <th>Producto</th>
                <th>Vendedor</th>
                <th>Cant.</th>
                <th>Cant. Prod.</th>
                <th>Fecha Emisión</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($pedidos as $pedido)
                <tr>
                    <td>{{ $pedido->nro_pedido }}</td>
                    <td>{{ $pedido->cliente->razon_social ?? '-' }}</td>
                    <td>{{ $pedido->maquina->nombre ?? '-' }}</td>
                    <td>{{ $pedido->producto?->nombre_producto ?? '-' }}</td>
                    <td>{{ $pedido->vendedor->nombre ?? '-' }}</td>
                    <td>{{ $pedido->cantidad }}</td>
                    <td>{{ $pedido->cantidad_prod }}</td>
                    <td>{{ $pedido->fecha_emision }}</td>
                    <td>
                        <a href="{{ route('board.produccion.show', $pedido->id) }}" class="btn btn-sm btn-info" title="Ver Pedido">
                            <i class="bi bi-box-arrow-in-right"></i> {{-- Icono de Bootstrap, puedes cambiarlo si quieres --}}
                        </a>
                        <a href="{{ route('board.pedidos.edit', $pedido->id) }}" class="btn btn-sm btn-warning" title="Editar">
                            <i class="bi bi-pencil-square"></i>
                        </a>
                        <form action="{{ route('board.pedidos.destroy', $pedido->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger" title="Eliminar" onclick="return confirm('¿Seguro que deseas eliminar este pedido?')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="text-center">No hay pedidos registrados.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</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