{% extends "base.html" %}

{% block title %}Dashboard | Multi-Plant ERP{% endblock %}

{% block extra_css %}
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        padding: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary);
        margin-top: 0.5rem;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th {
        text-align: left;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        padding: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .data-table td {
        padding: 1rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--border);
    }

    .badge {
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-pass { background: #dcfce7; color: #166534; }
    .badge-fail { background: #fee2e2; color: #991b1b; }
</style>
{% endblock %}

{% block content %}
<div class="section-header">
    <div>
        <h1 style="margin: 0; font-size: 1.875rem; font-weight: 700;">Operational Dashboard</h1>
        <p style="color: var(--text-muted); margin-top: 0.25rem;">Real-time manufacturing insights across all facilities.</p>
    </div>
    <div style="display: flex; gap: 0.75rem;">
        <button class="btn" style="background: white; border: 1px solid var(--border);">Download Report</button>
        <a href="/admin/" class="btn btn-primary">Add New Order</a>
    </div>
</div>

<div class="stats-grid">
    <div class="card stat-card">
        <div class="stat-label">Active Facilities</div>
        <div class="stat-value">{{ stats.plants_count }}</div>
    </div>
    <div class="card stat-card">
        <div class="stat-label">Total Stock Items</div>
        <div class="stat-value">{{ stats.inventory_count }}</div>
    </div>
    <div class="card stat-card">
        <div class="stat-label">Production Machines</div>
        <div class="stat-value">{{ stats.machines_count }}</div>
    </div>
    <div class="card stat-card">
        <div class="stat-label">Running Work Orders</div>
        <div class="stat-value">{{ stats.active_work_orders }}</div>
    </div>
</div>

<div class="card" style="padding: 1.5rem;">
    <div class="section-header">
        <h2 class="section-title">Recent Quality Inspections</h2>
        <a href="#" style="font-size: 0.875rem; color: var(--primary); font-weight: 600; text-decoration: none;">View All</a>
    </div>
    
    {% if stats.recent_inspections %}
    <table class="data-table">
        <thead>
            <tr>
                <th>Work Order</th>
                <th>Facility</th>
                <th>Result</th>
                <th>Inspector</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            {% for inspection in stats.recent_inspections %}
            <tr>
                <td style="font-weight: 600;">{{ inspection.work_order.order_number }}</td>
                <td>{{ inspection.work_order.plant.name }}</td>
                <td>
                    <span class="badge {% if inspection.result == 'pass' %}badge-pass{% else %}badge-fail{% endif %}">
                        {{ inspection.result|upper }}
                    </span>
                </td>
                <td>{{ inspection.inspector.username }}</td>
                <td>{{ inspection.timestamp|date:"M d, Y H:i" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color: var(--text-muted); padding: 1rem 0;">No recent inspections recorded.</p>
    {% endif %}
</div>
{% endblock %}