{% extends "base.html" %}

{% block title %}Job {{ job.job_number }} - AIS Portal{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card p-4 mb-4">
            <div class="d-flex justify-content-between align-items-start mb-4">
                <div>
                    <span class="text-uppercase text-muted small fw-bold">Job Profile</span>
                    <h1 class="h2 mb-1 text-primary">{{ job.job_number }}</h1>
                    <p class="h5">{{ job.client_name }}</p>
                </div>
                <span class="badge bg-primary px-3 py-2 fs-6">{{ job.get_status_display }}</span>
            </div>
            
            <div class="row mb-4">
                <div class="col-sm-6">
                    <p class="text-muted small mb-1">Creation Date</p>
                    <p class="fw-bold">{{ job.created_at|date:"d F Y, H:i" }}</p>
                </div>
                <div class="col-sm-6 text-sm-end">
                    <p class="text-muted small mb-1">Last Update</p>
                    <p class="fw-bold">{{ job.updated_at|date:"d F Y, H:i" }}</p>
                </div>
            </div>

            <hr>

            <h3 class="h5 mb-3 mt-4">Job Description</h3>
            <div class="p-3 bg-light rounded">
                {{ job.description|linebreaks|default:"No description provided." }}
            </div>
        </div>

        <div class="card p-4">
            <h3 class="h5 mb-4">Agreement Status</h3>
            {% if job.agreement %}
            <div class="d-flex align-items-center justify-content-between p-3 border rounded">
                <div>
                    <p class="mb-0 fw-bold">Commercial Agreement Generated</p>
                    <p class="small text-muted mb-0">Dated: {{ job.agreement.agreement_date }}</p>
                </div>
                <a href="{% url 'agreement_print' job.pk %}" class="btn btn-outline-primary">Preview & Print</a>
            </div>
            {% else %}
            <div class="text-center py-4">
                <p class="text-muted">No agreement linked to this job yet.</p>
                <button class="btn btn-sm btn-primary">Initialize Agreement</button>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card p-4 sticky-top" style="top: 20px;">
            <h3 class="h5 mb-3">Workflow Actions</h3>
            <div class="d-grid gap-2">
                <button class="btn btn-primary" disabled>Update Status</button>
                <button class="btn btn-outline-secondary" disabled>Edit Details</button>
                <hr>
                <button class="btn btn-danger btn-sm opacity-50" disabled>Cancel Job</button>
            </div>
            <div class="mt-4 p-3 border-start border-primary border-4 bg-light">
                <p class="small mb-0 italic">"Ensure all client data matches the physical purchase order before printing the agreement."</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}