@extends('layouts.app')
@section('title', 'Nuevo Requerimiento')
@section('page-title', 'Nuevo Requerimiento de Compra')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('logistica.dashboard') }}">Logística</a></li>
    <li class="breadcrumb-item"><a href="{{ route('logistica.requerimientos.index') }}">Requerimientos</a></li>
    <li class="breadcrumb-item active">Nuevo</li>
@endsection
@section('content')

<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-clipboard-list mr-2"></i>Nuevo Requerimiento</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('logistica.requerimientos.store') }}" id="form-req">
            @csrf
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Área Solicitante <span class="text-danger">*</span></label>
                        <input type="text" name="area_solicitante" maxlength="100"
                            class="form-control @error('area_solicitante') is-invalid @enderror"
                            value="{{ old('area_solicitante') }}"
                            placeholder="Ej: Producción, Calidad, Logística..."
                            required>
                        @error('area_solicitante')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Fecha de Requerimiento <span class="text-danger">*</span></label>
                        <input type="date" name="fecha"
                            class="form-control @error('fecha') is-invalid @enderror"
                            value="{{ old('fecha', date('Y-m-d')) }}" required>
                        @error('fecha')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-group">
                        <label>Observaciones generales</label>
                        <input type="text" name="observaciones" maxlength="500"
                            class="form-control" value="{{ old('observaciones') }}">
                    </div>
                </div>
            </div>

            <h5 class="text-success mb-2 mt-3"><i class="fas fa-list mr-2"></i>Ítems solicitados</h5>
            <div class="table-responsive">
                <table class="table table-sm" id="tabla-items">
                    <thead class="thead-light">
                        <tr>
                            <th style="width:45%">Producto</th>
                            <th style="width:20%">Cantidad</th>
                            <th style="width:10%">U.M.</th>
                            <th style="width:20%">Observación</th>
                            <th style="width:5%"></th>
                        </tr>
                    </thead>
                    <tbody id="items-body">
                        <tr class="item-row" data-index="0">
                            <td>
                                <select name="items[0][producto_id]" class="form-control form-control-sm producto-sel" required>
                                    <option value="">Seleccionar...</option>
                                    @foreach($productos as $p)
                                        <option value="{{ $p->id }}" data-um="{{ $p->unidadMedida->abreviatura }}">
                                            {{ $p->nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input type="number" name="items[0][cantidad_solicitada]" step="0.001" min="0.001"
                                    class="form-control form-control-sm" required placeholder="0.00">
                            </td>
                            <td class="um-cell text-muted align-middle">—</td>
                            <td>
                                <input type="text" name="items[0][observacion]" maxlength="255"
                                    class="form-control form-control-sm" placeholder="Opcional">
                            </td>
                            <td class="align-middle text-center">
                                <button type="button" class="btn btn-xs btn-danger btn-remove-item" style="display:none;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button type="button" id="btn-add-item" class="btn btn-sm btn-outline-success mb-3">
                <i class="fas fa-plus mr-1"></i>Agregar ítem
            </button>

            <hr>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i>Guardar Requerimiento
            </button>
            <a href="{{ route('logistica.requerimientos.index') }}" class="btn btn-secondary ml-2">
                <i class="fas fa-times mr-1"></i>Cancelar
            </a>
        </form>
    </div>
</div>

@push('scripts')
<script>
const productosOptions = `@foreach($productos as $p)<option value="{{ $p->id }}" data-um="{{ $p->unidadMedida->abreviatura }}">{{ $p->nombre }}</option>@endforeach`;
let rowIndex = 1;

function updateUm(row) {
    const sel = row.querySelector('.producto-sel');
    const opt = sel.options[sel.selectedIndex];
    row.querySelector('.um-cell').textContent = opt.dataset.um || '—';
}

document.getElementById('items-body').addEventListener('change', function(e) {
    if (e.target.classList.contains('producto-sel')) {
        updateUm(e.target.closest('.item-row'));
    }
});

document.getElementById('btn-add-item').addEventListener('click', function () {
    const tbody = document.getElementById('items-body');
    const tr = document.createElement('tr');
    tr.className = 'item-row';
    tr.dataset.index = rowIndex;
    tr.innerHTML = `
        <td><select name="items[${rowIndex}][producto_id]" class="form-control form-control-sm producto-sel" required>
            <option value="">Seleccionar...</option>${productosOptions}</select></td>
        <td><input type="number" name="items[${rowIndex}][cantidad_solicitada]" step="0.001" min="0.001"
            class="form-control form-control-sm" required placeholder="0.00"></td>
        <td class="um-cell text-muted align-middle">—</td>
        <td><input type="text" name="items[${rowIndex}][observacion]" maxlength="255"
            class="form-control form-control-sm" placeholder="Opcional"></td>
        <td class="align-middle text-center">
            <button type="button" class="btn btn-xs btn-danger btn-remove-item"><i class="fas fa-times"></i></button>
        </td>`;
    tbody.appendChild(tr);
    rowIndex++;
    updateRemoveButtons();
});

document.getElementById('items-body').addEventListener('click', function(e) {
    if (e.target.closest('.btn-remove-item')) {
        e.target.closest('.item-row').remove();
        updateRemoveButtons();
    }
});

function updateRemoveButtons() {
    const rows = document.querySelectorAll('.item-row');
    rows.forEach(r => {
        r.querySelector('.btn-remove-item').style.display = rows.length > 1 ? '' : 'none';
    });
}
</script>
@endpush

@endsection