<!DOCTYPE html>
<html>
<head>
    <title>Hold Bills - Quick Links</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .link-card {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 20px;
            margin: 15px 0;
            border-radius: 5px;
            transition: all 0.3s;
        }
        .link-card:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .link-card h3 {
            margin: 0 0 10px 0;
            color: #007bff;
        }
        .link-card p {
            margin: 0 0 10px 0;
            color: #666;
        }
        .link-card a {
            display: inline-block;
            background: #007bff;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
        }
        .link-card a:hover {
            background: #0056b3;
        }
        .setup {
            border-left-color: #28a745;
        }
        .setup h3 {
            color: #28a745;
        }
        .setup a {
            background: #28a745;
        }
        .setup a:hover {
            background: #1e7e34;
        }
        .test {
            border-left-color: #ffc107;
        }
        .test h3 {
            color: #ffc107;
        }
        .test a {
            background: #ffc107;
            color: #000;
        }
        .test a:hover {
            background: #e0a800;
        }
        .status {
            text-align: center;
            padding: 15px;
            background: #e7f3ff;
            border-radius: 5px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 Hold Bills Feature - Quick Access</h1>
        
        <div class="status">
            <strong>Status:</strong> Ready to Setup
        </div>

        <div class="link-card setup">
            <h3>📦 1. Setup Database</h3>
            <p>Create the tblhold_bills table in the database</p>
            <a href="../database/setup_hold_bills_web.php">🔧 Setup Database Table</a>
        </div>

        <div class="link-card">
            <h3>🛒 2. Go to POS</h3>
            <p>Access the Point of Sale system with Hold Bills feature</p>
            <a href="index.php">🏪 Open POS</a>
        </div>

        <div class="link-card test">
            <h3>🧪 3. Test API Endpoints</h3>
            <p>Test all Hold Bills API functions</p>
            <a href="test-hold-bills.php">🔬 Run API Tests</a>
        </div>

        <div class="link-card">
            <h3>📚 4. Read Documentation</h3>
            <p>Complete guide and feature documentation</p>
            <a href="../HOLD_BILLS_FEATURE.md" target="_blank">📖 Full Documentation</a>
            <a href="../HOLD_BILLS_SETUP.md" target="_blank" style="margin-left: 10px;">⚡ Quick Setup Guide</a>
        </div>

        <hr style="margin: 30px 0;">

        <h2 style="text-align: center; color: #333;">✨ How It Works</h2>
        
        <div style="padding: 20px; background: #f8f9fa; border-radius: 5px;">
            <ol style="line-height: 2;">
                <li><strong>Hold a Bill:</strong> Click "Hold" button to save current cart</li>
                <li><strong>View Holds:</strong> Click "Holds" button to see all saved bills</li>
                <li><strong>Resume Bill:</strong> Click on any hold bill to continue editing</li>
                <li><strong>Delete Hold:</strong> Click trash icon to remove a hold bill</li>
            </ol>
        </div>

        <div style="margin-top: 30px; padding: 15px; background: #fff3cd; border-radius: 5px;">
            <strong>⚠️ Important:</strong> Make sure to setup the database table first before using the feature!
        </div>
    </div>
</body>
</html>
