{% extends "base.html" %}

{% block title %}Admin Dashboard - Tabble-v3{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>
                    <i class="fas fa-cogs me-2 text-warning"></i>
                    Admin Dashboard
                </h2>
                <div class="d-flex gap-2">
                    <span class="badge bg-success fs-6">
                        <i class="fas fa-circle me-1"></i>System Online
                    </span>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-database me-1"></i>Demo Hotel
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Demo Hotel</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Switch Database</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <i class="fas fa-users fa-2x mb-2"></i>
                    <h4 id="total-customers">24</h4>
                    <small>Total Customers</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <i class="fas fa-shopping-cart fa-2x mb-2"></i>
                    <h4 id="total-orders">18</h4>
                    <small>Orders Today</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-warning text-dark">
                <div class="card-body text-center">
                    <i class="fas fa-utensils fa-2x mb-2"></i>
                    <h4 id="total-dishes">45</h4>
                    <small>Menu Items</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <i class="fas fa-rupee-sign fa-2x mb-2"></i>
                    <h4 id="total-revenue">₹12,450</h4>
                    <small>Today's Revenue</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Management Sections -->
    <div class="row g-4 mb-4">
        <!-- Restaurant Management -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-store me-2"></i>
                        Restaurant Management
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <a href="/admin/dishes" class="btn btn-outline-primary w-100">
                                <i class="fas fa-utensils mb-2 d-block"></i>
                                Manage Dishes
                            </a>
                        </div>
                        <div class="col-6">
                            <button class="btn btn-outline-success w-100" onclick="manageOrders()">
                                <i class="fas fa-list-alt mb-2 d-block"></i>
                                Orders
                            </button>
                        </div>
                        <div class="col-6">
                            <button class="btn btn-outline-warning w-100" onclick="manageTables()">
                                <i class="fas fa-chair mb-2 d-block"></i>
                                Tables
                            </button>
                        </div>
                        <div class="col-6">
                            <button class="btn btn-outline-info w-100" onclick="manageCustomers()">
                                <i class="fas fa-users mb-2 d-block"></i>
                                Customers
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings & Configuration -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>
                        Settings & Configuration
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <button class="btn btn-outline-primary w-100" onclick="hotelSettings()">
                                <i class="fas fa-building mb-2 d-block"></i>
                                Hotel Info
                            </button>
                        </div>
                        <div class="col-6">
                            <button class="btn btn-outline-success w-100" onclick="loyaltyProgram()">
                                <i class="fas fa-gift mb-2 d-block"></i>
                                Loyalty Program
                            </button>
                        </div>
                        <div class="col-6">
                            <button class="btn btn-outline-warning w-100" onclick="specialOffers()">
                                <i class="fas fa-tag mb-2 d-block"></i>
                                Special Offers
                            </button>
                        </div>
                        <div class="col-6">
                            <button class="btn btn-outline-danger w-100" onclick="systemSettings()">
                                <i class="fas fa-tools mb-2 d-block"></i>
                                System
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics & Reports -->
    <div class="row g-4 mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>
                        Quick Analytics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <button class="btn btn-outline-primary w-100" onclick="customerAnalytics()">
                                <i class="fas fa-users mb-2 d-block"></i>
                                Customer Analysis
                            </button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-outline-success w-100" onclick="salesAnalytics()">
                                <i class="fas fa-chart-bar mb-2 d-block"></i>
                                Sales Reports
                            </button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-outline-info w-100" onclick="dishPerformance()">
                                <i class="fas fa-utensils mb-2 d-block"></i>
                                Dish Performance
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h6>Today's Overview</h6>
                        <div class="row text-center">
                            <div class="col-4">
                                <small class="text-muted">Peak Hour</small>
                                <div class="fw-bold">2:00 PM</div>
                            </div>
                            <div class="col-4">
                                <small class="text-muted">Avg Order Value</small>
                                <div class="fw-bold">₹690</div>
                            </div>
                            <div class="col-4">
                                <small class="text-muted">Table Turnover</small>
                                <div class="fw-bold">3.2x</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bell me-2"></i>
                        Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-success" onclick="addNewDish()">
                            <i class="fas fa-plus me-2"></i>Add New Dish
                        </button>
                        <button class="btn btn-warning" onclick="createOffer()">
                            <i class="fas fa-percentage me-2"></i>Create Offer
                        </button>
                        <button class="btn btn-info" onclick="generateReport()">
                            <i class="fas fa-file-pdf me-2"></i>Generate Report
                        </button>
                        <button class="btn btn-primary" onclick="backupData()">
                            <i class="fas fa-download me-2"></i>Backup Data
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>
                        Recent Activity
                    </h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="refreshActivity()">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-shopping-cart text-success me-2"></i>
                                New order #1023 from Table 5
                            </div>
                            <small class="text-muted">2 minutes ago</small>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-user-plus text-primary me-2"></i>
                                New customer registration: +91 9876543210
                            </div>
                            <small class="text-muted">5 minutes ago</small>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-check text-info me-2"></i>
                                Order #1022 completed by chef
                            </div>
                            <small class="text-muted">8 minutes ago</small>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-utensils text-warning me-2"></i>
                                Dish "Chicken Biryani" updated
                            </div>
                            <small class="text-muted">15 minutes ago</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Admin dashboard functions
    function manageOrders() {
        alert('Orders management feature - would show all orders with filtering and status updates');
    }
    
    function manageTables() {
        alert('Table management feature - would show table layout, occupancy, and QR code generation');
    }
    
    function manageCustomers() {
        alert('Customer management feature - would show customer list, visit history, and loyalty status');
    }
    
    function hotelSettings() {
        alert('Hotel settings feature - would allow editing hotel information, branding, and contact details');
    }
    
    function loyaltyProgram() {
        alert('Loyalty program feature - would configure visit-based discount tiers');
    }
    
    function specialOffers() {
        alert('Special offers feature - would create and manage promotional offers');
    }
    
    function systemSettings() {
        alert('System settings feature - would configure system parameters and database settings');
    }
    
    function customerAnalytics() {
        alert('Customer analytics feature - would show detailed customer behavior insights');
    }
    
    function salesAnalytics() {
        alert('Sales analytics feature - would show revenue reports and trends');
    }
    
    function dishPerformance() {
        alert('Dish performance feature - would show menu item popularity and sales metrics');
    }
    
    function addNewDish() {
        if (confirm('Redirect to dish management page?')) {
            window.location.href = '/admin/dishes';
        }
    }
    
    function createOffer() {
        alert('Create offer feature - would open form to create new promotional offers');
    }
    
    function generateReport() {
        alert('Generate report feature - would create PDF reports for analytics');
    }
    
    function backupData() {
        if (confirm('Create backup of current database?')) {
            alert('Backup created successfully! (In production, this would download the backup file)');
        }
    }
    
    function refreshActivity() {
        const btn = event.target;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Loading...';
        btn.disabled = true;
        
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            alert('Activity refreshed!');
        }, 1000);
    }
    
    // Auto-refresh stats every 30 seconds
    setInterval(() => {
        // In production, this would fetch real-time data from the API
        console.log('Auto-refreshing dashboard stats...');
    }, 30000);
</script>
{% endblock %}