(function($){

    $('.post-type-dashboard_builder a.page-title-action').on('click', function(e) {
        e.preventDefault(); 
        $('#popupOverlay').addClass('active');
        $('#popupModal').addClass('active');
        $('body').css('overflow', 'hidden');
    });

    $(document).ready(function(){
        
        
        $('.post-type-dashboard_builder a.page-title-action').on('click', function(e) {
            e.preventDefault(); 
            $('#popupOverlay').addClass('active');
            $('#popupModal').addClass('active');
            $('body').css('overflow', 'hidden');
        });

            
            const templatesData = createPostScript.pre_desined_layouts ?? [];

            let selectedTemplate = null;

            // Show loading overlay
            function showLoading(message) {
                if (message) {
                    $('#loadingMessage').text(message);
                }
                $('#loadingOverlay').addClass('active');
                $('body').css('overflow', 'hidden');
            }

            // Hide loading overlay
            function hideLoading() {
                $('#loadingOverlay').removeClass('active');
                $('body').css('overflow', 'auto');
            }

            // Open popup
            // $('#openPopupBtn').on('click', function() {
            //     $('#popupOverlay').addClass('active');
            //     $('#popupModal').addClass('active');
            //     $('body').css('overflow', 'hidden');
            // });

            // Close popup
            function closePopup() {
                $('#popupOverlay').removeClass('active');
                $('#popupModal').removeClass('active');
                hideLoading(); // Hide loading if visible
                $('body').css('overflow', 'auto');
                // Reset form
                $('#templateType').val('');
                $('#templateName').val('');
                $('#templatesSection').removeClass('active');
                $('#templatesGrid').html('');
                $('#submitBtn').prop('disabled', false); // Enable submit button
                selectedTemplate = null;
            }

            $('#closePopupBtn, #cancelBtn, #popupOverlay').on('click', function(e) {
                if (e.target === this) {
                    closePopup();
                }
            });

            // Close on ESC key
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' && $('#popupModal').hasClass('active')) {
                    closePopup();
                }
            });

            // Handle template type change
            $('#templateType').on('change', function() {
                const selectedType = $(this).val();
                const templatesGrid = $('#templatesGrid');
                
                if (selectedType && templatesData[selectedType]) {
                    // Show templates section
                    $('#templatesSection').addClass('active');
                    
                    // Clear previous templates
                    templatesGrid.html('');
                    selectedTemplate = null;
                    
                    // Load templates for selected type
                    templatesData[selectedType].forEach(function(template) {
                        const templateItem = $('<div>')
                            .addClass('template-item')
                            .attr('data-template-id', template.id)
                            .html(
                                '<img src="' + template.image + '" alt="' + template.name + '">' +
                                '<div class="template-label">' + template.name + '</div>'
                            );
                        
                        templateItem.on('click', function() {
                            // Remove selected class from all items
                            $('.template-item').removeClass('selected');
                            // Add selected class to clicked item
                            $(this).addClass('selected');
                            selectedTemplate = template.id;
                        });
                        
                        templatesGrid.append(templateItem);
                    });
                } else {
                    // Hide templates section
                    $('#templatesSection').removeClass('active');
                    templatesGrid.html('');
                    selectedTemplate = null;
                }
            });

            // Handle form submission
            $('#submitBtn').on('click', function() {
                const templateType = $('#templateType').val();
                const templateName = $('#templateName').val().trim();
                
                // Validation
                if (!templateType) {
                    alert('لطفا نوع طرح را انتخاب کنید');
                    return;
                }
                
                showLoading('در حال ایجاد طرح...');
                
                $('#submitBtn').prop('disabled', true);
                
                $.ajax({
                    url: ajaxurl ,
                    type: 'POST',
                    data: {
                        action: 'create_elementor_template_post', 
                        nonce: createPostScript.nonce, 
                        templateType: templateType,
                        templateName: templateName,
                        selectedTemplate: selectedTemplate
                    },
                    success: function(response) {
                        hideLoading();
                        $('#submitBtn').prop('disabled', false);

                        window.location.href = response.admin_url;
                    },
                    error: function(xhr, status, error) {
                        hideLoading();
                        $('#submitBtn').prop('disabled', false);
                        alert('خطا در ارتباط با سرور: ' + error);
                    }
                });
            });

            
    });

       

})(jQuery);