{% extends "base.html" %}

{% block title %}Tabble-v3 - Modern Restaurant Management System{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="header-section">
    <div class="container text-center">
        <h1 class="display-4 mb-3">
            <i class="fas fa-utensils me-3"></i>
            Welcome to Tabble-v3
        </h1>
        <p class="lead mb-4">
            Modern Restaurant Management System with QR Code Ordering, Real-time Analytics, and Multi-Database Support
        </p>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="badge bg-light text-dark fs-6 mb-3">
                    <i class="fas fa-rocket me-2"></i>
                    Powered by FastAPI, SQLAlchemy & Firebase
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<div class="container">
    <div class="row mb-5">
        <div class="col-12 text-center mb-4">
            <h2>Choose Your Interface</h2>
            <p class="text-muted">Access different areas of the restaurant management system</p>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <!-- Customer Interface -->
        <div class="col-md-4">
            <div class="card feature-card h-100">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <i class="fas fa-mobile-alt fa-3x text-primary"></i>
                    </div>
                    <h5 class="card-title">Customer Interface</h5>
                    <p class="card-text text-muted">
                        QR code ordering, real-time cart management, payment processing with loyalty discounts
                    </p>
                    <ul class="list-unstyled text-start mb-4">
                        <li><i class="fas fa-check text-success me-2"></i>Phone OTP Authentication</li>
                        <li><i class="fas fa-check text-success me-2"></i>Live Cart Updates</li>
                        <li><i class="fas fa-check text-success me-2"></i>Special Offers</li>
                        <li><i class="fas fa-check text-success me-2"></i>Order History</li>
                    </ul>
                    <a href="/customer" class="btn btn-primary">
                        <i class="fas fa-user me-2"></i>Customer Login
                    </a>
                </div>
            </div>
        </div>

        <!-- Chef Dashboard -->
        <div class="col-md-4">
            <div class="card feature-card h-100">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <i class="fas fa-hat-chef fa-3x text-success"></i>
                    </div>
                    <h5 class="card-title">Chef Dashboard</h5>
                    <p class="card-text text-muted">
                        Real-time order management, kitchen operations, and instant status updates
                    </p>
                    <ul class="list-unstyled text-start mb-4">
                        <li><i class="fas fa-check text-success me-2"></i>Live Order Notifications</li>
                        <li><i class="fas fa-check text-success me-2"></i>Kitchen Operations</li>
                        <li><i class="fas fa-check text-success me-2"></i>Status Management</li>
                        <li><i class="fas fa-check text-success me-2"></i>Order Queue</li>
                    </ul>
                    <a href="/chef" class="btn btn-success">
                        <i class="fas fa-hat-chef me-2"></i>Chef Dashboard
                    </a>
                </div>
            </div>
        </div>

        <!-- Admin Panel -->
        <div class="col-md-4">
            <div class="card feature-card h-100">
                <div class="card-body text-center p-4">
                    <div class="mb-3">
                        <i class="fas fa-cogs fa-3x text-warning"></i>
                    </div>
                    <h5 class="card-title">Admin Panel</h5>
                    <p class="card-text text-muted">
                        Complete restaurant management, analytics, and multi-database operations
                    </p>
                    <ul class="list-unstyled text-start mb-4">
                        <li><i class="fas fa-check text-success me-2"></i>Menu Management</li>
                        <li><i class="fas fa-check text-success me-2"></i>Order Tracking</li>
                        <li><i class="fas fa-check text-success me-2"></i>Analytics Dashboard</li>
                        <li><i class="fas fa-check text-success me-2"></i>Settings Control</li>
                    </ul>
                    <a href="/admin" class="btn btn-warning">
                        <i class="fas fa-cog me-2"></i>Admin Panel
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Key Features -->
    <div class="row mb-5">
        <div class="col-12 text-center mb-4">
            <h2>Key Features</h2>
            <p class="text-muted">Everything you need for modern restaurant management</p>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-md-3 col-sm-6">
            <div class="text-center">
                <i class="fas fa-qrcode fa-2x text-primary mb-3"></i>
                <h6>QR Code Ordering</h6>
                <small class="text-muted">Contactless table ordering system</small>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="text-center">
                <i class="fas fa-database fa-2x text-info mb-3"></i>
                <h6>Multi-Database</h6>
                <small class="text-muted">Independent hotel operations</small>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="text-center">
                <i class="fas fa-chart-line fa-2x text-success mb-3"></i>
                <h6>Real-time Analytics</h6>
                <small class="text-muted">Business intelligence dashboard</small>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="text-center">
                <i class="fas fa-shield-alt fa-2x text-danger mb-3"></i>
                <h6>Secure Authentication</h6>
                <small class="text-muted">Firebase phone OTP system</small>
            </div>
        </div>
    </div>

    <!-- API Documentation -->
    <div class="row">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body text-center p-4">
                    <h5>API Documentation</h5>
                    <p class="text-muted mb-3">
                        Explore the comprehensive API documentation for developers
                    </p>
                    <div class="d-flex gap-3 justify-content-center">
                        <a href="/docs" target="_blank" class="btn btn-outline-primary">
                            <i class="fas fa-book me-2"></i>Swagger UI
                        </a>
                        <a href="/redoc" target="_blank" class="btn btn-outline-secondary">
                            <i class="fas fa-file-alt me-2"></i>ReDoc
                        </a>
                        <a href="/health" target="_blank" class="btn btn-outline-success">
                            <i class="fas fa-heartbeat me-2"></i>Health Check
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Add some interactivity
    document.addEventListener('DOMContentLoaded', function() {
        // Add hover effects
        const cards = document.querySelectorAll('.feature-card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 4px 20px rgba(0,0,0,0.15)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
            });
        });
    });
</script>
{% endblock %}