{% extends "base.html" %}

{% block title %}Complete a Job | TrustForge{% endblock %}
{% block meta_description %}Log a completed service job in TrustForge, upload before and after photos, and trigger the proof workflow.{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="row g-4 align-items-start">
      <div class="col-lg-5">
        <div class="tf-panel sticky-lg-top tf-sticky-panel">
          <div class="tf-eyebrow">Technician flow</div>
          <h1 class="tf-page-title">Complete a job in under 30 seconds</h1>
          <p class="tf-page-subtitle">You are logging this inside <strong>{{ current_membership.business.name }}</strong>. Add the customer, upload photos, and trigger a review request. TrustForge creates the proof card automatically.</p>
          <div class="d-grid gap-3 mt-4">
            <div class="tf-check-row"><span>01</span> Save the completed job</div>
            <div class="tf-check-row"><span>02</span> Draft proof card is generated</div>
            <div class="tf-check-row"><span>03</span> Review request is ready to share</div>
            <div class="tf-check-row"><span>04</span> Positive feedback can auto-publish proof</div>
          </div>
          <div class="tf-detail-box mt-4"><span>Workspace scope</span><strong>{{ current_membership.business.primary_city }}, {{ current_membership.business.primary_state }} · {{ current_membership.get_role_display }}</strong></div>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="tf-panel">
          <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
            <div>
              <div class="tf-eyebrow">Job intake</div>
              <h2 class="h3 mb-2">Capture the completed work</h2>
              <p class="text-secondary-emphasis mb-0">Every field below feeds the trust pipeline: completed job → review request → proof card.</p>
            </div>
            <div class="tf-inline-stat">
              <span>Business scope</span>
              <strong>{{ current_membership.business.name }}</strong>
            </div>
          </div>
          <form method="post" enctype="multipart/form-data" class="row g-3">
            {% csrf_token %}
            {{ form.business }}
            <div class="col-md-6">
              <label class="form-label">Customer name</label>
              {{ form.customer_name }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Service type</label>
              {{ form.service_type }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Customer email</label>
              {{ form.customer_email }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Customer phone</label>
              {{ form.customer_phone }}
            </div>
            <div class="col-md-8">
              <label class="form-label">City</label>
              {{ form.customer_city }}
            </div>
            <div class="col-md-4">
              <label class="form-label">State</label>
              {{ form.customer_state }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Technician</label>
              {{ form.technician_name }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Completion date</label>
              {{ form.completion_date }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Project value</label>
              {{ form.project_value }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Review channel</label>
              {{ form.review_channel }}
            </div>
            <div class="col-12">
              <label class="form-label">Job description</label>
              {{ form.description }}
            </div>
            <div class="col-md-6">
              <label class="form-label">Before photo</label>
              {{ form.before_photo }}
            </div>
            <div class="col-md-6">
              <label class="form-label">After photo</label>
              {{ form.after_photo }}
            </div>
            <div class="col-md-6">
              <div class="form-check tf-check-field">
                {{ form.anonymize_customer }}
                <label class="form-check-label" for="{{ form.anonymize_customer.id_for_label }}">Anonymize customer on proof card</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-check tf-check-field">
                {{ form.send_review_request }}
                <label class="form-check-label" for="{{ form.send_review_request.id_for_label }}">Send review request after save</label>
              </div>
            </div>
            <div class="col-12 pt-2 d-flex flex-wrap gap-3">
              <button type="submit" class="btn tf-btn tf-btn-primary">Save completed job</button>
              <a class="btn tf-btn tf-btn-secondary" href="{% url 'jobs_list' %}">Cancel</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}