{# templates/sales/segment_list.html #}
{% extends "pos/base.html" %}
{% load static %}
{% block title %}Ticket Segments{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<style>
:root{--sb:#01478f;--sg:#28a745;--sr:#dc3545}
.sl-page{padding:10px 15px;background:#f0f1f3;min-height:calc(100vh - 48px)}
.sl-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}
.sl-header h5{margin:0;font-weight:700;color:var(--sb)}
.sl-table-wrap{background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow-x:auto}
.sl-table{width:100%;border-collapse:collapse;font-size:.82rem}
.sl-table th{background:var(--sb);color:#fff;padding:9px 12px;font-weight:700;font-size:.73rem;text-transform:uppercase;text-align:left}
.sl-table td{padding:8px 12px;border-bottom:1px solid #eee}
.sl-table tr:hover{background:#f0f7ff}
.sl-badge-def{background:#d4edda;color:#155724;padding:2px 8px;border-radius:3px;font-size:.68rem;font-weight:700}
.sl-badge-noparty{background:#f8d7da;color:#721c24;padding:2px 8px;border-radius:3px;font-size:.68rem;font-weight:700}
.sl-charge{font-weight:700;color:var(--sb)}
.sl-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1050;align-items:center;justify-content:center}
.sl-modal-bg.show{display:flex}
.sl-modal{background:#fff;border-radius:6px;width:440px;box-shadow:0 8px 30px rgba(0,0,0,.15);overflow:hidden}
.sl-modal-head{background:var(--sb);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.sl-modal-head h6{margin:0;font-weight:700;font-size:.9rem}
.sl-modal-head .x{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;line-height:1;padding:0}
.sl-modal-body{padding:20px}
.sl-fg{margin-bottom:14px}
.sl-fg label{display:block;font-size:.72rem;font-weight:700;color:#555;text-transform:uppercase;margin-bottom:4px}
.sl-fg input,.sl-fg select{width:100%;height:34px;font-size:.82rem;border:1px solid #ccc;border-radius:3px;padding:4px 8px}
.sl-fg input:focus{border-color:var(--sb);outline:none;box-shadow:0 0 0 2px rgba(1,71,143,.12)}
.sl-modal-foot{padding:12px 16px;background:#f8f9fa;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee}
.sl-modal-foot small{font-size:.7rem;color:#888}
.select2-container--default .select2-selection--single{height:34px!important;border:1px solid #ccc;border-radius:3px}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:32px!important;padding-left:8px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:32px!important}
</style>
{% endblock %}

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

  <div class="sl-header">
    <h5><i class="fas fa-route mr-2"></i>Ticket Segments</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 Invoice
      </a>
      <button class="btn btn-sm btn-success" id="btnNew">
        <i class="fas fa-plus mr-1"></i>Add Segment
      </button>
    </div>
  </div>

  <div class="sl-table-wrap">
    <table class="sl-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Segment Name</th>
          <th>Other Party</th>
          <th>Per Segment Charge</th>
          <th>Default</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody id="tBody">
        <tr><td colspan="6" class="text-center text-muted p-4"><i class="fas fa-spinner fa-spin"></i></td></tr>
      </tbody>
    </table>
  </div>

</div>

<!-- MODAL -->
<div class="sl-modal-bg" id="modalBg">
  <div class="sl-modal">
    <div class="sl-modal-head">
      <h6 id="modalTitle"><i class="fas fa-plus mr-1"></i>Add Segment</h6>
      <button class="x" id="btnClose">&times;</button>
    </div>
    <div class="sl-modal-body">
      <input type="hidden" id="editId" value="0">
      <div class="sl-fg">
        <label>Segment Name *</label>
        <input type="text" id="fName" placeholder="e.g. Economy">
      </div>
      <div class="sl-fg">
        <label>Other Party</label>
        <select id="fParty" style="width:100%;">
          <option value="">— Select an Other Party —</option>
        </select>
      </div>
      <div class="sl-fg">
        <label>Per Segment Charge (PKR)</label>
        <input type="number" id="fCharge" value="0" step="0.01" min="0">
      </div>
      <div class="sl-fg">
        <label>
          <input type="checkbox" id="fDefault" style="width:auto;margin-right:6px;">
          Set as Default Segment
        </label>
      </div>
    </div>
    <div class="sl-modal-foot">
      <small><i class="fas fa-info-circle mr-1"></i>Party must already exist in Party Management (type: Other).</small>
      <div>
        <button class="btn btn-secondary btn-sm mr-2" id="btnCancel">Cancel</button>
        <button class="btn btn-success btn-sm" id="btnSave"><i class="fas fa-save mr-1"></i>Save</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
(function(){
'use strict';

var API = {
  list:  "{% url 'ticket:api_segment_list' %}",
  save:  "{% url 'ticket:api_segment_save' %}",
  del:   "/ticket/api/segments/delete/",
  party: "{% url 'ticket:api_other_parties_search' %}"
};
var csrf = '{{ csrf_token }}';

function esc(s){
  return String(s||'')
    .replace(/&/g,'&amp;')
    .replace(/</g,'&lt;')
    .replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;');
}

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

// ── PARTY SELECT2 (Other Party only) ───────────────────────────────
$('#fParty').select2({
  width: '100%',
  ajax: {
    url: API.party,
    dataType: 'json',
    delay: 250,
    data: function(params){ return { q: params.term }; },
    processResults: function(data){
      return {
        results: (data.parties || []).map(function(p){
          return { id: p.id, text: p.name };
        })
      };
    }
  },
  minimumInputLength: 0,
  placeholder: '— Select an Other Party —'
});

// ── LOAD LIST ──────────────────────────────────────────────────────
function load(){
  $.getJSON(API.list).done(function(r){
    if(!r.ok) return;
    var list = r.segments || [];
    if(!list.length){
      $('#tBody').html('<tr><td colspan="6" class="text-center text-muted p-3">No segments found. Click "Add Segment" to get started.</td></tr>');
      return;
    }
    var h = '';
    list.forEach(function(s, i){
      var partyCell = s.coa_party_id
        ? esc(s.coa_party_name)
        : '<span class="sl-badge-noparty">No Party Linked</span>';
      h += '<tr>' +
        '<td>' + (i+1) + '</td>' +
        '<td><strong>' + esc(s.segment_name) + '</strong></td>' +
        '<td>' + partyCell + '</td>' +
        '<td class="sl-charge">PKR ' + fmt(s.per_segment_charge) + '</td>' +
        '<td>' + (s.is_default ? '<span class="sl-badge-def">DEFAULT</span>' : '—') + '</td>' +
        '<td>' +
          '<button class="btn btn-xs btn-outline-primary mr-1 btn-edit" ' +
            'data-id="' + s.id + '" ' +
            'data-name="' + esc(s.segment_name) + '" ' +
            'data-party-id="' + (s.coa_party_id||'') + '" ' +
            'data-party-name="' + esc(s.coa_party_name||'') + '" ' +
            'data-chg="' + s.per_segment_charge + '" ' +
            'data-def="' + s.is_default + '" ' +
            'style="font-size:.72rem;padding:2px 7px;">' +
            '<i class="fas fa-edit"></i>' +
          '</button>' +
          '<button class="btn btn-xs btn-outline-danger btn-del" ' +
            'data-id="' + s.id + '" ' +
            'data-name="' + esc(s.segment_name) + '" ' +
            'style="font-size:.72rem;padding:2px 7px;">' +
            '<i class="fas fa-trash"></i>' +
          '</button>' +
        '</td>' +
        '</tr>';
    });
    $('#tBody').html(h);
  }).fail(function(){
    $('#tBody').html('<tr><td colspan="6" class="text-center text-danger p-3">Failed to load segments.</td></tr>');
  });
}

// ── MODAL ──────────────────────────────────────────────────────────
function openModal(id, name, partyId, partyName, chg, def){
  $('#editId').val(id || 0);
  $('#fName').val(name || '');
  $('#fCharge').val(chg || 0);
  $('#fDefault').prop('checked', def === true || def === 'true');

  $('#fParty').empty();
  if(partyId){
    var opt = new Option(partyName || ('Party #' + partyId), partyId, true, true);
    $('#fParty').append(opt).trigger('change');
  } else {
    $('#fParty').val(null).trigger('change');
  }

  $('#modalTitle').html(id
    ? '<i class="fas fa-edit mr-1"></i>Edit Segment'
    : '<i class="fas fa-plus mr-1"></i>Add Segment');
  $('#modalBg').addClass('show');
  setTimeout(function(){ $('#fName').focus().select(); }, 100);
}

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

$('#btnNew').on('click', function(){ openModal(0,'',null,'',0,false); });
$('#btnClose, #btnCancel').on('click', closeModal);
$('#modalBg').on('click', function(e){ if(e.target === this) closeModal(); });

// Enter in modal text inputs → trigger save
$('.sl-modal-body input[type="text"], .sl-modal-body input[type="number"]').on('keydown', function(e){
  if(e.key === 'Enter') $('#btnSave').click();
});

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

// ── DELETE ─────────────────────────────────────────────────────────
$(document).on('click', '.btn-del', function(){
  var id   = $(this).data('id');
  var name = $(this).data('name');
  Swal.fire({
    title: 'Delete "' + name + '"?',
    text:  'This only removes the segment setting — the linked Other Party itself is not affected.',
    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!', timer:1200, showConfirmButton:false});
          load();
        } else {
          Swal.fire('Error', r.error || 'Failed', 'error');
        }
      },
      error: function(){
        Swal.fire('Error', 'Server error', 'error');
      }
    });
  });
});

// ── SAVE ───────────────────────────────────────────────────────────
$('#btnSave').on('click', function(){
  var payload = {
    id:                parseInt($('#editId').val()) || 0,
    segment_name:      $('#fName').val().trim(),
    coa_party_id:      parseInt($('#fParty').val()) || 0,
    per_segment_charge: parseFloat($('#fCharge').val()) || 0,
    is_default:        $('#fDefault').is(':checked'),
  };

  if(!payload.segment_name){
    Swal.fire('Validation', 'Segment name is required.', 'warning');
    $('#fName').focus();
    return;
  }

  $('#btnSave').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){
      $('#btnSave').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});
        load();
      } else {
        Swal.fire('Error', r.error || 'Failed', 'error');
      }
    },
    error: function(){
      $('#btnSave').prop('disabled', false).html('<i class="fas fa-save mr-1"></i>Save');
      Swal.fire('Error', 'Server error', 'error');
    }
  });
});

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

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