@extends('layouts.app')
@section('title', 'Ajuste de Inventario')
@section('page-title', 'Registrar Ajuste de Inventario')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('logistica.dashboard') }}">Logística</a></li>
    <li class="breadcrumb-item"><a href="{{ route('logistica.ajustes.index') }}">Ajustes</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-balance-scale mr-2"></i>Nuevo Ajuste de Inventario</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('logistica.ajustes.store') }}">
            @csrf

            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Producto <span class="text-danger">*</span></label>
                        <select name="producto_id" id="producto_id" class="form-control" required>
                            <option value="">Seleccionar producto...</option>
                            @foreach($productos as $p)
                                <option value="{{ $p->id }}">{{ $p->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Almacén</label>
                        <select name="almacen_id" id="almacen_id" class="form-control">
                            <option value="">Todos</option>
                            @foreach($almacenes as $a)
                                <option value="{{ $a->id }}">{{ $a->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <div class="form-group w-100">
                        <button type="button" id="btn-buscar" class="btn btn-info w-100">
                            <i class="fas fa-search mr-1"></i>Buscar Lotes
                        </button>
                    </div>
                </div>
            </div>

            <div id="lotes-container" style="display:none;">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Lote <span class="text-danger">*</span></label>
                            <select name="lote_id" id="lote_id"
                                class="form-control @error('lote_id') is-invalid @enderror" required>
                                <option value="">— seleccione un lote —</option>
                            </select>
                            @error('lote_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-3" id="info-lote" style="display:none;">
                        <small class="text-muted">Stock actual</small>
                        <p class="font-weight-bold text-success mb-1" id="lote-stock">—</p>
                        <small class="text-muted">Estado</small>
                        <p class="font-weight-bold mb-0" id="lote-estado">—</p>
                    </div>
                </div>
            </div>

            <div class="row mt-2">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Tipo de ajuste <span class="text-danger">*</span></label>
                        <select name="tipo_ajuste" class="form-control @error('tipo_ajuste') is-invalid @enderror" required>
                            <option value="">— Seleccionar —</option>
                            <option value="incremento" {{ old('tipo_ajuste') == 'incremento' ? 'selected' : '' }}>Incremento (+)</option>
                            <option value="decremento" {{ old('tipo_ajuste') == 'decremento' ? 'selected' : '' }}>Decremento (−)</option>
                            <option value="correccion" {{ old('tipo_ajuste') == 'correccion' ? 'selected' : '' }}>Corrección (valor absoluto)</option>
                        </select>
                        @error('tipo_ajuste')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Cantidad <span class="text-danger">*</span></label>
                        <input type="number" name="cantidad" step="0.001" min="0.001"
                            class="form-control @error('cantidad') is-invalid @enderror"
                            value="{{ old('cantidad') }}" required>
                        @error('cantidad')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Motivo <span class="text-danger">*</span></label>
                        <input type="text" name="motivo" maxlength="300"
                            class="form-control @error('motivo') is-invalid @enderror"
                            value="{{ old('motivo') }}"
                            placeholder="Ej: Conteo físico, merma, error de registro..." required>
                        @error('motivo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>Observaciones adicionales</label>
                <input type="text" name="observacion" maxlength="500"
                    class="form-control" value="{{ old('observacion') }}">
            </div>

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

@push('scripts')
<script>
const urlLotes = '{{ route("logistica.ajustes.lotes") }}';
let loteData = {};

document.getElementById('btn-buscar').addEventListener('click', buscarLotes);

async function buscarLotes() {
    const productoId = document.getElementById('producto_id').value;
    const almacenId  = document.getElementById('almacen_id').value;
    if (!productoId) { alert('Seleccione un producto primero.'); return; }

    const params = new URLSearchParams({ producto_id: productoId });
    if (almacenId) params.append('almacen_id', almacenId);

    const resp  = await fetch(`${urlLotes}?${params}`);
    const lotes = await resp.json();

    const select = document.getElementById('lote_id');
    select.innerHTML = '<option value="">— seleccione un lote —</option>';
    loteData = {};

    lotes.forEach(l => {
        loteData[l.id] = l;
        const vence = l.fecha_vencimiento ? ` | Vence: ${l.fecha_vencimiento}` : '';
        select.innerHTML += `<option value="${l.id}">Lote ${l.numero} [${l.estado}] — Stock: ${parseFloat(l.cantidad_actual).toFixed(3)}${vence}</option>`;
    });

    document.getElementById('lotes-container').style.display = '';
    if (lotes.length === 0) {
        select.innerHTML = '<option value="">Sin lotes encontrados</option>';
        document.getElementById('info-lote').style.display = 'none';
    }
}

document.getElementById('lote_id').addEventListener('change', function () {
    const l = loteData[this.value];
    if (!l) { document.getElementById('info-lote').style.display = 'none'; return; }
    document.getElementById('lote-stock').textContent  = parseFloat(l.cantidad_actual).toFixed(3);
    document.getElementById('lote-estado').textContent = l.estado;
    document.getElementById('info-lote').style.display = '';
});
</script>
@endpush

@endsection