{% extends "base.html" %}

{% block title %}{{ job.service_type }} | TrustForge{% endblock %}
{% block meta_description %}TrustForge job detail for {{ job.service_type }} in {{ job.city }}, {{ job.state }}.{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
      <div>
        <div class="tf-eyebrow">Job detail</div>
        <h1 class="tf-page-title">{{ job.service_type }}</h1>
        <p class="tf-page-subtitle">{{ job.customer.full_name }} · {{ job.city }}, {{ job.state }} · Completed {{ job.completed_at|date:"F j, Y" }}</p>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <a class="btn tf-btn tf-btn-secondary" href="{% url 'jobs_list' %}">All jobs</a>
        <a class="btn tf-btn tf-btn-primary" href="{% url 'proof_card_detail' job.proof_card.id %}">Open proof card</a>
      </div>
    </div>

    <div class="row g-4">
      <div class="col-lg-7">
        <div class="tf-panel h-100">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h4 mb-0">Job summary</h2>
            <span class="tf-status-pill tf-status-{{ job.status }}">{{ job.get_status_display }}</span>
          </div>
          <div class="row g-3 mb-4">
            <div class="col-md-6"><div class="tf-detail-box"><span>Business</span><strong>{{ job.business.name }}</strong></div></div>
            <div class="col-md-6"><div class="tf-detail-box"><span>Technician</span><strong>{{ job.technician_name|default:'Not added yet' }}</strong></div></div>
            <div class="col-md-6"><div class="tf-detail-box"><span>Project value</span><strong>{% if job.project_value %}${{ job.project_value }}{% else %}Optional{% endif %}</strong></div></div>
            <div class="col-md-6"><div class="tf-detail-box"><span>Verified</span><strong>{% if job.is_verified %}Yes{% else %}Pending{% endif %}</strong></div></div>
          </div>
          <div class="mb-4">
            <h3 class="h6 text-uppercase text-secondary-emphasis mb-2">Description</h3>
            <p class="mb-0">{{ job.description|default:'No extra description was added for this completed job.' }}</p>
          </div>
          <div>
            <h3 class="h6 text-uppercase text-secondary-emphasis mb-2">Job photos</h3>
            {% include "core/includes/proof_media_grid.html" with job=job %}
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="tf-panel mb-4">
          <h2 class="h4 mb-3">Review request</h2>
          {% if job.review_request %}
            <div class="tf-detail-box mb-3"><span>Status</span><strong>{{ job.review_request.get_status_display }}</strong></div>
            <div class="tf-detail-box mb-3"><span>Channel</span><strong>{{ job.review_request.get_channel_display }}</strong></div>
            <div class="tf-detail-box mb-3"><span>Delivery note</span><strong>{{ job.review_request.delivery_note|default:'Ready to share' }}</strong></div>
            <a href="{% url 'review_request' job.review_request.token %}" class="btn tf-btn tf-btn-secondary w-100">Open customer review page</a>
          {% else %}
            <p class="text-secondary-emphasis">No review request has been sent for this job yet.</p>
            <form method="post" class="d-grid gap-3">
              {% csrf_token %}
              <input type="hidden" name="action" value="send_review_request">
              <select name="channel" class="form-select">
                <option value="email">Email</option>
                <option value="sms">SMS</option>
                <option value="manual">Manual share</option>
              </select>
              <button type="submit" class="btn tf-btn tf-btn-primary">Send review request</button>
            </form>
          {% endif %}
        </div>

        <div class="tf-panel">
          <h2 class="h4 mb-3">Proof card</h2>
          <div class="tf-detail-box mb-3"><span>Status</span><strong>{{ job.proof_card.get_status_display }}</strong></div>
          <div class="tf-detail-box mb-3"><span>Display name</span><strong>{{ job.proof_card.customer_display_name }}</strong></div>
          <div class="tf-detail-box mb-4"><span>Widget target</span><strong>{{ job.proof_card.attached_widget_label|default:'Not set' }}</strong></div>
          <a href="{% url 'proof_card_detail' job.proof_card.id %}" class="btn tf-btn tf-btn-primary w-100">Manage proof card</a>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}