<?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-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 ────────────────────────────────────────────── */
.pd-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 28px 60px;
}

/* ─── PAGE HEADER ────────────────────────────────────────── */
.pd-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.pd-header-left h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--teal-800);
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
}
.pd-header-left h4 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--teal-800), var(--teal-500));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.32);
  flex-shrink: 0;
}
.pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: var(--slate-400);
  padding-left: 51px;
}
.pd-breadcrumb a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.pd-breadcrumb a:hover { text-decoration: underline; }
.pd-breadcrumb .sep { color: var(--slate-200); }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}
.btn-back:hover { border-color: var(--teal-400); color: var(--teal-700); background: var(--teal-50); }

/* ─── FLASH ALERT ────────────────────────────────────────── */
.flash-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 0.85rem;
}
.flash-alert.success { background: var(--teal-50); border-left: 4px solid var(--teal-600); color: var(--teal-800); }
.flash-alert .fa-close {
  margin-left: auto; cursor: pointer; font-size: 1rem; opacity: .55;
  background: none; border: none; color: inherit; padding: 0; line-height: 1;
}

/* ─── TIKET CARD ─────────────────────────────────────────── */
.pd-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1.5px solid var(--slate-100);
  margin-bottom: 16px;
}

/* Tiket Header */
.tiket-header {
  padding: 22px 26px 20px;
  border-bottom: 1.5px solid var(--slate-100);
  background: var(--slate-50);
}
.tiket-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.tiket-kode {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  background: var(--slate-200);
  color: var(--slate-700);
  border-radius: 5px;
  padding: 3px 9px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 8px;
}
.tiket-judul {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--teal-800);
  margin: 0 0 8px;
  line-height: 1.3;
}
.tiket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.79rem;
  color: var(--slate-500);
}
.tiket-meta span { display: flex; align-items: center; gap: 4px; }
.tiket-meta i { color: var(--slate-400); }

.privat-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.71rem;
  font-weight: 700;
  background: var(--amber-50);
  color: var(--amber-600);
  border: 1px solid var(--amber-100);
  border-radius: 50px;
  padding: 2px 9px;
}

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-pill.baru      { background: #fef2f2; color: var(--red-500);    border: 1.5px solid #fecaca; }
.status-pill.diproses  { background: var(--amber-50); color: var(--amber-600); border: 1.5px solid var(--amber-100); }
.status-pill.selesai   { background: var(--teal-50);  color: var(--teal-700);  border: 1.5px solid var(--teal-100); }
.status-pill.ditolak   { background: var(--slate-100); color: var(--slate-500); border: 1.5px solid var(--slate-200); }

/* Tiket Body */
.tiket-body { padding: 24px 26px; }

.isi-label {
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--slate-400);
  margin-bottom: 10px;
}
.isi-pesan {
  background: var(--slate-50);
  border: 1.5px solid var(--slate-100);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 0.88rem;
  color: var(--slate-700);
  line-height: 1.7;
  white-space: pre-line;
}

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

/* ─── BALASAN CARD ───────────────────────────────────────── */
.balasan-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--teal-100);
  border-left: 4px solid var(--teal-500);
  overflow: hidden;
  margin-bottom: 16px;
}
.balasan-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1.5px solid var(--teal-100);
  background: var(--teal-50);
}
.balasan-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13,148,136,0.28);
}
.balasan-header-info .bh-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal-800);
  margin-bottom: 2px;
}
.balasan-header-info .bh-meta {
  font-size: 0.74rem;
  color: var(--slate-400);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.balasan-body {
  padding: 18px 22px;
  font-size: 0.88rem;
  color: var(--slate-700);
  line-height: 1.7;
  white-space: pre-line;
}

/* ─── REPLY FORM CARD ────────────────────────────────────── */
.reply-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1.5px solid var(--slate-100);
  margin-bottom: 16px;
}
.reply-card-header {
  padding: 16px 24px;
  border-bottom: 1.5px solid var(--slate-100);
  background: var(--slate-50);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--teal-800);
  display: flex;
  align-items: center;
  gap: 8px;
}
.reply-card-header i { color: var(--teal-500); }
.reply-card-body { padding: 22px 24px; }

/* val error */
.val-error {
  background: #fef2f2;
  border-left: 4px solid var(--red-500);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.83rem;
  color: #7f1d1d;
  margin-bottom: 18px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.form-group-c { margin-bottom: 16px; }
.form-label-c {
  display: block;
  font-size: 0.77rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--slate-500);
  margin-bottom: 7px;
}

