<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog"
     aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <!-- Background overlay -->
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
             onclick="hideDeleteModal()"></div>

        <!-- This element is to trick the browser into centering the modal contents. -->
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <!-- Modal panel -->
        <div
            class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
            <div class="sm:flex sm:items-start">
                <!-- Warning Icon -->
                <div
                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                    <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>

                <!-- Modal Content -->
                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                        <!-- Dynamic title will be inserted here -->
                    </h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500" id="modal-message">
                            <!-- Dynamic message will be inserted here -->
                        </p>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                <button type="button" id="confirmDeleteBtn"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm transition-colors duration-200">
                    <span class="delete-btn-text">Sil</span>
                    <span class="delete-btn-loading hidden">
                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline"
                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Siliniyor...
                    </span>
                </button>
                <button type="button" id="cancelDeleteBtn"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm transition-colors duration-200"
                        onclick="hideDeleteModal()">
                    İptal
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Modal Animation Styles */
    #deleteModal {
        transition: opacity 0.25s ease-out;
    }

    #deleteModal.show {
        opacity: 1;
    }

    #deleteModal.show .inline-block {
        animation: modalSlideIn 0.3s ease-out;
    }

    #deleteModal.hide {
        opacity: 0;
    }

    #deleteModal.hide .inline-block {
        animation: modalSlideOut 0.2s ease-in;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-50px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes modalSlideOut {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        to {
            opacity: 0;
            transform: translateY(-50px) scale(0.95);
        }
    }

    /* Button Loading State */
    #confirmDeleteBtn:disabled {
        opacity: 0.75;
        cursor: not-allowed;
    }

    /* Backdrop Blur Effect */
    #deleteModal .bg-gray-500 {
        backdrop-filter: blur(4px);
    }

    /* Custom Scrollbar for Modal */
    #deleteModal::-webkit-scrollbar {
        width: 6px;
    }

    #deleteModal::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    #deleteModal::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    #deleteModal::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }
</style>

<script>
    // Delete Modal Functionality
    let deleteModalCallback = null;

    /**
     * Show delete confirmation modal
     * @param {string} title - Modal title
     * @param {string} message - Modal message
     * @param {function} callback - Function to execute on confirmation
     */
    function showDeleteModal(title = 'Silme Onayı', message = 'Bu işlemi onaylıyor musunuz?', callback = null) {
        const modal = document.getElementById('deleteModal');
        const titleElement = document.getElementById('modal-title');
        const messageElement = document.getElementById('modal-message');
        const confirmBtn = document.getElementById('confirmDeleteBtn');

        // Set modal content
        titleElement.textContent = title;
        messageElement.textContent = message;

        // Store callback function
        deleteModalCallback = callback;

        // Reset button state
        resetDeleteButton();

        // Show modal with animation
        modal.classList.remove('hidden');
        modal.classList.add('show');
        modal.classList.remove('hide');

        // Focus on cancel button for accessibility
        document.getElementById('cancelDeleteBtn').focus();

        // Prevent body scroll
        document.body.style.overflow = 'hidden';
    }

    /**
     * Hide delete confirmation modal
     */
    function hideDeleteModal() {
        const modal = document.getElementById('deleteModal');

        // Hide modal with animation
        modal.classList.add('hide');
        modal.classList.remove('show');

        // Remove modal after animation
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('hide');

            // Restore body scroll
            document.body.style.overflow = 'auto';

            // Reset callback
            deleteModalCallback = null;
        }, 200);
    }

    /**
     * Reset delete button to initial state
     */
    function resetDeleteButton() {
        const confirmBtn = document.getElementById('confirmDeleteBtn');
        const textSpan = confirmBtn.querySelector('.delete-btn-text');
        const loadingSpan = confirmBtn.querySelector('.delete-btn-loading');

        confirmBtn.disabled = false;
        textSpan.classList.remove('hidden');
        loadingSpan.classList.add('hidden');
    }

    /**
     * Set delete button to loading state
     */
    function setDeleteButtonLoading() {
        const confirmBtn = document.getElementById('confirmDeleteBtn');
        const textSpan = confirmBtn.querySelector('.delete-btn-text');
        const loadingSpan = confirmBtn.querySelector('.delete-btn-loading');

        confirmBtn.disabled = true;
        textSpan.classList.add('hidden');
        loadingSpan.classList.remove('hidden');
    }

    // Event Listeners
    document.addEventListener('DOMContentLoaded', function () {
        const confirmBtn = document.getElementById('confirmDeleteBtn');
        const cancelBtn = document.getElementById('cancelDeleteBtn');

        // Confirm delete button
        confirmBtn.addEventListener('click', async function () {
            if (deleteModalCallback && typeof deleteModalCallback === 'function') {
                try {
                    // Set loading state
                    setDeleteButtonLoading();

                    // Execute callback
                    await deleteModalCallback();

                    // Hide modal after successful execution
                    hideDeleteModal();
                } catch (error) {
                    console.error('Delete operation failed:', error);

                    // Reset button state on error
                    resetDeleteButton();

                    // You can add error notification here
                    if (typeof showNotification === 'function') {
                        showNotification('İşlem sırasında bir hata oluştu.', 'error');
                    }
                }
            } else {
                hideDeleteModal();
            }
        });

        // Cancel button (already handled by onclick attribute)

        // ESC key to close modal
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                const modal = document.getElementById('deleteModal');
                if (!modal.classList.contains('hidden')) {
                    hideDeleteModal();
                }
            }
        });

        // Click outside to close modal
        document.getElementById('deleteModal').addEventListener('click', function (e) {
            if (e.target === this) {
                hideDeleteModal();
            }
        });
    });

    // Expose functions globally for external use
    window.showDeleteModal = showDeleteModal;
    window.hideDeleteModal = hideDeleteModal;
</script>
