{% extends "base.html" %}

{% block title %}Chef 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-hat-chef me-2 text-success"></i>
                    Chef Dashboard
                </h2>
                <div class="badge bg-success fs-6">
                    <i class="fas fa-circle me-1"></i>Kitchen Online
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Quick Stats -->
        <div class="col-md-3">
            <div class="card bg-warning text-dark">
                <div class="card-body text-center">
                    <i class="fas fa-clock fa-2x mb-2"></i>
                    <h5 id="pending-orders">0</h5>
                    <small>Pending Orders</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-fire fa-2x mb-2"></i>
                    <h5 id="cooking-orders">0</h5>
                    <small>Cooking</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-check fa-2x mb-2"></i>
                    <h5 id="completed-orders">0</h5>
                    <small>Completed Today</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <i class="fas fa-utensils fa-2x mb-2"></i>
                    <h5 id="total-dishes">0</h5>
                    <small>Total Dishes</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <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-list me-2"></i>
                        Live Orders
                    </h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="refreshOrders()">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                </div>
                <div class="card-body">
                    <div id="orders-container">
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-utensils fa-3x mb-3"></i>
                            <p>No orders at the moment</p>
                            <small>Orders will appear here automatically</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <a href="/chef/orders" class="btn btn-outline-primary w-100">
                                <i class="fas fa-list me-2"></i>View All Orders
                            </a>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-outline-success w-100" onclick="markAllReady()">
                                <i class="fas fa-check-double me-2"></i>Mark All Ready
                            </button>
                        </div>
                        <div class="col-md-3">
                            <a href="/admin" class="btn btn-outline-warning w-100">
                                <i class="fas fa-cog me-2"></i>Admin Panel
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="/docs" target="_blank" class="btn btn-outline-info w-100">
                                <i class="fas fa-book me-2"></i>API Docs
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Chef dashboard functionality
    let ordersData = [];
    
    function loadChefStats() {
        // This would normally fetch from the API
        // For demo purposes, using placeholder data
        document.getElementById('pending-orders').textContent = '3';
        document.getElementById('cooking-orders').textContent = '2';
        document.getElementById('completed-orders').textContent = '15';
        document.getElementById('total-dishes').textContent = '45';
    }
    
    function refreshOrders() {
        const btn = event.target;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Loading...';
        btn.disabled = true;
        
        // Simulate API call
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            loadOrders();
        }, 1000);
    }
    
    function loadOrders() {
        const container = document.getElementById('orders-container');
        // This would normally fetch real orders from the API
        container.innerHTML = `
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Connect to the database to see live orders. Use the API endpoints at <a href="/docs" target="_blank">/docs</a>
            </div>
        `;
    }
    
    function markAllReady() {
        if (confirm('Mark all cooking orders as ready?')) {
            alert('Feature will be available when connected to database');
        }
    }
    
    // Load data on page load
    document.addEventListener('DOMContentLoaded', function() {
        loadChefStats();
        loadOrders();
        
        // Auto-refresh every 30 seconds
        setInterval(loadOrders, 30000);
    });
</script>
{% endblock %}