{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Payment — Job #{{ job.job_no }}{% endblock %}
{% block stylesheets %}
<style>
:root{--sf-radius:12px;--sf-input-radius:8px;--sf-bg:#f2f2f7;
  --sf-card-bg:#fff;--sf-border:#d1d1d6;--sf-accent:#007aff;
  --sf-text:#1c1c1e;--sf-subtext:#6e6e73;--sf-shadow:0 2px 12px rgba(0,0,0,.08);}
body{background:var(--sf-bg)!important;}
.wf-card{background:var(--sf-card-bg);border-radius:var(--sf-radius);
  box-shadow:var(--sf-shadow);margin-bottom:1.2rem;overflow:hidden;}
.wf-card-header{background:rgba(0,0,0,.025);padding:.65rem 1.2rem;
  border-bottom:1px solid var(--sf-border);font-size:.82rem;font-weight:600;
  color:var(--sf-subtext);letter-spacing:.04em;text-transform:uppercase;}
.wf-card-body{padding:1.1rem 1.2rem;}
.wf-label{font-size:.78rem;font-weight:600;color:var(--sf-subtext);margin-bottom:4px;display:block;}
.wf-input{border:1px solid var(--sf-border);border-radius:var(--sf-input-radius)!important;
  font-size:.88rem;color:var(--sf-text);padding:.45rem .75rem;background:#fff;
  width:100%;transition:border-color .15s,box-shadow .15s;outline:none;height:38px;}
.wf-input:focus{border-color:var(--sf-accent);box-shadow:0 0 0 3px rgba(0,122,255,.12);}
.sf-stat{text-align:center;padding:.6rem;border-radius:10px;}
.sf-stat .val{font-size:1.2rem;font-weight:700;}
.sf-stat .lbl{font-size:.72rem;color:var(--sf-subtext);margin-top:2px;}
.pmt-row{border:1px solid var(--sf-border);border-radius:10px;
  padding:.65rem 1rem;margin-bottom:.6rem;font-size:.84rem;
  transition:box-shadow .15s;background:#fff;}
.pmt-row:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid px-4 py-3" style="max-width:900px;">
  {% for m in messages %}
  <div class="alert alert-{{ m.tags }} alert-dismissible fade show border-0 shadow-sm">
    {{ m }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  {# Header #}
  <div class="wf-card" style="background:linear-gradient(135deg,#34c759,#30b0c7);color:#fff;border-radius:var(--sf-radius);">
    <div class="wf-card-body d-flex justify-content-between align-items-center">
      <div>
        <h5 class="mb-0 fw-bold">
          <i class="bi bi-cash-stack me-2"></i>
          Payment Receipt — Job #{{ job.job_no }}
        </h5>
        <small class="opacity-75">
          {{ job.vehicle.reg_no }} | {{ job.vehicle.make }} {{ job.vehicle.model }}
          | {{ job.get_billing_type_display }} | Inv #{{ job.invoice_no }}
        </small>
      </div>
      <a href="{% url 'workshop:job_detail' job.job_no %}" class="btn btn-sm" style="background:rgba(255,255,255,.2);color:#fff;border-radius:8px;">
        <i class="bi bi-arrow-left me-1"></i>Back
      </a>
    </div>
  </div>

  <div class="row g-3">
    {# LEFT: Summary + History #}
    <div class="col-md-5">
      {# Billing summary #}
      <div class="wf-card">
        <div class="wf-card-header"><i class="bi bi-receipt me-1"></i>Invoice Summary</div>
        <div class="wf-card-body">
          <div class="row g-2 mb-2">
            <div class="col-4">
              <div class="sf-stat" style="background:#fff8f8;border:1px solid #ffd0d0;">
                <div class="val text-danger">{{ total_billed|floatformat:0|intcomma }}</div>
                <div class="lbl">Total Billed</div>
              </div>
            </div>
            <div class="col-4">
              <div class="sf-stat" style="background:#f0fff4;border:1px solid #b2dfdb;">
                <div class="val text-success">{{ total_received|floatformat:0|intcomma }}</div>
                <div class="lbl">Received</div>
              </div>
            </div>
            <div class="col-4">
              <div class="sf-stat" style="background:#f0f4ff;border:1px solid #b0c4f8;">
                <div class="val text-primary">{{ outstanding|floatformat:0|intcomma }}</div>
                <div class="lbl">Outstanding</div>
              </div>
            </div>
          </div>

          {% if dep_per %}
          <div class="rounded p-2 mt-2" style="background:#fff9ec;border:1px solid #ffd280;font-size:.8rem;">
            <div class="fw-semibold mb-1" style="color:#885500;">
              <i class="bi bi-shield-check me-1"></i>Insurance Breakdown ({{ dep_per|floatformat:1 }}% customer share)
            </div>
            <div class="d-flex justify-content-between">
              <span class="text-muted">Customer's Portion</span>
              <strong>Rs. {{ customer_share|floatformat:0|intcomma }}</strong>
            </div>
            <div class="d-flex justify-content-between">
              <span class="text-muted">Insurance Company</span>
              <strong>Rs. {{ insurance_share|floatformat:0|intcomma }}</strong>
            </div>
          </div>
          {% endif %}

          <div class="mt-2 rounded p-2" style="background:#f5f5f5;font-size:.82rem;">
            <div class="text-muted">Billing Company</div>
            <div class="fw-semibold">{{ cust_name }}</div>
          </div>
        </div>
      </div>

      {# Payment history #}
      <div class="wf-card">
        <div class="wf-card-header"><i class="bi bi-clock-history me-1"></i>Payment History</div>
        <div class="wf-card-body" style="max-height:300px;overflow-y:auto;">
          {% if existing_payments %}
            {% for p in existing_payments %}
            <div class="pmt-row">
              <div class="d-flex justify-content-between align-items-start">
                <div>
                  <span class="fw-semibold">Rs. {{ p.amount_transaction|floatformat:0|intcomma }}</span>
                  <span class="text-muted small ms-2">Receipt #{{ p.description }}</span>
                </div>
                <div class="d-flex gap-1">
                  <a href="{% url 'workshop:job_payment_edit' p.payment_id %}"
                     class="btn btn-sm btn-outline-secondary py-0 px-2" title="Edit">
                    <i class="bi bi-pencil" style="font-size:.7rem;"></i>
                  </a>
                  <button class="btn btn-sm btn-outline-danger py-0 px-2" title="Delete"
                          onclick="if(confirm('Delete this payment?')) window.location='{% url 'workshop:job_payment_delete' p.payment_id %}'">
                    <i class="bi bi-trash" style="font-size:.7rem;"></i>
                  </button>
                </div>
              </div>
              <div class="text-muted small mt-1">
                {{ p.transaction_date|date:"d-M-Y" }} &nbsp;·&nbsp;
                {{ p.bill_title_descp|default:"Payment" }}
              </div>
            </div>
            {% endfor %}
          {% else %}
            <div class="text-center text-muted py-3 small">
              <i class="bi bi-inbox d-block mb-1 fs-4 opacity-25"></i>
              No payments recorded yet.
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    {# RIGHT: Add payment #}
    <div class="col-md-7">
      {% if outstanding > 0 %}
      <div class="wf-card">
        <div class="wf-card-header"><i class="bi bi-plus-circle me-1"></i>Record New Payment</div>
        <div class="wf-card-body">
          <form method="POST">
            {% csrf_token %}
            <div class="row g-3">
              <div class="col-12">
                <label class="wf-label">Amount Received <span class="text-danger">*</span></label>
                <div class="input-group">
                  <span class="input-group-text" style="border-radius:8px 0 0 8px;border-color:var(--sf-border);">Rs.</span>
                  <input type="number" name="amount" class="wf-input"
                         style="border-radius:0 8px 8px 0!important;"
                         value="{{ outstanding|floatformat:0 }}"
                         min="1" step="1" required>
                </div>
              </div>
              <div class="col-6">
                <label class="wf-label">Payment Mode</label>
                <select name="cash_type" class="wf-input" style="border-radius:var(--sf-input-radius)!important;" id="cashTypeSelect">
                  <option value="Cash">Cash</option>
                  <option value="Bank">Bank Transfer / Cheque</option>
                </select>
              </div>
              <div class="col-6">
                <label class="wf-label">Date</label>
                <input type="date" name="trx_date" class="wf-input" value="{{ today }}">
              </div>
              <div class="col-12" id="bankRow" style="display:none;">
                <label class="wf-label">Bank Account</label>
                <select name="bank_id" class="wf-input" style="border-radius:var(--sf-input-radius)!important;">
                  <option value="0">— Select Bank —</option>
                  {% for b in banks %}
                  <option value="{{ b.t_id }}">{{ b.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-12">
                <label class="wf-label">Remarks</label>
                <input type="text" name="remarks" class="wf-input"
                       placeholder="Optional payment note">
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-success w-100 fw-semibold" style="border-radius:var(--sf-input-radius);">
                  <i class="bi bi-check-circle me-1"></i>Record Payment
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      {% else %}
      <div class="wf-card">
        <div class="wf-card-body text-center py-4">
          <i class="bi bi-check-circle-fill text-success" style="font-size:2.5rem;"></i>
          <div class="fw-bold mt-2 fs-5">Fully Paid</div>
          <div class="text-muted small">All payments have been received for this job.</div>
        </div>
      </div>
      {% endif %}

      <a href="{% url 'workshop:company_ledger' %}?customer_id={{ job.customer_id }}&view=job"
         class="btn btn-outline-primary w-100 mt-1" style="border-radius:var(--sf-input-radius);">
        <i class="bi bi-journal-text me-1"></i>View Full Company Ledger
      </a>
    </div>
  </div>
</div>
{% endblock %}
{% block javascripts %}
<script>
document.getElementById('cashTypeSelect').addEventListener('change', function(){
  document.getElementById('bankRow').style.display = this.value === 'Bank' ? '' : 'none';
});
</script>
{% endblock %}