@extends('layouts.admin')

@section('title', 'Nuevo Usuario')

@section('content_header')
    <h1>Nuevo Usuario</h1>
@endsection

@section('content')
@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

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

    <div class="form-group">
        <label>Nombre y Apellido</label>
        <input name="name" class="form-control" value="{{ old('name') }}" required>
    </div>

    <div class="form-group">
        <label>Rut</label>
        <input name="rut" class="form-control" value="{{ old('rut') }}" required>
    </div>

    <div class="form-group">
        <label>Email</label>
        <input name="email" class="form-control" value="{{ old('email') }}" required>
    </div>

    <div class="form-group">
        <label>Rol</label>
        <select name="role" class="form-control" required>
            @foreach(['admin', 'supervisor', 'guardia'] as $rol)
                <option value="{{ $rol }}" {{ old('role') === $rol ? 'selected' : '' }}>
                    {{ ucfirst($rol) }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label>Comercio</label>
        <select name="comercio_id" id="comercio_id" class="form-control" required>
            <option value="">Seleccione un comercio</option>
            @foreach($comercios as $comercio)
                <option value="{{ $comercio->id }}" {{ old('comercio_id') == $comercio->id ? 'selected' : '' }}>
                    {{ $comercio->nombre }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label>Sucursal</label>
        <select name="sucursal_id" id="sucursal_id" class="form-control" required>
            <option value="">Seleccione una sucursal</option>
            {{-- Se carga dinámicamente --}}
        </select>
    </div>

    <div class="form-group">
        <label>Contraseña</label>
        <input type="password" name="password" class="form-control" required>
        <input type="password" name="password_confirmation" class="form-control mt-1" placeholder="Confirmar contraseña" required>
    </div>

    <button class="btn btn-success">Guardar</button>
    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">Cancelar</a>
</form>
@endsection

@section('js')
<script>
    function cargarSucursales(comercioId, sucursalSeleccionada = null) {
        const $sucursalSelect = $('#sucursal_id');

        if (!comercioId) {
            $sucursalSelect.html('<option value="">Seleccione una sucursal</option>');
            return;
        }

        $sucursalSelect.html('<option value="">Cargando sucursales...</option>');

        const url = `{{ route('api.sucursales') }}?comercio=${comercioId}`;

        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(res => {
                if (!res.ok) throw new Error('Error cargando sucursales');
                return res.json();
            })
            .then(data => {
                let options = '<option value="">Seleccione una sucursal</option>';
                data.forEach(function(sucursal) {
                    let selected = (String(sucursalSeleccionada) === String(sucursal.id)) ? 'selected' : '';
                    options += `<option value="${sucursal.id}" ${selected}>${sucursal.nombre}</option>`;
                });
                $sucursalSelect.html(options);
            })
            .catch(() => {
                $sucursalSelect.html('<option value="">No se pudieron cargar sucursales</option>');
            });
    }

    $(document).ready(function () {
        const comercioActual = $('#comercio_id').val();
        const sucursalActual = '{{ old("sucursal_id") }}';

        if (comercioActual) {
            cargarSucursales(comercioActual, sucursalActual || null);
        }

        $('#comercio_id').on('change', function () {
            const nuevoComercioId = $(this).val();
            cargarSucursales(nuevoComercioId, null);
        });
    });
</script>
@endsection