<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Message Box - Test Page</title>
    
    <link href="../vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../css/sb-admin-2.min.css" rel="stylesheet">
    <link href="css/modern-messagebox.css" rel="stylesheet">
    
    <style>
        body {
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        h1 {
            color: #2d3748;
            margin-bottom: 10px;
        }
        .subtitle {
            color: #718096;
            margin-bottom: 30px;
        }
        .btn-test {
            margin: 10px 5px;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-test:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .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-prompt { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: white; }
        .section {
            margin: 30px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .section h3 {
            color: #2d3748;
            margin-bottom: 15px;
        }
        .result-box {
            margin-top: 20px;
            padding: 15px;
            background: #e9ecef;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        .result-box h4 {
            margin: 0 0 10px 0;
            color: #2d3748;
        }
        .result-box pre {
            margin: 0;
            color: #4a5568;
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1><i class="fas fa-vial"></i> Modern Message Box Test Page</h1>
        <p class="subtitle">Test all message box variations with your store branding</p>
        
        <div class="section">
            <h3><i class="fas fa-bell"></i> Basic Alerts</h3>
            <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-exclamation-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="section">
            <h3><i class="fas fa-question-circle"></i> Confirmation Dialogs</h3>
            <button class="btn-test btn-confirm" onclick="testConfirm()">
                <i class="fas fa-question"></i> Standard Confirm
            </button>
            <button class="btn-test btn-error" onclick="testDeleteConfirm()">
                <i class="fas fa-trash"></i> Delete Confirm
            </button>
            <button class="btn-test btn-warning" onclick="testClearConfirm()">
                <i class="fas fa-eraser"></i> Clear Cart Confirm
            </button>
        </div>
        
        <div class="section">
            <h3><i class="fas fa-keyboard"></i> Input Prompts</h3>
            <button class="btn-test btn-prompt" onclick="testPrompt()">
                <i class="fas fa-edit"></i> Text Prompt
            </button>
            <button class="btn-test btn-prompt" onclick="testNumberPrompt()">
                <i class="fas fa-calculator"></i> Number Prompt
            </button>
        </div>
        
        <div class="section">
            <h3><i class="fas fa-cogs"></i> Custom Message Boxes</h3>
            <button class="btn-test btn-info" onclick="testCustomButtons()">
                <i class="fas fa-list"></i> Multiple Buttons
            </button>
            <button class="btn-test btn-success" onclick="testPaymentSuccess()">
                <i class="fas fa-rupee-sign"></i> Payment Success (Real Example)
            </button>
            <button class="btn-test btn-warning" onclick="testStockWarning()">
                <i class="fas fa-box"></i> Stock Warning (Real Example)
            </button>
        </div>
        
        <div class="section">
            <h3><i class="fas fa-mobile-alt"></i> Mobile Test</h3>
            <p style="color: #718096; margin-bottom: 15px;">
                Resize your browser window or open on mobile to test responsive design
            </p>
            <button class="btn-test btn-info" onclick="testLongMessage()">
                <i class="fas fa-align-left"></i> Long Message Test
            </button>
        </div>
        
        <div class="result-box" id="resultBox" style="display: none;">
            <h4><i class="fas fa-terminal"></i> Last Action Result</h4>
            <pre id="resultContent"></pre>
        </div>
    </div>
    
    <script src="../vendor/jquery/jquery.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="js/modern-messagebox.js"></script>
    
    <script>
        function showResult(message) {
            $('#resultContent').text(message);
            $('#resultBox').slideDown();
        }
        
        async function testSuccess() {
            await MsgBox.success('✅ Operation completed successfully!\n\nYour changes have been saved.');
            showResult('Success alert closed');
        }
        
        async function testError() {
            await MsgBox.error('❌ An error occurred!\n\nPlease check your input and try again.');
            showResult('Error alert closed');
        }
        
        async function testWarning() {
            await MsgBox.warning('⚠️ Warning: Low stock!\n\nThis product has only 5 units remaining.');
            showResult('Warning alert closed');
        }
        
        async function testInfo() {
            await MsgBox.alert('ℹ️ Information\n\nYour session will expire in 10 minutes.', 'info');
            showResult('Info alert closed');
        }
        
        async function testConfirm() {
            const result = await MsgBox.confirm('Do you want to proceed with this action?', {
                type: 'confirm',
                confirmText: 'Yes, Proceed',
                cancelText: 'Cancel'
            });
            showResult('User clicked: ' + (result ? 'Confirm' : 'Cancel'));
        }
        
        async function testDeleteConfirm() {
            const result = await MsgBox.confirm('Are you sure you want to delete this item?\n\nThis action cannot be undone!', {
                type: 'error',
                confirmText: 'Yes, Delete',
                cancelText: 'No, Keep It',
                confirmStyle: 'danger'
            });
            showResult('Delete action: ' + (result ? 'CONFIRMED - Item would be deleted' : 'CANCELLED'));
        }
        
        async function testClearConfirm() {
            const result = await MsgBox.confirm('Clear the cart and start new sale?', {
                type: 'warning',
                confirmText: 'Yes, Clear',
                cancelText: 'Cancel',
                confirmStyle: 'danger'
            });
            showResult('Clear cart: ' + (result ? 'CONFIRMED - Cart would be cleared' : 'CANCELLED'));
        }
        
        async function testPrompt() {
            const result = await MsgBox.prompt('Enter customer name:', '', 'Customer Name');
            showResult('User entered: ' + (result !== null ? '"' + result + '"' : 'CANCELLED'));
        }
        
        async function testNumberPrompt() {
            const result = await MsgBox.prompt('Enter discount percentage:', '10', '0-100');
            showResult('User entered: ' + (result !== null ? result + '%' : 'CANCELLED'));
        }
        
        async function testCustomButtons() {
            const result = await MsgBox.custom({
                type: 'info',
                message: 'Choose your payment method:',
                buttons: [
                    { text: 'Cash', style: 'success', action: 'cash' },
                    { text: 'UPI', style: 'primary', action: 'upi' },
                    { text: 'Credit', style: 'warning', action: 'credit' },
                    { text: 'Cancel', style: 'secondary', action: 'cancel' }
                ]
            });
            showResult('Payment method selected: ' + result.action.toUpperCase());
        }
        
        async function testPaymentSuccess() {
            await MsgBox.custom({
                type: 'success',
                message: '✅ Payment Received!\n\n' +
                         'Invoice: GST/2025-26/0123\n' +
                         'Amount: ₹5,450.00\n' +
                         'Payment Mode: Cash\n\n' +
                         'Would you like to print the receipt?',
                buttons: [
                    { text: 'Print', style: 'primary', action: 'print' },
                    { text: 'Email', style: 'success', action: 'email' },
                    { text: 'Close', style: 'secondary', action: 'close' }
                ]
            }).then(function(result) {
                showResult('Payment success - Action: ' + result.action.toUpperCase());
            });
        }
        
        async function testStockWarning() {
            const result = await MsgBox.custom({
                type: 'warning',
                message: '⚠️ Low Stock Alert!\n\n' +
                         'Product: Rice 25kg Bag\n' +
                         'Current Stock: 3 units\n' +
                         'Alert Level: 10 units\n\n' +
                         'Do you want to continue with this sale?',
                buttons: [
                    { text: 'Continue Sale', style: 'warning', action: 'continue' },
                    { text: 'Cancel', style: 'secondary', action: 'cancel' }
                ]
            });
            showResult('Stock warning - Action: ' + result.action.toUpperCase());
        }
        
        async function testLongMessage() {
            await MsgBox.alert(
                '📱 Mobile Responsive Test\n\n' +
                'This is a longer message to test how the message box handles multiple lines of text ' +
                'and how it appears on smaller screens. The message box should automatically adjust its ' +
                'width and height to fit the content while remaining readable on all screen sizes.\n\n' +
                'Key features:\n' +
                '• Fully responsive design\n' +
                '• Scrollable content area\n' +
                '• Touch-friendly buttons\n' +
                '• Adapts to screen size\n' +
                '• Works on all devices',
                'info'
            );
            showResult('Long message test completed');
        }
        
        // Show welcome message on load
        $(document).ready(async function() {
            await new Promise(resolve => setTimeout(resolve, 500));
            await MsgBox.success(
                'Welcome to the Message Box Test Page!\n\n' +
                'This page demonstrates all message box features with your store branding.\n\n' +
                'Try clicking the buttons below to see different message types.'
            );
        });
    </script>
</body>
</html>
