<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<style>
/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --teal-900: #0d3d38;
  --teal-800: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-100: #ccfbf1;
  --teal-50:  #f0fdfa;
  --green-500: #10b981;
  --green-600: #059669;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --red-400:  #f87171;
  --red-500:  #ef4444;
  --red-600:  #dc2626;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
  --radius:    14px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  --shadow:    0 4px 24px rgba(13,148,136,0.10), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-sm: var(--card-shadow);
}

/* ─── WRAPPER (samakan lebar dengan halaman lain) ─────────── */
/* JADI: */
.pg-wrapper {
  width: 100%;
}
/* ─── PAGE HEADER (samakan dengan arisan) ─────────────────── */
.ar-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.ar-header-left h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b5a52;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
  flex-wrap: wrap;
}
.ar-header-left h4 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.32);
  flex-shrink: 0;
}
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px; height: 24px;
  border-radius: 50px;
  background: var(--red-500);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0 7px;
}
.ar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: #94a3b8;
  padding-left: 51px;
}
.ar-breadcrumb a { color: #0d9488; text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: #e2e8f0; }

.btn-kirim {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  background: #0d9488;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(13,148,136,0.28);
  transition: all .2s;
  white-space: nowrap;
}
.btn-kirim:hover {
  background: #0b7a6e;
  box-shadow: 0 5px 16px rgba(13,148,136,0.38);
  transform: translateY(-1px);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN VIEW — TABLE
═══════════════════════════════════════════════════════════ */
.pg-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1.5px solid var(--slate-100);
}
.pg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1.5px solid var(--slate-100);
  background: var(--slate-50);
  flex-wrap: wrap;
  gap: 10px;
}
.pg-card-header h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--teal-800);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pg-card-header h5 i { color: var(--teal-500); }

