{{-- Botão para abrir o modal --}}
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmUserDeletionModal">
    Excluir Conta
</button>

{{-- Modal de confirmação --}}
<div class="modal fade" id="confirmUserDeletionModal" tabindex="-1" aria-labelledby="confirmUserDeletionModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('profile.destroy') }}">
            @csrf
            @method('delete')

            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="confirmUserDeletionModalLabel">Confirmação de Exclusão</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Fechar"></button>
                </div>

                <div class="modal-body">
                    <p>Tem certeza que deseja excluir sua conta? Todos os seus dados serão permanentemente removidos.
                    </p>
                    <p>Por favor, insira sua senha para confirmar:</p>

                    <div class="mb-3">
                        <label for="password" class="form-label visually-hidden">Senha</label>
                        <input type="password" name="password" id="password"
                            class="form-control @error('password', 'userDeletion') is-invalid @enderror"
                            placeholder="Senha" required>
                        @error('password', 'userDeletion')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger">Excluir Conta</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Script para abrir o modal automaticamente se houver erros --}}
@if ($errors->userDeletion->isNotEmpty())
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var modal = new bootstrap.Modal(document.getElementById('confirmUserDeletionModal'));
            modal.show();
        });
    </script>
@endif