@extends('layouts.app')

@section('content')
<div class="container">
    <h3>Registrar Retiro</h3>

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

        {{-- Fecha --}}
        <div class="mb-3">
            <label>Fecha</label>
            <input type="date" name="fecha" class="form-control" value="{{ now()->toDateString() }}" required>
        </div>

        {{-- Selector de Comercio y Sucursal --}}
        <x-comercio-sucursal-selector 
            :comercios="$comercios" 
            :selectedComercio="old('comercio_id')" 
            :selectedSucursal="old('sucursal_id')" />

        {{-- Usuario (se llenará dinámicamente) --}}
        <div class="mb-3">
            <label class="form-label">Usuario</label>
            <select name="usuario_id" id="usuarioSelect" class="form-select" required disabled>
                <option value="">Seleccione primero comercio y sucursal</option>
            </select>
        </div>

        {{-- Turno --}}
        <div class="mb-3">
            <label class="form-label">Turno</label>
            <select name="turno_id" class="form-select">
                <option value="">Sin turno</option>
                @foreach($turnos as $turno)
                    <option value="{{ $turno->id }}">{{ $turno->turno }}</option>
                @endforeach
            </select>
        </div>

        {{-- Valor --}}
        <div class="mb-3">
            <label class="form-label">Monto del Retiro</label>
            <input type="number" name="monto" class="form-control" min="0" required>
        </div>

        <button type="submit" class="btn btn-primary">Guardar Retiro</button>
        <a href="{{ route('admin.retiros.index') }}" class="btn btn-secondary">Cancelar</a>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const comercioSelect = document.querySelector('select[name="comercio_id"]');
    const sucursalSelect = document.getElementById('sucursal_id');
    const usuarioSelect = document.getElementById('usuarioSelect');

    function cargarUsuarios() {
        const comercioId = comercioSelect.value;
        const sucursalId = sucursalSelect.value;

        if (!comercioId || !sucursalId) {
            usuarioSelect.innerHTML = '<option value="">Seleccione primero comercio y sucursal</option>';
            usuarioSelect.disabled = true;
            return;
        }

        usuarioSelect.innerHTML = '<option value="">Cargando usuarios...</option>';
        usuarioSelect.disabled = true;

        fetch(`/api/comercios/${comercioId}/sucursales/${sucursalId}/usuarios`)
            .then(response => response.json())
            .then(data => {
                usuarioSelect.innerHTML = '<option value="">Seleccione un usuario</option>';
                data.forEach(usuario => {
                    const option = document.createElement('option');
                    option.value = usuario.id;
                    option.textContent = usuario.name;
                    usuarioSelect.appendChild(option);
                });
                usuarioSelect.disabled = false;
            })
            .catch(() => {
                usuarioSelect.innerHTML = '<option value="">Error al cargar usuarios</option>';
            });
    }

    comercioSelect.addEventListener('change', cargarUsuarios);
    sucursalSelect.addEventListener('change', cargarUsuarios);
});
</script>
@endpush