{{define "admin/tickets.html"}}
{{template "admin_shell_open" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-support" "Title" (T "admin.tickets.title") "Desc" (T "admin.tickets.desc"))}}

<div class="card cs-admin-section cs-admin-section--toolbar mb-3">
  <div class="cs-admin-section__body py-3">
    <form class="row g-2 align-items-end" method="get" action="/admin/tickets">
      <div class="col-12 col-md-4">
        <label class="form-label small mb-0 text-muted">{{T "admin.tickets.keyword"}}</label>
        <input type="text" class="form-control form-control-sm" name="keyword" value="{{.Data.Keyword}}" placeholder="{{T "admin.tickets.keyword_ph"}}">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-0 text-muted">{{T "admin.tickets.status"}}</label>
        <select class="form-select form-select-sm" name="status">
          <option value="">{{T "admin.tickets.all"}}</option>
          <option value="1" {{if eq .Data.StatusFilter "1"}}selected{{end}}>{{T "admin.tickets.status_pending"}}</option>
          <option value="2" {{if eq .Data.StatusFilter "2"}}selected{{end}}>{{T "admin.tickets.status_processing"}}</option>
          <option value="3" {{if eq .Data.StatusFilter "3"}}selected{{end}}>{{T "admin.tickets.status_resolved"}}</option>
          <option value="4" {{if eq .Data.StatusFilter "4"}}selected{{end}}>{{T "admin.tickets.status_closed"}}</option>
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-0 text-muted">{{T "admin.tickets.category"}}</label>
        <select class="form-select form-select-sm" name="category">
          <option value="">{{T "admin.tickets.all"}}</option>
          <option value="technical" {{if eq .Data.CategoryFilter "technical"}}selected{{end}}>{{T "admin.tickets.cat_technical"}}</option>
          <option value="billing" {{if eq .Data.CategoryFilter "billing"}}selected{{end}}>{{T "admin.tickets.cat_billing"}}</option>
          <option value="account" {{if eq .Data.CategoryFilter "account"}}selected{{end}}>{{T "admin.tickets.cat_account"}}</option>
          <option value="other" {{if eq .Data.CategoryFilter "other"}}selected{{end}}>{{T "admin.tickets.cat_other"}}</option>
        </select>
      </div>
      <div class="col-12 col-md-auto">
        <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-search"></i> {{T "admin.tickets.filter"}}</button>
      </div>
    </form>
  </div>
</div>

<div class="card cs-admin-section">
  <div class="cs-admin-section__body cs-admin-section__body--flush"><div class="table-responsive">
    <table class="table table-sm align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th>{{T "admin.tickets.col_no"}}</th>
          <th>{{T "admin.tickets.col_title"}}</th>
          <th>{{T "admin.tickets.col_user"}}</th>
          <th>{{T "admin.tickets.col_category"}}</th>
          <th>{{T "admin.tickets.col_status"}}</th>
          <th>{{T "admin.tickets.col_priority"}}</th>
          <th>{{T "admin.tickets.col_replies"}}</th>
          <th>{{T "admin.tickets.col_created"}}</th>
          <th class="text-end">{{T "admin.tickets.col_actions"}}</th>
        </tr>
      </thead>
      <tbody>
        {{range .Data.Rows}}
        <tr class="admin-ticket-row" data-id="{{index . "id"}}" style="cursor:pointer">
          <td><code class="small">{{index . "ticket_no"}}</code></td>
          <td>
            <div class="fw-semibold small">{{index . "title"}}</div>
            {{if index . "has_new_reply"}}<span class="badge bg-danger">{{T "admin.tickets.badge_new"}}</span>{{end}}
          </td>
          <td class="small">#{{index . "user_id"}} {{index . "user_name"}}</td>
          <td><span class="badge bg-info">{{index . "category_text"}}</span></td>
          <td><span class="badge bg-{{index . "status_class"}}">{{index . "status_text"}}</span></td>
          <td><span class="badge bg-{{index . "priority_class"}}">{{index . "priority_text"}}</span></td>
          <td>{{index . "reply_count"}}</td>
          <td class="small text-muted">{{index . "created_at_str"}}</td>
          <td class="text-end">
            <button type="button" class="btn btn-sm btn-outline-primary js-admin-ticket-open" data-id="{{index . "id"}}">{{T "admin.tickets.btn_handle"}}</button>
          </td>
        </tr>
        {{else}}
        <tr><td colspan="9" class="text-center text-muted py-4">{{T "admin.tickets.empty"}}</td></tr>
        {{end}}
      </tbody>
    </table>
  </div></div></div>

{{$pg := .Data.Page}}{{$tp := .Data.TotalPages}}
{{if or (gt $pg 1) (gt $tp 1)}}
<nav class="mt-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
  <span class="small text-muted">{{T "admin.tickets.total_prefix"}} {{.Data.Total}} {{T "admin.tickets.total_suffix"}}</span>
  <div class="btn-group btn-group-sm">
    {{if gt $pg 1}}
    <a class="btn btn-outline-secondary" href="/admin/tickets?page={{sub $pg 1}}{{if $.Data.Keyword}}&keyword={{urlEncode $.Data.Keyword}}{{end}}{{if $.Data.StatusFilter}}&status={{urlEncode $.Data.StatusFilter}}{{end}}{{if $.Data.CategoryFilter}}&category={{urlEncode $.Data.CategoryFilter}}{{end}}">{{T "admin.tickets.prev"}}</a>
    {{end}}
    <span class="btn btn-outline-secondary disabled">{{T "admin.tickets.page_prefix"}} {{$pg}} {{T "admin.tickets.page_mid"}} {{$tp}} {{T "admin.tickets.page_suffix"}}</span>
    {{if lt $pg $tp}}
    <a class="btn btn-outline-secondary" href="/admin/tickets?page={{add $pg 1}}{{if $.Data.Keyword}}&keyword={{urlEncode $.Data.Keyword}}{{end}}{{if $.Data.StatusFilter}}&status={{urlEncode $.Data.StatusFilter}}{{end}}{{if $.Data.CategoryFilter}}&category={{urlEncode $.Data.CategoryFilter}}{{end}}">{{T "admin.tickets.next"}}</a>
    {{end}}
  </div>
</nav>
{{end}}

<div class="modal fade" id="adminTicketModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bx bx-support me-1"></i>{{T "admin.tickets.detail_title"}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="adminTicketModalBody">
        <p class="text-muted">{{T "admin.tickets.loading"}}</p>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var L = {
    loading: {{jsString (T "admin.tickets.loading")}},
    loadFailed: {{jsString (T "admin.tickets.load_failed")}},
    ticketNo: {{jsString (T "admin.tickets.ticket_no_label")}},
    content: {{jsString (T "admin.tickets.content_label")}},
    replies: {{jsString (T "admin.tickets.replies_label")}},
    noReplies: {{jsString (T "admin.tickets.no_replies")}},
    replyUser: {{jsString (T "admin.tickets.reply_user")}},
    replyPh: {{jsString (T "admin.tickets.reply_ph")}},
    sendReply: {{jsString (T "admin.tickets.send_reply")}},
    updateStatus: {{jsString (T "admin.tickets.update_status_only")}},
    stPending: {{jsString (T "admin.tickets.status_pending")}},
    stProcessing: {{jsString (T "admin.tickets.status_processing")}},
    stResolved: {{jsString (T "admin.tickets.status_resolved")}},
    stClosed: {{jsString (T "admin.tickets.status_closed")}},
    needReply: {{jsString (T "admin.tickets.need_reply")}},
    replied: {{jsString (T "admin.tickets.replied")}},
    failed: {{jsString (T "admin.tickets.failed")}},
    statusUpdated: {{jsString (T "admin.tickets.status_updated")}}
  };
  function esc(s) {
    if (s == null) return '';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function loadTicket(id) {
    var $body = $('#adminTicketModalBody');
    $body.html('<p class="text-muted">' + L.loading + '</p>');
    $.getJSON('/admin/tickets/detail?id=' + encodeURIComponent(id), function (res) {
      if (!res || !res.success || !res.data || !res.data.ticket) {
        $body.html('<p class="text-danger">' + L.loadFailed + '</p>');
        return;
      }
      var t = res.data.ticket;
      var replies = res.data.replies || [];
      var html = '';
      html += '<div class="mb-2"><span class="badge bg-' + esc(t.status_class) + '">' + esc(t.status_text) + '</span> ';
      html += '<span class="badge bg-' + esc(t.priority_class) + '">' + esc(t.priority_text) + '</span> ';
      html += '<span class="badge bg-info">' + esc(t.category_text) + '</span></div>';
      html += '<h6>' + esc(t.title) + '</h6>';
      html += '<p class="small text-muted">' + L.ticketNo + ' <code>' + esc(t.ticket_no) + '</code> · #' + esc(String(t.user_id)) + ' ' + esc(t.user_name) + '</p>';
      html += '<div class="mb-3"><div class="fw-semibold small mb-1">' + L.content + '</div>';
      html += '<div class="border rounded p-2 bg-light small plain-text-content">' + renderPlainTextHtml(t.content) + '</div></div>';
      html += '<div class="fw-semibold small mb-2">' + L.replies + '（' + replies.length + '）</div>';
      if (!replies.length) {
        html += '<p class="text-muted small">' + L.noReplies + '</p>';
      } else {
        replies.forEach(function (r) {
          var adm = Number(r.is_admin) === 1;
          html += '<div class="border rounded p-2 mb-2 ' + (adm ? 'border-success bg-light' : '') + '">';
          html += '<div class="small text-muted d-flex justify-content-between"><span>' + esc(r.user_name) + '</span><span>' + esc(r.created_at_str) + '</span></div>';
          html += '<div class="small mt-1 plain-text-content">' + renderPlainTextHtml(r.content) + '</div></div>';
        });
      }
      html += '<hr><div class="mb-2"><label class="form-label small">' + L.replyUser + '</label>';
      html += '<textarea class="form-control form-control-sm" id="admTicketReply" rows="4" placeholder="' + L.replyPh + '"></textarea></div>';
      html += '<div class="d-flex flex-nowrap gap-2 align-items-center adm-ticket-modal-actions">';
      html += '<select class="form-select form-select-sm adm-ticket-status-select" id="admTicketStatus">';
      html += '<option value="1"' + (String(t.status) === '1' ? ' selected' : '') + '>' + L.stPending + '</option>';
      html += '<option value="2"' + (String(t.status) === '2' ? ' selected' : '') + '>' + L.stProcessing + '</option>';
      html += '<option value="3"' + (String(t.status) === '3' ? ' selected' : '') + '>' + L.stResolved + '</option>';
      html += '<option value="4"' + (String(t.status) === '4' ? ' selected' : '') + '>' + L.stClosed + '</option>';
      html += '</select>';
      html += '<button type="button" class="btn btn-primary btn-sm flex-shrink-0" id="admTicketReplyBtn" data-id="' + esc(String(t.id)) + '">' + L.sendReply + '</button>';
      html += '<button type="button" class="btn btn-outline-secondary btn-sm flex-shrink-0" id="admTicketStatusBtn" data-id="' + esc(String(t.id)) + '">' + L.updateStatus + '</button>';
      html += '</div>';
      $body.html(html);

      $('#admTicketReplyBtn').on('click', function () {
        var tid = $(this).data('id');
        var txt = ($('#admTicketReply').val() || '').trim();
        if (!txt) {
          if (window.layer && layer.msg) layer.msg(L.needReply, { icon: 2 });
          return;
        }
        $.ajax({
          url: '/admin/tickets/reply',
          type: 'POST',
          data: { ticket_id: tid, content: txt },
          dataType: 'json',
          success: function (r2) {
            if (r2 && r2.success) {
              if (layer.msg) layer.msg(L.replied, { icon: 1 });
              var el = document.getElementById('adminTicketModal');
              if (el && bootstrap.Modal.getInstance(el)) bootstrap.Modal.getInstance(el).hide();
              location.reload();
            } else {
              if (layer.msg) layer.msg((r2 && r2.message) || L.failed, { icon: 2 });
            }
          },
          error: function (xhr) {
            var m = L.failed;
            try { var j = JSON.parse(xhr.responseText); if (j.message) m = j.message; } catch (e) {}
            if (layer.msg) layer.msg(m, { icon: 2 });
          }
        });
      });
      $('#admTicketStatusBtn').on('click', function () {
        var tid = $(this).data('id');
        var st = $('#admTicketStatus').val();
        $.ajax({
          url: '/admin/tickets/status',
          type: 'POST',
          data: { ticket_id: tid, status: st },
          dataType: 'json',
          success: function (r2) {
            if (r2 && r2.success) {
              if (layer.msg) layer.msg(L.statusUpdated, { icon: 1 });
              location.reload();
            } else {
              if (layer.msg) layer.msg((r2 && r2.message) || L.failed, { icon: 2 });
            }
          },
          error: function () {
            if (layer.msg) layer.msg(L.failed, { icon: 2 });
          }
        });
      });
    }).fail(function () {
      $body.html('<p class="text-danger">' + L.loadFailed + '</p>');
    });
  }

  $(document).on('click', '.js-admin-ticket-open', function (e) {
    e.stopPropagation();
    var id = $(this).data('id');
    if (!id) return;
    loadTicket(id);
    var m = document.getElementById('adminTicketModal');
    if (m && window.bootstrap) new bootstrap.Modal(m).show();
  });
  $(document).on('click', '.admin-ticket-row', function () {
    var id = $(this).data('id');
    if (!id) return;
    loadTicket(id);
    var m = document.getElementById('adminTicketModal');
    if (m && window.bootstrap) new bootstrap.Modal(m).show();
  });
})();
</script>
</div>
{{template "admin_shell_close" .}}
{{end}}