<?php
/* ════════════════════════════════════════════════════════
   SEMUA LOGIKA PHP DI SINI — sebelum include navbar.php
   Karena navbar.php langsung echo HTML, header() harus
   dipanggil SEBELUM output apapun.
════════════════════════════════════════════════════════ */
session_start();

include 'koneksi.php';

/* ── Helper: cek kolom tabel ── */
function smGetCols($conn, $table){
    $cols = [];
    $r = mysqli_query($conn, "SHOW COLUMNS FROM `$table`");
    if($r) while($row = mysqli_fetch_assoc($r)) $cols[] = $row['Field'];
    return $cols;
}
$tabelKolom      = smGetCols($conn, 'surat');
$hasJenis        = in_array('jenis',             $tabelKolom);
$hasKeterangan   = in_array('keterangan',        $tabelKolom);
$hasLampiran     = in_array('lampiran',          $tabelKolom);
$hasFilePath     = in_array('file_path',         $tabelKolom);
$hasPrioritas    = in_array('prioritas',         $tabelKolom);
$hasDisposisiKpd = in_array('disposisi_kepada',  $tabelKolom);
$hasCatatanDis   = in_array('catatan_disposisi', $tabelKolom);
$hasTglDisposisi = in_array('tanggal_disposisi', $tabelKolom);
$hasCreatedBy    = in_array('created_by',        $tabelKolom);
$hasUpdatedBy    = in_array('updated_by',        $tabelKolom);

$upload_dir = 'uploads/surat_masuk/';
if(!is_dir($upload_dir)) mkdir($upload_dir, 0777, true);

$msg      = '';
$msg_type = '';
$editData = null;

/* ── Upload lampiran ── */
function smUploadLampiran($dir){
    if(!isset($_FILES['lampiran']) || $_FILES['lampiran']['error'] !== UPLOAD_ERR_OK) return null;
    $allowed = ['pdf','doc','docx','jpg','jpeg','png','zip','rar'];
    $ext     = strtolower(pathinfo($_FILES['lampiran']['name'], PATHINFO_EXTENSION));
    if(!in_array($ext, $allowed))                  return null;
    if($_FILES['lampiran']['size'] > 10*1024*1024)  return null;
    $fn   = date('YmdHis').'_'.uniqid().'.'.$ext;
    $dest = $dir.$fn;
    if(move_uploaded_file($_FILES['lampiran']['tmp_name'], $dest))
        return ['nama' => $_FILES['lampiran']['name'], 'path' => $dest];
    return null;
}

/* ══ HAPUS ══ */
if(isset($_GET['hapus'])){
    $id = intval($_GET['hapus']);
    if($hasFilePath){
        $row = mysqli_fetch_assoc(mysqli_query($conn,"SELECT file_path FROM surat WHERE id=$id"));
        if($row && !empty($row['file_path']) && file_exists($row['file_path'])) unlink($row['file_path']);
    }
    if(mysqli_query($conn,"DELETE FROM surat WHERE id=$id"))
        header("Location: suratmasuk.php?ok=del");
    else
        header("Location: suratmasuk.php?err=".urlencode(mysqli_error($conn)));
    exit();
}

/* ══ SIMPAN (INSERT) ══ */
if(isset($_POST['simpan'])){
    $nomor    = mysqli_real_escape_string($conn, trim($_POST['nomor']    ?? ''));
    $tanggal  = mysqli_real_escape_string($conn, trim($_POST['tanggal']  ?? ''));
    $perihal  = mysqli_real_escape_string($conn, trim($_POST['perihal']  ?? ''));
    $pengirim = mysqli_real_escape_string($conn, trim($_POST['pengirim'] ?? ''));
    $status   = mysqli_real_escape_string($conn, trim($_POST['status']   ?? 'Draft'));
    $prioritas= mysqli_real_escape_string($conn, trim($_POST['prioritas']?? 'Biasa'));
    $disp_kpd = mysqli_real_escape_string($conn, trim($_POST['disposisi_kepada']  ?? ''));
    $disp_cat = mysqli_real_escape_string($conn, trim($_POST['catatan_disposisi'] ?? ''));
    $uid      = isset($_SESSION['user_id']) ? intval($_SESSION['user_id']) : 0;
    $file     = smUploadLampiran($upload_dir);

    $cols=[]; $vals=[];
    if($hasJenis)      { $cols[]='jenis';       $vals[]="'Masuk'"; }
    $cols[]='nomor_surat'; $vals[]="'$nomor'";
    $cols[]='tanggal';     $vals[]="'$tanggal'";
    $cols[]='perihal';     $vals[]="'$perihal'";
    if($hasKeterangan) { $cols[]='keterangan';  $vals[]="'$pengirim'"; }
    if($hasLampiran)   {
        $n = $file ? "'".mysqli_real_escape_string($conn,$file['nama'])."'" : 'NULL';
        $cols[]='lampiran'; $vals[]=$n;
    }
    if($hasFilePath)   {
        $p = $file ? "'".mysqli_real_escape_string($conn,$file['path'])."'" : 'NULL';
        $cols[]='file_path'; $vals[]=$p;
    }
    $cols[]='status'; $vals[]="'$status'";
    if($hasPrioritas)    { $cols[]='prioritas';         $vals[]="'$prioritas'"; }
    if($hasDisposisiKpd) { $cols[]='disposisi_kepada';  $vals[]= $disp_kpd ? "'$disp_kpd'" : 'NULL'; }
    if($hasCatatanDis)   { $cols[]='catatan_disposisi'; $vals[]= $disp_cat ? "'$disp_cat'" : 'NULL'; }
    if($hasTglDisposisi) { $cols[]='tanggal_disposisi'; $vals[]= $disp_kpd ? "'".date('Y-m-d H:i:s')."'" : 'NULL'; }
    if($hasCreatedBy)    { $cols[]='created_by';        $vals[]= $uid; }

    $q = "INSERT INTO surat (".implode(',',$cols).") VALUES (".implode(',',$vals).")";
    if(mysqli_query($conn,$q)){
        header("Location: suratmasuk.php?ok=add"); exit();
    } else {
        /* Jangan redirect — tampilkan error di halaman */
        $msg = "Gagal menyimpan: ".mysqli_error($conn);
        $msg_type = 'err';
    }
}

