{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Workshop Jobs{% endblock %}

{% block stylesheets %}
<style>
/* ══ Apple design system ═══════════════════════════════════════════ */
:root{
  --c-bg:#f2f2f7; --c-card:#fff; --c-border:#d1d1d6;
  --c-accent:#007aff; --c-accent-d:#005ecb;
  --c-text:#1c1c1e; --c-sub:#6e6e73; --c-danger:#ff3b30;
  --c-success:#34c759; --c-warn:#ff9f0a; --c-info:#0dcaf0;
  --c-purple:#5856d6;
  --r-card:14px; --r-inp:9px;
  --shadow:0 2px 14px rgba(0,0,0,.08);
  --shadow-h:0 4px 22px rgba(0,0,0,.13);
}
body { background: var(--c-bg) !important; }

/* Page header */
.sf-page-hd {
  background: linear-gradient(135deg,#f0f4ff,#e8f0fe);
  border-radius: var(--r-card);
  padding: 1rem 1.5rem;
  color: var(--c-text);
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow);
  border: 1px solid #dce5ff;
}

/* Stat cards */
.sf-stat-card {
  background: var(--c-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: .8rem 1rem;
  text-align: center;
  transition: box-shadow .2s, transform .15s;
  cursor: pointer;
  border-top: 3px solid transparent;
}
.sf-stat-card:hover { box-shadow: var(--shadow-h); transform: translateY(-2px); }
.sf-stat-card.stat-draft  { border-top-color: #aaa; }
.sf-stat-card.stat-prog   { border-top-color: var(--c-warn); }
.sf-stat-card.stat-pr     { border-top-color: var(--c-purple); }
.sf-stat-card.stat-ready  { border-top-color: var(--c-info); }
.sf-stat-card.stat-inv    { border-top-color: var(--c-success); }
.sf-stat-card .val { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.sf-stat-card .lbl { font-size: .7rem; color: var(--c-sub); margin-top: 2px; }

/* Filter card */
.sf-filter {
  background: var(--c-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: .7rem 1.1rem;
  margin-bottom: 1rem;
}
.sf-inp {
  height: 36px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-inp) !important;
  font-size: .84rem;
  color: var(--c-text);
  padding: 0 .7rem;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sf-inp:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(0,122,255,.13);
}
select.sf-inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 26px !important;
}

/* Filter buttons */
.sf-btn {
  height: 36px; border: none; border-radius: var(--r-inp);
  font-size: .83rem; font-weight: 700; padding: 0 1rem; cursor: pointer;
  transition: all .15s; display: inline-flex; align-items: center; gap: .3rem;
}
.sf-btn-primary  { background: var(--c-accent); color: #fff; }
.sf-btn-primary:hover  { background: var(--c-accent-d); }
.sf-btn-outline  { background: #fff; color: var(--c-accent); border: 1.5px solid var(--c-accent); }
.sf-btn-outline:hover  { background: rgba(0,122,255,.06); }
.sf-btn-today    { background: linear-gradient(135deg,#ff9f0a,#ff6b00); color:#fff; }
.sf-btn-today:hover { filter: brightness(1.08); }
.sf-btn-pdf      { background: linear-gradient(135deg,#ff3b30,#c80000); color:#fff; }
.sf-btn-pdf:hover { filter: brightness(1.1); }
.sf-btn-xl       { background: linear-gradient(135deg,#34c759,#218838); color:#fff; }
.sf-btn-xl:hover { filter: brightness(1.1); }
.sf-btn-new      { background: linear-gradient(135deg,#007aff,#5856d6); color:#fff; height:38px; }
.sf-btn-new:hover { filter: brightness(1.1); box-shadow: 0 3px 12px rgba(0,122,255,.4); }
.sf-btn-sm       { height: 30px; font-size: .75rem; padding: 0 .7rem; }
.sf-btn-clear    { background: #f0f0f0; color: var(--c-sub); border: none; }
.sf-btn-clear:hover { background: #e5e5ea; }

/* Job table */
.sf-table-card {
  background: var(--c-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sf-tbl { width: 100%; font-size: .83rem; border-collapse: collapse; }
.sf-tbl thead th {
  background: #f0f0f5;
  font-size: .72rem; font-weight: 700;
  color: var(--c-sub); letter-spacing: .05em; text-transform: uppercase;
  padding: .55rem .75rem;
  border-bottom: 2px solid var(--c-border);
  white-space: nowrap;
}
.sf-tbl tbody td { padding: .5rem .75rem; border-bottom: 1px solid #f0f0f0; vertical-align: middle; color: #000; }
.sf-tbl tbody tr:last-child td { border-bottom: none; }
.sf-tbl tbody tr:hover td { background: #fafafe; }
.sf-tbl tbody tr.invoiced-row td { opacity: .82; }

/* Job # link */
.job-link {
  font-weight: 800; color: var(--c-accent);
  text-decoration: none; font-size: .9rem;
}
.job-link:hover { color: var(--c-accent-d); }

/* Status badges */
.sf-badge {
  display: inline-flex; align-items: center;
  border-radius: 20px; font-size: .7rem; font-weight: 700;
  padding: 2px 10px; white-space: nowrap;
}
.sb-draft    { background: #ebebeb; color: #555; }
.sb-prog     { background: #fff3cd; color: #885500; border: 1px solid #ffc107; }
.sb-pr       { background: #ece9ff; color: #3b3899; border: 1px solid var(--c-purple); }
.sb-ready    { background: #d9f7fe; color: #005566; border: 1px solid #0dcaf0; }
.sb-invoiced { background: #d1f8e8; color: #0a6634; border: 1px solid #28a745; }

/* Billing badges */
.bb-cash { background:#f0f0f0;color:#333; }
.bb-credit { background:#e8f0ff;color:#003; }
.bb-corp   { background:#e8f8ff;color:#005566; }
.bb-ins    { background:#edf9ee;color:#0a6634; }
.bb-comp   { background:#fff8e1;color:#885500; }

/* Action buttons */
.act-btn {
  height: 28px; width: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; border: 1px solid var(--c-border);
  background: #fff; color: var(--c-sub);
  transition: all .15s; text-decoration: none; cursor: pointer;
}
.act-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); transform: scale(1.1); }
.act-view   { color: var(--c-accent);  border-color: rgba(0,122,255,.3);  }
.act-edit   { color: #555;             border-color: #ccc;                 }
.act-parts  { color: var(--c-info);   border-color: rgba(13,202,240,.3);  }
.act-pr     { color: var(--c-purple); border-color: rgba(88,86,214,.3);  }
.act-settle { color: var(--c-success); border-color: rgba(52,199,89,.3);  }
.act-del    { color: var(--c-danger);  border-color: rgba(255,59,48,.3);  }
.act-btn:hover.act-view   { background: rgba(0,122,255,.08); }
.act-btn:hover.act-edit   { background: #f5f5f5; }
.act-btn:hover.act-parts  { background: rgba(13,202,240,.1); }
.act-btn:hover.act-pr     { background: rgba(88,86,214,.1); }
.act-btn:hover.act-settle { background: rgba(52,199,89,.1); }
.act-btn:hover.act-del    { background: rgba(255,59,48,.08); }

/* Empty state */
.sf-empty { padding: 4rem 2rem; text-align: center; }
.sf-empty i { font-size: 3rem; opacity: .15; display: block; margin-bottom: .8rem; }

/* Responsive table scrollable area */
.tbl-wrap { overflow-x: auto; }

/* Tooltip on action buttons */
[title]:hover { position: relative; }
</style>
{% 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 border-0 shadow-sm py-2">
    {{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  {# ══ PAGE HEADER ══════════════════════════════════════════════════ #}
  <div class="sf-page-hd d-flex justify-content-between align-items-center flex-wrap gap-3">
    <div>
      <h4 class="mb-0 fw-bold" style="color:#1c1c1e;">
        <i class="bi bi-tools me-2" style="color:var(--c-accent);"></i>. Workshop Jobs
      </h4>
      <small class="text-muted">All vehicle service jobs &nbsp;·&nbsp; {{ jobs|length }} records showing</small>
    </div>
    <div class="d-flex gap-2 flex-wrap">
      {# PDF / Excel export #}
      <a href="{% url 'workshop:job_list_pdf' %}?{{ request.GET.urlencode }}"
         target="_blank" class="sf-btn sf-btn-pdf">
        <i class="bi bi-file-earmark-pdf"></i> PDF
      </a>
      <a href="{% url 'workshop:job_list_excel' %}?{{ request.GET.urlencode }}"
         class="sf-btn sf-btn-xl">
        <i class="bi bi-file-earmark-excel"></i> Excel
      </a>
      {# New job #}
      <a href="{% url 'workshop:step1_new' %}" class="sf-btn sf-btn-new">
        <i class="bi bi-plus-lg"></i> New Job
      </a>
    </div>
  </div>

  {# ══ STAT CARDS ═══════════════════════════════════════════════════ #}
  <div class="row g-2 mb-3">
    <div class="col-6 col-md">
      <div class="sf-stat-card stat-draft" onclick="filterByStatus('')" title="Show active jobs">
        <div class="val">{{ stats.draft }}</div>
        <div class="lbl">Draft</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="sf-stat-card stat-prog" onclick="filterByStatus('in_progress')" title="Filter In Progress">
        <div class="val" style="color:var(--c-warn);">{{ stats.in_progress }}</div>
        <div class="lbl">In Progress</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="sf-stat-card stat-pr" onclick="filterByStatus('parts_requested')" title="Filter Parts Requested">
        <div class="val" style="color:var(--c-purple);">{{ stats.parts_requested }}</div>
        <div class="lbl">Parts Requested</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="sf-stat-card stat-ready" onclick="filterByStatus('ready')" title="Filter Ready">
        <div class="val" style="color:var(--c-info);">{{ stats.ready }}</div>
        <div class="lbl">Ready for Delivery</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="sf-stat-card stat-inv" onclick="filterByStatus('invoiced')" title="Filter Invoiced">
        <div class="val" style="color:var(--c-success);">{{ stats.invoiced }}</div>
        <div class="lbl">Invoiced</div>
      </div>
    </div>
  </div>

  {# ══ FILTERS ══════════════════════════════════════════════════════ #}
  <div class="sf-filter">
    <form method="GET" id="filterForm" class="d-flex flex-wrap gap-2 align-items-center">

      <input type="text" name="q" value="{{ search_q }}"
             class="sf-inp" style="width:200px;"
             placeholder="Reg. no., owner, job no…">

      <select name="status" class="sf-inp" style="width:210px;" id="statusSelect">
        <option value=""    {% if status_f == ""    %}selected{% endif %}>Active (Draft+InProg+PartsReq+Ready)</option>
        <option value="all" {% if status_f == "all" %}selected{% endif %}>— All Status —</option>
        {% for val, label in status_choices %}
        <option value="{{ val }}" {% if status_f == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>

      <input type="date" name="date_from" id="dateFrom"
             value="{{ date_from }}" class="sf-inp" style="width:145px;">

      <input type="date" name="date_to" id="dateTo"
             value="{{ date_to }}" class="sf-inp" style="width:145px;">

      <button type="submit" class="sf-btn sf-btn-primary">
        <i class="bi bi-funnel"></i> Filter
      </button>

      {# TODAY quick filter #}
      <button type="button" class="sf-btn sf-btn-today" onclick="filterToday()" title="Show all today's jobs">
        <i class="bi bi-calendar-check"></i> Today
      </button>

      <a href="{% url 'workshop:job_list' %}" class="sf-btn sf-btn-clear">
        <i class="bi bi-x-lg"></i>
      </a>

      <span class="text-muted ms-auto" style="font-size:.75rem;">
        {{ jobs|length }} job{% if jobs|length != 1 %}s{% endif %}
        &nbsp;·&nbsp;
        {% if date_from == date_to %}{{ date_from }}{% else %}{{ date_from }} → {{ date_to }}{% endif %}
      </span>

    </form>
  </div>

  {# ══ JOBS TABLE ═══════════════════════════════════════════════════ #}
  <div class="sf-table-card">
    <div class="tbl-wrap">
      <table class="sf-tbl">
        <thead>
          <tr>
            <th style="width:68px;">Job #</th>
            <th style="width:82px;">Date</th>
            <th style="width:70px;">Pit</th>
            <th style="min-width:90px;">Reg. No.</th>
            <th style="min-width:130px;">Vehicle</th>
            <th style="min-width:120px;">Owner</th>
            <th style="width:90px;">Billing</th>
            <th style="width:108px;" class="text-end">Net Amount</th>
            <th style="width:115px;" class="text-center">Status</th>
            <th style="width:160px;" class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if jobs %}
            {% for job in jobs %}
            <tr class="{% if job.status == 'invoiced' %}invoiced-row{% endif %}">

              {# Job # #}
              <td>
                <a href="{% url 'workshop:job_detail' job.job_no %}" class="job-link">
                  #{{ job.job_no }}
                </a>
                {% if job.invoice_no %}
                <div style="font-size:.66rem;color:#444;">Inv #{{ job.invoice_no }}</div>
                {% endif %}
              </td>

              {# Date #}
              <td>{{ job.job_date|date:"d-M-y" }}</td>

              {# Pit #}
              <td><span class="text-muted" style="font-size:.78rem;">{{ job.pit|default:"—" }}</span></td>

              {# Vehicle #}
              <td>
                <span class="fw-bold" style="letter-spacing:.02em;">{{ job.vehicle.reg_no }}</span>
              </td>
              <td>
                <span>{{ job.vehicle.make }} {{ job.vehicle.model }}</span>
                {% if job.vehicle.year %}
                <span style="font-size:.74rem;color:#444;"> '{{ job.vehicle.year|stringformat:"s"|slice:"-2:" }}</span>
                {% endif %}
              </td>

              {# Owner #}
              <td>
                {{ job.vehicle.owner_name|default:"—" }}
                {% if job.vehicle.owner_mobile %}
                <div style="font-size:.72rem;color:#444;">{{ job.vehicle.owner_mobile }}</div>
                {% endif %}
              </td>

              {# Billing #}
              <td>
                {% if job.billing_type == "cash" %}
                  <span class="sf-badge bb-cash">Cash</span>
                {% elif job.billing_type == "credit" %}
                  <span class="sf-badge bb-credit">Credit</span>
                {% elif job.billing_type == "corporate" %}
                  <span class="sf-badge bb-corp">Corporate</span>
                {% elif job.billing_type == "insurance" %}
                  <span class="sf-badge bb-ins">Insurance</span>
                {% elif job.billing_type == "complimentary" %}
                  <span class="sf-badge bb-comp">Compl.</span>
                {% endif %}
              </td>

              {# Net Amount #}
              <td class="text-end">
                {% if job.net_amount %}
                <span class="fw-bold">{{ job.net_amount|floatformat:0|intcomma }}</span>
                {% else %}
                <span>—</span>
                {% endif %}
              </td>

              {# Status #}
              <td class="text-center">
                {% if job.status == "draft" %}
                  <span class="sf-badge sb-draft"><i class="bi bi-circle me-1" style="font-size:.6rem;"></i>Draft</span>
                {% elif job.status == "in_progress" %}
                  <span class="sf-badge sb-prog"><i class="bi bi-arrow-repeat me-1" style="font-size:.6rem;"></i>In Progress</span>
                {% elif job.status == "parts_requested" %}
                  <span class="sf-badge sb-pr"><i class="bi bi-hourglass-split me-1" style="font-size:.6rem;"></i>Parts Req.</span>
                {% elif job.status == "ready" %}
                  <span class="sf-badge sb-ready"><i class="bi bi-check me-1"></i>Ready</span>
                {% elif job.status == "invoiced" %}
                  <span class="sf-badge sb-invoiced"><i class="bi bi-check-circle me-1" style="font-size:.6rem;"></i>Invoiced</span>
                {% endif %}
              </td>

              {# Actions #}
              <td class="text-center">
                <div class="d-flex gap-1 justify-content-center flex-wrap">

                  {# View — always #}
                  <a href="{% url 'workshop:job_detail' job.job_no %}"
                     class="act-btn act-view" title="View Job">
                    <i class="bi bi-eye"></i>
                  </a>

                  {% if job.status == "draft" or job.status == "in_progress" %}
                  <a href="{% url 'workshop:step1_vehicle' job.job_no %}"
                     class="act-btn act-edit" title="Edit Vehicle / Job">
                    <i class="bi bi-pencil"></i>
                  </a>
                  <a href="{% url 'workshop:step2_services' job.job_no %}"
                     class="act-btn" title="Services"
                     style="color:var(--c-purple);border-color:rgba(88,86,214,.3);">
                    <i class="bi bi-wrench"></i>
                  </a>
                  {% endif %}

                  {% if job.status == "in_progress" %}
                  <a href="{% url 'workshop:step3_parts' job.job_no %}"
                     class="act-btn act-parts" title="Stock Requisition">
                    <i class="bi bi-box-seam"></i>
                  </a>
                  {% endif %}
                  <a href="{% url 'workshop:print_jobcard' job.job_no %}" target="_blank" rel="noopener"
                     class="btn btn-sm btn-outline-dark" title="Print Job Card">
                    <i class="bi bi-file-earmark-text"></i> Job Card
                  </a>


<!-- 
                  {% if job.status == "parts_requested" %}
                  <a href="{% url 'workshop:stock_issuer_dashboard' %}?q={{ job.job_no }}"
                     class="act-btn act-pr" title="Open in Stock Issuer Dashboard">
                    <i class="bi bi-hourglass-split"></i>
                  </a>
                  {% endif %}

                  {% if job.status == "ready" %}
                  <a href="{% url 'workshop:step4_settlement' job.job_no %}"
                     class="act-btn act-settle" title="Cash Counter / Settlement">
                    <i class="bi bi-cash-stack"></i>
                  </a>
                  {% endif %}

                  {# Payment (invoiced credit/corporate/insurance) #}
                  {% if job.status == "invoiced" and job.billing_type in "credit,insurance,corporate" %}
                  <a href="{% url 'workshop:job_payment' job.job_no %}"
                     class="act-btn act-settle" title="Receive Payment">
                    <i class="bi bi-cash-coin"></i>
                  </a>
                  {% endif %}
 -->
                  {% if 'delete_job_card' in allowed_features %}
                  <button class="act-btn act-del" title="Delete Job"
                          onclick="confirmDelete({{ job.job_no }}, '{{ job.vehicle.reg_no|escapejs }}', '{{ job.status }}')">
                    <i class="bi bi-trash"></i>
                  </button>
                  {% endif %}

                </div>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="10">
                <div class="sf-empty">
                  <i class="bi bi-tools"></i>
                  <div class="fw-semibold text-muted mb-1">No jobs found</div>
                  <div class="text-muted small mb-3">Try adjusting your filters or date range</div>
                  <a href="{% url 'workshop:step1_new' %}" class="sf-btn sf-btn-primary" style="height:38px;">
                    <i class="bi bi-plus-lg"></i> Create First Job
                  </a>
                </div>
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</div>{# /container #}

{# ══ DELETE MODAL ════════════════════════════════════════════════════ #}
<div class="modal fade" id="deleteModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content border-0" style="border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.18);">
      <div class="modal-header border-0 pb-0 pt-3 px-4">
        <h6 class="modal-title text-danger fw-bold">
          <i class="bi bi-exclamation-triangle me-1"></i>Delete Job?
        </h6>
      </div>
      <div class="modal-body py-2 px-4">
        <p class="mb-1 small" id="deleteMsg"></p>
        <p class="mb-0 text-warning small d-none" id="deleteWarning">
          <i class="bi bi-exclamation-circle me-1"></i>
          Job is invoiced — deleting will reverse the invoice and all stock movements.
        </p>
      </div>
      <div class="modal-footer border-0 pt-1 px-4 pb-3 gap-2">
        <button type="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 fw-semibold px-3">Delete</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
// ── Today filter ──────────────────────────────────────────────────────
function filterToday(){
  const today = new Date().toISOString().split('T')[0];
  document.getElementById('dateFrom').value   = today;
  document.getElementById('dateTo').value     = today;
  document.getElementById('statusSelect').value = 'all';
  document.getElementById('filterForm').submit();
}

// ── Filter by status (from stat card click) ───────────────────────────
function filterByStatus(status){
  document.getElementById('statusSelect').value = status;
  document.getElementById('filterForm').submit();
}

// ── Delete confirm ────────────────────────────────────────────────────
function confirmDelete(jobNo, regNo, status){
  const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
  document.getElementById('deleteMsg').innerHTML =
    `Delete Job <strong>#${jobNo}</strong> for <strong>${regNo}</strong>? This cannot be undone.`;
  const warn = document.getElementById('deleteWarning');
  warn.classList.toggle('d-none', status !== 'invoiced');
  document.getElementById('deleteForm').action = `/workshop/jobs/${jobNo}/delete/`;
  modal.show();
}
</script>
{% endblock %}