<?php
session_start();
// Simple test page - set session for testing
if (!isset($_SESSION['uid'])) {
    $_SESSION['uid'] = 1; // For testing purposes
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern MessageBox - Test Page</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
    <!-- Modern MessageBox CSS -->
    <link rel="stylesheet" href="css/modern-messagebox.css">
    
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .test-container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .test-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }
        
        .test-header h1 {
            color: #2d3748;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .test-header p {
            color: #718096;
            font-size: 14px;
        }
        
        .test-section {
            margin-bottom: 30px;
        }
        
        .test-section h3 {
            color: #2d3748;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .btn-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }
        
        .btn-test {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn-test:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .btn-test:active {
            transform: translateY(0);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            color: white;
        }
        
        .btn-error {
            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
            color: white;
        }
        
        .btn-warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        
        .btn-info {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }
        
        .btn-confirm {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-default {
            background: #e9ecef;
            color: #495057;
        }
        
        .result-box {
            margin-top: 15px;
            padding: 12px 15px;
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            border-radius: 5px;
            font-size: 13px;
            color: #2d3748;
            display: none;
        }
        
        .result-box.show {
            display: block;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-10px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .code-example {
            background: #2d3748;
            color: #a0aec0;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            overflow-x: auto;
            margin-top: 10px;
        }
        
        .code-example .keyword {
            color: #f687b3;
        }
        
        .code-example .function {
            color: #63b3ed;
        }
        
        .code-example .string {
            color: #68d391;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <div class="test-header">
            <h1><i class="fas fa-comment-dots"></i> Modern MessageBox System</h1>
            <p>Complete testing interface for all message box types and features</p>
            <p style="font-size: 12px; color: #a0aec0;">
                <i class="fas fa-info-circle"></i> Click any button to test the message box. Results will appear below each section.
            </p>
        </div>
        
        <!-- Basic Alerts -->
        <div class="test-section">
            <h3><i class="fas fa-bell"></i> Basic Alerts</h3>
            <div class="btn-grid">
                <button class="btn-test btn-success" onclick="testSuccess()">
                    <i class="fas fa-check-circle"></i> Success Alert
                </button>
                <button class="btn-test btn-error" onclick="testError()">
                    <i class="fas fa-times-circle"></i> Error Alert
                </button>
                <button class="btn-test btn-warning" onclick="testWarning()">
                    <i class="fas fa-exclamation-triangle"></i> Warning Alert
                </button>
                <button class="btn-test btn-info" onclick="testInfo()">
                    <i class="fas fa-info-circle"></i> Info Alert
                </button>
            </div>
            <div class="code-example">
<span class="keyword">await</span> MsgBox.<span class="function">alert</span>(<span class="string">'Message'</span>, <span class="string">'success|error|warning|info'</span>);
            </div>
            <div id="result-alerts" class="result-box"></div>
        </div>
        
        <!-- Confirmations -->
        <div class="test-section">
            <h3><i class="fas fa-question-circle"></i> Confirmations</h3>
            <div class="btn-grid">
                <button class="btn-test btn-confirm" onclick="testConfirm()">
                    <i class="fas fa-question"></i> Basic Confirm
                </button>
                <button class="btn-test btn-error" onclick="testConfirmDelete()">
                    <i class="fas fa-trash"></i> Delete Confirm
                </button>
                <button class="btn-test btn-warning" onclick="testConfirmCustom()">
                    <i class="fas fa-cog"></i> Custom Confirm
                </button>
            </div>
            <div class="code-example">
<span class="keyword">if</span> (<span class="keyword">await</span> MsgBox.<span class="function">confirm</span>(<span class="string">'Question?'</span>)) {
    <span class="comment">// User clicked Yes</span>
}
            </div>
            <div id="result-confirms" class="result-box"></div>
        </div>
        
        <!-- Prompts -->
        <div class="test-section">
            <h3><i class="fas fa-keyboard"></i> Prompts (Input Dialogs)</h3>
            <div class="btn-grid">
                <button class="btn-test btn-info" onclick="testPrompt()">
                    <i class="fas fa-edit"></i> Text Prompt
                </button>
                <button class="btn-test btn-info" onclick="testPromptNumber()">
                    <i class="fas fa-hashtag"></i> Number Prompt
                </button>
                <button class="btn-test btn-info" onclick="testPromptDefault()">
                    <i class="fas fa-pen"></i> With Default
                </button>
            </div>
            <div class="code-example">
<span class="keyword">const</span> value = <span class="keyword">await</span> MsgBox.<span class="function">prompt</span>(<span class="string">'Enter value:'</span>, <span class="string">'default'</span>, <span class="string">'placeholder'</span>);
            </div>
            <div id="result-prompts" class="result-box"></div>
        </div>
        
        <!-- Shorthand Methods -->
        <div class="test-section">
            <h3><i class="fas fa-bolt"></i> Shorthand Methods</h3>
            <div class="btn-grid">
                <button class="btn-test btn-success" onclick="testShorthandSuccess()">
                    <i class="fas fa-check"></i> MsgBox.success()
                </button>
                <button class="btn-test btn-error" onclick="testShorthandError()">
                    <i class="fas fa-times"></i> MsgBox.error()
                </button>
                <button class="btn-test btn-warning" onclick="testShorthandWarning()">
                    <i class="fas fa-exclamation"></i> MsgBox.warning()
                </button>
                <button class="btn-test btn-error" onclick="testShorthandDelete()">
                    <i class="fas fa-trash-alt"></i> MsgBox.confirmDelete()
                </button>
            </div>
            <div class="code-example">
<span class="keyword">await</span> MsgBox.<span class="function">success</span>(<span class="string">'Operation completed!'</span>);
<span class="keyword">await</span> MsgBox.<span class="function">error</span>(<span class="string">'Something went wrong!'</span>);
<span class="keyword">await</span> MsgBox.<span class="function">warning</span>(<span class="string">'Please check this!'</span>);
            </div>
            <div id="result-shorthand" class="result-box"></div>
        </div>
        
        <!-- Real World Examples -->
        <div class="test-section">
            <h3><i class="fas fa-shopping-cart"></i> Real World Examples</h3>
            <div class="btn-grid">
                <button class="btn-test btn-success" onclick="testAddToCart()">
                    <i class="fas fa-cart-plus"></i> Add to Cart
                </button>
                <button class="btn-test btn-warning" onclick="testClearCart()">
                    <i class="fas fa-eraser"></i> Clear Cart
                </button>
                <button class="btn-test btn-error" onclick="testDeleteItem()">
                    <i class="fas fa-trash"></i> Delete Item
                </button>
                <button class="btn-test btn-info" onclick="testApplyDiscount()">
                    <i class="fas fa-percentage"></i> Apply Discount
                </button>
            </div>
            <div id="result-examples" class="result-box"></div>
        </div>
        
        <!-- Multi-line Messages -->
        <div class="test-section">
            <h3><i class="fas fa-align-left"></i> Multi-line Messages</h3>
            <div class="btn-grid">
                <button class="btn-test btn-info" onclick="testMultiline()">
                    <i class="fas fa-list"></i> Multi-line Info
                </button>
                <button class="btn-test btn-error" onclick="testLongError()">
                    <i class="fas fa-file-alt"></i> Long Error
                </button>
            </div>
            <div id="result-multiline" class="result-box"></div>
        </div>
        
        <!-- Footer -->
        <div style="text-align: center; margin-top: 40px; padding-top: 20px; border-top: 2px solid #e9ecef;">
            <p style="color: #718096; font-size: 13px; margin: 0;">
                <i class="fas fa-book"></i> See <strong>MODERN_MESSAGEBOX_GUIDE.md</strong> for complete documentation
            </p>
        </div>
    </div>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Modern MessageBox -->
    <script src="js/modern-messagebox.js"></script>
    
    <script>
        // Helper to show results
        function showResult(sectionId, message) {
            const resultBox = document.getElementById(sectionId);
            resultBox.innerHTML = '<i class="fas fa-check-circle" style="color: #11998e;"></i> ' + message;
            resultBox.classList.add('show');
            setTimeout(() => {
                resultBox.classList.remove('show');
            }, 3000);
        }
        
        // Basic Alerts
        async function testSuccess() {
            await MsgBox.alert('Operation completed successfully! 🎉', 'success');
            showResult('result-alerts', 'Success alert shown');
        }
        
        async function testError() {
            await MsgBox.alert('An error occurred!\n\nPlease try again later.', 'error');
            showResult('result-alerts', 'Error alert shown');
        }
        
        async function testWarning() {
            await MsgBox.alert('⚠️ Warning!\n\nPlease review your input before proceeding.', 'warning');
            showResult('result-alerts', 'Warning alert shown');
        }
        
        async function testInfo() {
            await MsgBox.alert('ℹ️ Information\n\nYour session will expire in 10 minutes.', 'info');
            showResult('result-alerts', 'Info alert shown');
        }
        
        // Confirmations
        async function testConfirm() {
            const result = await MsgBox.confirm('Do you want to proceed with this action?', {
                confirmText: 'Yes, Proceed',
                cancelText: 'No, Cancel'
            });
            showResult('result-confirms', 'User clicked: ' + (result ? 'Yes' : 'No'));
        }
        
        async function testConfirmDelete() {
            const result = await MsgBox.confirm('Are you sure you want to delete this item?\n\nThis action cannot be undone!', {
                dangerMode: true,
                confirmText: 'Delete',
                cancelText: 'Cancel'
            });
            showResult('result-confirms', 'Delete ' + (result ? 'confirmed' : 'cancelled'));
        }
        
        async function testConfirmCustom() {
            const result = await MsgBox.confirm('Save changes before closing?', {
                confirmText: 'Save & Close',
                cancelText: 'Discard',
                type: 'warning',
                confirmStyle: 'success'
            });
            showResult('result-confirms', 'User chose: ' + (result ? 'Save' : 'Discard'));
        }
        
        // Prompts
        async function testPrompt() {
            const name = await MsgBox.prompt('What is your name?', '', 'Enter your name');
            if (name !== null) {
                showResult('result-prompts', 'Hello, ' + name + '!');
            } else {
                showResult('result-prompts', 'Prompt cancelled');
            }
        }
        
        async function testPromptNumber() {
            const qty = await MsgBox.prompt('Enter quantity:', '1', 'Quantity');
            if (qty !== null) {
                showResult('result-prompts', 'Quantity entered: ' + qty);
            } else {
                showResult('result-prompts', 'Prompt cancelled');
            }
        }
        
        async function testPromptDefault() {
            const discount = await MsgBox.prompt('Enter discount percentage:', '10', '0-100');
            if (discount !== null) {
                showResult('result-prompts', 'Discount: ' + discount + '%');
            } else {
                showResult('result-prompts', 'Prompt cancelled');
            }
        }
        
        // Shorthand Methods
        async function testShorthandSuccess() {
            await MsgBox.success('✓ Data saved successfully!');
            showResult('result-shorthand', 'Success message shown');
        }
        
        async function testShorthandError() {
            await MsgBox.error('✗ Failed to connect to server.\n\nPlease check your internet connection.');
            showResult('result-shorthand', 'Error message shown');
        }
        
        async function testShorthandWarning() {
            await MsgBox.warning('⚠ Low stock alert!\n\nOnly 5 items remaining.');
            showResult('result-shorthand', 'Warning message shown');
        }
        
        async function testShorthandDelete() {
            const result = await MsgBox.confirmDelete('Delete this customer?\n\nAll associated data will be removed.');
            showResult('result-shorthand', 'Delete ' + (result ? 'confirmed' : 'cancelled'));
        }
        
        // Real World Examples
        async function testAddToCart() {
            const qty = await MsgBox.prompt('Enter quantity to add:', '1', 'Quantity');
            if (qty && qty > 0) {
                await MsgBox.success('✓ ' + qty + ' item(s) added to cart!');
                showResult('result-examples', qty + ' items added to cart');
            }
        }
        
        async function testClearCart() {
            if (await MsgBox.confirm('Clear entire cart?\n\nThis will remove all items.', {
                confirmText: 'Yes, Clear',
                cancelText: 'No, Keep',
                type: 'warning'
            })) {
                await MsgBox.success('Cart cleared successfully!');
                showResult('result-examples', 'Cart cleared');
            } else {
                showResult('result-examples', 'Clear cancelled');
            }
        }
        
        async function testDeleteItem() {
            if (await MsgBox.confirmDelete('Delete "Sample Product"?')) {
                await MsgBox.success('✓ Product deleted successfully!');
                showResult('result-examples', 'Product deleted');
            } else {
                showResult('result-examples', 'Delete cancelled');
            }
        }
        
        async function testApplyDiscount() {
            const discount = await MsgBox.prompt('Enter discount %:', '10', '0-100');
            if (discount !== null && discount >= 0 && discount <= 100) {
                await MsgBox.success('✓ ' + discount + '% discount applied!');
                showResult('result-examples', discount + '% discount applied');
            } else if (discount !== null) {
                await MsgBox.error('Invalid discount!\n\nPlease enter a value between 0 and 100.');
                showResult('result-examples', 'Invalid discount entered');
            }
        }
        
        // Multi-line
        async function testMultiline() {
            await MsgBox.alert('Receipt Printed Successfully!\n\n' +
                'Invoice No: INV-2025-001\n' +
                'Date: ' + new Date().toLocaleDateString() + '\n' +
                'Total: ₹1,234.56\n\n' +
                'Thank you for your business!', 'success');
            showResult('result-multiline', 'Multi-line message shown');
        }
        
        async function testLongError() {
            await MsgBox.error('Database Connection Failed\n\n' +
                'Error Code: DB-500\n' +
                'Message: Unable to establish connection\n\n' +
                'Possible causes:\n' +
                '• Database server is down\n' +
                '• Incorrect credentials\n' +
                '• Network connectivity issues\n\n' +
                'Please contact system administrator.', 'error');
            showResult('result-multiline', 'Long error message shown');
        }
    </script>
</body>
</html>
