{% extends "base.html" %}

{% block title %}Orders Management - Chef Dashboard{% 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-clipboard-list me-2"></i>
                    Orders Management
                </h2>
                <div class="d-flex gap-2">
                    <a href="/chef" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Dashboard
                    </a>
                    <button class="btn btn-primary" onclick="refreshAllOrders()">
                        <i class="fas fa-sync-alt me-1"></i>Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <label class="form-label">Filter by Status:</label>
                            <select class="form-select" id="statusFilter" onchange="filterOrders()">
                                <option value="">All Orders</option>
                                <option value="pending">Pending</option>
                                <option value="accepted">Accepted</option>
                                <option value="cooking">Cooking</option>
                                <option value="ready">Ready</option>
                                <option value="completed">Completed</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Table Number:</label>
                            <input type="number" class="form-control" id="tableFilter" placeholder="Enter table number" onchange="filterOrders()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date:</label>
                            <input type="date" class="form-control" id="dateFilter" onchange="filterOrders()">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button class="btn btn-outline-secondary w-100" onclick="clearFilters()">
                                <i class="fas fa-times me-1"></i>Clear Filters
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Orders List -->
    <div class="row">
        <div class="col-12">
            <div id="orders-list">
                <!-- Sample Order Card -->
                <div class="card mb-3 order-card" data-status="pending" data-table="5">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Order #1001 - Table 5</h6>
                            <small class="text-muted">2 minutes ago</small>
                        </div>
                        <span class="badge bg-warning">Pending</span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h6>Order Items:</h6>
                                <ul class="list-unstyled">
                                    <li>• 2x Chicken Biryani</li>
                                    <li>• 1x Vegetable Curry</li>
                                    <li>• 3x Naan Bread</li>
                                </ul>
                                <p class="mb-0"><strong>Special Instructions:</strong> Extra spicy, no onions</p>
                            </div>
                            <div class="col-md-4 text-end">
                                <p class="mb-2"><strong>Total: ₹450</strong></p>
                                <div class="btn-group-vertical w-100">
                                    <button class="btn btn-success btn-sm" onclick="acceptOrder(1001)">
                                        <i class="fas fa-check me-1"></i>Accept
                                    </button>
                                    <button class="btn btn-primary btn-sm" onclick="startCooking(1001)">
                                        <i class="fas fa-fire me-1"></i>Start Cooking
                                    </button>
                                    <button class="btn btn-warning btn-sm" onclick="markReady(1001)">
                                        <i class="fas fa-bell me-1"></i>Mark Ready
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Another Sample Order -->
                <div class="card mb-3 order-card" data-status="cooking" data-table="3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Order #1000 - Table 3</h6>
                            <small class="text-muted">15 minutes ago</small>
                        </div>
                        <span class="badge bg-info">Cooking</span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h6>Order Items:</h6>
                                <ul class="list-unstyled">
                                    <li>• 1x Fish Curry</li>
                                    <li>• 2x Rice</li>
                                    <li>• 1x Mango Lassi</li>
                                </ul>
                                <p class="mb-0"><strong>Special Instructions:</strong> Medium spice level</p>
                            </div>
                            <div class="col-md-4 text-end">
                                <p class="mb-2"><strong>Total: ₹320</strong></p>
                                <div class="btn-group-vertical w-100">
                                    <button class="btn btn-warning btn-sm" onclick="markReady(1000)">
                                        <i class="fas fa-bell me-1"></i>Mark Ready
                                    </button>
                                    <button class="btn btn-success btn-sm" onclick="completeOrder(1000)">
                                        <i class="fas fa-check-double me-1"></i>Complete
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Empty State -->
                <div id="no-orders" class="text-center text-muted py-5" style="display: none;">
                    <i class="fas fa-clipboard-list fa-3x mb-3"></i>
                    <p>No orders match your filters</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function refreshAllOrders() {
        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('Orders refreshed! (In production, this would fetch from the API)');
        }, 1000);
    }
    
    function filterOrders() {
        const statusFilter = document.getElementById('statusFilter').value;
        const tableFilter = document.getElementById('tableFilter').value;
        const dateFilter = document.getElementById('dateFilter').value;
        
        const orders = document.querySelectorAll('.order-card');
        let visibleCount = 0;
        
        orders.forEach(order => {
            let show = true;
            
            if (statusFilter && order.dataset.status !== statusFilter) {
                show = false;
            }
            
            if (tableFilter && order.dataset.table !== tableFilter) {
                show = false;
            }
            
            // Date filtering would be implemented with real data
            
            order.style.display = show ? 'block' : 'none';
            if (show) visibleCount++;
        });
        
        document.getElementById('no-orders').style.display = visibleCount === 0 ? 'block' : 'none';
    }
    
    function clearFilters() {
        document.getElementById('statusFilter').value = '';
        document.getElementById('tableFilter').value = '';
        document.getElementById('dateFilter').value = '';
        filterOrders();
    }
    
    function acceptOrder(orderId) {
        if (confirm(`Accept order #${orderId}?`)) {
            alert(`Order #${orderId} accepted! (In production, this would call the API)`);
        }
    }
    
    function startCooking(orderId) {
        if (confirm(`Start cooking order #${orderId}?`)) {
            alert(`Cooking started for order #${orderId}! (In production, this would call the API)`);
        }
    }
    
    function markReady(orderId) {
        if (confirm(`Mark order #${orderId} as ready?`)) {
            alert(`Order #${orderId} marked as ready! (In production, this would call the API)`);
        }
    }
    
    function completeOrder(orderId) {
        if (confirm(`Complete order #${orderId}?`)) {
            alert(`Order #${orderId} completed! (In production, this would call the API)`);
        }
    }
    
    // Set today's date as default
    document.addEventListener('DOMContentLoaded', function() {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('dateFilter').value = today;
    });
</script>
{% endblock %}