/* Status radio cards (compact, horizontal) */
.status-radio-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.status-radio-btn {
  position: relative;
  flex: 1;
  min-width: 100px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: all .18s;
  background: #fff;
  text-align: center;
}
.status-radio-btn input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.status-radio-btn .srb-label { font-size: 0.82rem; font-weight: 700; color: var(--slate-600, var(--slate-500)); }
.status-radio-btn:hover { border-color: var(--teal-300, var(--teal-400)); background: var(--teal-50); }
.status-radio-btn:has(input:checked).diproses { border-color: var(--amber-400); background: var(--amber-50); }
.status-radio-btn:has(input:checked).diproses .srb-label { color: var(--amber-600); }
.status-radio-btn:has(input:checked).selesai  { border-color: var(--teal-500);  background: var(--teal-50); }
.status-radio-btn:has(input:checked).selesai  .srb-label { color: var(--teal-700); }
.status-radio-btn:has(input:checked).ditolak  { border-color: var(--red-500);   background: #fef2f2; }
.status-radio-btn:has(input:checked).ditolak  .srb-label { color: var(--red-500); }

.custom-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--slate-900);
  resize: vertical;
  min-height: 110px;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.6;
}
.custom-textarea:focus {
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
  outline: none;
}

.reply-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1.5px solid var(--slate-100);
  flex-wrap: wrap;
}
.btn-submit-reply {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 26px;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(135deg, var(--teal-800), var(--teal-600));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13,148,136,0.32);
  transition: all .2s;
}
.btn-submit-reply:hover {
  background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(13,148,136,0.40);
}

/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pd-wrapper    { padding: 0 12px 80px; }
  .pd-page-header { flex-direction: column; align-items: flex-start; }
  .tiket-body    { padding: 18px 16px; }
  .tiket-header  { padding: 16px; }
  .balasan-body  { padding: 14px 16px; }
  .reply-card-body { padding: 16px; }
  .tiket-header-top { flex-direction: column; }
  .status-pill   { align-self: flex-start; }
  .status-radio-row { flex-direction: column; }
  .status-radio-btn { min-width: unset; text-align: left; }
  .reply-footer  { flex-direction: column-reverse; }
  .btn-submit-reply,
  .btn-back      { width: 100%; justify-content: center; }

  /* Mobile sticky submit */
  .mobile-sticky {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    z-index: 100;
    border-top: 1px solid var(--slate-100);
    gap: 8px;
  }
  .mobile-sticky .btn-submit-reply { flex: 1; }
  .reply-footer  { display: none; }
  .reply-card-body { padding-bottom: 80px; }
}
@media (min-width: 601px) {
  .mobile-sticky { display: none; }
}
</style>

<div class="pd-wrapper">

  <!-- ── Page Header ───────────────────────────────────────── -->
  <div class="pd-page-header">
    <div class="pd-header-left">
      <h4>
        <span class="hi"><i class="bi bi-chat-square-text"></i></span>
        Detail Pengaduan
      </h4>
      <div class="pd-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span class="sep">/</span>
        <a href="<?php echo base_url('pengaduan'); ?>">Pengaduan</a>
        <span class="sep">/</span>
        <span>Detail</span>
      </div>
    </div>
    <a href="<?php echo base_url('pengaduan'); ?>" class="btn-back">
      <i class="bi bi-arrow-left"></i> Kembali
    </a>
  </div>

  <!-- ── Flash Alert ────────────────────────────────────────── -->
  <?php if($this->session->flashdata('success')): ?>
  <div class="flash-alert success" id="flashSuccess">
    <i class="bi bi-check-circle-fill"></i>
    <span><?php echo $this->session->flashdata('success'); ?></span>
    <button class="fa-close" onclick="this.parentElement.remove()">✕</button>
  </div>
  <?php endif; ?>

  <!-- ── Tiket Card ─────────────────────────────────────────── -->
  <div class="pd-card">
    <div class="tiket-header">
      <div class="tiket-header-top">
        <div>
          <span class="tiket-kode"><?php echo $item->kode_tiket; ?></span>
          <h2 class="tiket-judul"><?php echo $item->judul; ?></h2>
          <div class="tiket-meta">
            <span><i class="bi bi-person"></i> <?php echo $item->pengirim; ?></span>
            <span><i class="bi bi-calendar3"></i> <?php echo date('d F Y H:i', strtotime($item->created_at)); ?></span>
            <?php if($item->privasi == 'privat'): ?>
              <span class="privat-tag"><i class="bi bi-lock-fill"></i> Privat</span>
            <?php endif; ?>
          </div>
        </div>
       <?php
