{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="row align-items-center mb-5">
    <div class="col-lg-6">
        <h1 class="display-4 fw-bold">Industrial Operations Control</h1>
        <p class="lead text-muted">Manage jobs, agreements, and industrial solutions for Aitken Spence with precision and speed.</p>
        <div class="d-flex gap-3">
            <a href="{% url 'job_create' %}" class="btn btn-primary btn-lg px-4">Create New Job</a>
            <a href="{% url 'job_list' %}" class="btn btn-outline-secondary btn-lg px-4">View All Jobs</a>
        </div>
    </div>
    <div class="col-lg-6 d-none d-lg-block">
        <div class="p-5 bg-white rounded-4 shadow-sm text-center">
            <!-- Simple SVG Placeholder for Industrial Visual -->
            <svg width="200" height="200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-primary opacity-50">
                <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
            </svg>
        </div>
    </div>
</div>

<div class="row g-4 mb-5">
    <div class="col-md-4">
        <div class="card p-4 text-center">
            <h3 class="display-6 fw-bold text-primary">{{ jobs_count }}</h3>
            <p class="mb-0 text-muted">Total Jobs</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-4 text-center border-start border-accent border-4">
            <h3 class="display-6 fw-bold text-accent">{{ active_jobs }}</h3>
            <p class="mb-0 text-muted">Active Agreements</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-4 text-center">
            <h3 class="display-6 fw-bold text-primary">100%</h3>
            <p class="mb-0 text-muted">SLA Compliance</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h4 mb-0">Recent Job Orders</h2>
                <a href="{% url 'job_list' %}" class="btn btn-sm btn-link text-decoration-none">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Job ID</th>
                            <th>Client</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for job in recent_jobs %}
                        <tr>
                            <td class="fw-bold text-primary">{{ job.job_number }}</td>
                            <td>{{ job.client_name }}</td>
                            <td>
                                <span class="badge rounded-pill {% if job.status == 'active' %}bg-success{% elif job.status == 'draft' %}bg-warning text-dark{% else %}bg-secondary{% endif %}">
                                    {{ job.get_status_display }}
                                </span>
                            </td>
                            <td>{{ job.created_at|date:"M d, Y" }}</td>
                            <td>
                                <a href="{% url 'job_detail' job.pk %}" class="btn btn-sm btn-outline-primary">Manage</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="5" class="text-center py-4">No jobs found. Start by creating one.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}