/* Admin table */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.pg-table thead tr {
  background: var(--slate-50);
  border-bottom: 2px solid var(--slate-200);
}
.pg-table thead th {
  padding: 12px 16px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .65px;
  color: var(--slate-400);
  white-space: nowrap;
}
.pg-table tbody tr {
  border-bottom: 1px solid var(--slate-100);
  transition: background .15s;
}
.pg-table tbody tr:hover { background: var(--teal-50); }
.pg-table tbody tr.is-baru { background: #fff5f5; }
.pg-table tbody tr.is-baru:hover { background: #fee2e2; }
.pg-table tbody tr:last-child { border-bottom: none; }
.pg-table tbody td {
  padding: 13px 16px;
  font-size: 0.86rem;
  color: var(--slate-700);
  vertical-align: middle;
}

.kode-cell {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  background: var(--slate-100);
  color: var(--slate-700);
  border-radius: 5px;
  padding: 3px 8px;
  font-weight: 700;
  white-space: nowrap;
}
.judul-cell { font-weight: 600; color: var(--slate-900); }
.privat-icon { color: var(--amber-500); font-size: 0.8rem; margin-left: 5px; }

.kategori-pill {
  display: inline-block;
  border-radius: 50px;
  padding: 3px 11px;
  font-size: 0.71rem;
  font-weight: 700;
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}
.kategori-pill.saran     { background: var(--teal-50);  color: var(--teal-700);  border-color: var(--teal-100); }
.kategori-pill.pengaduan { background: #fef2f2;          color: var(--red-500);   border-color: #fecaca; }
.kategori-pill.kritik    { background: var(--amber-50);  color: var(--amber-600); border-color: var(--amber-100); }
.kategori-pill.informasi { background: #eff6ff;          color: var(--blue-600);  border-color: #bfdbfe; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  padding: 3px 11px;
  font-size: 0.71rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-pill.baru      { background: #fef2f2; color: var(--red-500);    border: 1px solid #fecaca; }
.status-pill.diproses  { background: var(--amber-50); color: var(--amber-600); border: 1px solid var(--amber-100); }
.status-pill.selesai   { background: var(--teal-50);  color: var(--teal-700);  border: 1px solid var(--teal-100); }
.status-pill.ditolak   { background: var(--slate-100); color: var(--slate-500); border: 1px solid var(--slate-200); }

.date-cell { font-size: 0.81rem; color: var(--slate-500); white-space: nowrap; }

.act-btn-lihat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--teal-100);
  color: var(--teal-700);
  background: var(--teal-50);
  font-size: 0.80rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s;
}
.act-btn-lihat:hover { background: var(--teal-100); border-color: var(--teal-400); color: var(--teal-800); }

/* Admin mobile cards */
.admin-mobile-list { display: none; padding: 16px; }
.admin-mobile-card {
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #fff;
  margin-bottom: 10px;
  transition: box-shadow .2s;
}
.admin-mobile-card.is-baru { border-color: #fecaca; background: #fff5f5; }
.amc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 8px;
}
.amc-judul { font-weight: 700; color: var(--slate-900); font-size: 0.9rem; }
.amc-pengirim { font-size: 0.77rem; color: var(--slate-400); margin-top: 2px; }
.amc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.amc-action a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(13,148,136,0.24);
}

/* ═══════════════════════════════════════════════════════════
   USER VIEW — CARDS
═══════════════════════════════════════════════════════════ */
.pg-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.pg-ticket {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--slate-200);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.pg-ticket:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pg-ticket.selesai { border-color: var(--teal-100); }

.ticket-top { padding: 16px 18px 14px; flex: 1; }
.ticket-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.ticket-kode {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  background: var(--slate-100);
  color: var(--slate-600);
  border-radius: 5px;
  padding: 3px 8px;
  font-weight: 700;
}
.ticket-status-icon { font-size: 1.3rem; }
.ticket-judul  { font-size: 0.95rem; font-weight: 800; color: var(--slate-900); margin-bottom: 4px; }
.ticket-date   { font-size: 0.76rem; color: var(--slate-400); margin-bottom: 10px; }
.ticket-preview { font-size: 0.83rem; color: var(--slate-500); line-height: 1.55; margin-bottom: 10px; }
.ticket-lampiran {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--slate-500);
  background: var(--slate-100);
  border-radius: 50px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.ticket-balasan {
  background: var(--teal-50);
  border-left: 3px solid var(--teal-400);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 10px 12px;
  margin-top: 6px;
}
.ticket-balasan .tb-label {
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--teal-600);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ticket-balasan .tb-text { font-size: 0.81rem; color: var(--slate-700); line-height: 1.5; }

.ticket-footer { padding: 0 18px 16px; }
.ticket-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(13,148,136,0.28);
  transition: all .18s;
}
.ticket-cta:hover { background: linear-gradient(135deg, var(--teal-800), var(--teal-600)); color: #fff; }
.ticket-cta.baru     { background: linear-gradient(135deg, #dc2626, var(--red-500)); }
.ticket-cta.diproses { background: linear-gradient(135deg, var(--amber-600), var(--amber-500)); }
.ticket-cta.ditolak  { background: linear-gradient(135deg, #475569, var(--slate-500)); }

/* Empty state */
.empty-state { text-align: center; padding: 64px 24px; }
.empty-state-icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--teal-50);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 2.1rem;
}
.empty-state h6 { font-weight: 700; color: var(--slate-700); margin-bottom: 5px; }
.empty-state p  { font-size: 0.84rem; color: var(--slate-400); margin: 0; }

/* Datatables */
.pg-dt-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 10px;
  flex-wrap: wrap;
  gap: 10px;
}
.pg-dt-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.dataTables_filter label,
.dataTables_length label,
.dataTables_info { font-size: 0.82rem; color: var(--slate-500); }
.paginate_button { border-radius: var(--radius-xs) !important; font-size: 0.82rem !important; }
.paginate_button.current {
  background: var(--teal-600) !important;
  border-color: var(--teal-600) !important;
  color: #fff !important;
}

/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* .pg-wrapper { padding: 0 12px 80px; } */
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .btn-kirim { display: none; }
  .btn-kirim-fab { display: flex !important; }

  /* Admin: hide table, show mobile cards */
  .pg-table-wrap     { display: none; }
  .admin-mobile-list { display: block; }

  /* User: single column */
  .pg-user-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (min-width: 768px) {
  .btn-kirim-fab { display: none !important; }
}

/* Floating Action Button (mobile only) */
.btn-kirim-fab {
  display: none;
  position: fixed;
  bottom: 24px; right: 20px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-800), var(--teal-500));
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(13,148,136,0.45);
  z-index: 200;
  transition: all .2s;
}
.btn-kirim-fab:hover { transform: scale(1.08); color: #fff; }
</style>
<!-- Harus ada di header.php, SEBELUM konten view -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<div class="pg-wrapper">

  <!-- ── Page Header ───────────────────────────────────────── -->
<!-- Header -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-chat-square-text"></i></span>
            Saran &amp; Pengaduan
            <?php if($is_admin && $count_unread > 0): ?>
                <span class="unread-badge"><?php echo $count_unread; ?></span>
            <?php endif; ?>
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span class="sep">/</span>
            <span>Saran &amp; Pengaduan</span>
        </div>
    </div>
    <a href="<?php echo base_url('pengaduan/tambah'); ?>" class="btn-kirim">
        <i class="bi bi-plus-circle"></i> Kirim Pesan
    </a>
</div>

  <!-- ════════════════════════════════════════════════════════
       ADMIN VIEW
  ═══════════════════════════════════════════════════════════ -->
  <?php if($is_admin): ?>

  <div class="pg-card">
    <div class="pg-card-header">
      <h5><i class="bi bi-list-ul"></i> Semua Pengaduan</h5>
    </div>

    <?php if(empty($pengaduan)): ?>
      <div class="empty-state">
        <div class="empty-state-icon">📭</div>
        <h6>Belum Ada Pengaduan</h6>
        <p>Belum ada pesan masuk dari warga.</p>
      </div>
    <?php else: ?>

      <!-- Desktop table -->
      <div class="pg-table-wrap">
        <table class="pg-table" id="tablePengaduan">
          <thead>
            <tr>
              <th>Kode Tiket</th>
              <th>Pengirim</th>
              <th>Judul</th>
              <th>Kategori</th>
              <th>Status</th>
              <th>Tanggal</th>
              <th style="width:80px">Aksi</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach($pengaduan as $p): ?>
            <tr class="<?php echo $p->status == 'baru' ? 'is-baru' : ''; ?>">
              <td><span class="kode-cell"><?php echo $p->kode_tiket; ?></span></td>
              <td><?php echo $p->pengirim; ?></td>
              <td>
                <span class="judul-cell"><?php echo $p->judul; ?></span>
                <?php if($p->privasi == 'privat'): ?>
                  <i class="bi bi-lock-fill privat-icon" title="Privat"></i>
                <?php endif; ?>
              </td>
              <td><span class="kategori-pill <?php echo strtolower($p->kategori); ?>"><?php echo !empty($p->kategori) ? ucfirst($p->kategori) : '—'; ?></span></td>
              <td>
                <span class="status-pill <?php echo $p->status; ?>">
                  <!--<?php echo ucfirst($p->status); ?>-->
                  <?php echo ucfirst($p->status ?? 'baru'); ?>
                </span>
              </td>
              <td class="date-cell"><?php echo date('d/m/Y', strtotime($p->created_at)); ?></td>
              <td>
                <a href="<?php echo base_url('pengaduan/detail/'.$p->id); ?>" class="act-btn-lihat">
                  <i class="bi bi-eye"></i> Lihat
                </a>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>

      <!-- Mobile admin cards -->
      <div class="admin-mobile-list">
        <?php foreach($pengaduan as $p): ?>
        <div class="admin-mobile-card <?php echo $p->status == 'baru' ? 'is-baru' : ''; ?>">
          <div class="amc-top">
            <div>
              <div class="amc-judul">
                <?php echo $p->judul; ?>
                <?php if($p->privasi == 'privat'): ?>
                  <i class="bi bi-lock-fill privat-icon"></i>
                <?php endif; ?>
              </div>
              <div class="amc-pengirim"><?php echo $p->pengirim; ?> · <?php echo date('d/m/Y', strtotime($p->created_at)); ?></div>
            </div>
            <span class="status-pill <?php echo $p->status; ?>"><?php echo ucfirst($p->status ?? 'baru'); ?></span>
          </div>
          <div class="amc-meta">
            <span class="kode-cell"><?php echo $p->kode_tiket; ?></span>
            <span class="kategori-pill <?php echo strtolower($p->kategori); ?>"><?php echo !empty($p->kategori) ? ucfirst($p->kategori) : '—'; ?></span>
          </div>
          <div class="amc-action">
            <a href="<?php echo base_url('pengaduan/detail/'.$p->id); ?>">
              <i class="bi bi-eye"></i> Lihat &amp; Tanggapi
            </a>
          </div>
        </div>
        <?php endforeach; ?>
      </div>

    <?php endif; ?>
  </div>

  <!-- ════════════════════════════════════════════════════════
       USER VIEW
  ═══════════════════════════════════════════════════════════ -->
  <?php else: ?>

    <?php if(empty($pengaduan)): ?>
      <div class="pg-card">
        <div class="empty-state">
          <div class="empty-state-icon">✉️</div>
          <h6>Belum Ada Pesan</h6>
          <p>Kirim saran atau pengaduan pertama Anda.</p>
        </div>
      </div>
    <?php else: ?>

    <?php
    $status_icon_map = [
      'baru'     => ['icon' => '⏳', 'label' => 'Menunggu'],
      'diproses' => ['icon' => '🔄', 'label' => 'Diproses'],
      'selesai'  => ['icon' => '✅', 'label' => 'Selesai'],
      'ditolak'  => ['icon' => '❌', 'label' => 'Ditolak'],
    ];
    ?>
    <div class="pg-user-grid">
      <?php foreach($pengaduan as $p):
        $si = $status_icon_map[$p->status] ?? ['icon' => '⏳', 'label' => ucfirst($p->status)];
      ?>
      <div class="pg-ticket <?php echo $p->status; ?>">
        <div class="ticket-top">
          <div class="ticket-meta-row">
            <span class="ticket-kode"><?php echo $p->kode_tiket; ?></span>
            <span class="ticket-status-icon" title="<?php echo $si['label']; ?>"><?php echo $si['icon']; ?></span>
          </div>
          <div class="ticket-judul"><?php echo $p->judul; ?></div>
          <div class="ticket-date">
            <i class="bi bi-calendar3" style="margin-right:3px"></i>
            <?php echo date('d F Y H:i', strtotime($p->created_at)); ?>
          </div>
          <div class="ticket-preview"><?php echo mb_substr(strip_tags($p->isi), 0, 110); ?>...</div>

          <?php if($p->lampiran): ?>
          <div class="ticket-lampiran"><i class="bi bi-paperclip"></i> Ada Lampiran</div>
          <?php endif; ?>

          <?php if($p->status == 'selesai' && $p->balasan): ?>
          <div class="ticket-balasan">
            <div class="tb-label"><i class="bi bi-reply-fill"></i> Balasan Admin</div>
            <div class="tb-text"><?php echo mb_substr(strip_tags($p->balasan), 0, 100); ?>...</div>
          </div>
          <?php endif; ?>
        </div>

        <div class="ticket-footer">
          <a href="<?php echo base_url('pengaduan/detail/'.$p->id); ?>" class="ticket-cta <?php echo $p->status; ?>">
            <i class="bi bi-arrow-right-circle"></i>
            <?php
            $cta_label = ['baru' => 'Cek Status', 'diproses' => 'Lihat Progres', 'selesai' => 'Lihat Balasan', 'ditolak' => 'Lihat Detail'];
            echo $cta_label[$p->status] ?? 'Lihat Detail';
            ?>
          </a>
        </div>
      </div>
      <?php endforeach; ?>
    </div>

    <?php endif; ?>
  <?php endif; ?>

</div><!-- /pg-wrapper -->

<!-- ── FAB Mobile (Kirim Pesan) ──────────────────────────── -->
<a href="<?php echo base_url('pengaduan/tambah'); ?>" class="btn-kirim-fab" title="Kirim Pesan">
  <i class="bi bi-plus-lg"></i>
</a>

<script>
$(document).ready(function() {
  if ($('#tablePengaduan').length) {
    $('#tablePengaduan').DataTable({
      language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/id.json' },
      order: [[4, 'desc'], [5, 'desc']],
      pageLength: 25,
      responsive: true,
      dom: '<"pg-dt-top"lf>rt<"pg-dt-bot"ip>',
      initComplete: function() {
        $('.dataTables_filter input').css({
          'border': '1.5px solid #e2e8f0',
          'border-radius': '8px',
          'padding': '7px 13px',
          'font-size': '0.84rem',
          'outline': 'none'
        }).on('focus', function() {
          $(this).css({'border-color': '#0d9488', 'box-shadow': '0 0 0 3px rgba(13,148,136,0.12)'});
        }).on('blur', function() {
          $(this).css({'border-color': '#e2e8f0', 'box-shadow': 'none'});
        });
      }
    });
  }
});
</script>