<div class="card adminuiux-card border-danger shadow-sm mt-4">
    <div class="card-body">

        {{-- header and description --}}
        <h4 class="fw-bold text-danger mb-2">Delete Account</h4>
        <p class="text-secondary small mb-3">
            Once deleted, all your data will be permanently removed. Download any information you want to keep.
        </p>

        {{-- trigger button for sweetalert confirmation --}}
        <button id="deleteAccountBtn" class="btn btn-danger mt-3 px-3">
            Delete Account
        </button>

        {{-- delete account form (submitted after sweetalert confirmation) --}}
        <form id="deleteAccountForm" method="post" action="{{ route('profile.destroy') }}" style="display:none;">
            @csrf
            @method('delete')
            <input type="hidden" name="password" id="passwordInput" required>
        </form>
    </div>
</div>

{{-- sweetalert2 cdn --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" crossorigin="anonymous"></script>

<script>
document.getElementById('deleteAccountBtn').addEventListener('click', function(e) {
    e.preventDefault();

    // show confirmation dialog
    StandardSwal.fire({
        title: 'Delete Your Account?',
        text: "This action is irreversible. All your personal data and resources will be permanently wiped. Please enter your password to authorize this deletion.",
        icon: 'warning',
        input: 'password',
        inputPlaceholder: 'Confirm your password',
        showCancelButton: true,
        confirmButtonText: 'Permanently Delete',
        customClass: {
            confirmButton: 'btn-pill-danger',
            cancelButton: 'btn-pill-cancel'
        },
        reverseButtons: false,
        preConfirm: (password) => {
            if (!password)
                StandardSwal.showValidationMessage('Authentication password is required');
            return password;
        }
    })
.then((result) => {
        // if confirmed, submit form
        if (result.isConfirmed) {
            document.getElementById('passwordInput').value = result.value;
            document.getElementById('deleteAccountForm').submit();
        }
    });
});
</script>

{{-- sweetalert error if password is incorrect (server validation) --}}
@if ($errors->userDeletion->has('password'))
<script>
StandardSwal.fire({
    icon: 'error',
    title: 'Verification Failed!',
    text: '{{ $errors->userDeletion->first("password") }}' || 'The password you provided is incorrect.',
    confirmButtonText: 'Try Again'
});
</script>
@endif