@can('bulkDelete', App\Models\User::class)
<div
    x-show="bulkDeleteOpen"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 p-4"
    x-transition.opacity
    x-on:click.self="bulkDeleteOpen = false"
>
    <div
        class="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl border border-gray-200 bg-white p-6 shadow-xl"
        role="dialog"
        aria-modal="true"
        aria-labelledby="user-bulk-delete-title"
        @click.stop
    >
        <h2 id="user-bulk-delete-title" class="text-lg font-semibold text-gray-900">Excluir usuários em lote</h2>
        <p class="mt-1 text-sm text-gray-600">
            Remove permanentemente todos os usuários das <strong>áreas (setores)</strong> ou do <strong>grupo de treinamento</strong> escolhido.
            Você pode marcar várias áreas de uma vez. A sua própria conta nunca entra na exclusão. Contas Admin global protegidas também ficam de fora, se aplicável.
        </p>

        <form
            method="post"
            action="{{ route('users.bulk-delete.destroy') }}"
            class="mt-6 space-y-4"
            x-on:submit="if (!confirm('Confirma a exclusão permanente dos usuários do filtro selecionado?')) { $event.preventDefault(); }"
        >
            @csrf
            @method('DELETE')

            <div>
                <x-form.label for="bulk_delete_scope" value="Excluir por" />
                <select
                    id="bulk_delete_scope"
                    name="scope"
                    x-model="bulkDeleteScope"
                    x-on:change="bulkDeleteCount = null; bulkDeleteSectorIds = []"
                    required
                    class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                >
                    <option value="area">Área (setor do usuário)</option>
                    <option value="group">Grupo de treinamento</option>
                </select>
                <x-form.error name="scope" />
            </div>

            <div x-show="bulkDeleteScope === 'area'" x-cloak>
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <x-form.label value="Áreas" class="!mb-0" />
                    <div class="flex gap-2 text-xs">
                        <button
                            type="button"
                            class="text-blue-600 hover:underline"
                            x-on:click="selectAllBulkDeleteSectors()"
                        >
                            Selecionar todas
                        </button>
                        <span class="text-gray-300">|</span>
                        <button
                            type="button"
                            class="text-gray-600 hover:underline"
                            x-on:click="clearBulkDeleteSectors()"
                        >
                            Limpar
                        </button>
                    </div>
                </div>
                <p class="mt-1 text-xs text-gray-500">Marque uma ou mais áreas para excluir os usuários de todas de uma vez.</p>
                <div class="mt-2 max-h-48 space-y-2 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-3" role="group" aria-label="Áreas">
                    @forelse ($sectors as $sector)
                        <label class="flex cursor-pointer items-center gap-2 text-sm text-gray-800">
                            <input
                                type="checkbox"
                                name="sector_ids[]"
                                value="{{ $sector->id }}"
                                class="rounded border-gray-300 text-red-600 focus:ring-red-500"
                                x-model="bulkDeleteSectorIds"
                                x-on:change="fetchBulkDeleteCount()"
                                :disabled="bulkDeleteScope !== 'area'"
                            />
                            <span>{{ $sector->name }}</span>
                        </label>
                    @empty
                        <p class="text-sm text-gray-500">Nenhuma área cadastrada.</p>
                    @endforelse
                </div>
                <x-form.error name="sector_ids" />
                <x-form.error name="sector_id" />
            </div>

            <div x-show="bulkDeleteScope === 'group'" x-cloak>
                <x-form.label for="bulk_delete_training_group_id" value="Grupo" />
                <select
                    id="bulk_delete_training_group_id"
                    name="training_group_id"
                    x-model="bulkDeleteGroupId"
                    x-on:change="fetchBulkDeleteCount()"
                    :required="bulkDeleteScope === 'group'"
                    class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                >
                    <option value="">Selecione…</option>
                    @foreach ($trainingGroups as $group)
                        <option value="{{ $group->id }}">
                            {{ $group->name }}@if ($group->sector) ({{ $group->sector->name }})@endif
                        </option>
                    @endforeach
                </select>
                <x-form.error name="training_group_id" />
            </div>

            <p class="text-sm text-gray-700" x-show="bulkDeleteCount !== null" x-cloak>
                <span class="font-medium" x-text="bulkDeleteCount === 0 ? 'Nenhum usuário será excluído com este filtro.' : (bulkDeleteCount + ' usuário(s) serão excluídos.')"></span>
                <span
                    class="block text-xs font-normal text-gray-500"
                    x-show="bulkDeleteScope === 'area' && bulkDeleteSectorIds.length > 1"
                    x-text="bulkDeleteSectorIds.length + ' área(s) selecionada(s).'"
                ></span>
            </p>
            <p class="text-xs text-gray-500" x-show="bulkDeleteLoading">A calcular…</p>

            <x-form.error name="bulk_delete" />

            <label class="flex items-start gap-2 text-sm text-gray-700">
                <input
                    type="checkbox"
                    name="confirm"
                    value="1"
                    required
                    class="mt-0.5 rounded border-gray-300 text-red-600 focus:ring-red-500"
                />
                <span>Entendo que esta ação é <strong>irreversível</strong> e desejo excluir os usuários do filtro acima.</span>
            </label>
            <x-form.error name="confirm" />

            <div class="flex flex-wrap items-center justify-end gap-3 pt-2">
                <button
                    type="button"
                    class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                    x-on:click="bulkDeleteOpen = false"
                >
                    Cancelar
                </button>
                <x-ui.button type="submit" class="!bg-red-600 hover:!bg-red-700">
                    Excluir usuários
                </x-ui.button>
            </div>
        </form>
    </div>
</div>
@endcan