{# templates/sales/ticket_list.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Ticket Invoices{% endblock %}

{% block stylesheets %}
<style>
:root {
  --tl-blue: #01478f;
  --tl-green: #28a745;
  --tl-red: #dc3545;
}
.tl-page { padding: 10px 15px; background: #f0f1f3; min-height: calc(100vh - 48px); }
.tl-header {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; padding: 10px 15px; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 10px;
}
.tl-header h5 { margin: 0; font-weight: 700; color: var(--tl-blue); }
.tl-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-filters input, .tl-filters select {
  height: 32px; font-size: 0.8rem; border: 1px solid #ccc; border-radius: 3px; padding: 2px 8px;
}
.tl-filters .btn { height: 32px; font-size: 0.8rem; padding: 0 12px; }
.tl-table-wrap {
  background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow-x: auto;
}
.tl-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tl-table th {
  background: var(--tl-blue); color: #fff; padding: 8px 10px;
  font-weight: 700; text-align: left; white-space: nowrap; font-size: 0.72rem;
  text-transform: uppercase;
}
.tl-table td { padding: 6px 10px; border-bottom: 1px solid #eee; white-space: nowrap; }
.tl-table tr:hover { background: #f0f7ff; cursor: pointer; }
.tl-table .text-right { text-align: right; }
.tl-badge { padding: 2px 8px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; }
.tl-badge-issued { background: #d4edda; color: #155724; }
.tl-badge-refunded { background: #f8d7da; color: #721c24; }
.tl-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 15px; background: #fff; border-radius: 4px;
  margin-top: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tl-grand { font-size: 1rem; font-weight: 700; color: var(--tl-blue); }
</style>
{% endblock %}

{% block content %}
<div class="tl-page">

  <div class="tl-header">
    <h5><i class="fas fa-plane-departure mr-2"></i>Ticket Invoices</h5>
    <div class="tl-filters">
      <input type="date" id="dateFrom" value="{{ today }}">
      <input type="date" id="dateTo" value="{{ today }}">
      <select id="statusFilter">
        <option value="">All Status</option>
        <option value="ISSUED">ISSUED</option>
        <option value="REFUNDED">REFUNDED</option>
      </select>
      <input type="text" id="searchBox" placeholder="Search..." style="width:150px;">
      <button class="btn btn-primary" id="btnSearch"><i class="fas fa-search mr-1"></i>Search</button>
      <a href="{% url 'ticket:ticket_invoice' %}" class="btn btn-success"><i class="fas fa-plus mr-1"></i>New Invoice</a>

      <a href="{% url 'ticket:ticket_refund' %}" class="btn btn-sm btn-outline-danger ml-1">
        <i class="fas fa-undo mr-1"></i>New Refund
      </a>
    </div>
  </div>

  <div class="tl-table-wrap">
    <table class="tl-table">
      <thead>
        <tr>
          <th>Folder#</th>
          <th>Date</th>
          <th>Status</th>
          <th>Category</th>
          <th>Client</th>
          <th>Agent/Airline</th>
          <th class="text-right">Receivable</th>
          <th class="text-right">Payable</th>
          <th class="text-right">Income</th>
          <th class="text-right">Grand Total</th>
        </tr>
      </thead>
      <tbody id="listBody">
        <tr><td colspan="10" class="text-center text-muted p-3">Loading...</td></tr>
      </tbody>
    </table>
  </div>

  <div class="tl-footer">
    <span id="countInfo">0 invoices</span>
    <span class="tl-grand">Grand Total: <span id="grandTotal">0.00</span></span>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script>
(function(){
  'use strict';
  const API_LIST = "{% url 'ticket:api_invoices_list' %}";

  function fmt(n){ return Number(n||0).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}); }

  function loadList(){
    var params = {
      date_from: $('#dateFrom').val(),
      date_to: $('#dateTo').val(),
      status: $('#statusFilter').val(),
      search: $('#searchBox').val(),
    };
    $.getJSON(API_LIST, params).done(function(r){
      if(!r.ok){ $('#listBody').html('<tr><td colspan="10" class="text-center text-danger">Error</td></tr>'); return; }
      if(!r.invoices.length){
        $('#listBody').html('<tr><td colspan="10" class="text-center text-muted p-3">No invoices found</td></tr>');
        $('#countInfo').text('0 invoices');
        $('#grandTotal').text('0.00');
        return;
      }
      var html='';
      r.invoices.forEach(function(inv){
        var bc = inv.status==='REFUNDED' ? 'tl-badge-refunded' : 'tl-badge-issued';
        html += '<tr onclick="window.location.href=\'/ticket/'+inv.folder_no+'/\'">' +
          '<td><strong>'+inv.folder_no+'</strong></td>' +
          '<td>'+inv.date+'</td>' +
          '<td><span class="tl-badge '+bc+'">'+inv.status+'</span></td>' +
          '<td>'+inv.category+'</td>' +
          '<td>'+inv.client+'</td>' +
          '<td>'+inv.agent+'</td>' +
          '<td class="text-right">'+fmt(inv.receivable)+'</td>' +
          '<td class="text-right">'+fmt(inv.payable)+'</td>' +
          '<td class="text-right">'+fmt(inv.income)+'</td>' +
          '<td class="text-right"><strong>'+fmt(inv.grand_total)+'</strong></td>' +
          '</tr>';
      });
      $('#listBody').html(html);
      $('#countInfo').text(r.invoices.length+' invoices');
      $('#grandTotal').text(fmt(r.grand_total));
    });
  }

  $('#btnSearch').on('click', loadList);
  $('#searchBox').on('keydown', function(e){ if(e.key==='Enter') loadList(); });

  $(function(){ loadList(); });
})();
</script>
{% endblock %}