@extends('layouts.app')

@section('title', 'Registrar Salida de Bien')

@section('content')
<div class="card">
    <div class="card-body">
        <h4 class="header-title mb-4">Registrar Salida de Bien</h4>

        <form action="{{ route('salidas.store') }}" method="POST">
            @csrf

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Área</label>
                    <select name="area_id" id="area_id" class="form-select" required>
                        <option value="">-- Seleccionar Área --</option>
                        @foreach($areas as $area)
                            <option value="{{ $area->id }}">{{ $area->nombre }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Bien</label>
                    <select name="bien_id" id="bien_id" class="form-select" required>
                        <option value="">-- Seleccionar Bien --</option>
                    </select>
                    <small id="stock_info" class="text-muted"></small>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Fecha de Salida</label>
                    <input type="date" name="fecha_salida" class="form-control" required>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Estado del Bien</label>
                    <select name="estado_bien" class="form-select" required>
                        <option value="Bueno">Bueno</option>
                        <option value="Regular">Regular</option>
                        <option value="Malogrado">Malogrado</option>
                    </select>
                </div>

				<div class="col-md-3">
					<label class="form-label">Cantidad</label>
					<input type="number" name="cantidad" class="form-control" min="1" required>
				</div>


                <div class="col-md-3">
                    <label class="form-label">Responsable</label>
                    <input type="text" name="responsable" class="form-control" required>
                </div>

                <div class="col-md-12">
                    <label class="form-label">Destino</label>
                    <input type="text" name="destino" class="form-control" required>
                </div>

                <div class="col-md-12">
                    <label class="form-label">Observación (opcional)</label>
                    <textarea name="observacion" class="form-control" rows="3"></textarea>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-success">Guardar Salida</button>
                <a href="{{ route('salidas.index') }}" class="btn btn-secondary">Cancelar</a>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const areaSelect = document.getElementById('area_id');
    const bienSelect = document.getElementById('bien_id');
    const stockInfo = document.getElementById('stock_info');

    areaSelect.addEventListener('change', function () {
        const areaId = this.value;
        bienSelect.innerHTML = '<option value="">Cargando...</option>';
        stockInfo.textContent = '';

        fetch(`/api/bienes-por-area/${areaId}`)
            .then(response => response.json())
            .then(data => {
                bienSelect.innerHTML = '<option value="">-- Seleccionar Bien --</option>';
                data.forEach(bien => {
                    const option = document.createElement('option');
                    option.value = bien.id;
                    option.text = `${bien.bien} (Stock: ${bien.cantidad})`;
                    option.dataset.stock = bien.cantidad;
                    bienSelect.appendChild(option);
                });
            });
    });

    bienSelect.addEventListener('change', function () {
        const selected = this.options[this.selectedIndex];
        const stock = selected.dataset.stock || '';
        stockInfo.textContent = stock ? `Stock disponible: ${stock}` : '';
    });
});
</script>
@endpush