{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Company Ledger{% if cust_name %} — {{ cust_name }}{% endif %}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
<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:1rem;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:1rem 1.2rem;}
.wf-input{border:1px solid var(--sf-border);border-radius:var(--sf-input-radius)!important;
  font-size:.86rem;color:var(--sf-text);padding:.42rem .75rem;background:#fff;
  width:100%;outline:none;height:36px;}
.wf-input:focus{border-color:var(--sf-accent);box-shadow:0 0 0 3px rgba(0,122,255,.12);}
.wf-label{font-size:.76rem;font-weight:600;color:var(--sf-subtext);margin-bottom:3px;display:block;}
.wf-btn{background:var(--sf-accent);color:#fff;border:none;border-radius:8px;
  font-size:.85rem;font-weight:600;padding:.42rem 1.2rem;cursor:pointer;}
.wf-btn:hover{background:#005ecb;}

/* Tabs */
.ldg-tab{display:inline-flex;background:#ebebeb;border-radius:10px;padding:3px;}
.ldg-tab button{border:none;background:transparent;border-radius:8px;
  font-size:.82rem;font-weight:500;padding:.3rem 1rem;color:var(--sf-subtext);transition:all .15s;}
.ldg-tab button.active{background:#fff;color:var(--sf-accent);font-weight:700;
  box-shadow:0 1px 6px rgba(0,0,0,.1);}

/* Stat cards */
.ledger-stat{border-radius:10px;padding:.8rem 1rem;text-align:center;}
.ledger-stat .val{font-size:1.15rem;font-weight:700;}
.ledger-stat .lbl{font-size:.72rem;margin-top:2px;opacity:.8;}

/* Ledger table */
.ldg-tbl{font-size:.82rem;width:100%;}
.ldg-tbl th{background:#f0f0f5;font-size:.76rem;font-weight:700;
  color:var(--sf-subtext);letter-spacing:.04em;padding:.5rem .7rem;
  text-transform:uppercase;border-bottom:2px solid var(--sf-border);}
.ldg-tbl td{padding:.45rem .7rem;border-bottom:1px solid #f0f0f0;vertical-align:middle;}
.ldg-tbl tr:hover td{background:#fafafe;}
.ldg-tbl tr.invoice-row td{background:#fff8f8;}
.ldg-tbl tr.pay-row td{background:#f5fff8;}
.ldg-tbl tr.total-row td{background:#f0f4ff;font-weight:700;font-size:.85rem;
  border-top:2px solid var(--sf-accent);}

/* Status badges */
.stbadge{padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:700;}
.stbadge.paid{background:#d1f8e8;color:#0a6634;}
.stbadge.partial{background:#fff3cd;color:#856404;}
.stbadge.outstanding{background:#fdecea;color:#b71c1c;}

/* Select2 */
.select2-container .select2-selection--single{border:1px solid var(--sf-border)!important;
  border-radius:var(--sf-input-radius)!important;height:36px!important;}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:34px!important;font-size:.86rem;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:34px!important;}
</style>
{% endblock %}

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

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

  {# ── Header ── #}
  <div class="wf-card" style="background:linear-gradient(135deg,#5856d6,#007aff);color:#fff;">
    <div class="wf-card-body d-flex justify-content-between align-items-center">
      <div>
        <h5 class="mb-0 fw-bold">
          <i class="bi bi-journal-text me-2"></i>
          Account Ledger{% if cust_name %} — {{ cust_name }}{% endif %}
        </h5>
        <small class="opacity-75">
          Corporate / Insurance / Credit company statements
        </small>
      </div>
      {% if cust_id %}
      <div class="d-flex gap-2 flex-wrap">
        <a href="?customer_id={{ cust_id }}&date_from={{ date_from }}&date_to={{ date_to }}&view={{ view_mode }}&all_dates={{ all_dates|yesno:'1,0' }}&format=pdf"
           class="btn btn-sm" style="background:rgba(255,255,255,.2);color:#fff;border-radius:8px;">
          <i class="bi bi-file-earmark-pdf me-1"></i>PDF
        </a>
        {% if has_openpyxl %}
        <a href="{% url 'workshop:company_ledger_excel' %}?customer_id={{ cust_id }}&date_from={{ date_from }}&date_to={{ date_to }}&view={{ view_mode }}&all_dates={{ all_dates|yesno:'1,0' }}"
           class="btn btn-sm" style="background:rgba(255,255,255,.2);color:#fff;border-radius:8px;">
          <i class="bi bi-file-earmark-excel me-1"></i>Excel
        </a>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>

  {# ── Filter bar ── #}
  <div class="wf-card">
    <div class="wf-card-body">
      <form method="GET" id="searchForm" class="row g-2 align-items-end">
        <input type="hidden" name="view" id="viewModeInput" value="{{ view_mode }}">

        {# Company Type Radio #}
        <div class="col-12 col-md-auto">
          <label class="wf-label">Company Type</label>
          <div class="btn-group btn-group-sm">
            <input type="radio" class="btn-check" name="cust_type" id="ct_all" value="all" {% if cust_type == 'all' %}checked{% endif %}>
            <label class="btn btn-outline-secondary" for="ct_all">All</label>
            <input type="radio" class="btn-check" name="cust_type" id="ct_ins" value="insurance" {% if cust_type == 'insurance' %}checked{% endif %}>
            <label class="btn btn-outline-warning" for="ct_ins"><i class="bi bi-shield-check me-1"></i>Insurance</label>
            <input type="radio" class="btn-check" name="cust_type" id="ct_corp" value="corporate" {% if cust_type == 'corporate' %}checked{% endif %}>
            <label class="btn btn-outline-primary" for="ct_corp"><i class="bi bi-briefcase me-1"></i>Corporate</label>
            <input type="radio" class="btn-check" name="cust_type" id="ct_cred" value="credit" {% if cust_type == 'credit' %}checked{% endif %}>
            <label class="btn btn-outline-info" for="ct_cred">Credit</label>
          </div>
        </div>

        {# Company search #}
        <div class="col-12 col-md-3">
          <label class="wf-label">Company / Customer</label>
          <input type="hidden" name="customer_id" id="custIdInput" value="{{ cust_id }}">
          <select id="ledgerCustSelect" style="width:100%" placeholder="Search company..."></select>
        </div>

        {# Date range #}
        <div class="col-6 col-md-2">
          <label class="wf-label">From</label>
          <input type="date" name="date_from" class="wf-input" value="{{ date_from }}" id="dateFromInput">
        </div>
        <div class="col-6 col-md-2">
          <label class="wf-label">To</label>
          <input type="date" name="date_to" class="wf-input" value="{{ date_to }}" id="dateToInput">
        </div>

        {# Buttons #}
        <div class="col-auto d-flex gap-2 flex-wrap">
          <button type="submit" class="wf-btn">
            <i class="bi bi-search me-1"></i>Search
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary" onclick="searchAllDates()">
            Complete Ledger
          </button>
        </div>
      </form>
    </div>
  </div>

  {% if cust_id and cust_obj %}

  {# ── Stats ── #}
  <div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
      <div class="ledger-stat" style="background:linear-gradient(135deg,#fdecea,#ffddd8);color:#c00;">
        <div class="val">{{ total_billed|floatformat:0|intcomma }}</div>
        <div class="lbl">Total Billed</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="ledger-stat" style="background:linear-gradient(135deg,#d1f8e8,#b8f0d4);color:#0a6634;">
        <div class="val">{{ total_received|floatformat:0|intcomma }}</div>
        <div class="lbl">Total Received</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="ledger-stat" style="background:linear-gradient(135deg,#fff3cd,#ffe69c);color:#856404;">
        <div class="val">{{ total_outstanding|floatformat:0|intcomma }}</div>
        <div class="lbl">Outstanding</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="ledger-stat" style="background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#3730a3;">
        <div class="val">{{ job_rows|length }}</div>
        <div class="lbl">Total Jobs</div>
      </div>
    </div>
  </div>

  {# ── View tabs ── #}
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div class="ldg-tab">
      <button onclick="switchView('txn')" id="tabTxn" class="{% if view_mode == 'txn' %}active{% endif %}">
        <i class="bi bi-list-ul me-1"></i>Transaction-wise
      </button>
      <button onclick="switchView('job')" id="tabJob" class="{% if view_mode == 'job' %}active{% endif %}">
        <i class="bi bi-grid-3x3-gap me-1"></i>Job-wise
      </button>
    </div>
    <small class="text-muted">
      {% if all_dates %}All dates{% else %}{{ date_from }} to {{ date_to }}{% endif %}
    </small>
  </div>

  <div id="viewTxn" {% if view_mode != 'txn' %}style="display:none;"{% endif %}>
    <div class="wf-card">
      <div class="wf-card-header">
        <i class="bi bi-arrow-left-right me-1"></i>Transaction Ledger — {{ cust_name }}
      </div>
      <div class="table-responsive">
        <table class="ldg-tbl">
          <thead>
            <tr>
              <th style="width:100px;">Date</th>
              <th>Reference</th>
              <th>Vehicle</th>
              <th class="text-end">Debit (Billed)</th>
              <th class="text-end">Credit (Received)</th>
              <th class="text-end">Balance</th>
              <th class="text-center" style="width:80px;">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for row in txn_rows %}
            <tr class="{% if row.type == 'invoice' %}invoice-row{% else %}pay-row{% endif %}">
              <td>{{ row.date|date:"d-M-y" }}</td>
              <td>
                {{ row.ref }}
                {% if row.type == 'invoice' and row.job %}
                <div class="text-muted" style="font-size:.72rem;">
                  {{ row.job.vehicle.make }} {{ row.job.vehicle.model }}
                </div>
                {% endif %}
              </td>
              <td class="fw-semibold">{{ row.vehicle|default:"" }}</td>
              <td class="text-end {% if row.debit %}text-danger fw-semibold{% else %}text-muted{% endif %}">
                {% if row.debit %}{{ row.debit|floatformat:0|intcomma }}{% else %}—{% endif %}
              </td>
              <td class="text-end {% if row.credit %}text-success fw-semibold{% else %}text-muted{% endif %}">
                {% if row.credit %}{{ row.credit|floatformat:0|intcomma }}{% else %}—{% endif %}
              </td>
              <td class="text-end fw-bold {% if row.balance > 0 %}text-danger{% elif row.balance < 0 %}text-success{% endif %}">
                {{ row.balance|floatformat:0|intcomma }}
              </td>
              <td class="text-center">
                {% if row.type == 'invoice' and row.job %}
                <a href="{% url 'workshop:job_detail' row.job.job_no %}"
                   class="btn btn-xs btn-outline-primary py-0 px-2" style="font-size:.72rem;">
                  <i class="bi bi-eye"></i> View
                </a>
                {% elif row.type == 'payment' and row.pay %}
                <a href="{% url 'workshop:job_payment_edit' row.pay.payment_id %}"
                   class="btn btn-xs btn-outline-secondary py-0 px-2 me-1" style="font-size:.72rem;"
                   title="Edit">
                  <i class="bi bi-pencil"></i>
                </a>
                {% endif %}
              </td>
            </tr>
            {% empty %}
            <tr><td colspan="7" class="text-center text-muted py-4">No transactions in this period.</td></tr>
            {% endfor %}
          </tbody>
          {% if txn_rows %}
          <tfoot>
            <tr class="total-row">
              <td colspan="3">CLOSING BALANCE</td>
              <td class="text-end">{{ total_billed|floatformat:0|intcomma }}</td>
              <td class="text-end">{{ total_received|floatformat:0|intcomma }}</td>
              <td class="text-end {% if total_outstanding > 0 %}text-danger{% else %}text-success{% endif %}">
                {{ total_outstanding|floatformat:0|intcomma }}
              </td>
              <td></td>
            </tr>
          </tfoot>
          {% endif %}
        </table>
      </div>
    </div>
  </div>

  
  <div id="viewJob" {% if view_mode != 'job' %}style="display:none;"{% endif %}>
    <div class="wf-card">
      <div class="wf-card-header">
        <i class="bi bi-tools me-1"></i>Job-wise Ledger — {{ cust_name }}
      </div>
      <div class="table-responsive">
        <table class="ldg-tbl">
          <thead>
            <tr>
              <th>Job #</th>
              <th>Date</th>
              <th>Vehicle</th>
              <th>Invoice #</th>
              <th class="text-end">Billed</th>
              <th class="text-end">Cust.Share</th>
              <th class="text-end">Ins.Share</th>
              <th class="text-end">Received</th>
              <th class="text-end">Outstanding</th>
              <th class="text-center">Status</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for row in job_rows %}
            <tr>
              <td class="fw-bold">#{{ row.job.job_no }}</td>
              <td>{{ row.job.job_date|date:"d-M-y" }}</td>
              <td>
                <span class="fw-semibold">{{ row.job.vehicle.reg_no }}</span>
                <div class="text-muted" style="font-size:.72rem;">
                  {{ row.job.vehicle.make }} {{ row.job.vehicle.model }}
                </div>
              </td>
              <td>{{ row.job.invoice_no|default:"—" }}</td>
              <td class="text-end fw-semibold text-danger">{{ row.billed|floatformat:0|intcomma }}</td>
              <td class="text-end">
                {% if row.dep_per %}
                  {{ row.cust_share|floatformat:0|intcomma }}
                  <div class="text-muted" style="font-size:.7rem;">{{ row.dep_per|floatformat:1 }}%</div>
                {% else %}—{% endif %}
              </td>
              <td class="text-end">
                {% if row.dep_per %}{{ row.ins_share|floatformat:0|intcomma }}{% else %}—{% endif %}
              </td>
              <td class="text-end text-success fw-semibold">{{ row.paid|floatformat:0|intcomma }}</td>
              <td class="text-end {% if row.outstanding > 0 %}text-danger fw-bold{% else %}text-success{% endif %}">
                {{ row.outstanding|floatformat:0|intcomma }}
              </td>
              <td class="text-center">
                <span class="stbadge {{ row.status|lower }}">{{ row.status }}</span>
              </td>
              <td class="text-center">
                <a href="{% url 'workshop:job_detail' row.job.job_no %}"
                   class="btn btn-sm btn-outline-primary py-0 px-2" title="View Job"
                   style="font-size:.72rem;">
                  <i class="bi bi-eye me-1"></i>View
                </a>
                {% if row.outstanding > 0 %}
                <a href="{% url 'workshop:job_payment' row.job.job_no %}"
                   class="btn btn-sm btn-outline-success py-0 px-2 ms-1"
                   style="font-size:.72rem;" title="Receive Payment">
                  <i class="bi bi-cash-coin me-1"></i>Pay
                </a>
                {% endif %}
              </td>
            </tr>

            {# Sub-rows: payments for this job #}
            {% if row.payments %}
            {% for p in row.payments %}
            <tr class="pay-row">
              <td colspan="3" class="text-muted ps-4" style="font-size:.75rem;">
                <i class="bi bi-arrow-return-right me-1"></i>
                Receipt #{{ p.description }} — {{ p.transaction_date|date:"d-M-y" }}
              </td>
              <td></td>
              <td></td><td></td><td></td>
              <td class="text-end text-success" style="font-size:.78rem;">
                {{ p.amount_transaction|floatformat:0|intcomma }}
              </td>
              <td></td><td></td>
              <td class="text-center">
                <a href="{% url 'workshop:job_payment_edit' p.payment_id %}"
                   class="btn btn-sm btn-outline-secondary py-0 px-1" style="font-size:.65rem;">
                  <i class="bi bi-pencil"></i>
                </a>
              </td>
            </tr>
            {% endfor %}
            {% endif %}
            {% empty %}
            <tr>
              <td colspan="11" class="text-center text-muted py-4">No jobs in this period.</td>
            </tr>
            {% endfor %}
          </tbody>
          {% if job_rows %}
          <tfoot>
            <tr class="total-row">
              <td colspan="4">TOTAL</td>
              <td class="text-end text-danger">{{ total_billed|floatformat:0|intcomma }}</td>
              <td></td><td></td>
              <td class="text-end text-success">{{ total_received|floatformat:0|intcomma }}</td>
              <td class="text-end {% if total_outstanding > 0 %}text-danger{% else %}text-success{% endif %}">
                {{ total_outstanding|floatformat:0|intcomma }}
              </td>
              <td></td><td></td>
            </tr>
          </tfoot>
          {% endif %}
        </table>
      </div>
    </div>
  </div>

  {% elif cust_id == 0 %}
  {# No company selected yet #}
  <div class="wf-card">
    <div class="wf-card-body text-center py-5">
      <i class="bi bi-building display-4 opacity-25 d-block mb-3"></i>
      <h6 class="text-muted">Search for a company above to view their ledger</h6>
      <p class="text-muted small">Select company type, search by name, then click Search.</p>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
const AJAX_CUST_URL = "{% url 'workshop:ajax_customers' %}";
const INIT_CUST_ID  = "{{ cust_id }}";
const INIT_CUST_NAME= "{{ cust_name|escapejs }}";

function switchView(mode){
  document.getElementById('viewModeInput').value = mode;
  document.getElementById('viewTxn').style.display = mode === 'txn' ? '' : 'none';
  document.getElementById('viewJob').style.display = mode === 'job' ? '' : 'none';
  document.getElementById('tabTxn').classList.toggle('active', mode === 'txn');
  document.getElementById('tabJob').classList.toggle('active', mode === 'job');
}

function searchAllDates(){
  document.getElementById('dateFromInput').value = '';
  document.getElementById('dateToInput').value   = '';
  // add all_dates=1
  const form = document.getElementById('searchForm');
  let allField = form.querySelector('input[name="all_dates"]');
  if(!allField){
    allField = document.createElement('input');
    allField.type  = 'hidden';
    allField.name  = 'all_dates';
    form.appendChild(allField);
  }
  allField.value = '1';
  form.submit();
}

$(document).ready(function(){
  // Get current company type for filter
  function getCustType(){
    const checked = document.querySelector('input[name="cust_type"]:checked');
    return checked ? checked.value : 'all';
  }

  function initSelect(){
    $('#ledgerCustSelect').select2({
      ajax:{
        url: AJAX_CUST_URL,
        dataType:'json',
        delay:250,
        data:function(p){ return { q: p.term, type: getCustType() }; },
        processResults:function(data){ return { results: data.results }; },
        cache:true,
      },
      placeholder:'Search company or customer name...',
      minimumInputLength:2,
      width:'100%',
      templateResult:function(p){
        if(p.loading) return p.text;
        const bal = parseFloat(p.balance||0);
        return $(`<div class="d-flex justify-content-between">
          <span>${p.text}</span>
          <span class="text-${bal>0?'danger':'muted'} small ms-2">${bal!==0?'Bal: '+Math.abs(bal).toLocaleString():''}</span>
        </div>`);
      },
    });

    $('#ledgerCustSelect').on('select2:select', function(e){
      document.getElementById('custIdInput').value = e.params.data.id;
    });

    // Restore previous selection
    if(INIT_CUST_ID && INIT_CUST_NAME){
      const opt = new Option(INIT_CUST_NAME, INIT_CUST_ID, true, true);
      $('#ledgerCustSelect').append(opt).trigger('change');
    }
  }

  initSelect();

  // Reinit on type change
  document.querySelectorAll('input[name="cust_type"]').forEach(r=>{
    r.addEventListener('change', function(){
      try{ $('#ledgerCustSelect').select2('destroy'); }catch(e){}
      initSelect();
    });
  });
});
</script>
{% endblock %}