@extends('layouts.app')
@section('title', 'Registrar Egreso')
@section('page-title', 'Registrar Egreso de Stock')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('logistica.dashboard') }}">Logística</a></li>
    <li class="breadcrumb-item"><a href="{{ route('logistica.egresos.index') }}">Egreso de Stock</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-arrow-circle-up mr-2"></i>Nuevo Egreso de Stock</h3>
    </div>
    <div class="card-body">
        <div class="alert alert-info py-2 mb-3">
            <i class="fas fa-info-circle mr-1"></i>
            El sistema descuenta automáticamente el stock usando el método <strong>FEFO</strong>
            (primero en vencer, primero en salir), afectando los lotes más próximos a vencer primero.
        </div>

        <form method="POST" action="{{ route('logistica.egresos.store') }}" id="form-egreso">
            @csrf

            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        <label>Producto <span class="text-danger">*</span></label>
                        <select name="producto_id" id="producto_id" class="form-control" required
                            onchange="actualizarStock()">
                            <option value="">Seleccionar producto...</option>
                            @foreach($productos as $p)
                                <option value="{{ $p->id }}"
                                    data-um="{{ $p->unidadMedida->abreviatura }}"
                                    data-stock="{{ $p->stock_actual }}">
                                    {{ $p->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Almacén origen <small class="text-muted">(opcional)</small></label>
                        <select name="almacen_id" id="almacen_id" class="form-control">
                            <option value="">Cualquier almacén</option>
                            @foreach($almacenes as $a)
                                <option value="{{ $a->id }}">{{ $a->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4" id="stock-info" style="display:none;">
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <div class="alert alert-success py-2 mb-0">
                            <small class="text-muted d-block">Stock disponible</small>
                            <strong id="stock-value" class="text-success" style="font-size:1.1rem;">—</strong>
                            <span id="stock-um" class="text-muted ml-1"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Área destino <span class="text-danger">*</span></label>
                        <select name="area_destino" class="form-control @error('area_destino') is-invalid @enderror" required>
                            <option value="">— Seleccionar área —</option>
                            @foreach($areas as $area)
                                <option value="{{ $area }}" {{ old('area_destino') == $area ? 'selected' : '' }}>
                                    {{ $area }}
                                </option>
                            @endforeach
                        </select>
                        @error('area_destino')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Cantidad a egresar <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" name="cantidad" id="cantidad" step="0.001" min="0.001"
                                class="form-control @error('cantidad') is-invalid @enderror"
                                value="{{ old('cantidad') }}" required>
                            <div class="input-group-append">
                                <span class="input-group-text" id="um_suffix">—</span>
                            </div>
                        </div>
                        @error('cantidad')<div class="invalid-feedback d-block">{{ $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: Despacho a producción, merma, consumo interno..."
                            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-danger">
                <i class="fas fa-save mr-1"></i>Registrar Egreso
            </button>
            <a href="{{ route('logistica.egresos.index') }}" class="btn btn-secondary ml-2">
                <i class="fas fa-times mr-1"></i>Cancelar
            </a>
        </form>
    </div>
</div>

@push('scripts')
<script>
function actualizarStock() {
    const sel  = document.getElementById('producto_id');
    const opt  = sel.options[sel.selectedIndex];
    const um   = opt.dataset.um || '—';
    const stock = parseFloat(opt.dataset.stock || 0);

    document.getElementById('um_suffix').textContent  = um;
    document.getElementById('stock-um').textContent   = um;
    document.getElementById('stock-value').textContent = stock.toFixed(3);

    const info = document.getElementById('stock-info');
    if (sel.value) {
        info.style.display = '';
        document.getElementById('stock-value').className = stock > 0 ? 'text-success' : 'text-danger';
    } else {
        info.style.display = 'none';
    }
}
</script>
@endpush

@endsection