@props(['comercios', 'selectedComercio' => null, 'selectedSucursal' => null])

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

 {{-- Sucursal (opcional, dependiente del comercio) --}}
        <div class="mb-3">
            <label class="form-label">Sucursal (opcional)</label>
            <select name="sucursal_id" id="sucursal_id" class="form-select" disabled>
                <option value="">Seleccione primero un comercio</option>
            </select>
        </div>

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

        comercioSelect.addEventListener('change', function () {
            const comercioId = this.value;

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

            if (!comercioId) {
                sucursalSelect.innerHTML = '<option value="">Seleccione primero un comercio</option>';
                return;
            }

            fetch(`/api/comercios/${comercioId}/sucursales`)
                .then(response => response.json())
                .then(data => {
                    sucursalSelect.innerHTML = '<option value="">Seleccione una sucursal</option>';
                    data.forEach(sucursal => {
                        const option = document.createElement('option');
                        option.value = sucursal.id;
                        option.textContent = sucursal.nombre;
                        sucursalSelect.appendChild(option);
                    });
                    sucursalSelect.disabled = false;
                })
                .catch(() => {
                    sucursalSelect.innerHTML = '<option value="">Error al cargar</option>';
                });
        });
    });
</script>
@endpush