<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title><%= t('admin.nav.customer_tickets', 'Keluhan Pelanggan') %> | <%= company %></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
<%- include('partials/sidebar', { activePage: 'tickets', company }) %>
<div class="mw">
  <div class="topbar">
    <div class="tb-title"><button class="hb-menu" onclick="toggleSidebar()"><i class="bi bi-list"></i></button><i class="bi bi-headset"></i> <%= t('admin.nav.customer_tickets', 'Keluhan Pelanggan') %></div>
    <div class="tb-right">
      <span class="adm-badge"><i class="bi bi-person-fill"></i> <%= (typeof session !== 'undefined' && session.isCashier) ? t('admin.role.cashier', 'Kasir') : t('admin.role.admin', 'Admin') %></span>
      <a href="/admin/logout" class="btn btn-g btn-sm"><i class="bi bi-box-arrow-left"></i></a>
    </div>
  </div>
  <div class="page">

    <% if (msg) { %>
    <div class="alert alert-<%= msg.type==='success'?'s':'d' %>">
      <i class="bi bi-<%= msg.type==='success'?'check-circle':'exclamation-circle' %>"></i> <%= msg.text %>
    </div>
    <% } %>

    <!-- Summary Cards -->
    <div class="stat-grid" style="grid-template-columns:repeat(4,1fr)">
      <div class="sc p"><i class="bi bi-ticket-detailed sc-icon"></i><div class="sc-label"><%= t('admin.tickets.stats.total', 'Total Tiket') %></div><div class="sc-val"><%= stats.total %></div></div>
      <div class="sc d"><i class="bi bi-exclamation-circle sc-icon"></i><div class="sc-label"><%= t('admin.tickets.status.open', 'Belum Ditangani') %></div><div class="sc-val"><%= stats.open %></div></div>
      <div class="sc w"><i class="bi bi-tools sc-icon"></i><div class="sc-label"><%= t('admin.tickets.status.in_progress', 'Sedang Dikerjakan') %></div><div class="sc-val"><%= stats.inProgress %></div></div>
      <div class="sc s"><i class="bi bi-check-circle sc-icon"></i><div class="sc-label"><%= t('admin.tickets.status.resolved', 'Selesai') %></div><div class="sc-val"><%= stats.resolved %></div></div>
    </div>

    <!-- Filter -->
    <div class="card">
      <div class="card-hd">
        <h6><i class="bi bi-list-ul"></i> <%= t('admin.tickets.list_title', 'Daftar Keluhan') %> (<%= tickets.length %>)</h6>
      </div>
      <div class="card-bd" style="padding-bottom:0">
        <form method="GET" action="/admin/tickets" style="display:flex;gap:10px;margin-bottom:18px">
          <select class="fs" name="status" style="width:160px" onchange="this.form.submit()">
            <option value="all" <%= filterStatus==='all'?'selected':'' %>><%= t('common.all_status', 'Semua Status') %></option>
            <option value="open" <%= filterStatus==='open'?'selected':'' %>><%= t('admin.tickets.status.open', 'Belum Ditangani') %></option>
            <option value="in_progress" <%= filterStatus==='in_progress'?'selected':'' %>><%= t('admin.tickets.status.in_progress', 'Sedang Dikerjakan') %></option>
            <option value="resolved" <%= filterStatus==='resolved'?'selected':'' %>><%= t('admin.tickets.status.resolved', 'Selesai') %></option>
          </select>
        </form>
      </div>
      <div class="tbl-wrap">
        <table class="dtbl">
          <thead>
            <tr>
              <th>#ID</th>
              <th><%= t('admin.tickets.table.time', 'Waktu') %></th>
              <th><%= t('admin.tickets.table.customer', 'Pelanggan') %></th>
              <th><%= t('admin.tickets.table.issue', 'Kendala') %></th>
              <th><%= t('admin.tickets.table.technician', 'Teknisi') %></th>
              <th><%= t('admin.tickets.table.status', 'Status') %></th>
              <th><%= t('common.actions', 'Aksi') %></th>
            </tr>
          </thead>
          <tbody>
          <% if (tickets.length===0) { %>
            <tr><td colspan="7" class="text-center text-muted" style="padding:32px"><%= t('admin.tickets.empty', 'Tidak ada tiket keluhan') %></td></tr>
          <% } %>
          <% tickets.forEach((ticket) => { %>
            <tr>
              <td class="text-muted">#<%= ticket.id %></td>
              <td style="font-size:12px;color:var(--muted)">
                <%= new Date(ticket.created_at).toLocaleString('id-ID', {dateStyle:'short', timeStyle:'short'}) %>
              </td>
              <td>
                <div class="fw6"><%= ticket.customer_name %></div>
                <div style="font-size:11px;color:var(--muted)"><%= ticket.customer_phone || '-' %></div>
              </td>
              <td style="color:var(--primary)"><%= ticket.subject %></td>
              <td>
                <% if (ticket.technician_name) { %>
                  <div class="fw6" style="font-size:12px"><i class="bi bi-person-badge me-1"></i><%= ticket.technician_name %></div>
                <% } else { %>
                  <span class="text-muted small"><%= t('admin.tickets.no_technician', 'Belum ada') %></span>
                <% } %>
              </td>
              <td>
                <% if(ticket.status==='open'){%><span class="badge bd"><%= t('admin.tickets.status.open', 'Belum Ditangani') %></span>
                <%}else if(ticket.status==='in_progress'){%><span class="badge bw"><%= t('admin.tickets.status.working_short', 'Dikerjakan') %></span>
                <%}else{%><span class="badge bs"><%= t('admin.tickets.status.resolved', 'Selesai') %></span><%}%>
              </td>
              <td>
                <button class="btn btn-g btn-icon btn-sm update-btn" title="<%= t('admin.tickets.actions.update_status', 'Update Status') %>"
                  data-id="<%= ticket.id %>"
                  data-status="<%= ticket.status %>"
                  data-message="<%= ticket.message %>"
                  data-subject="<%= ticket.subject %>"
                  data-customer="<%= ticket.customer_name %>"
                  data-notes="<%= ticket.technician_notes || '' %>"
                  data-photos="<%= ticket.photos || '' %>"
                  data-customer-photos="<%= ticket.customer_photos || '' %>"
                  data-tech="<%= ticket.technician_name || t('admin.tickets.no_technician', 'Belum ada') %>">
                  <i class="bi bi-pencil"></i>
                </button>
                <% if ((ticket.photos && ticket.photos !== '' && ticket.photos !== '[]') || (ticket.customer_photos && ticket.customer_photos !== '' && ticket.customer_photos !== '[]')) { %>
                  <button class="btn btn-p btn-icon btn-sm view-photos-btn" title="Lihat Foto"
                    data-id="<%= ticket.id %>"
                    data-photos="<%= ticket.photos || '' %>"
                    data-customer-photos="<%= ticket.customer_photos || '' %>"
                    data-customer="<%= ticket.customer_name %>"
                    data-subject="<%= ticket.subject %>">
                    <i class="bi bi-images"></i>
                  </button>
                <% } %>
                <form method="POST" action="/admin/tickets/<%= ticket.id %>/delete" style="display:inline" onsubmit="return confirm('<%= t('admin.tickets.confirm.delete', 'Hapus keluhan ini?') %>')">
                  <button class="btn btn-d btn-icon btn-sm" title="<%= t('common.delete', 'Hapus') %>"><i class="bi bi-trash"></i></button>
                </form>
              </td>
            </tr>
          <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Update -->
<div class="mo" id="updateModal">
  <div class="mb">
    <div class="mh"><span class="mt"><i class="bi bi-pencil"></i> <%= t('admin.tickets.modal.title', 'Update Status Keluhan') %></span><button class="mc" onclick="closeModal('updateModal')">&times;</button></div>
    <form method="POST" id="updateForm">
      <div class="mbody">
        <div class="fg"><label class="fl"><%= t('admin.tickets.table.customer', 'Pelanggan') %></label><input class="fc" id="upCustomer" readonly></div>
        <div class="fg"><label class="fl"><%= t('admin.tickets.table.issue', 'Kendala') %></label><input class="fc" id="upSubject" readonly></div>
        <div class="fg"><label class="fl"><%= t('admin.tickets.table.technician', 'Teknisi') %></label><input class="fc" id="upTechnician" readonly></div>
        <div class="fg"><label class="fl"><%= t('admin.tickets.modal.message', 'Detail Pesan') %></label><textarea class="fc" id="upMessage" rows="3" readonly></textarea></div>
        <div class="fg" id="techNotesContainer" style="display:none;">
          <label class="fl"><i class="bi bi-pencil-square me-1"></i>Catatan Teknisi</label>
          <textarea class="fc" id="upNotes" rows="3" readonly style="background:#f8f9fa"></textarea>
        </div>
        <div class="fg">
          <label class="fl"><%= t('admin.tickets.actions.update_status', 'Update Status') %></label>
          <select class="fs" name="status" id="upStatus">
            <option value="open"><%= t('admin.tickets.status.open', 'Belum Ditangani') %></option>
            <option value="in_progress"><%= t('admin.tickets.status.in_progress', 'Sedang Dikerjakan') %></option>
            <option value="resolved"><%= t('admin.tickets.status.resolved', 'Selesai') %></option>
          </select>
        </div>
      </div>
      <div class="mf">
        <button type="button" class="btn btn-g" onclick="closeModal('updateModal')"><%= t('common.cancel', 'Batal') %></button>
        <button type="submit" class="btn btn-p"><i class="bi bi-check-lg"></i> <%= t('admin.tickets.actions.save_changes', 'Simpan Perubahan') %></button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Photo Gallery -->
<div class="mo" id="photoModal">
  <div class="mb" style="max-width:900px">
    <div class="mh">
      <span class="mt"><i class="bi bi-images"></i> Foto Pekerjaan</span>
      <button class="mc" onclick="closeModal('photoModal')">&times;</button>
    </div>
    <div class="mbody">
      <div class="mb-3">
        <div class="fw-bold" id="photoCustomer"></div>
        <div class="text-muted small" id="photoSubject"></div>
      </div>
      <div id="photoGallery" class="row g-2"></div>
    </div>
    <div class="mf">
      <button type="button" class="btn btn-g" onclick="closeModal('photoModal')">Tutup</button>
    </div>
  </div>
</div>

<script>
function openModal(id){document.getElementById(id).classList.add('show')}
function closeModal(id){document.getElementById(id).classList.remove('show')}
document.querySelectorAll('.mo').forEach(m=>m.addEventListener('click',e=>{if(e.target===m)m.classList.remove('show')}));

document.addEventListener('click', function(e) {
  const btn = e.target.closest('.update-btn');
  if (!btn) return;
  
  document.getElementById('updateForm').action = '/admin/tickets/' + btn.dataset.id + '/update';
  document.getElementById('upStatus').value = btn.dataset.status;
  document.getElementById('upMessage').value = btn.dataset.message;
  document.getElementById('upSubject').value = btn.dataset.subject;
  document.getElementById('upCustomer').value = btn.dataset.customer;
  document.getElementById('upTechnician').value = btn.dataset.tech;
  
  // Show technician notes if available
  const notes = btn.dataset.notes || '';
  const notesContainer = document.getElementById('techNotesContainer');
  if (notes && notes.trim() !== '') {
    document.getElementById('upNotes').value = notes;
    notesContainer.style.display = 'block';
  } else {
    notesContainer.style.display = 'none';
  }
  
  openModal('updateModal');
});

// View photos
document.addEventListener('click', function(e) {
  const btn = e.target.closest('.view-photos-btn');
  if (!btn) return;
  
  const techPhotos = JSON.parse(btn.dataset.photos || '[]');
  const customerPhotos = JSON.parse(btn.dataset.customerPhotos || '[]');
  const customer = btn.dataset.customer;
  const subject = btn.dataset.subject;
  
  document.getElementById('photoCustomer').textContent = customer;
  document.getElementById('photoSubject').textContent = subject;
  
  const gallery = document.getElementById('photoGallery');
  gallery.innerHTML = '';
  
  const allPhotos = [...customerPhotos, ...techPhotos];
  
  if (allPhotos.length === 0) {
    gallery.innerHTML = '<div class="col-12 text-center text-muted">Tidak ada foto</div>';
  } else {
    // Customer photos first
    if (customerPhotos.length > 0) {
      const customerSection = document.createElement('div');
      customerSection.className = 'col-12 mb-3';
      customerSection.innerHTML = '<h6 class="text-primary mb-2"><i class="bi bi-person-circle me-1"></i>Foto dari Pelanggan</h6>';
      gallery.appendChild(customerSection);
      
      customerPhotos.forEach((photo, index) => {
        const col = document.createElement('div');
        col.className = 'col-md-4 col-6';
        col.innerHTML = `
          <div class="position-relative">
            <a href="${photo}" target="_blank">
              <img src="${photo}" class="img-fluid rounded" style="width:100%; height:200px; object-fit:cover; border:2px solid #3b82f6; cursor:pointer;">
            </a>
            <span class="position-absolute top-0 start-0 badge bg-primary m-2">P${index + 1}</span>
          </div>
        `;
        gallery.appendChild(col);
      });
    }
    
    // Technician photos
    if (techPhotos.length > 0) {
      const techSection = document.createElement('div');
      techSection.className = 'col-12 mb-3 mt-3';
      techSection.innerHTML = '<h6 class="text-success mb-2"><i class="bi bi-tools me-1"></i>Foto dari Teknisi</h6>';
      gallery.appendChild(techSection);
      
      techPhotos.forEach((photo, index) => {
        const col = document.createElement('div');
        col.className = 'col-md-4 col-6';
        col.innerHTML = `
          <div class="position-relative">
            <a href="${photo}" target="_blank">
              <img src="${photo}" class="img-fluid rounded" style="width:100%; height:200px; object-fit:cover; border:2px solid #10b981; cursor:pointer;">
            </a>
            <span class="position-absolute top-0 start-0 badge bg-success m-2">T${index + 1}</span>
          </div>
        `;
        gallery.appendChild(col);
      });
    }
  }
  
  openModal('photoModal');
});

setTimeout(()=>document.querySelectorAll('.alert').forEach(a=>a.style.display='none'),5000);
</script>
</body>
</html>
