$(document).ready(function() {
    // ----------------------------------------------------
    // 1. Image Upload Live Preview
    // ----------------------------------------------------
    $('#imageUpload').on('change', function(e) {
        const file = this.files[0];
        if (file) {
            // Check file size limit (5MB)
            if (file.size > 5 * 1024 * 1024) {
                showFloatingAlert("File is too large. Max size is 5MB.", "danger");
                this.value = '';
                return;
            }
            
            // Check file type
            const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
            if (!validTypes.includes(file.type)) {
                showFloatingAlert("Invalid file format. Please upload JPG, PNG, GIF, or WEBP.", "danger");
                this.value = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewImage').attr('src', e.target.result).show();
                $('.preview-container i, .preview-container span').hide();
                if ($('.preview-overlay').length === 0) {
                    $('.preview-container').append('<div class="preview-overlay">Change Image</div>');
                }
            }
            reader.readAsDataURL(file);
        }
    });
    
    // Make container click trigger hidden input
    $('.preview-container-trigger').on('click', function() {
        $('#imageUpload').click();
    });

    // ----------------------------------------------------
    // 2. Form Submission via AJAX (Client Order Page)
    // ----------------------------------------------------
    $('#orderForm').on('submit', function(e) {
        e.preventDefault();
        
        // Reset styles
        $('.is-invalid').removeClass('is-invalid');
        
        let isValid = true;
        
        // Field validation
        $(this).find('[required]').each(function() {
            if (!$(this).val().trim()) {
                $(this).addClass('is-invalid');
                isValid = false;
            }
        });
        
        // Custom validations (phone format)
        const phone = $('#phone').val().trim();
        const whatsapp = $('#whatsapp').val().trim();
        const email = $('#email').val().trim();
        
        if (email && !validateEmail(email)) {
            $('#email').addClass('is-invalid');
            isValid = false;
        }

        if (!isValid) {
            showFloatingAlert("Please correct the errors in the form.", "danger");
            return;
        }

        const formData = new FormData(this);
        const $submitBtn = $('#submitBtn');
        const originalText = $submitBtn.html();
        
        $submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status"></span>Submitting...');
        
        $.ajax({
            url: 'submit.php',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {
                $submitBtn.prop('disabled', false).html(originalText);
                
                if (response.success) {
                    // Update confirmation UI with details
                    $('#orderNoPlaceholder').text(response.order_no);
                    $('#waTextPlaceholder').text(response.whatsapp_message);
                    $('#waDirectBtn').attr('href', response.whatsapp_link);
                    $('#copyWaTextBtn').attr('data-text', response.whatsapp_message);
                    
                    // Display details
                    $('#formCard').fadeOut(450, function() {
                        $('#successCard').fadeIn(450);
                        // Scroll to top
                        $('html, body').animate({ scrollTop: 0 }, 'slow');
                    });
                } else {
                    showFloatingAlert(response.message || "Something went wrong. Please check your data.", "danger");
                }
            },
            error: function(xhr, status, error) {
                $submitBtn.prop('disabled', false).html(originalText);
                showFloatingAlert("Server error: Unable to submit order at this time.", "danger");
            }
        });
    });

    // ----------------------------------------------------
    // 3. Copy to Clipboard Button Action
    // ----------------------------------------------------
    $(document).on('click', '#copyWaTextBtn', function() {
        const text = $(this).attr('data-text');
        if (text) {
            copyToClipboard(text);
        }
    });

    // ----------------------------------------------------
    // 4. Admin Panel Dynamic AJAX Events
    // ----------------------------------------------------
    // Update order status from table dropdown or detail dropdown
    $(document).on('change', '.select-order-status', function() {
        const orderId = $(this).data('id');
        const statusVal = $(this).val();
        const $select = $(this);
        
        $select.prop('disabled', true);
        
        $.ajax({
            url: 'ajax_operations.php',
            type: 'POST',
            data: {
                action: 'update_status',
                id: orderId,
                status: statusVal
            },
            dataType: 'json',
            success: function(response) {
                $select.prop('disabled', false);
                if (response.success) {
                    showFloatingAlert(response.message, "success");
                    // Reload after brief timeout to refresh badge styling and count widgets
                    setTimeout(function() {
                        location.reload();
                    }, 800);
                } else {
                    showFloatingAlert(response.message || "Failed to update status", "danger");
                }
            },
            error: function() {
                $select.prop('disabled', false);
                showFloatingAlert("Server connection error during status update.", "danger");
            }
        });
    });

    // Delete order
    $(document).on('click', '.btn-delete-order', function(e) {
        e.preventDefault();
        const orderId = $(this).data('id');
        const orderNo = $(this).data('order-no');
        const isDetailRedirect = $(this).data('redirect') === true;
        
        if (confirm(`Are you sure you want to permanently delete order ${orderNo}?`)) {
            $.ajax({
                url: 'ajax_operations.php',
                type: 'POST',
                data: {
                    action: 'delete_order',
                    id: orderId
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        showFloatingAlert(response.message, "success");
                        setTimeout(function() {
                            if (isDetailRedirect) {
                                window.location.href = 'orders.php';
                            } else {
                                location.reload();
                            }
                        }, 800);
                    } else {
                        showFloatingAlert(response.message || "Failed to delete order", "danger");
                    }
                },
                error: function() {
                    showFloatingAlert("Server connection error during order deletion.", "danger");
                }
            });
        }
    });

    // Helper: Email validation Regex
    function validateEmail(email) {
        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    // Helper: Clipboard Copy
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            showFloatingAlert("WhatsApp message copied successfully.", "success");
        }, function(err) {
            // Fallback for older browsers
            const textArea = document.createElement("textarea");
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            try {
                document.execCommand('copy');
                showFloatingAlert("WhatsApp message copied successfully.", "success");
            } catch (err) {
                showFloatingAlert("Failed to copy message to clipboard.", "danger");
            }
            document.body.removeChild(textArea);
        });
    }

    // Helper: Floating Alert Notification
    function showFloatingAlert(message, type) {
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show border-0 shadow-lg text-white bg-${type === 'success' ? 'success' : 'danger'} mb-2" role="alert" style="min-width: 300px;">
                <div class="d-flex align-items-center">
                    <i class="fas ${icon} me-2 fs-5"></i>
                    <div>${message}</div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;
        
        let container = $('.floating-alert-container');
        if (container.length === 0) {
            $('body').append('<div class="floating-alert-container" style="position: fixed; top: 20px; right: 20px; z-index: 1060;"></div>');
            container = $('.floating-alert-container');
        }
        
        const $alert = $(alertHtml);
        container.append($alert);
        
        // Auto fadeout after 4 seconds
        setTimeout(function() {
            $alert.addClass('animate__animated animate__fadeOutRight');
            $alert.fadeOut(400, function() {
                $(this).remove();
            });
        }, 4000);
    }
});