/* ══ UPDATE ══ */
if(isset($_POST['update'])){
    $id       = intval($_POST['id'] ?? 0);
    $nomor    = mysqli_real_escape_string($conn, trim($_POST['nomor']    ?? ''));
    $tanggal  = mysqli_real_escape_string($conn, trim($_POST['tanggal']  ?? ''));
    $perihal  = mysqli_real_escape_string($conn, trim($_POST['perihal']  ?? ''));
    $pengirim = mysqli_real_escape_string($conn, trim($_POST['pengirim'] ?? ''));
    $status   = mysqli_real_escape_string($conn, trim($_POST['status']   ?? 'Draft'));
    $prioritas= mysqli_real_escape_string($conn, trim($_POST['prioritas']?? 'Biasa'));
    $disp_kpd = mysqli_real_escape_string($conn, trim($_POST['disposisi_kepada']  ?? ''));
    $disp_cat = mysqli_real_escape_string($conn, trim($_POST['catatan_disposisi'] ?? ''));
    $uid      = isset($_SESSION['user_id']) ? intval($_SESSION['user_id']) : 0;

    $old  = mysqli_fetch_assoc(mysqli_query($conn,"SELECT * FROM surat WHERE id=$id"));
    $file = smUploadLampiran($upload_dir);
    if($file && $hasFilePath && !empty($old['file_path']) && file_exists($old['file_path'])) unlink($old['file_path']);

    $sets=[];
    $sets[]="nomor_surat='$nomor'";
    $sets[]="tanggal='$tanggal'";
    $sets[]="perihal='$perihal'";
    if($hasKeterangan)   $sets[]="keterangan='$pengirim'";
    $sets[]="status='$status'";
    if($hasPrioritas)    $sets[]="prioritas='$prioritas'";
    if($hasDisposisiKpd) $sets[]="disposisi_kepada=".($disp_kpd ? "'$disp_kpd'" : 'NULL');
    if($hasCatatanDis)   $sets[]="catatan_disposisi=".($disp_cat ? "'$disp_cat'" : 'NULL');
    if($hasUpdatedBy)    $sets[]="updated_by=$uid";
    if($hasTglDisposisi && $disp_kpd && empty($old['tanggal_disposisi'])) $sets[]="tanggal_disposisi=NOW()";
    if($hasLampiran){
        $n = $file ? "'".mysqli_real_escape_string($conn,$file['nama'])."'"
                   : (!empty($old['lampiran']) ? "'".mysqli_real_escape_string($conn,$old['lampiran'])."'" : 'NULL');
        $sets[]="lampiran=$n";
    }
    if($hasFilePath){
        $p = $file ? "'".mysqli_real_escape_string($conn,$file['path'])."'"
                   : (!empty($old['file_path']) ? "'".mysqli_real_escape_string($conn,$old['file_path'])."'" : 'NULL');
        $sets[]="file_path=$p";
    }
    $q = "UPDATE surat SET ".implode(', ',$sets)." WHERE id=$id";
    if(mysqli_query($conn,$q)){
        header("Location: suratmasuk.php?ok=update"); exit();
    } else {
        $msg = "Gagal update: ".mysqli_error($conn);
        $msg_type = 'err';
        /* Reload edit data untuk pre-fill form */
        $res = mysqli_query($conn,"SELECT * FROM surat WHERE id=$id");
        if($res) $editData = mysqli_fetch_assoc($res);
    }
}

/* ══ GET: edit / flash message ══ */
if(isset($_GET['edit'])){
    $id  = intval($_GET['edit']);
    $res = mysqli_query($conn,"SELECT * FROM surat WHERE id=$id");
    if($res) $editData = mysqli_fetch_assoc($res);
}
if(isset($_GET['ok'])){
    if($_GET['ok']==='add')    { $msg='Surat masuk berhasil disimpan!';   $msg_type='ok'; }
    if($_GET['ok']==='update') { $msg='Surat masuk berhasil diperbarui!'; $msg_type='ok'; }
    if($_GET['ok']==='del')    { $msg='Surat berhasil dihapus.';          $msg_type='del'; }
}
if(isset($_GET['err'])){
    $msg = htmlspecialchars(urldecode($_GET['err']));
    $msg_type = 'err';
}

/* ── Data tabel ── */
$data  = mysqli_query($conn,"SELECT * FROM surat WHERE jenis='Masuk' ORDER BY id DESC");
$total = $data ? mysqli_num_rows($data) : 0;

/* ════════════════════════════════════════════════════════
   BARU SEKARANG include navbar (sudah aman, karena semua
   header() sudah diproses di atas)
════════════════════════════════════════════════════════ */
$page_title  = 'Surat Masuk — MA As-Syafi\'iyah 02';
$active_menu = 'surat';
$loader_text = 'Memuat Surat Masuk';
include 'navbar.php';
?>

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
  --sm-blue:    #2563EB;
  --sm-blue-d:  #1D4ED8;
  --sm-blue-l:  #EFF6FF;
  --sm-blue-b:  #BFDBFE;
  --sm-teal:    #0D9488;
  --sm-amber-l: #FFFBEB;
  --sm-red:     #EF4444;
  --sm-red-l:   #FEF2F2;
  --sm-green:   #22C55E;
  --sm-green-l: #F0FDF4;
  --sm-green-d: #16A34A;
  --sm-r-sm: 8px;
  --sm-r-md: 12px;
  --sm-r-lg: 16px;
  --sm-r-xl: 20px;
  --sm-sh:    0 1px 4px rgba(8,12,20,.06);
  --sm-sh-bl: 0 4px 18px rgba(37,99,235,.18);
}

@keyframes sm-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes sm-in { from{opacity:0;transform:translateY(-8px)}  to{opacity:1;transform:translateY(0)} }

