{# templates/sales/ticket_refund_list.html #}
{% extends "pos/base.html" %}
{% load static %}
{% block title %}Refund Invoices{% endblock %}
{% block stylesheets %}
<style>
:root{--rb:#01478f;--rr:#dc3545;--rg:#28a745}
.rl-page{padding:10px 15px;background:#f0f1f3;min-height:calc(100vh - 48px)}
.rl-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,.06);margin-bottom:10px}
.rl-header h5{margin:0;font-weight:700;color:var(--rb)}
.rl-filters{display:flex;gap:8px;align-items:center;background:#fff;padding:8px 12px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:10px}
.rl-filters input{height:32px;font-size:.8rem;border:1px solid #ccc;border-radius:3px;padding:2px 8px}
.rl-filters .btn{height:32px;font-size:.8rem;padding:0 12px}
.rl-wrap{background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow-x:auto}
.rl-table{width:100%;border-collapse:collapse;font-size:.8rem}
.rl-table th{background:var(--rb);color:#fff;padding:8px 10px;font-weight:700;font-size:.72rem;text-transform:uppercase;text-align:left}
.rl-table td{padding:6px 10px;border-bottom:1px solid #eee;white-space:nowrap}
.rl-table tr:hover{background:#fff3f3;cursor:pointer}
.rl-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#fff;border-radius:4px;margin-top:8px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
</style>
{% endblock %}
{% block content %}
<div class="rl-page">
  <div class="rl-header">
    <h5><i class="fas fa-undo-alt mr-2"></i>Refund Invoices</h5>
    <div>
      <a href="{% url 'ticket:ticket_refund' %}" class="btn btn-sm btn-danger"><i class="fas fa-plus mr-1"></i>New Refund</a>
      <a href="{% url 'ticket:ticket_list' %}" class="btn btn-sm btn-outline-primary ml-2"><i class="fas fa-list mr-1"></i>Ticket Invoices</a>
    </div>
  </div>
  <div class="rl-filters">
    <input type="date" id="dateFrom" value="{{ today }}">
    <input type="date" id="dateTo" value="{{ today }}">
    <input type="text" id="searchBox" placeholder="Search client / folder#..." style="width:200px;">
    <button class="btn btn-primary" id="btnSearch"><i class="fas fa-search mr-1"></i>Search</button>
  </div>
  <div class="rl-wrap">
    <table class="rl-table">
      <thead><tr>
        <th>Refund#</th><th>Date</th><th>Client</th><th>Orig.Inv#</th>
        <th class="text-right">Pay to Client</th>
        <th class="text-right">Rfnd.Airline</th>
        <th class="text-right">PSF Income</th>
        <th class="text-right">Seg.Reversal</th>
      </tr></thead>
      <tbody id="listBody"><tr><td colspan="8" class="text-center text-muted p-3">Loading...</td></tr></tbody>
    </table>
  </div>
  <div class="rl-footer">
    <span id="countInfo" style="font-size:.8rem;">0 records</span>
  </div>
</div>
{% endblock %}
{% block javascripts %}
<script>
(function(){
var API_LIST = "{% url 'ticket:api_refund_list' %}";
function fmt(n){return Number(n||0).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2});}
function load(){
  var p={date_from:$('#dateFrom').val(),date_to:$('#dateTo').val(),search:$('#searchBox').val()};
  $.getJSON(API_LIST,p).done(function(r){
    if(!r.ok){$('#listBody').html('<tr><td colspan="8" class="text-danger text-center">Error</td></tr>');return;}
    var list=r.invoices||[];
    $('#countInfo').text(list.length+' record(s)');
    if(!list.length){$('#listBody').html('<tr><td colspan="8" class="text-center text-muted p-3">No refund invoices found.</td></tr>');return;}
    var h='';
    list.forEach(function(r){
      h+='<tr onclick="window.location.href=\'/ticket/refund/\'+'+r.folder_no+'+\'/\'">' +
        '<td><strong>'+r.folder_no+'</strong></td>' +
        '<td>'+r.date+'</td>' +
        '<td>'+r.client+'</td>' +
        '<td><a href="/ticket/'+r.original_fn+'/">#'+r.original_fn+'</a></td>' +
        '<td class="text-right" style="color:#dc3545;font-weight:700;">'+fmt(r.pay_to_client)+'</td>' +
        '<td class="text-right">'+fmt(r.refund_from_airline)+'</td>' +
        '<td class="text-right" style="color:#856404;font-weight:700;">'+fmt(r.psf_income)+'</td>' +
        '<td class="text-right">'+fmt(r.seg_reversal)+'</td>' +
        '</tr>';
    });
    $('#listBody').html(h);
  });
}
$('#btnSearch').on('click',load);
$('#searchBox').on('keydown',function(e){if(e.key==='Enter')load();});
$(function(){load();});
})();
</script>
{% endblock %}