{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Job #{{ job.job_no }} — Workshop{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3">

  {% for msg in messages %}
  <div class="alert alert-{{ msg.tags }} alert-dismissible fade show py-2">
    {{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  {# ── Header ── #}
  <div class="d-flex align-items-start justify-content-between mb-3">
    <div>
      <h4 class="mb-1 fw-bold">
        <i class="bi bi-tools me-2 text-primary"></i>
        Job #{{ job.job_no }}
        &nbsp;
        {% if job.status == "draft" %}<span class="badge bg-secondary fs-6">Draft</span>
        {% elif job.status == "in_progress" %}<span class="badge bg-warning text-dark fs-6">In Progress</span>
        {% elif job.status == "parts_requested" %}<span class="badge fs-6" style="background:#5856d6;">Parts Requested</span>
        {% elif job.status == "ready" %}<span class="badge bg-info text-dark fs-6">Ready</span>
        {% elif job.status == "invoiced" %}<span class="badge bg-success fs-6">Invoiced ✓</span>
        {% endif %}
      </h4>
      <span class="text-muted">
        {{ job.job_date|date:"d M Y" }}
        {% if job.pit %}&nbsp;| <i class="bi bi-geo-alt"></i> Pit: {{ job.pit }}{% endif %}
        {% if job.time_in %}&nbsp;| In: {{ job.time_in|time:"H:i" }}{% endif %}
        {% if job.time_out %}&nbsp;→ Out: {{ job.time_out|time:"H:i" }}{% endif %}
      </span>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <a href="{% url 'workshop:job_list' %}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back
      </a>
      {% if 'job_card_re_open' in allowed_features %}
        {% if job.status == "invoiced" %}
        <form method="POST" action="{% url 'workshop:job_reopen' job.job_no %}"
              onsubmit="return confirm('Reopen? Invoice will be reversed.')">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-outline-warning">
            <i class="bi bi-arrow-counterclockwise me-1"></i> Reopen
          </button>
        </form>
        {% endif %}
      {% endif %}

      {% if 'delete_job_card' in allowed_features %}
      <button class="btn btn-sm btn-outline-danger"
              onclick="confirmDelete({{ job.job_no }}, '{{ job.vehicle.reg_no|escapejs }}', '{{ job.status }}')">
        <i class="bi bi-trash me-1"></i> Delete
      </button>
      {% endif %}
    </div>
  </div>

  {# ── Step Tracker ── #}
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
      <div class="d-flex align-items-center justify-content-between position-relative">
        <div style="position:absolute;top:20px;left:8%;right:8%;height:2px;background:#dee2e6;z-index:0;"></div>
        {% for step in steps %}
        <div class="text-center" style="z-index:1;flex:1;">
          {% if step.clickable %}
          <a href="{% url step.url_name job.job_no %}" class="text-decoration-none">
          {% endif %}
            <div class="mx-auto d-flex align-items-center justify-content-center rounded-circle fw-bold"
                 style="width:38px;height:38px;font-size:.95rem;
                 {% if step.done %}background:#198754;color:#fff;
                 {% elif step.active %}background:#0d6efd;color:#fff;
                 {% else %}background:#dee2e6;color:#6c757d;{% endif %}">
              {% if step.done %}<i class="bi bi-check-lg"></i>{% else %}{{ step.no }}{% endif %}
            </div>
          {% if step.clickable %}
          </a>
          {% endif %}
          <div class="small mt-1 fw-semibold
            {% if step.done %}text-success
            {% elif step.active %}text-primary
            {% else %}text-muted{% endif %}">
            {{ step.label }}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="row g-3">

    {# ── Vehicle + Job Info ── #}
    <div class="col-lg-5">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-bottom py-2">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-car-front me-2"></i>Vehicle & Job</h6>
        </div>
        <div class="card-body small">
          <table class="table table-borderless table-sm mb-0">
            <tr><td class="text-muted" style="width:40%">Reg No</td>
                <td class="fw-bold fs-5 text-primary">{{ job.vehicle.reg_no }}</td></tr>
            <tr><td class="text-muted">Make / Model</td>
                <td>{{ job.vehicle.make }} {{ job.vehicle.model }} <span class="text-muted">{{ job.vehicle.color }}</span></td></tr>
            <tr><td class="text-muted">Frame No</td>
                <td>{{ job.vehicle.frame_no|default:"—" }}</td></tr>
            <tr><td class="text-muted">Owner</td>
                <td>{{ job.vehicle.owner_name|default:"—" }}</td></tr>
            <tr><td class="text-muted">Mobile</td>
                <td>{{ job.vehicle.owner_mobile|default:"—" }}</td></tr>
            <tr><td class="text-muted">Pit / Terminal</td>
                <td>{{ job.pit|default:"—" }}</td></tr>
            <tr><td class="text-muted">Odometer In</td>
                <td>{{ job.odometer_in|floatformat:0|intcomma }} km</td></tr>
            <tr><td class="text-muted">Job Type</td>
                <td>{{ job.get_job_type_display }} — Group {{ job.job_group }}</td></tr>
            <tr><td class="text-muted">Technician</td>
                <td>{{ tech_name|default:"—" }}</td></tr>
            {% if job.remarks %}
            <tr><td class="text-muted">Remarks</td>
                <td>{{ job.remarks }}</td></tr>
            {% endif %}
          </table>
        </div>
      </div>
    </div>

    {# ── Billing & Invoice ── #}
    <div class="col-lg-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-bottom py-2">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-credit-card me-2"></i>Billing</h6>
        </div>
        <div class="card-body small">
          <table class="table table-borderless table-sm mb-0">
            <tr><td class="text-muted">Type</td>
                <td><strong>{{ job.get_billing_type_display }}</strong></td></tr>
            {% if customer_name %}
            <tr><td class="text-muted">Customer</td>
                <td>{{ customer_name }}</td></tr>
            {% endif %}
            {% if job.billing_type == "insurance" %}
            <tr><td class="text-muted">Claim #</td>
                <td>{{ job.claim_no|default:"—" }}</td></tr>
            <tr><td class="text-muted">Policy #</td>
                <td>{{ job.policy_no|default:"—" }}</td></tr>
            {% endif %}
            {% if job.status == "invoiced" %}
            <tr><td class="text-muted">Invoice #</td>
                <td class="fw-bold text-success">{{ job.invoice_no }}</td></tr>
            <tr><td class="text-muted">Gate Pass</td>
                <td>
                  #{{ job.job_no }}
                  {% if job.gp_printed %}
                    <span class="badge bg-success-subtle text-success border ms-1">Printed</span>
                  {% else %}
                    <span class="badge bg-warning-subtle text-warning border ms-1">Not printed</span>
                  {% endif %}
                </td></tr>
            {% endif %}
          </table>
        </div>
      </div>
    </div>

    {# ── Totals ── #}
    <div class="col-lg-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-bottom py-2">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-calculator me-2"></i>Bill Summary</h6>
        </div>
        <div class="card-body small">
          <table class="table table-borderless table-sm mb-0">
            <tr><td class="text-muted">Services Sub-total</td>
                <td class="text-end">{{ job.services_subtotal|floatformat:0|intcomma }}</td></tr>
            {% if job.services_discount_amt %}
            <tr><td class="text-muted">Services Discount ({{ job.services_discount_per }}%)</td>
                <td class="text-end text-danger">-{{ job.services_discount_amt|floatformat:0|intcomma }}</td></tr>
            {% endif %}
            {% if job.services_tax_amt %}
            <tr><td class="text-muted">Services Tax ({{ job.services_tax_per }}%)</td>
                <td class="text-end">{{ job.services_tax_amt|floatformat:0|intcomma }}</td></tr>
            {% endif %}
            <tr class="border-top"><td class="fw-semibold">Services Net</td>
                <td class="text-end fw-semibold">{{ job.services_net|floatformat:0|intcomma }}</td></tr>
            <tr class="border-top"><td class="text-muted">Parts Sub-total (Issued)</td>
                <td class="text-end">{{ job.parts_subtotal|floatformat:0|intcomma }}</td></tr>
            {% if job.parts_discount_amt %}
            <tr><td class="text-muted">Parts Discount ({{ job.parts_discount_per }}%)</td>
                <td class="text-end text-danger">-{{ job.parts_discount_amt|floatformat:0|intcomma }}</td></tr>
            {% endif %}
            {% if job.parts_tax_amt %}
            <tr><td class="text-muted">Parts Tax ({{ job.parts_tax_per }}%)</td>
                <td class="text-end">{{ job.parts_tax_amt|floatformat:0|intcomma }}</td></tr>
            {% endif %}
            <tr class="border-top"><td class="fw-semibold">Parts Net</td>
                <td class="text-end fw-semibold">{{ job.parts_net|floatformat:0|intcomma }}</td></tr>
            {% if job.counter_discount_amt %}
            <tr><td class="text-muted">Cash Counter Discount</td>
                <td class="text-end text-danger">-{{ job.counter_discount_amt|floatformat:0|intcomma }}</td></tr>
            {% endif %}
            <tr class="border-top table-light">
              <td class="fw-bold fs-6">NET AMOUNT</td>
              <td class="text-end fw-bold fs-6 text-primary">
                PKR {{ job.net_amount|floatformat:0|intcomma }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    {# ── PRINT PANEL ── #}
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom py-2">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-printer me-2 text-primary"></i>Print Documents</h6>
        </div>
        <div class="card-body py-3">
          <div class="row g-2">

            {# Gate Pass — available from any status #}
            <div class="col-auto">
              <a href="{% url 'workshop:print_gatepass' job.job_no %}" target="_blank"
                 class="btn btn-outline-dark btn-sm px-3">
                <i class="bi bi-file-earmark-check me-1"></i>
                Gate Pass
                {% if job.gp_printed %}
                  <span class="badge bg-success ms-1">✓</span>
                {% endif %}
              </a>
            </div>

            {# Invoice prints — only after invoiced #}
            {% if job.status == "invoiced" %}
            <div class="col-auto">
              <a href="{% url 'workshop:print_customer' job.job_no %}" target="_blank"
                 class="btn btn-outline-primary btn-sm px-3">
                <i class="bi bi-person me-1"></i> Customer Copy
              </a>
            </div>
            <div class="col-auto">
              <a href="{% url 'workshop:print_office' job.job_no %}" target="_blank"
                 class="btn btn-outline-secondary btn-sm px-3">
                <i class="bi bi-building me-1"></i> Office Copy
              </a>
            </div>
            <div class="col-auto">
              <a href="{% url 'workshop:print_finance' job.job_no %}" target="_blank"
                 class="btn btn-outline-info btn-sm px-3">
                <i class="bi bi-bank me-1"></i> Finance Copy
              </a>
            </div>
            <div class="col-auto">
              <a href="{% url 'workshop:print_pst' job.job_no %}" target="_blank"
                 class="btn btn-outline-warning btn-sm px-3">
                <i class="bi bi-receipt-cutoff me-1"></i> PST Invoice
              </a>
            </div>
            {% if job.billing_type in "corporate,insurance" %}
            <div class="col-auto">
              <a href="{% url 'workshop:print_corporate' job.job_no %}" target="_blank"
                 class="btn btn-success btn-sm px-3">
                <i class="bi bi-building-fill me-1"></i>
                {% if job.billing_type == "insurance" %}Insurance Bill{% else %}Corporate Bill{% endif %}
              </a>
            </div>
            {% endif %}

            {# Print All button #}
            <div class="col-auto ms-auto">
              <button type="button" class="btn btn-primary btn-sm px-3"
                      onclick="printAll()">
                <i class="bi bi-printer-fill me-1"></i> Print All Copies
              </button>
            </div>

            {% else %}
            <div class="col-12">
              <span class="text-muted small">
                <i class="bi bi-info-circle me-1"></i>
                Invoice prints (Customer, Office, Finance, PST) will be available once this job is settled at the Cash Counter.
              </span>
            </div>
            {% endif %}

          </div>
        </div>
      </div>
    </div>

    {# ── Services Lines ── #}
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-2">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-wrench me-2"></i>Services ({{ services|length }})</h6>
          {% if job.status == "draft" or job.status == "in_progress" %}
          <a href="{% url 'workshop:step2_services' job.job_no %}"
             class="btn btn-sm btn-outline-primary py-0 px-2">
            <i class="bi bi-pencil me-1"></i>Edit
          </a>
          {% endif %}
        </div>
        <div class="table-responsive">
          <table class="table table-sm mb-0 small">
            <thead class="table-light">
              <tr><th>#</th><th>Service</th><th>Description</th><th class="text-end">Price</th></tr>
            </thead>
            <tbody>
              {% for svc in services %}
              <tr>
                <td class="text-muted">{{ svc.line_no }}</td>
                <td>{{ svc.service_name|default:"—" }}</td>
                <td class="text-muted">{{ svc.description|default:"" }}</td>
                <td class="text-end">{{ svc.price|floatformat:0|intcomma }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="4" class="text-center text-muted py-3">No services added</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {# ── Parts Lines ── #}
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-2">
          <h6 class="mb-0 fw-semibold"><i class="bi bi-box-seam me-2"></i>Parts ({{ parts|length }})</h6>
          {% if job.status == "in_progress" %}
          <a href="{% url 'workshop:step3_parts' job.job_no %}"
             class="btn btn-sm btn-outline-primary py-0 px-2">
            <i class="bi bi-pencil me-1"></i>Edit Requisition
          </a>
          {% elif job.status == "parts_requested" %}
          <span class="badge" style="background:#5856d6;">
            <i class="bi bi-hourglass-split me-1"></i>Awaiting Stock Issuer
          </span>
          {% endif %}
        </div>
        <div class="table-responsive">
          <table class="table table-sm mb-0 small">
            <thead class="table-light">
              <tr><th>#</th><th>Part</th><th class="text-center">Req. Qty</th>
                  <th class="text-center">Issued Qty</th>
                  <th class="text-end">Rate</th><th class="text-end">Billable Total</th></tr>
            </thead>
            <tbody>
              {% for part in parts %}
              <tr>
                <td class="text-muted">{{ part.line_no }}</td>
                <td>{{ part.product_name }}</td>
                <td class="text-center">{{ part.qty|floatformat:0 }}</td>
                <td class="text-center {% if part.issued_qty %}fw-semibold text-success{% else %}text-muted{% endif %}">
                  {{ part.issued_qty|floatformat:0 }}
                </td>
                <td class="text-end">{{ part.rate|floatformat:0|intcomma }}</td>
                <td class="text-end">{{ part.line_total|floatformat:0|intcomma }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="6" class="text-center text-muted py-3">No parts added</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {# ── Action Buttons ── #}
    {% if job.status != "invoiced" %}
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-3 d-flex gap-2 flex-wrap align-items-center">

          {% if job.status == "draft" %}
          <a href="{% url 'workshop:step1_vehicle' job.job_no %}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-1-circle me-1"></i> Vehicle / Check-in
          </a>
          <a href="{% url 'workshop:step2_services' job.job_no %}" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-2-circle me-1"></i> Services
          </a>

          {% elif job.status == "in_progress" %}
          <a href="{% url 'workshop:step1_vehicle' job.job_no %}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-1-circle me-1"></i> Vehicle / Check-in
          </a>
          <a href="{% url 'workshop:step2_services' job.job_no %}" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-2-circle me-1"></i> Services
          </a>
          <a href="{% url 'workshop:step3_parts' job.job_no %}" class="btn btn-info btn-sm ms-auto px-4">
            <i class="bi bi-3-circle me-1"></i> Stock Requisition →
          </a>

          {% elif job.status == "parts_requested" %}
          <div class="alert alert-light border mb-0 py-2 px-3 small flex-grow-1">
            <i class="bi bi-hourglass-split me-1" style="color:#5856d6;"></i>
            Waiting for <strong>Stock Issuer</strong> department to issue the requested parts.
          </div>

          {% elif job.status == "ready" %}
          <div class="alert alert-light border mb-0 py-2 px-3 small">
            <i class="bi bi-check-circle me-1 text-info"></i>
            Parts issued. Ready for settlement.
          </div>
          <a href="{% url 'workshop:step4_settlement' job.job_no %}" class="btn btn-success btn-sm ms-auto px-4">
            <i class="bi bi-cash-stack me-1"></i> Cash Counter →
          </a>
          {% endif %}

        </div>
      </div>
    </div>
    {% endif %}

  </div>
</div>

{# Delete Modal #}
<div class="modal fade" id="deleteModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header border-0 pb-0">
        <h6 class="modal-title text-danger"><i class="bi bi-exclamation-triangle me-1"></i>Delete Job?</h6>
      </div>
      <div class="modal-body py-2 small" id="deleteMsg"></div>
      <div class="modal-footer border-0 pt-0">
        <button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <form method="POST" id="deleteForm" style="display:inline;">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-danger">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function confirmDelete(jobNo, regNo, status) {
  const modal = new bootstrap.Modal(document.getElementById("deleteModal"));
  let msg = `Delete Job <strong>#${jobNo}</strong> for <strong>${regNo}</strong>?`;
  if (status === "invoiced") msg += `<br><span class="text-danger mt-1 d-block">⚠ Invoice will be reversed and stock restored!</span>`;
  document.getElementById("deleteMsg").innerHTML = msg;
  document.getElementById("deleteForm").action = `/workshop/jobs/${jobNo}/delete/`;
  modal.show();
}

function printAll() {
  const jobNo = {{ job.job_no }};
  const urls = [
    "{% url 'workshop:print_customer' job.job_no %}",
    "{% url 'workshop:print_office' job.job_no %}",
    "{% url 'workshop:print_finance' job.job_no %}",
    "{% url 'workshop:print_pst' job.job_no %}",
    {% if job.billing_type in "corporate,insurance" %}
    "{% url 'workshop:print_corporate' job.job_no %}",
    {% endif %}
  ];
  urls.forEach((url, i) => {
    setTimeout(() => window.open(url, "_blank"), i * 500);
  });
}
</script>
{% endblock %}