/* Sub-nav */
.sm-subnav {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:.875rem 1.25rem;
  background:#fff; border:1px solid var(--bd,#E8E4DC);
  border-radius:var(--sm-r-lg); box-shadow:var(--sm-sh);
  margin-bottom:1.5rem; animation:sm-up .4s ease-out;
}
.sm-subnav-left { display:flex; align-items:center; gap:.625rem; }
.sm-subnav-icon {
  width:32px; height:32px; border-radius:var(--sm-r-sm);
  background:linear-gradient(135deg,var(--sm-blue),var(--sm-teal));
  display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0;
}
.sm-subnav-title { font-size:.9rem; font-weight:700; color:var(--tx,#131820); }
.sm-subnav-sub   { font-size:.68rem; color:var(--txl,#9BA4B5); font-weight:500; }
.sm-subnav-nav   { display:flex; align-items:center; gap:.375rem; }
.sm-nb {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.4rem .95rem; border-radius:50px;
  font-size:.78rem; font-weight:700; text-decoration:none;
  border:1.5px solid var(--bd,#E8E4DC); color:var(--txm,#5A6478);
  background:#fff; transition:all .18s; font-family:'Outfit',sans-serif; white-space:nowrap;
}
.sm-nb:hover      { border-color:var(--sm-blue); color:var(--sm-blue-d); background:var(--sm-blue-l); }
.sm-nb.active     { background:linear-gradient(135deg,var(--sm-blue),var(--sm-blue-d)); color:#fff; border-color:transparent; box-shadow:var(--sm-sh-bl); }
.sm-nb.back:hover { transform:translateX(-2px); }

.sm-body { display:flex; flex-direction:column; gap:1.375rem; }

/* Hero */
.sm-hero {
  background:linear-gradient(135deg,#1D4ED8 0%,#2563EB 50%,#1e40af 100%);
  border-radius:var(--sm-r-xl); padding:1.875rem 2rem;
  position:relative; overflow:hidden;
  box-shadow:0 8px 28px rgba(29,78,216,.25); animation:sm-up .45s ease-out;
}
.sm-hero-dots { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1px); background-size:26px 26px; }
.sm-hero-orb  { position:absolute; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.sm-hero-orb-1 { width:180px; height:180px; top:-50px; right:50px; }
.sm-hero-orb-2 { width:100px; height:100px; bottom:-30px; right:190px; }
.sm-hero-body  { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap; }
.sm-hero-pill  { display:inline-flex; align-items:center; gap:.35rem; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); border-radius:50px; padding:.28rem .875rem; font-size:.68rem; font-weight:700; color:rgba(255,255,255,.9); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; }
.sm-hero-title { font-size:1.875rem; font-weight:800; color:#fff; line-height:1.15; letter-spacing:-.025em; margin-bottom:.5rem; }
.sm-hero-title em { color:#93C5FD; font-style:normal; }
.sm-hero-desc  { font-size:.84rem; color:rgba(255,255,255,.75); font-weight:500; }
.sm-hero-right { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.sm-hero-stat  { text-align:center; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); border-radius:var(--sm-r-lg); padding:.875rem 1.375rem; }
.sm-hero-num   { font-size:2.5rem; font-weight:800; color:#fff; font-family:'DM Mono',monospace; line-height:1; }
.sm-hero-lbl   { font-size:.65rem; color:rgba(255,255,255,.7); font-weight:700; margin-top:.3rem; text-transform:uppercase; letter-spacing:.08em; }
.sm-hero-emoji { font-size:3.75rem; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)); }

/* Alert */
.sm-alert     { display:flex; align-items:flex-start; gap:.75rem; padding:.875rem 1.125rem; border-radius:var(--sm-r-md); font-weight:600; font-size:.855rem; border:1.5px solid; animation:sm-in .3s ease-out; }
.sm-alert-ico { font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.sm-ok   { background:var(--sm-green-l); color:#166534; border-color:#86EFAC; }
.sm-del  { background:var(--sm-blue-l);  color:#1D4ED8;  border-color:var(--sm-blue-b); }
.sm-err  { background:var(--sm-red-l);   color:#991B1B;  border-color:#FCA5A5; }
.sm-edit { background:var(--sm-amber-l); color:#92400E;  border-color:#FCD34D; }
.sm-edit a { color:inherit; font-weight:800; text-decoration:underline; }

/* Card */
.sm-card      { background:#fff; border-radius:var(--sm-r-xl); border:1px solid var(--bd,#E8E4DC); box-shadow:var(--sm-sh); overflow:hidden; animation:sm-up .4s ease-out backwards; }
.sm-card.is-edit { border-color:#FCD34D; box-shadow:0 0 0 3px rgba(251,191,36,.1); }
.sm-card-head { padding:1rem 1.375rem; border-bottom:1px solid var(--bd,#E8E4DC); background:var(--sf2,#FAFAF9); display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.sm-card-hl   { display:flex; align-items:center; gap:.625rem; min-width:0; }
.sm-card-ico  { width:36px; height:36px; border-radius:var(--sm-r-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.sm-card-ico.blue  { background:var(--sm-blue-l); }
.sm-card-ico.amber { background:var(--sm-amber-l); }
.sm-card-t { font-size:.9rem; font-weight:700; color:var(--tx,#131820); }
.sm-card-s { font-size:.7rem; color:var(--txl,#9BA4B5); font-weight:500; margin-top:1px; }

/* Form */
.sm-form-body { padding:1.375rem; }
.sm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; }
.fg    { display:flex; flex-direction:column; gap:.375rem; }
.fg.s2 { grid-column:span 2; }
.fg.s3 { grid-column:span 3; }
.fg-div { grid-column:1/-1; border:none; border-top:1px dashed var(--bd,#E8E4DC); margin:.125rem 0; }
.flbl  { font-size:.7rem; font-weight:700; color:var(--txm,#5A6478); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:.3rem; }
.flbl .req { color:var(--sm-red); }
.flbl .opt { font-size:.67rem; color:var(--txl,#9BA4B5); text-transform:none; letter-spacing:0; font-weight:500; }
.fi,.fs,.fta {
  padding:.68rem .95rem; background:#fff;
  border:1.5px solid var(--bd,#E8E4DC); border-radius:var(--sm-r-md);
  font-size:.875rem; font-family:'Outfit',sans-serif;
  font-weight:500; color:var(--tx,#131820);
  transition:border-color .18s,box-shadow .18s; outline:none; width:100%;
}
.fi::placeholder,.fta::placeholder { color:var(--txl,#9BA4B5); }
.fi:focus,.fs:focus,.fta:focus { border-color:var(--sm-blue); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.fta { resize:vertical; min-height:86px; }

/* Upload zone */
.sm-fz { display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:1.375rem 1rem; background:var(--sf2,#FAFAF9); border:2px dashed var(--bd,#E8E4DC); border-radius:var(--sm-r-md); cursor:pointer; text-align:center; transition:all .2s; }
.sm-fz:hover    { border-color:var(--sm-blue); background:var(--sm-blue-l); }
.sm-fz.has-file { border-color:var(--sm-green); background:var(--sm-green-l); }
.sm-fz-ico  { font-size:1.625rem; }
.sm-fz-txt  { font-size:.82rem; font-weight:600; color:var(--txm,#5A6478); }
.sm-fz-hint { font-size:.7rem; color:var(--txl,#9BA4B5); }
.sm-fz-name { font-size:.8rem; font-weight:600; color:var(--sm-green-d); }
input[type="file"] { display:none; }
.sm-curfile { display:inline-flex; align-items:center; gap:.375rem; padding:.35rem .8rem; background:var(--sm-blue-l); border:1.5px solid var(--sm-blue-b); border-radius:50px; font-size:.73rem; font-weight:600; margin-top:.5rem; }
.sm-curfile a { color:#1D4ED8; text-decoration:none; }
.sm-curfile a:hover { text-decoration:underline; }

.sm-actions { margin-top:1.375rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.sm-btn-save {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.68rem 1.625rem; border-radius:var(--sm-r-md); border:none;
  font-size:.875rem; font-weight:700; font-family:'Outfit',sans-serif; cursor:pointer;
  background:linear-gradient(135deg,var(--sm-blue),var(--sm-blue-d));
  color:#fff; box-shadow:var(--sm-sh-bl); transition:all .2s;
}
.sm-btn-save:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(37,99,235,.28); }
.sm-btn-save.upd { background:linear-gradient(135deg,#FBBF24,#F59E0B); box-shadow:0 4px 14px rgba(245,158,11,.22); }
.sm-btn-save.upd:hover { box-shadow:0 8px 22px rgba(245,158,11,.30); }
.sm-btn-cancel {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.68rem 1.25rem; border-radius:var(--sm-r-md);
  border:1.5px solid var(--bd,#E8E4DC); font-size:.875rem; font-weight:600;
  font-family:'Outfit',sans-serif; background:#fff; color:var(--txm,#5A6478);
  text-decoration:none; cursor:pointer; transition:all .18s;
}
.sm-btn-cancel:hover { border-color:var(--sm-red); color:var(--sm-red); background:var(--sm-red-l); }

/* Tabel toolbar */
.sm-tbl-bar { padding:1rem 1.375rem; background:linear-gradient(135deg,#1D4ED8,#2563EB); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.sm-tbl-label { display:flex; align-items:center; gap:.5rem; color:#fff; font-size:.9rem; font-weight:700; }
.sm-tbl-cnt { background:rgba(255,255,255,.2); color:rgba(255,255,255,.9); padding:.15rem .6rem; border-radius:50px; font-size:.7rem; font-weight:700; }
.sm-srch-wrap { position:relative; }
.sm-srch-wrap::before { content:'🔍'; position:absolute; left:.8rem; top:50%; transform:translateY(-50%); font-size:.75rem; }
.sm-srch { padding:.52rem .875rem .52rem 2.375rem; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.28); border-radius:50px; color:#fff; font-size:.8rem; font-family:'Outfit',sans-serif; font-weight:500; outline:none; width:230px; transition:all .2s; }
.sm-srch::placeholder { color:rgba(255,255,255,.55); }
.sm-srch:focus { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.55); }

/* Tabel */
.sm-tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.sm-tbl   { width:100%; border-collapse:collapse; min-width:860px; }
table.sm-tbl thead tr { background:var(--sf2,#FAFAF9); border-bottom:2px solid var(--bd,#E8E4DC); }
table.sm-tbl th { padding:.8rem 1rem; text-align:left; font-size:.67rem; font-weight:800; color:var(--txl,#9BA4B5); text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
table.sm-tbl tbody tr { border-bottom:1px solid var(--bd,#E8E4DC); transition:background .15s; }
table.sm-tbl tbody tr:hover { background:var(--sm-blue-l); }
table.sm-tbl tbody tr:last-child { border-bottom:none; }
table.sm-tbl td { padding:.825rem 1rem; font-size:.83rem; font-weight:500; color:var(--txm,#5A6478); vertical-align:middle; }
.td-no   { font-family:'DM Mono',monospace; font-size:.7rem; color:var(--txl,#9BA4B5); width:36px; }
.td-nom  { font-family:'DM Mono',monospace; font-size:.74rem; color:var(--sm-blue-d); max-width:155px; word-break:break-all; }
.td-date { font-family:'DM Mono',monospace; font-size:.76rem; white-space:nowrap; }
.td-ph   { max-width:190px; font-size:.8rem; line-height:1.5; }
.td-nil  { color:var(--txl,#9BA4B5); }

/* Badges */
.sm-bdg { display:inline-flex; align-items:center; gap:.22rem; padding:.22rem .6rem; border-radius:50px; font-size:.67rem; font-weight:700; white-space:nowrap; }
.sm-dot { width:5px; height:5px; border-radius:50%; display:inline-block; }
.s-draft     { background:#F1F5F9; color:#475569; } .s-draft     .sm-dot { background:#94A3B8; }
.s-diterima  { background:#DCFCE7; color:#166534; } .s-diterima  .sm-dot { background:#22C55E; }
.s-diproses  { background:#FEF3C7; color:#92400E; } .s-diproses  .sm-dot { background:#FBBF24; }
.s-selesai   { background:#D1FAE5; color:#065F46; } .s-selesai   .sm-dot { background:#10B981; }
.s-terkirim  { background:#DBEAFE; color:#1E40AF; } .s-terkirim  .sm-dot { background:#3B82F6; }
.s-arsip     { background:#E5E7EB; color:#374151; } .s-arsip     .sm-dot { background:#6B7280; }
.p-biasa           { background:#EDE9FE; color:#5B21B6; } .p-biasa           .sm-dot { background:#7C3AED; }
.p-penting         { background:#FEF3C7; color:#92400E; } .p-penting         .sm-dot { background:#F59E0B; }
.p-sangat-penting  { background:#FEE2E2; color:#991B1B; } .p-sangat-penting  .sm-dot { background:#EF4444; }
.p-segera          { background:#FCE7F3; color:#9D174D; } .p-segera          .sm-dot { background:#EC4899; }

.sm-chip { display:inline-flex; align-items:center; gap:.28rem; padding:.22rem .6rem; background:var(--sm-blue-l); border:1.5px solid var(--sm-blue-b); border-radius:50px; font-size:.7rem; font-weight:600; color:#1D4ED8; text-decoration:none; transition:all .16s; }
.sm-chip:hover { background:#DBEAFE; }
.sm-acts { display:flex; gap:.3rem; flex-wrap:nowrap; }
.sm-act  { display:inline-flex; align-items:center; gap:.22rem; padding:.34rem .68rem; border-radius:var(--sm-r-sm); font-size:.72rem; font-weight:700; font-family:'Outfit',sans-serif; text-decoration:none; border:none; cursor:pointer; transition:all .18s; white-space:nowrap; }
.sm-act:hover  { transform:translateY(-1px); }
.sm-act-e { background:#FEF3C7; color:#92400E; } .sm-act-e:hover { background:#FDE68A; }
.sm-act-f { background:var(--sm-blue-l); color:#1D4ED8; } .sm-act-f:hover { background:#DBEAFE; }
.sm-act-d { background:var(--sm-red-l); color:#991B1B; }  .sm-act-d:hover { background:#FECACA; }

.sm-empty { text-align:center; padding:3.5rem 2rem; }
.sm-empty-ico { font-size:3.5rem; margin-bottom:.875rem; opacity:.5; }
.sm-empty-t   { font-size:1rem; font-weight:700; color:var(--txm,#5A6478); margin-bottom:.4rem; }
.sm-empty-s   { font-size:.84rem; color:var(--txl,#9BA4B5); }

/* Mobile card list */
.sm-mc-list { display:none; }
.sm-mc      { background:#fff; border-radius:var(--sm-r-lg); border:1px solid var(--bd,#E8E4DC); box-shadow:var(--sm-sh); margin-bottom:.875rem; overflow:hidden; animation:sm-up .3s ease-out backwards; }
.sm-mc-top  { padding:.875rem 1rem; background:linear-gradient(135deg,var(--sf2,#FAFAF9),var(--sm-blue-l)); border-bottom:1px solid var(--bd,#E8E4DC); display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.sm-mc-tl   { flex:1; min-width:0; }
.sm-mc-seq  { font-size:.63rem; color:var(--txl,#9BA4B5); font-weight:600; margin-bottom:.2rem; }
.sm-mc-num  { font-family:'DM Mono',monospace; font-size:.8rem; font-weight:600; color:var(--sm-blue-d); word-break:break-all; line-height:1.4; }
.sm-mc-date { font-size:.7rem; color:var(--txl,#9BA4B5); font-weight:500; margin-top:.2rem; }
.sm-mc-bgs  { display:flex; gap:.3rem; flex-wrap:wrap; flex-shrink:0; }
.sm-mc-mid  { padding:.875rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
.sm-mc-row  { display:flex; align-items:flex-start; gap:.5rem; }
.sm-mc-lbl  { font-size:.63rem; font-weight:700; color:var(--txl,#9BA4B5); text-transform:uppercase; letter-spacing:.05em; min-width:60px; flex-shrink:0; padding-top:2px; }
.sm-mc-val  { font-size:.82rem; font-weight:500; color:var(--txm,#5A6478); flex:1; word-break:break-word; line-height:1.5; }
.sm-mc-bot  { padding:.65rem 1rem; border-top:1px solid var(--bd,#E8E4DC); background:var(--sf2,#FAFAF9); display:flex; gap:.375rem; flex-wrap:wrap; }

/* Responsive */
@media (max-width:1024px) {
  .sm-grid { grid-template-columns:repeat(2,1fr); }
  .fg.s3   { grid-column:span 2; }
}
@media (max-width:768px) {
  .sm-subnav { margin-bottom:1.125rem; padding:.75rem 1rem; }
  .sm-subnav-left { display:none; }
  .sm-grid { grid-template-columns:1fr; gap:.875rem; }
  .fg.s2,.fg.s3 { grid-column:span 1; }
  .sm-form-body { padding:1rem; }
  .sm-card-head { padding:.875rem 1rem; }
  .sm-hero { padding:1.25rem; border-radius:var(--sm-r-lg); }
  .sm-hero-title { font-size:1.45rem; }
  .sm-hero-desc  { font-size:.8rem; }
  .sm-hero-body  { flex-direction:column; align-items:flex-start; gap:.875rem; }
  .sm-hero-right { align-self:stretch; justify-content:space-between; }
  .sm-hero-stat  { flex:1; padding:.75rem 1rem; }
  .sm-hero-num   { font-size:2rem; }
  .sm-hero-emoji { font-size:3rem; }
  .sm-tbl-scroll { display:none !important; }
  .sm-mc-list    { display:block !important; }
  .sm-tbl-bar    { padding:.875rem 1rem; flex-direction:column; align-items:flex-start; gap:.625rem; }
  .sm-srch,.sm-srch-wrap { width:100%; }
}
@media (max-width:480px) {
  .sm-hero { padding:1rem; }
  .sm-hero-title { font-size:1.25rem; }
  .sm-hero-num   { font-size:1.75rem; }
  .sm-hero-emoji { font-size:2.5rem; }
  .fi,.fs,.fta   { font-size:.84rem; padding:.62rem .875rem; }
  .sm-btn-save,.sm-btn-cancel { width:100%; justify-content:center; }
  .sm-actions { gap:.5rem; }
}
</style>

<div class="main">
<div class="wrap">

  <!-- Sub-nav -->
  <div class="sm-subnav">
    <div class="sm-subnav-left">
      <div class="sm-subnav-icon">📬</div>
      <div>
        <div class="sm-subnav-title">Surat Masuk</div>
        <div class="sm-subnav-sub">Manajemen Surat &amp; Dokumen</div>
      </div>
    </div>
    <nav class="sm-subnav-nav">
      <a href="surat.php" class="sm-nb back">← Kembali</a>
      <a href="suratmasuk.php"      class="sm-nb active">📥 Masuk</a>
      <a href="suratkeluar.php"     class="sm-nb">📤 Keluar</a>
    </nav>
  </div>

  <div class="sm-body">

  <!-- Hero -->
  <div class="sm-hero">
    <div class="sm-hero-dots"></div>
    <div class="sm-hero-orb sm-hero-orb-1"></div>
    <div class="sm-hero-orb sm-hero-orb-2"></div>
    <div class="sm-hero-body">
      <div>
        <div class="sm-hero-pill">✉️ &nbsp;Sistem Persuratan</div>
        <h1 class="sm-hero-title">Kotak <em>Surat Masuk</em><br>siap dikelola!</h1>
        <p class="sm-hero-desc">Semua surat masuk tercatat rapi, aman, dan mudah dicari 🎯</p>
      </div>
      <div class="sm-hero-right">
        <div class="sm-hero-emoji">📬</div>
        <div class="sm-hero-stat">
          <div class="sm-hero-num"><?= $total ?></div>
          <div class="sm-hero-lbl">Total Surat</div>
        </div>
      </div>
    </div>
  </div>

  <?php if($msg): ?>
  <div class="sm-alert <?= $msg_type==='ok'?'sm-ok':($msg_type==='del'?'sm-del':'sm-err') ?>" id="smAlert">
    <span class="sm-alert-ico"><?= $msg_type==='ok'?'✅':($msg_type==='del'?'🗑️':'❌') ?></span>
    <div><?= htmlspecialchars($msg) ?></div>
  </div>
  <?php endif; ?>

  <?php if($editData): ?>
  <div class="sm-alert sm-edit">
    <span class="sm-alert-ico">✏️</span>
    <div><strong>Mode Edit</strong> — <strong><?= htmlspecialchars($editData['nomor_surat']) ?></strong> &nbsp;<a href="suratmasuk.php">✖ Batal</a></div>
  </div>
  <?php endif; ?>

  <!-- Form card -->
  <div class="sm-card <?= $editData?'is-edit':'' ?>" id="smFcard" style="animation-delay:.08s">
    <div class="sm-card-head">
      <div class="sm-card-hl">
        <div class="sm-card-ico <?= $editData?'amber':'blue' ?>"><?= $editData?'✏️':'📝' ?></div>
        <div>
          <div class="sm-card-t"><?= $editData?'Edit Surat Masuk':'Tambah Surat Masuk Baru' ?></div>
          <div class="sm-card-s"><?= $editData?'Perbarui data surat':'Isi formulir untuk mencatat surat masuk baru' ?></div>
        </div>
      </div>
      <?php if($editData): ?><a href="suratmasuk.php" class="sm-btn-cancel" style="padding:.38rem .75rem;font-size:.76rem">✖ Batal</a><?php endif; ?>
    </div>
    <div class="sm-form-body">
    <form method="POST" action="suratmasuk.php" enctype="multipart/form-data">
      <?php if($editData): ?><input type="hidden" name="id" value="<?= intval($editData['id']) ?>"><?php endif; ?>
      <div class="sm-grid">

        <div class="fg">
          <label class="flbl">🔢 Nomor Surat <span class="req">*</span></label>
          <input type="text" name="nomor" class="fi" placeholder="Cth: 006/MI-03/II/2026"
            value="<?= htmlspecialchars($editData?$editData['nomor_surat']:($_POST['nomor']??'')) ?>" required>
        </div>
        <div class="fg">
          <label class="flbl">📅 Tanggal <span class="req">*</span></label>
          <input type="date" name="tanggal" class="fi"
            value="<?= htmlspecialchars($editData?$editData['tanggal']:($_POST['tanggal']??date('Y-m-d'))) ?>" required>
        </div>
        <div class="fg">
          <label class="flbl">🏢 Pengirim <span class="req">*</span></label>
          <input type="text" name="pengirim" class="fi" placeholder="Nama instansi / perusahaan"
            value="<?= htmlspecialchars($editData?($editData['keterangan']??''):($_POST['pengirim']??'')) ?>" required>
        </div>
        <div class="fg">
          <label class="flbl">🔖 Status <span class="req">*</span></label>
          <select name="status" class="fs" required>
            <?php $cs=$editData?$editData['status']:($_POST['status']??'Draft');
            foreach(['Draft','Diterima','Diproses','Selesai','Terkirim','Arsip'] as $s): ?>
            <option value="<?=$s?>" <?=$cs===$s?'selected':''?>><?=$s?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="fg">
          <label class="flbl">⚡ Prioritas <span class="req">*</span></label>
          <select name="prioritas" class="fs" required>
            <?php $cp=$editData?($editData['prioritas']??'Biasa'):($_POST['prioritas']??'Biasa');
            foreach(['Biasa','Penting','Sangat Penting','Segera'] as $p): ?>
            <option value="<?=$p?>" <?=$cp===$p?'selected':''?>><?=$p?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="fg">
          <label class="flbl">👤 Disposisi <span class="opt">(Opsional)</span></label>
          <input type="text" name="disposisi_kepada" class="fi" placeholder="Nama penerima disposisi"
            value="<?= htmlspecialchars($editData?($editData['disposisi_kepada']??''):($_POST['disposisi_kepada']??'')) ?>">
        </div>

        <hr class="fg-div">

        <div class="fg s3">
          <label class="flbl">📋 Perihal <span class="req">*</span></label>
          <textarea name="perihal" class="fta" placeholder="Tuliskan perihal surat secara jelas..." required><?= htmlspecialchars($editData?$editData['perihal']:($_POST['perihal']??'')) ?></textarea>
        </div>
        <div class="fg s3">
          <label class="flbl">💬 Catatan Disposisi <span class="opt">(Opsional)</span></label>
          <textarea name="catatan_disposisi" class="fta" style="min-height:72px" placeholder="Catatan tambahan..."><?= htmlspecialchars($editData?($editData['catatan_disposisi']??''):($_POST['catatan_disposisi']??'')) ?></textarea>
        </div>
        <div class="fg s3">
          <label class="flbl">📎 Lampiran <span class="opt">(Opsional)</span></label>
          <label for="smLampInput">
            <div class="sm-fz" id="smFzZone">
              <div class="sm-fz-ico">☁️</div>
              <div class="sm-fz-txt">Klik atau seret file ke sini</div>
              <div class="sm-fz-hint">PDF, DOC, DOCX, JPG, PNG, ZIP, RAR — maks. 10 MB</div>
              <div class="sm-fz-name" id="smFzName" style="display:none"></div>
            </div>
          </label>
          <input type="file" name="lampiran" id="smLampInput" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.zip,.rar">
          <?php if($editData && !empty($editData['lampiran'])): ?>
          <div class="sm-curfile">
            <span>📄</span> File saat ini:
            <a href="<?= htmlspecialchars($editData['file_path']??'#') ?>" target="_blank"><?= htmlspecialchars($editData['lampiran']) ?></a>
          </div>
          <?php endif; ?>
        </div>

      </div><!-- /sm-grid -->
      <div class="sm-actions">
        <button type="submit" name="<?= $editData?'update':'simpan' ?>" class="sm-btn-save <?= $editData?'upd':'' ?>">
          <?= $editData?'🔄 Update Data':'💾 Simpan Surat' ?>
        </button>
        <?php if($editData): ?><a href="suratmasuk.php" class="sm-btn-cancel">✖ Batal</a><?php endif; ?>
      </div>
    </form>
    </div>
  </div>

  <!-- Tabel card -->
  <div class="sm-card" style="animation-delay:.16s">
    <div class="sm-tbl-bar">
      <div class="sm-tbl-label">
        <span style="font-size:1.1rem">📋</span>
        Daftar Surat Masuk
        <span class="sm-tbl-cnt"><?= $total ?> surat</span>
      </div>
      <div class="sm-srch-wrap">
        <input type="text" class="sm-srch" id="smSearch" placeholder="Cari surat..." onkeyup="smDoSearch()">
      </div>
    </div>

    <?php if($total > 0): ?>

    <div class="sm-tbl-scroll">
      <table class="sm-tbl" id="smTbl">
        <thead><tr>
          <th style="width:40px">No</th>
          <th>Nomor Surat</th><th>Tanggal</th><th>Pengirim</th>
          <th>Perihal</th><th>Status</th><th>Prioritas</th>
          <th>Disposisi</th><th>Catatan</th><th>Lampiran</th>
          <th style="width:140px">Aksi</th>
        </tr></thead>
        <tbody>
        <?php $no=1; mysqli_data_seek($data,0); while($d=mysqli_fetch_assoc($data)):
          $sc='s-'.strtolower(str_replace(' ','-',$d['status']));
          $pc='p-'.strtolower(str_replace(' ','-',$d['prioritas']??'biasa'));
        ?>
        <tr>
          <td class="td-no"><?= $no++ ?></td>
          <td class="td-nom"><?= htmlspecialchars($d['nomor_surat']) ?></td>
          <td class="td-date"><?= date('d M Y',strtotime($d['tanggal'])) ?></td>
          <td style="font-size:.82rem"><?= htmlspecialchars($d['keterangan']??'') ?></td>
          <td class="td-ph"><?= htmlspecialchars(mb_substr($d['perihal'],0,52)).(mb_strlen($d['perihal'])>52?'…':'') ?></td>
          <td><span class="sm-bdg <?= $sc ?>"><span class="sm-dot"></span><?= htmlspecialchars($d['status']) ?></span></td>
          <td><span class="sm-bdg <?= $pc ?>"><span class="sm-dot"></span><?= htmlspecialchars($d['prioritas']??'Biasa') ?></span></td>
          <td style="font-size:.8rem"><?= !empty($d['disposisi_kepada'])?htmlspecialchars($d['disposisi_kepada']):'<span class="td-nil">—</span>' ?></td>
          <td style="max-width:140px;font-size:.78rem;line-height:1.5"><?= !empty($d['catatan_disposisi'])?htmlspecialchars(mb_substr($d['catatan_disposisi'],0,44)).(mb_strlen($d['catatan_disposisi'])>44?'…':''):'<span class="td-nil">—</span>' ?></td>
          <td><?php if(!empty($d['lampiran'])): ?><a href="<?= htmlspecialchars($d['file_path']??'#') ?>" target="_blank" class="sm-chip">📎 <?= htmlspecialchars(mb_substr($d['lampiran'],0,13)).(mb_strlen($d['lampiran'])>13?'…':'') ?></a><?php else: ?><span class="td-nil">—</span><?php endif; ?></td>
          <td>
            <div class="sm-acts">
              <a href="?edit=<?= $d['id'] ?>" class="sm-act sm-act-e">✏️ Edit</a>
              <?php if(!empty($d['lampiran'])): ?><a href="<?= htmlspecialchars($d['file_path']??'#') ?>" target="_blank" class="sm-act sm-act-f">⬇️</a><?php endif; ?>
              <button class="sm-act sm-act-d" onclick="smHapus(<?= $d['id'] ?>)">🗑️</button>
            </div>
          </td>
        </tr>
        <?php endwhile; ?>
        </tbody>
      </table>
    </div>

    <!-- Mobile card list -->
    <div class="sm-mc-list" id="smMcList" style="padding:.875rem">
      <?php $no2=1; mysqli_data_seek($data,0); while($d=mysqli_fetch_assoc($data)):
        $sc='s-'.strtolower(str_replace(' ','-',$d['status']));
        $pc='p-'.strtolower(str_replace(' ','-',$d['prioritas']??'biasa'));
      ?>
      <div class="sm-mc" style="animation-delay:<?= ($no2-1)*.04 ?>s">
        <div class="sm-mc-top">
          <div class="sm-mc-tl">
            <div class="sm-mc-seq">Surat #<?= $no2++ ?></div>
            <div class="sm-mc-num"><?= htmlspecialchars($d['nomor_surat']) ?></div>
            <div class="sm-mc-date">📅 <?= date('d M Y',strtotime($d['tanggal'])) ?></div>
          </div>
          <div class="sm-mc-bgs">
            <span class="sm-bdg <?= $sc ?>"><span class="sm-dot"></span><?= htmlspecialchars($d['status']) ?></span>
            <span class="sm-bdg <?= $pc ?>"><span class="sm-dot"></span><?= htmlspecialchars($d['prioritas']??'Biasa') ?></span>
          </div>
        </div>
        <div class="sm-mc-mid">
          <div class="sm-mc-row"><span class="sm-mc-lbl">Pengirim</span><span class="sm-mc-val"><?= htmlspecialchars($d['keterangan']??'—') ?></span></div>
          <div class="sm-mc-row"><span class="sm-mc-lbl">Perihal</span><span class="sm-mc-val"><?= htmlspecialchars($d['perihal']) ?></span></div>
          <?php if(!empty($d['disposisi_kepada'])): ?>
          <div class="sm-mc-row"><span class="sm-mc-lbl">Disposisi</span><span class="sm-mc-val"><?= htmlspecialchars($d['disposisi_kepada']) ?></span></div>
          <?php endif; ?>
          <?php if(!empty($d['catatan_disposisi'])): ?>
          <div class="sm-mc-row"><span class="sm-mc-lbl">Catatan</span><span class="sm-mc-val"><?= htmlspecialchars($d['catatan_disposisi']) ?></span></div>
          <?php endif; ?>
          <?php if(!empty($d['lampiran'])): ?>
          <div class="sm-mc-row"><span class="sm-mc-lbl">Lampiran</span><span class="sm-mc-val"><a href="<?= htmlspecialchars($d['file_path']??'#') ?>" target="_blank" class="sm-chip">📎 <?= htmlspecialchars($d['lampiran']) ?></a></span></div>
          <?php endif; ?>
        </div>
        <div class="sm-mc-bot">
          <a href="?edit=<?= $d['id'] ?>" class="sm-act sm-act-e">✏️ Edit</a>
          <?php if(!empty($d['lampiran'])): ?><a href="<?= htmlspecialchars($d['file_path']??'#') ?>" target="_blank" class="sm-act sm-act-f">⬇️ File</a><?php endif; ?>
          <button class="sm-act sm-act-d" onclick="smHapus(<?= $d['id'] ?>)">🗑️ Hapus</button>
        </div>
      </div>
      <?php endwhile; ?>
    </div>

    <?php else: ?>
    <div class="sm-empty">
      <div class="sm-empty-ico">📭</div>
      <div class="sm-empty-t">Kotak surat masih kosong!</div>
      <div class="sm-empty-s">Tambahkan surat pertama melalui formulir di atas 👆</div>
    </div>
    <?php endif; ?>

  </div><!-- /tabel card -->

  </div><!-- /sm-body -->
</div><!-- /wrap -->
</div><!-- /main -->

<script>
(function(){
  /* Upload */
  var inp=document.getElementById('smLampInput');
  var zone=document.getElementById('smFzZone');
  var nm=document.getElementById('smFzName');
  if(inp&&zone){
    inp.addEventListener('change',function(){
      if(this.files[0]){
        zone.classList.add('has-file');
        zone.querySelector('.sm-fz-ico').textContent='✅';
        zone.querySelector('.sm-fz-txt').textContent='File dipilih!';
        nm.textContent=this.files[0].name; nm.style.display='block';
      }
    });
    zone.addEventListener('dragover',function(e){e.preventDefault();zone.style.borderColor='var(--sm-blue)';});
    zone.addEventListener('dragleave',function(){zone.style.borderColor='';});
    zone.addEventListener('drop',function(e){
      e.preventDefault();zone.style.borderColor='';
      if(e.dataTransfer.files[0]){inp.files=e.dataTransfer.files;inp.dispatchEvent(new Event('change'));}
    });
  }
  /* Search */
  window.smDoSearch=function(){
    var q=document.getElementById('smSearch').value.toLowerCase();
    document.querySelectorAll('#smTbl tbody tr').forEach(function(r){r.style.display=r.textContent.toLowerCase().includes(q)?'':'none';});
    document.querySelectorAll('#smMcList .sm-mc').forEach(function(c){c.style.display=c.textContent.toLowerCase().includes(q)?'':'none';});
  };
  /* Hapus */
  window.smHapus=function(id){
    if(confirm('Hapus surat ini? Lampiran juga akan ikut terhapus.'))
      location.href='suratmasuk.php?hapus='+id;
  };
  /* Scroll ke form saat edit */
  <?php if($editData): ?>
  var fc=document.getElementById('smFcard');
  if(fc) setTimeout(function(){fc.scrollIntoView({behavior:'smooth',block:'start'});},120);
  <?php endif; ?>
  /* Auto-hide alert sukses */
  <?php if($msg_type==='ok'||$msg_type==='del'): ?>
  var ab=document.getElementById('smAlert');
  if(ab) setTimeout(function(){
    ab.style.transition='opacity .4s,transform .4s';
    ab.style.opacity='0'; ab.style.transform='translateY(-8px)';
    setTimeout(function(){ab.remove();},420);
  },4500);
  <?php endif; ?>
})();
</script>