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

{% block title %}Airline Short Codes{% endblock %}

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

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

.ac-toolbar { 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; }
.ac-toolbar input { height:32px; font-size:.8rem; border:1px solid #ccc; border-radius:3px; padding:2px 8px; }
.ac-toolbar .btn { height:32px; font-size:.8rem; padding:0 12px; }

.ac-table-wrap { background:#fff; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow-x:auto; }
.ac-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.ac-table th { background:var(--ac-blue); color:#fff; padding:9px 12px; font-weight:700; text-align:left; font-size:.73rem; text-transform:uppercase; white-space:nowrap; }
.ac-table td { padding:8px 12px; border-bottom:1px solid #eee; }
.ac-table tr:hover { background:#f0f7ff; }
.ac-table tfoot td { font-weight:700; background:#f0f5fa; border-top:2px solid var(--ac-blue); }
.ac-badge { display:inline-block; background:var(--ac-blue); color:#fff; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:3px; letter-spacing:.5px; }
.ac-com { font-weight:700; color:var(--ac-green); }

/* Modal */
.ac-modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1050; align-items:center; justify-content:center; }
.ac-modal-backdrop.show { display:flex; }
.ac-modal { background:#fff; border-radius:6px; width:420px; box-shadow:0 8px 30px rgba(0,0,0,.15); overflow:hidden; }
.ac-modal-header { background:var(--ac-blue); color:#fff; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; }
.ac-modal-header h6 { margin:0; font-weight:700; font-size:.9rem; }
.ac-modal-header .close-btn { background:none; border:none; color:#fff; font-size:1.2rem; cursor:pointer; line-height:1; padding:0; }
.ac-modal-body { padding:20px; }
.ac-form-group { margin-bottom:14px; }
.ac-form-group label { display:block; font-size:.72rem; font-weight:700; color:#555; text-transform:uppercase; margin-bottom:4px; }
.ac-form-group input { width:100%; height:34px; font-size:.82rem; border:1px solid #ccc; border-radius:3px; padding:4px 8px; }
.ac-form-group input:focus { border-color:var(--ac-blue); outline:none; box-shadow:0 0 0 2px rgba(1,71,143,.12); }
.ac-form-group small { color:#888; font-size:.7rem; }
.ac-modal-footer { padding:12px 16px; background:#f8f9fa; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid #eee; }
</style>
{% endblock %}

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

  <div class="ac-header">
    <h5><i class="fas fa-plane mr-2"></i>Airline Short Codes</h5>
    <div>
      <a href="{% url 'ticket:ticket_invoice' %}" class="btn btn-sm btn-outline-primary mr-2">
        <i class="fas fa-file-invoice mr-1"></i>New Ticket
      </a>
      <button class="btn btn-sm btn-success" id="btnNew">
        <i class="fas fa-plus mr-1"></i>Add Airline
      </button>
    </div>
  </div>

  <div class="ac-toolbar">
    <input type="text" id="searchInput" placeholder="Search by code or name..." style="width:250px;" autofocus>
    <button class="btn btn-primary" id="btnSearch"><i class="fas fa-search mr-1"></i>Search</button>
    <span class="text-muted ml-2" style="font-size:.8rem;" id="countInfo">Loading...</span>
  </div>

  <div class="ac-table-wrap">
    <table class="ac-table">
      <thead>
        <tr>
          <th style="width:60px;">#</th>
          <th style="width:130px;">Short Code</th>
          <th>Airline Name</th>
          <th style="width:150px;">Commission %</th>
          <th style="width:100px;">Actions</th>
        </tr>
      </thead>
      <tbody id="tableBody">
        <tr><td colspan="5" class="text-center text-muted p-4"><i class="fas fa-spinner fa-spin mr-2"></i>Loading...</td></tr>
      </tbody>
    </table>
  </div>

</div>

<!-- ADD / EDIT MODAL -->
<div class="ac-modal-backdrop" id="modalBackdrop">
  <div class="ac-modal">
    <div class="ac-modal-header">
      <h6 id="modalTitle"><i class="fas fa-plane mr-2"></i>Add Airline</h6>
      <button class="close-btn" id="btnCloseModal">&times;</button>
    </div>
    <div class="ac-modal-body">
      <input type="hidden" id="editId" value="0">
      <div class="ac-form-group">
        <label>Short Code <span class="text-danger">*</span></label>
        <input type="text" id="fldCode" placeholder="e.g.  673" maxlength="20">
        <small>Ticket prefix before first hyphen — e.g. ticket 673-1234-567890 → code is <strong>673</strong></small>
      </div>
      <div class="ac-form-group">
        <label>Airline Name <span class="text-danger">*</span></label>
        <input type="text" id="fldName" placeholder="e.g.  Pakistan International Airlines">
      </div>
      <div class="ac-form-group">
        <label>Default Commission %</label>
        <input type="number" id="fldCom" value="0" step="0.001" min="0" max="100" placeholder="e.g.  2.000">
        <small>Will auto-fill in the ticket invoice when this airline is detected</small>
      </div>
    </div>
    <div class="ac-modal-footer">
      <button class="btn btn-secondary btn-sm" id="btnCancel">Cancel</button>
      <button class="btn btn-success btn-sm" id="btnSaveModal"><i class="fas fa-save mr-1"></i>Save</button>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
(function(){
'use strict';

var API = {
  list:   "{% url 'ticket:api_airline_codes_list' %}",
  save:   "{% url 'ticket:api_airline_code_save' %}",
  del:    "/ticket/api/airlines/delete/",   // + pk + /
};
var csrf = '{{ csrf_token }}';

// ─── LOAD LIST ────────────────────────────────────────────────────

function loadList(){
  var q = $('#searchInput').val().trim();
  $('#tableBody').html('<tr><td colspan="5" class="text-center text-muted p-3"><i class="fas fa-spinner fa-spin"></i></td></tr>');

  $.getJSON(API.list, {q: q}).done(function(r){
    if(!r.ok){ showErr('Failed to load'); return; }
    var list = r.airlines || [];
    $('#countInfo').text(list.length + ' airline(s)');

    if(!list.length){
      $('#tableBody').html('<tr><td colspan="5" class="text-center text-muted p-3">No airlines found. Click "Add Airline" to get started.</td></tr>');
      return;
    }

    var html = '';
    list.forEach(function(ac, i){
      html += '<tr>' +
        '<td>'+(i+1)+'</td>' +
        '<td><span class="ac-badge">'+esc(ac.short_code)+'</span></td>' +
        '<td><strong>'+esc(ac.airline_name)+'</strong></td>' +
        '<td><span class="ac-com">'+Number(ac.commission_pct||0).toFixed(3)+'%</span></td>' +
        '<td>' +
          '<button class="btn btn-xs btn-outline-primary mr-1 btn-edit" ' +
            'data-id="'+ac.id+'" data-code="'+esc(ac.short_code)+'" ' +
            'data-name="'+esc(ac.airline_name)+'" data-com="'+ac.commission_pct+'" ' +
            'style="font-size:.72rem;padding:2px 7px;">' +
            '<i class="fas fa-edit"></i> Edit' +
          '</button>' +
          '<button class="btn btn-xs btn-outline-danger btn-del" data-id="'+ac.id+'" data-name="'+esc(ac.airline_name)+'" ' +
            'style="font-size:.72rem;padding:2px 7px;">' +
            '<i class="fas fa-trash"></i>' +
          '</button>' +
        '</td>' +
      '</tr>';
    });
    $('#tableBody').html(html);
  }).fail(function(){ showErr('Network error'); });
}

function esc(s){ return String(s||'').replace(/[&<>"']/g,function(c){return({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]);}); }
function showErr(msg){ Swal.fire('Error', msg, 'error'); }

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

// ─── OPEN MODAL ───────────────────────────────────────────────────
function openModal(id, code, name, com){
  $('#editId').val(id||0);
  $('#fldCode').val(code||'');
  $('#fldName').val(name||'');
  $('#fldCom').val(com||0);
  $('#modalTitle').html(id ? '<i class="fas fa-edit mr-2"></i>Edit Airline' : '<i class="fas fa-plus mr-2"></i>Add Airline');
  $('#modalBackdrop').addClass('show');
  setTimeout(function(){ $('#fldCode').focus().select(); }, 100);
}

function closeModal(){ $('#modalBackdrop').removeClass('show'); }

$('#btnNew').on('click', function(){ openModal(0,'','',0); });
$('#btnCloseModal,#btnCancel').on('click', closeModal);
$('#modalBackdrop').on('click', function(e){ if(e.target===this) closeModal(); });

// ─── EDIT CLICK ───────────────────────────────────────────────────
$(document).on('click','.btn-edit',function(){
  openModal(
    $(this).data('id'),
    $(this).data('code'),
    $(this).data('name'),
    $(this).data('com')
  );
});

// ─── DELETE CLICK ─────────────────────────────────────────────────
$(document).on('click','.btn-del',function(){
  var id   = $(this).data('id');
  var name = $(this).data('name');
  Swal.fire({
    title: 'Delete "'+name+'"?',
    text:  'This cannot be undone.',
    icon:  'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Delete',
  }).then(function(res){
    if(!res.isConfirmed) return;
    $.ajax({
      url:     API.del + id + '/',
      type:    'POST',
      headers: {'X-CSRFToken': csrf},
      success: function(r){
        if(r.ok){ Swal.fire({icon:'success',title:'Deleted!',text:r.message,timer:1200,showConfirmButton:false}); loadList(); }
        else     { showErr(r.error||'Failed'); }
      },
      error: function(){ showErr('Server error'); },
    });
  });
});

// ─── SAVE ─────────────────────────────────────────────────────────
$('#btnSaveModal').on('click', function(){
  var payload = {
    id:             parseInt($('#editId').val())||0,
    short_code:     $('#fldCode').val().trim(),
    airline_name:   $('#fldName').val().trim(),
    commission_pct: parseFloat($('#fldCom').val())||0,
  };
  if(!payload.short_code){ Swal.fire('Validation','Short code is required.','warning'); $('#fldCode').focus(); return; }
  if(!payload.airline_name){ Swal.fire('Validation','Airline name is required.','warning'); $('#fldName').focus(); return; }

  $('#btnSaveModal').prop('disabled',true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Saving...');
  $.ajax({
    url:         API.save,
    type:        'POST',
    contentType: 'application/json',
    headers:     {'X-CSRFToken': csrf},
    data:        JSON.stringify(payload),
    success: function(r){
      $('#btnSaveModal').prop('disabled',false).html('<i class="fas fa-save mr-1"></i>Save');
      if(r.ok){
        closeModal();
        Swal.fire({icon:'success',title:'Saved!',text:r.message,timer:1300,showConfirmButton:false});
        loadList();
      } else {
        Swal.fire('Error', r.error||'Failed', 'error');
      }
    },
    error: function(){
      $('#btnSaveModal').prop('disabled',false).html('<i class="fas fa-save mr-1"></i>Save');
      showErr('Server error');
    },
  });
});

// Enter inside modal inputs
$('.ac-modal-body input').on('keydown',function(e){ if(e.key==='Enter') $('#btnSaveModal').click(); });

// ─── INIT ─────────────────────────────────────────────────────────
$(function(){ loadList(); });

})();
</script>
{% endblock %}