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

{% block title %}Ticket Reports{% endblock %}

{% block stylesheets %}
<style>
:root { --tr-blue: #01478f; --tr-green: #28a745; --tr-red: #dc3545; --tr-gold: #c69c00; }
.tr-page { padding: 10px 15px; background: #f0f1f3; min-height: calc(100vh - 48px); }

/* Header */
.tr-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; }
.tr-header h5 { margin: 0; font-weight: 700; color: var(--tr-blue); }

/* Tabs */
.tr-tabs { display: flex; gap: 0; margin-bottom: 10px; }
.tr-tab { padding: 8px 20px; font-size: 0.82rem; font-weight: 700; cursor: pointer; border: 1px solid #ccc; background: #fff; color: #555; transition: all 0.15s; }
.tr-tab:first-child { border-radius: 4px 0 0 4px; }
.tr-tab:last-child { border-radius: 0 4px 4px 0; }
.tr-tab.active { background: var(--tr-blue); color: #fff; border-color: var(--tr-blue); }
.tr-tab:hover:not(.active) { background: #f0f5fa; }

/* Filters */
.tr-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff; padding: 8px 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 10px; }
.tr-filters input,.tr-filters select { height: 32px; font-size: 0.8rem; border: 1px solid #ccc; border-radius: 3px; padding: 2px 8px; }
.tr-filters .btn { height: 32px; font-size: 0.8rem; padding: 0 12px; }

/* Summary Cards */
.tr-cards { display: flex; gap: 10px; margin-bottom: 10px; }
.tr-card { flex: 1; background: #fff; border-radius: 4px; padding: 12px 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-left: 4px solid var(--tr-blue); }
.tr-card.green { border-left-color: var(--tr-green); }
.tr-card.red { border-left-color: var(--tr-red); }
.tr-card.gold { border-left-color: var(--tr-gold); }
.tr-card .card-label { font-size: 0.68rem; font-weight: 600; color: #888; text-transform: uppercase; }
.tr-card .card-value { font-size: 1.3rem; font-weight: 700; color: #222; }
.tr-card .card-sub { font-size: 0.72rem; color: #888; }

/* Table */
.tr-table-wrap { background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tr-table th { background: var(--tr-blue); color: #fff; padding: 8px 10px; font-weight: 700; text-align: left; white-space: nowrap; font-size: 0.72rem; text-transform: uppercase; }
.tr-table td { padding: 6px 10px; border-bottom: 1px solid #eee; white-space: nowrap; }
.tr-table tr:hover { background: #f0f7ff; }
.tr-table .text-right { text-align: right; }
.tr-table .text-green { color: var(--tr-green); font-weight: 600; }
.tr-table .text-red { color: var(--tr-red); font-weight: 600; }
.tr-table .text-blue { color: var(--tr-blue); font-weight: 700; }
.tr-table tfoot td { font-weight: 700; background: #f0f5fa; border-top: 2px solid var(--tr-blue); }

/* Print */
@media print {
  .no-print { display: none !important; }
  .tr-page { padding: 0; }
  .tr-card { border: 1px solid #ccc; box-shadow: none; }
  .tr-table-wrap { box-shadow: none; }
}
</style>
{% endblock %}

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

  <!-- Header -->
  <div class="tr-header no-print">
    <h5><i class="fas fa-chart-bar mr-2"></i>Ticket Invoice Reports</h5>
    <div>
      <button class="btn btn-sm btn-outline-primary" onclick="window.print()"><i class="fas fa-print mr-1"></i>Print</button>
      <button class="btn btn-sm btn-outline-success" id="btnExport"><i class="fas fa-file-excel mr-1"></i>Export</button>
      <a href="{% url 'ticket:ticket_invoice' %}" class="btn btn-sm btn-primary ml-1"><i class="fas fa-plus mr-1"></i>New Invoice</a>
    </div>
  </div>

  <!-- Tabs -->
  <div class="tr-tabs no-print">
    <div class="tr-tab active" data-tab="daily">Daily Summary</div>
    <div class="tr-tab" data-tab="monthly">Monthly Summary</div>
    <div class="tr-tab" data-tab="commission">Commission Report</div>
    <div class="tr-tab" data-tab="agent">Agent/Airline Report</div>
    <div class="tr-tab" data-tab="client">Client Report</div>
  </div>

  <!-- Filters -->
  <div class="tr-filters no-print">
    <label style="font-size:0.75rem;font-weight:600;">From:</label>
    <input type="date" id="dateFrom" value="{{ today }}">
    <label style="font-size:0.75rem;font-weight:600;">To:</label>
    <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>
    <select id="categoryFilter"><option value="">All Airlines</option>
      <option value="AIRBLUE ID">AIRBLUE ID</option><option value="PIA">PIA</option>
      <option value="SAUDIA">SAUDIA</option><option value="EMIRATES">EMIRATES</option>
      <option value="QATAR">QATAR</option><option value="ETIHAD">ETIHAD</option>
      <option value="TURKISH">TURKISH</option><option value="FLYDUBAI">FLYDUBAI</option>
    </select>
    <button class="btn btn-primary" id="btnSearch"><i class="fas fa-search mr-1"></i>Generate</button>
  </div>

  <!-- Summary Cards -->
  <div class="tr-cards" id="summaryCards">
    <div class="tr-card"><div class="card-label">Total Invoices</div><div class="card-value" id="cardCount">0</div><div class="card-sub">Issued + Refunded</div></div>
    <div class="tr-card green"><div class="card-label">Total Receivable</div><div class="card-value" id="cardRecv">0.00</div><div class="card-sub">Client receivables</div></div>
    <div class="tr-card red"><div class="card-label">Total Payable</div><div class="card-value" id="cardPay">0.00</div><div class="card-sub">Airline payables</div></div>
    <div class="tr-card gold"><div class="card-label">Total Income</div><div class="card-value" id="cardIncome">0.00</div><div class="card-sub">Commission + PSF</div></div>
    <div class="tr-card" style="border-left-color:#6f42c1;"><div class="card-label">Commission</div><div class="card-value" id="cardComm">0.00</div><div class="card-sub">Airline commission</div></div>
    <div class="tr-card" style="border-left-color:#17a2b8;"><div class="card-label">PSF</div><div class="card-value" id="cardPSF">0.00</div><div class="card-sub">Service fees</div></div>
  </div>

  <!-- Report Table -->
  <div class="tr-table-wrap">
    <table class="tr-table">
      <thead id="reportHead"></thead>
      <tbody id="reportBody"><tr><td colspan="10" class="text-center text-muted p-3">Click "Generate" to load report</td></tr></tbody>
      <tfoot id="reportFoot"></tfoot>
    </table>
  </div>

</div>
{% endblock %}

{% block javascripts %}
<script>
(function(){
'use strict';
var API_REPORT = "{% url 'ticket:api_ticket_report' %}";
var activeTab = 'daily';

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

// Tab switching
$('.tr-tab').on('click',function(){
  $('.tr-tab').removeClass('active');
  $(this).addClass('active');
  activeTab = $(this).data('tab');
  loadReport();
});

$('#btnSearch').on('click', loadReport);

function loadReport(){
  var params = {
    report_type: activeTab,
    date_from: $('#dateFrom').val(),
    date_to: $('#dateTo').val(),
    status: $('#statusFilter').val(),
    category: $('#categoryFilter').val(),
  };

  $('#reportBody').html('<tr><td colspan="12" class="text-center p-3"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>');
  $('#reportFoot').html('');

  $.getJSON(API_REPORT, params).done(function(r){
    if(!r.ok){ $('#reportBody').html('<tr><td colspan="12" class="text-center text-danger">Error: '+(r.error||'Unknown')+'</td></tr>'); return; }

    // Update cards
    var s = r.summary || {};
    $('#cardCount').text(s.total_count || 0);
    $('#cardRecv').text(fmt(s.total_receivable));
    $('#cardPay').text(fmt(s.total_payable));
    $('#cardIncome').text(fmt(s.total_income));
    $('#cardComm').text(fmt(s.total_commission));
    $('#cardPSF').text(fmt(s.total_psf));

    // Render table based on tab
    if(activeTab === 'daily') renderDaily(r.rows);
    else if(activeTab === 'monthly') renderMonthly(r.rows);
    else if(activeTab === 'commission') renderCommission(r.rows);
    else if(activeTab === 'agent') renderAgent(r.rows);
    else if(activeTab === 'client') renderClient(r.rows);
  });
}

function renderDaily(rows){
  $('#reportHead').html('<tr><th>Date</th><th>Invoices</th><th>Issued</th><th>Refunded</th><th class="text-right">Receivable</th><th class="text-right">Payable</th><th class="text-right">Commission</th><th class="text-right">PSF</th><th class="text-right">Income</th></tr>');
  if(!rows||!rows.length){ noData(); return; }
  var html='',tRecv=0,tPay=0,tComm=0,tPSF=0,tIncome=0;
  rows.forEach(function(r){
    tRecv+=r.receivable;tPay+=r.payable;tComm+=r.commission;tPSF+=r.psf;tIncome+=r.income;
    html+='<tr><td><strong>'+r.date+'</strong></td><td>'+r.count+'</td><td>'+r.issued+'</td><td>'+r.refunded+'</td><td class="text-right">'+fmt(r.receivable)+'</td><td class="text-right">'+fmt(r.payable)+'</td><td class="text-right text-green">'+fmt(r.commission)+'</td><td class="text-right text-green">'+fmt(r.psf)+'</td><td class="text-right text-blue">'+fmt(r.income)+'</td></tr>';
  });
  $('#reportBody').html(html);
  $('#reportFoot').html('<tr><td><strong>Total</strong></td><td colspan="3"></td><td class="text-right">'+fmt(tRecv)+'</td><td class="text-right">'+fmt(tPay)+'</td><td class="text-right">'+fmt(tComm)+'</td><td class="text-right">'+fmt(tPSF)+'</td><td class="text-right">'+fmt(tIncome)+'</td></tr>');
}

function renderMonthly(rows){
  $('#reportHead').html('<tr><th>Month</th><th>Invoices</th><th>Issued</th><th>Refunded</th><th class="text-right">Receivable</th><th class="text-right">Payable</th><th class="text-right">Commission</th><th class="text-right">PSF</th><th class="text-right">Income</th></tr>');
  if(!rows||!rows.length){ noData(); return; }
  var html='',tRecv=0,tPay=0,tComm=0,tPSF=0,tIncome=0;
  rows.forEach(function(r){
    tRecv+=r.receivable;tPay+=r.payable;tComm+=r.commission;tPSF+=r.psf;tIncome+=r.income;
    html+='<tr><td><strong>'+r.month+'</strong></td><td>'+r.count+'</td><td>'+r.issued+'</td><td>'+r.refunded+'</td><td class="text-right">'+fmt(r.receivable)+'</td><td class="text-right">'+fmt(r.payable)+'</td><td class="text-right text-green">'+fmt(r.commission)+'</td><td class="text-right text-green">'+fmt(r.psf)+'</td><td class="text-right text-blue">'+fmt(r.income)+'</td></tr>';
  });
  $('#reportBody').html(html);
  $('#reportFoot').html('<tr><td><strong>Total</strong></td><td colspan="3"></td><td class="text-right">'+fmt(tRecv)+'</td><td class="text-right">'+fmt(tPay)+'</td><td class="text-right">'+fmt(tComm)+'</td><td class="text-right">'+fmt(tPSF)+'</td><td class="text-right">'+fmt(tIncome)+'</td></tr>');
}

function renderCommission(rows){
  $('#reportHead').html('<tr><th>Folder#</th><th>Date</th><th>Airline</th><th>Client</th><th>Ticket#</th><th>Pax Name</th><th class="text-right">IATA Fare</th><th class="text-right">Com%</th><th class="text-right">Commission</th><th class="text-right">PSF</th><th class="text-right">Total Income</th></tr>');
  if(!rows||!rows.length){ noData(); return; }
  var html='',tComm=0,tPSF=0,tIncome=0;
  rows.forEach(function(r){
    tComm+=r.commission;tPSF+=r.psf;tIncome+=r.income;
    html+='<tr><td><a href="/ticket/'+r.folder_no+'/">'+r.folder_no+'</a></td><td>'+r.date+'</td><td>'+r.airline+'</td><td>'+r.client+'</td><td>'+r.ticket_no+'</td><td>'+r.pax_name+'</td><td class="text-right">'+fmt(r.iata_fare)+'</td><td class="text-right">'+r.com_pct+'%</td><td class="text-right text-green">'+fmt(r.commission)+'</td><td class="text-right text-green">'+fmt(r.psf)+'</td><td class="text-right text-blue">'+fmt(r.income)+'</td></tr>';
  });
  $('#reportBody').html(html);
  $('#reportFoot').html('<tr><td colspan="8"><strong>Total</strong></td><td class="text-right">'+fmt(tComm)+'</td><td class="text-right">'+fmt(tPSF)+'</td><td class="text-right">'+fmt(tIncome)+'</td></tr>');
}

function renderAgent(rows){
  $('#reportHead').html('<tr><th>Agent/Airline</th><th>Account#</th><th>Invoices</th><th class="text-right">Total Payable</th><th class="text-right">Commission Paid</th><th class="text-right">Net Payable</th></tr>');
  if(!rows||!rows.length){ noData(); return; }
  var html='',tPay=0,tComm=0,tNet=0;
  rows.forEach(function(r){
    tPay+=r.total_payable;tComm+=r.commission;tNet+=r.net_payable;
    html+='<tr><td><strong>'+r.agent_name+'</strong></td><td>'+r.agent_account+'</td><td>'+r.count+'</td><td class="text-right">'+fmt(r.total_payable)+'</td><td class="text-right text-green">'+fmt(r.commission)+'</td><td class="text-right text-red">'+fmt(r.net_payable)+'</td></tr>';
  });
  $('#reportBody').html(html);
  $('#reportFoot').html('<tr><td colspan="3"><strong>Total</strong></td><td class="text-right">'+fmt(tPay)+'</td><td class="text-right">'+fmt(tComm)+'</td><td class="text-right">'+fmt(tNet)+'</td></tr>');
}

function renderClient(rows){
  $('#reportHead').html('<tr><th>Client</th><th>Account#</th><th>Invoices</th><th class="text-right">Total Receivable</th><th class="text-right">Cash Received</th><th class="text-right">Balance Due</th></tr>');
  if(!rows||!rows.length){ noData(); return; }
  var html='',tRecv=0,tCash=0,tDue=0;
  rows.forEach(function(r){
    tRecv+=r.total_receivable;tCash+=r.cash_received;tDue+=r.balance_due;
    html+='<tr><td><strong>'+r.client_name+'</strong></td><td>'+r.client_account+'</td><td>'+r.count+'</td><td class="text-right">'+fmt(r.total_receivable)+'</td><td class="text-right text-green">'+fmt(r.cash_received)+'</td><td class="text-right '+(r.balance_due>0?'text-red':'')+'">'+fmt(r.balance_due)+'</td></tr>';
  });
  $('#reportBody').html(html);
  $('#reportFoot').html('<tr><td colspan="3"><strong>Total</strong></td><td class="text-right">'+fmt(tRecv)+'</td><td class="text-right">'+fmt(tCash)+'</td><td class="text-right">'+fmt(tDue)+'</td></tr>');
}

function noData(){ $('#reportBody').html('<tr><td colspan="12" class="text-center text-muted p-3">No data found for selected filters</td></tr>'); }

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