<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true" style="z-index: 10000; display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteConfirmModalLabel">
                    <i aria-hidden="true" class="fas fa-exclamation-triangle me-2"></i>
                    <span id="deleteModalTitle">Confirm Delete</span>
                </h5>
                <button type="button" class="btn-close ldr-btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="deleteModalMessage" class="mb-3">Are you sure you want to delete this item?</p>

                <!-- Dynamic details section -->
                <div id="deleteModalDetails" class="alert alert-warning" style="display: none;">
                    <strong>This will delete:</strong>
                    <ul id="deleteDetailsList" class="mb-0 mt-2"></ul>
                </div>

                <!-- Warning section for dangerous operations -->
                <div id="deleteModalWarning" class="alert alert-danger" style="display: none;">
                    <i aria-hidden="true" class="fas fa-exclamation-circle me-2"></i>
                    <span id="deleteWarningText">This action cannot be undone.</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i aria-hidden="true" class="fas fa-times me-1"></i> Cancel
                </button>
                <button type="button" class="btn btn-danger" id="deleteConfirmBtn">
                    <i aria-hidden="true" class="fas fa-trash me-1"></i> <span id="deleteConfirmBtnText">Delete</span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Delete confirmation modal specific styles */
#deleteConfirmModal .modal-header.bg-danger {
    background: var(--error-color) !important;
}

#deleteConfirmModal .ldr-btn-close-white {
    filter: brightness(0) invert(1);
}

#deleteModalDetails ul {
    padding-left: 1.5rem;
}

#deleteModalDetails li {
    margin-bottom: 0.25rem;
}

/* Animation for the delete button on hover */
#deleteConfirmBtn:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}

#deleteConfirmBtn {
    transition: all 0.2s ease;
}
</style>