$sp = $item->status ?? 'baru';
$sp_icon = ['baru'=>'bi-hourglass-split','diproses'=>'bi-arrow-repeat','selesai'=>'bi-check-circle-fill','ditolak'=>'bi-x-circle-fill'];
?>
<span class="status-pill <?php echo $sp; ?>">
  <i class="bi <?php echo $sp_icon[$sp] ?? 'bi-circle'; ?>" style="font-size:.65rem"></i>
  <?php echo ucfirst($sp); ?>
</span>
      </div>
    </div>

    <div class="tiket-body">
      <div class="isi-label">Isi Pesan</div>
      <div class="isi-pesan"><?php echo nl2br(htmlspecialchars($item->isi)); ?></div>

      <?php if($item->lampiran): ?>
      <a href="<?php echo base_url('uploads/pengaduan/'.$item->lampiran); ?>" target="_blank" class="lampiran-btn">
        <i class="bi bi-paperclip"></i> Lihat Lampiran
      </a>
      <?php endif; ?>
    </div>
  </div>

  <!-- ── Balasan Admin ──────────────────────────────────────── -->
  <?php if($item->balasan): ?>
  <div class="balasan-card">
    <div class="balasan-header">
      <div class="balasan-avatar"><i class="bi bi-person-check"></i></div>
      <div class="balasan-header-info">
        <div class="bh-title">Balasan Admin</div>
        <div class="bh-meta">
          <span><i class="bi bi-person" style="margin-right:3px"></i><?php echo $item->penjawab; ?></span>
          <span><i class="bi bi-calendar3" style="margin-right:3px"></i><?php echo date('d F Y H:i', strtotime($item->tanggal_balasan)); ?></span>
        </div>
      </div>
    </div>
    <div class="balasan-body"><?php echo nl2br(htmlspecialchars($item->balasan)); ?></div>
  </div>
  <?php endif; ?>

  <!-- ── Admin Reply Form ───────────────────────────────────── -->
  <?php if($is_admin && $item->status != 'selesai'): ?>
  <div class="reply-card">
    <div class="reply-card-header">
      <i class="bi bi-reply"></i> Kirim Balasan
    </div>
    <div class="reply-card-body">

      <?php $errors = validation_errors(); if(!empty($errors)): ?>
      <div class="val-error">
        <i class="bi bi-exclamation-triangle-fill" style="color:var(--red-500);flex-shrink:0;margin-top:1px"></i>
        <div><?php echo $errors; ?></div>
      </div>
      <?php endif; ?>

      <form action="<?php echo base_url('pengaduan/balas/'.$item->id); ?>" method="post" id="formBalas">

        <div class="form-group-c">
          <label class="form-label-c">Status Penanganan</label>
          <div class="status-radio-row">
            <label class="status-radio-btn diproses">
              <input type="radio" name="status" value="diproses"
                     <?php echo $item->status == 'diproses' ? 'checked' : ''; ?>>
              <div class="srb-label">🔄 Sedang Diproses</div>
            </label>
            <label class="status-radio-btn selesai">
              <input type="radio" name="status" value="selesai">
              <div class="srb-label">✅ Selesai</div>
            </label>
            <label class="status-radio-btn ditolak">
              <input type="radio" name="status" value="ditolak">
              <div class="srb-label">❌ Ditolak</div>
            </label>
          </div>
        </div>

        <div class="form-group-c">
          <label class="form-label-c">Isi Balasan <span style="color:var(--red-500)">*</span></label>
          <textarea name="balasan" class="custom-textarea" required
                    placeholder="Tulis balasan Anda di sini..."></textarea>
        </div>

        <!-- Desktop footer -->
        <div class="reply-footer">
          <a href="<?php echo base_url('pengaduan'); ?>" class="btn-back">
            <i class="bi bi-arrow-left"></i> Kembali
          </a>
          <button type="submit" class="btn-submit-reply">
            <i class="bi bi-send"></i> Kirim Balasan
          </button>
        </div>

      </form>
    </div>
  </div>

  <!-- Mobile sticky submit -->
  <div class="mobile-sticky">
    <button type="submit" form="formBalas" class="btn-submit-reply">
      <i class="bi bi-send"></i> Kirim Balasan
    </button>
  </div>

  <?php endif; ?>

</div><!-- /pd-wrapper -->

<script>
$(document).ready(function() {
  /* Auto-dismiss flash */
  setTimeout(function() {
    var el = document.getElementById('flashSuccess');
    if (el) {
      el.style.transition = 'opacity .4s';
      el.style.opacity = '0';
      setTimeout(function(){ el.remove(); }, 420);
    }
  }, 4500);
});
</script>