<?php /* views/tamu/edit.php */ ?>
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

: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;
  --slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;
  --slate-400:#94a3b8;--slate-500:#64748b;--slate-700:#334155;--slate-900:#0f172a;
  --amber-50:#fffbeb;--amber-100:#fef3c7;--amber-400:#fbbf24;
}

.rg-wrap{font-family:'DM Sans',system-ui,sans-serif;color:var(--slate-900);}
.rg-wrap input:focus,.rg-wrap select:focus,.rg-wrap textarea:focus{
  border-color:var(--teal-500)!important;box-shadow:0 0 0 3px rgba(13,148,136,.12)!important;outline:none;
}
.rg-wrap input,.rg-wrap select,.rg-wrap textarea{
  border-radius:9px;border:1.5px solid #e5e7eb;font-size:.86rem;padding:9px 13px;
  font-family:'DM Sans',sans-serif;width:100%;display:block;
  background:#fff;color:var(--slate-900);transition:border-color .15s;
}
.rg-wrap textarea{resize:vertical;min-height:80px;}

.rg-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.rg-header h4{font-size:1.2rem;font-weight:700;color:var(--teal-800);margin:0 0 4px;display:flex;align-items:center;gap:10px;}
.rg-header .hi{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#fbbf24);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;box-shadow:0 4px 12px rgba(245,158,11,.32);flex-shrink:0;}
.rg-breadcrumb{font-size:.74rem;color:#94a3b8;padding-left:48px;}
.rg-breadcrumb a{color:var(--teal-600);text-decoration:none;font-weight:600;}

.rg-card{background:#fff;border-radius:16px;border:1px solid var(--slate-200);box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.06);overflow:hidden;margin-bottom:16px;}
.rg-card-header{padding:14px 20px;background:linear-gradient(90deg,var(--teal-50),#fff);border-bottom:1px solid rgba(13,148,136,.1);display:flex;align-items:center;gap:8px;}
.rg-card-header .ch-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.rg-card-header .ch-title{font-size:.9rem;font-weight:700;color:var(--slate-900);}
.rg-card-header .ch-sub{font-size:.74rem;color:var(--slate-400);}
.rg-card-body{padding:18px 20px;}

.rg-label{font-size:.78rem;font-weight:700;color:var(--slate-700);margin-bottom:5px;display:block;}
.rg-hint{font-size:.72rem;color:var(--slate-400);margin-top:3px;}
.optional-badge{font-size:.64rem;font-weight:600;background:var(--slate-100);color:var(--slate-400);padding:1px 6px;border-radius:4px;margin-left:5px;vertical-align:middle;}

/* Edit alert banner */
.edit-banner{background:var(--amber-50);border:1.5px solid var(--amber-100);border-left:4px solid var(--amber-400);border-radius:10px;padding:10px 16px;margin-bottom:16px;font-size:.82rem;color:#92400e;display:flex;align-items:center;gap:8px;}
.edit-banner i{font-size:1rem;flex-shrink:0;}

/* Type selector */
.type-select{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.type-card{border:2px solid #e5e7eb;border-radius:11px;padding:14px 12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:10px;}
.type-card.selected{border-color:var(--teal-500);background:var(--teal-50);}
.type-card:hover{border-color:var(--teal-400);}
.type-card .tc-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.type-card .tc-title{font-size:.85rem;font-weight:700;}
.type-card .tc-desc{font-size:.72rem;color:var(--slate-400);margin-top:2px;}
.type-card input[type=radio]{display:none;}

/* Keperluan pills */
.kp-select{display:flex;flex-wrap:wrap;gap:7px;}
.kp-pill{border:1.5px solid #e5e7eb;border-radius:8px;padding:6px 12px;cursor:pointer;transition:all .15s;font-size:.79rem;font-weight:600;display:flex;align-items:center;gap:5px;}
.kp-pill.selected{border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700);}
.kp-pill input[type=radio]{display:none;}

/* Status badges */
.status-toggle{display:flex;gap:8px;}
.st-option{border:1.5px solid #e5e7eb;border-radius:8px;padding:7px 14px;cursor:pointer;transition:all .15s;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px;}
.st-option.sel-checkin{border-color:#10b981;background:#f0fdf4;color:#166534;}
.st-option.sel-checkout{border-color:#94a3b8;background:var(--slate-100);color:var(--slate-600);}
.st-option input[type=radio]{display:none;}

/* Buttons */
.btn-update{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-update:hover{transform:translateY(-1px);}
.btn-back{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:9px;border:1.5px solid #e5e7eb;background:#fff;font-size:.82rem;font-weight:600;color:var(--slate-600);text-decoration:none;transition:all .15s;}
.btn-back:hover{border-color:var(--slate-400);color:var(--slate-900);}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rg-header{animation:fadeUp .3s ease both;}
.rg-card{animation:fadeUp .35s .05s ease both;}

@media(max-width:767px){
  .rg-header{flex-direction:column;}
  .type-select{grid-template-columns:1fr;}
}
</style>

<?php $t = $tamu; ?>

<div class="rg-wrap">
<div class="container-fluid px-2 px-md-3 py-3">

<!-- HEADER -->
<div class="rg-header">
  <div>
    <h4>
      <span class="hi"><i class="bi bi-pencil-fill"></i></span>
      Edit Data Tamu
    </h4>
    <div class="rg-breadcrumb">
      <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a> /
      <a href="<?php echo base_url('tamu'); ?>">E-Visitor</a> /
      <a href="<?php echo base_url('tamu/detail/'.$t->id); ?>"><?php echo htmlspecialchars($t->nama_tamu); ?></a> /
      <span>Edit</span>
    </div>
  </div>
  <a href="<?php echo base_url('tamu/detail/'.$t->id); ?>" class="btn-back">
    <i class="bi bi-arrow-left"></i> Kembali
  </a>
</div>

<!-- Edit banner -->
<div class="edit-banner">
  <i class="bi bi-exclamation-circle-fill"></i>
  Mengedit data tamu <strong><?php echo htmlspecialchars($t->nama_tamu); ?></strong>
  — Kode: <code style="font-size:.78rem;"><?php echo $t->kode_tamu; ?></code>
</div>

<div class="row justify-content-center">
<div class="col-lg-8 col-xl-7">

<form action="<?php echo base_url('tamu/update/'.$t->id); ?>" method="post" id="editForm">

  <!-- TIPE KUNJUNGAN -->
  <div class="rg-card">
    <div class="rg-card-header">
      <div class="ch-icon" style="background:#f0fdf4;color:#059669;"><i class="bi bi-signpost-2-fill"></i></div>
      <div><div class="ch-title">Tipe Kunjungan</div></div>
    </div>
    <div class="rg-card-body">
      <div class="type-select">
        <label class="type-card <?php echo $t->tipe_kunjungan!=='menginap'?'selected':''; ?>" id="tc-singkat">
          <input type="radio" name="tipe_kunjungan" value="singkat"
                 <?php echo $t->tipe_kunjungan!=='menginap'?'checked':''; ?>>
          <div class="tc-icon" style="background:var(--teal-50);color:var(--teal-600);"><i class="bi bi-person-walking"></i></div>
          <div><div class="tc-title">Kunjungan Singkat</div><div class="tc-desc">Datang & pergi hari ini</div></div>
        </label>
        <label class="type-card <?php echo $t->tipe_kunjungan==='menginap'?'selected':''; ?>" id="tc-menginap">
          <input type="radio" name="tipe_kunjungan" value="menginap"
                 <?php echo $t->tipe_kunjungan==='menginap'?'checked':''; ?>>
          <div class="tc-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-moon-stars-fill"></i></div>
          <div><div class="tc-title">Tamu Menginap</div><div class="tc-desc">Tinggal lebih dari 1 hari</div></div>
        </label>
      </div>
    </div>
  </div>

  <!-- STATUS -->
  <div class="rg-card">
    <div class="rg-card-header">
      <div class="ch-icon" style="background:#dcfce7;color:#166534;"><i class="bi bi-toggle-on"></i></div>
      <div><div class="ch-title">Status Kunjungan</div></div>
    </div>
    <div class="rg-card-body">
      <div class="status-toggle">
        <label class="st-option <?php echo $t->status==='checkin'?'sel-checkin':''; ?>" id="st-ci">
          <input type="radio" name="status" value="checkin" <?php echo $t->status==='checkin'?'checked':''; ?>>
          <span style="width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;"></span>
          Masih Check-in
        </label>
        <label class="st-option <?php echo $t->status==='checkout'?'sel-checkout':''; ?>" id="st-co">
          <input type="radio" name="status" value="checkout" <?php echo $t->status==='checkout'?'checked':''; ?>>
          <i class="bi bi-check2"></i> Sudah Checkout
        </label>
      </div>
    </div>
  </div>

  <!-- IDENTITAS -->
  <div class="rg-card">
    <div class="rg-card-header">
      <div class="ch-icon" style="background:var(--teal-50);color:var(--teal-600);"><i class="bi bi-person-vcard-fill"></i></div>
      <div><div class="ch-title">Identitas Tamu</div></div>
    </div>
    <div class="rg-card-body">
      <div class="row g-3">
        <div class="col-md-8">
          <label class="rg-label">Nama Lengkap <span style="color:#ef4444;">*</span></label>
          <input type="text" name="nama_tamu" value="<?php echo htmlspecialchars($t->nama_tamu); ?>" required>
        </div>
        <div class="col-md-4">
          <label class="rg-label">NIK <span class="optional-badge">Opsional</span></label>
          <input type="text" name="nik_tamu" value="<?php echo htmlspecialchars($t->nik_tamu ?? ''); ?>" maxlength="16">
        </div>
        <div class="col-md-6">
          <label class="rg-label">No. HP / WhatsApp <span class="optional-badge">Opsional</span></label>
          <input type="text" name="no_hp" value="<?php echo htmlspecialchars($t->no_hp ?? ''); ?>">
        </div>
        <div class="col-md-6">
          <label class="rg-label">Waktu Check-in</label>
          <div style="position:relative;">
            <input type="datetime-local" name="checkin_at" id="checkinAt"
                   value="<?php echo date('Y-m-d\TH:i', strtotime($t->checkin_at)); ?>"
                   style="padding-right:80px!important;">
            <button type="button" id="btnNowCI"
              style="position:absolute;right:6px;top:50%;transform:translateY(-50%);
                     padding:3px 9px;border:1.5px solid var(--teal-200,#99f6e4);
                     border-radius:6px;background:var(--teal-50);color:var(--teal-700);
                     font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap;
                     font-family:'DM Sans',sans-serif;line-height:1.4;">
              ⟳ Sekarang
            </button>
          </div>
        </div>
        <div class="col-md-6" id="checkoutRow" style="<?php echo $t->status!=='checkout'?'display:none;':''; ?>">
          <label class="rg-label">Waktu Checkout <span class="optional-badge">Opsional</span></label>
          <div style="position:relative;">
            <input type="datetime-local" name="checkout_at" id="checkoutAt"
                   value="<?php echo $t->checkout_at ? date('Y-m-d\TH:i', strtotime($t->checkout_at)) : ''; ?>"
                   style="padding-right:80px!important;">
            <button type="button" id="btnNowCO"
              style="position:absolute;right:6px;top:50%;transform:translateY(-50%);
                     padding:3px 9px;border:1.5px solid var(--teal-200,#99f6e4);
                     border-radius:6px;background:var(--teal-50);color:var(--teal-700);
                     font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap;
                     font-family:'DM Sans',sans-serif;line-height:1.4;">
              ⟳ Sekarang
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- KENDARAAN -->
  <div class="rg-card">
    <div class="rg-card-header">
      <div class="ch-icon" style="background:#fef3c7;color:#d97706;"><i class="bi bi-car-front-fill"></i></div>
      <div><div class="ch-title">Kendaraan <span class="optional-badge" style="font-size:.72rem;">Semua Opsional</span></div></div>
    </div>
    <div class="rg-card-body">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="rg-label">No. Plat Kendaraan</label>
          <input type="text" name="no_kendaraan"
                 value="<?php echo htmlspecialchars($t->no_kendaraan ?? ''); ?>"
                 oninput="this.value=this.value.toUpperCase()">
        </div>
        <div class="col-md-6">
          <label class="rg-label">Jenis Kendaraan</label>
          <select name="jenis_kendaraan">
            <option value="">— Pilih (opsional) —</option>
            <?php foreach(['Motor','Mobil','Sepeda','Truk','Lainnya'] as $jk): ?>
            <option <?php echo ($t->jenis_kendaraan===$jk)?'selected':''; ?>><?php echo $jk; ?></option>
            <?php endforeach; ?>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- TUJUAN & KEPERLUAN -->
  <div class="rg-card">
    <div class="rg-card-header">
      <div class="ch-icon" style="background:#ede9fe;color:#7c3aed;"><i class="bi bi-house-door-fill"></i></div>
      <div><div class="ch-title">Tujuan & Keperluan</div></div>
    </div>
    <div class="rg-card-body">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="rg-label">Tujuan / Blok Rumah <span class="optional-badge">Opsional</span></label>
          <input type="text" name="tujuan_blok" value="<?php echo htmlspecialchars($t->tujuan_blok ?? ''); ?>">
        </div>
        <div class="col-md-6">
          <label class="rg-label">Nama Tuan Rumah <span class="optional-badge">Opsional</span></label>
          <input type="text" name="nama_tuan_rumah" value="<?php echo htmlspecialchars($t->nama_tuan_rumah ?? ''); ?>">
        </div>
        <div class="col-12">
          <label class="rg-label">Keperluan</label>
          <div class="kp-select">
            <?php
            $keperluan_opts = [
              'kunjungan'    => ['Kunjungan Biasa','bi-house-door'],
              'antar_paket'  => ['Antar Paket',    'bi-box-seam'],
              'tamu_menginap'=> ['Menginap',        'bi-moon-stars'],
              'kerja'        => ['Kerja / Teknisi', 'bi-tools'],
              'lainnya'      => ['Lainnya',         'bi-three-dots'],
            ];
            foreach($keperluan_opts as $val => $opt): ?>
            <label class="kp-pill <?php echo $t->keperluan===$val?'selected':''; ?>" data-val="<?php echo $val; ?>">
              <input type="radio" name="keperluan" value="<?php echo $val; ?>"
                     <?php echo $t->keperluan===$val?'checked':''; ?>>
              <i class="bi <?php echo $opt[1]; ?>"></i> <?php echo $opt[0]; ?>
            </label>
            <?php endforeach; ?>
          </div>
        </div>
        <div class="col-12">
          <label class="rg-label">Detail Keperluan <span class="optional-badge">Opsional</span></label>
          <input type="text" name="keperluan_detail"
                 value="<?php echo htmlspecialchars($t->keperluan_detail ?? ''); ?>"
                 placeholder="cth. Service AC, titip paket, dll.">
        </div>
        <div class="col-md-6" id="menginapBox"
             style="<?php echo $t->tipe_kunjungan!=='menginap'?'display:none;':''; ?>">
          <label class="rg-label">Rencana Checkout / Selesai Menginap</label>
          <input type="date" name="rencana_checkout"
                 value="<?php echo $t->rencana_checkout ?? ''; ?>"
                 min="<?php echo date('Y-m-d'); ?>">
        </div>
        <div class="col-12">
          <label class="rg-label">Catatan Tambahan <span class="optional-badge">Opsional</span></label>
          <textarea name="catatan"><?php echo htmlspecialchars($t->catatan ?? ''); ?></textarea>
        </div>
      </div>
    </div>
  </div>

  <!-- SUBMIT -->
  <div class="d-flex gap-2 mb-4">
    <a href="<?php echo base_url('tamu/detail/'.$t->id); ?>" class="btn-back">
      <i class="bi bi-x-circle"></i> Batal
    </a>
    <button type="submit" class="btn-update">
      <i class="bi bi-check-circle-fill"></i> Simpan Perubahan
    </button>
  </div>

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

<script>
(function(){
  // ─ Tipe toggle ─
  var tcSingkat  = document.getElementById('tc-singkat');
  var tcMenginap = document.getElementById('tc-menginap');
  var menginapBox= document.getElementById('menginapBox');
  function updateTipe(val){
    tcSingkat.classList.toggle('selected', val!=='menginap');
    tcMenginap.classList.toggle('selected', val==='menginap');
    menginapBox.style.display = val==='menginap' ? '' : 'none';
  }
  tcSingkat.addEventListener('click',  function(){ updateTipe('singkat'); });
  tcMenginap.addEventListener('click', function(){ updateTipe('menginap'); });

  // ─ Keperluan pills ─
  document.querySelectorAll('.kp-pill').forEach(function(p){
    p.addEventListener('click', function(){
      document.querySelectorAll('.kp-pill').forEach(function(x){ x.classList.remove('selected'); });
      this.classList.add('selected');
      if(this.dataset.val==='tamu_menginap') updateTipe('menginap');
    });
  });

  // ─ Status toggle + show/hide checkout time ─
  var stCI       = document.getElementById('st-ci');
  var stCO       = document.getElementById('st-co');
  var coRow      = document.getElementById('checkoutRow');
  function updateStatus(val){
    stCI.className = 'st-option' + (val==='checkin'  ? ' sel-checkin'  : '');
    stCO.className = 'st-option' + (val==='checkout' ? ' sel-checkout' : '');
    coRow.style.display = val==='checkout' ? '' : 'none';
  }
  stCI.addEventListener('click', function(){ updateStatus('checkin'); });
  stCO.addEventListener('click', function(){ updateStatus('checkout'); });

  // ─ Datetime "Sekarang" buttons ─
  function toLocalISO(d){
    var pad=function(n){return String(n).padStart(2,'0');};
    return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())
           +'T'+pad(d.getHours())+':'+pad(d.getMinutes());
  }
  var btnCI = document.getElementById('btnNowCI');
  var btnCO = document.getElementById('btnNowCO');
  if(btnCI) btnCI.addEventListener('click', function(){
    document.getElementById('checkinAt').value = toLocalISO(new Date());
  });
  if(btnCO) btnCO.addEventListener('click', function(){
    document.getElementById('checkoutAt').value = toLocalISO(new Date());
    // Jika status masih checkin, otomatis ganti ke checkout
    if(document.querySelector('input[name=status]:checked').value === 'checkin'){
      document.querySelector('input[name=status][value=checkout]').checked = true;
      updateStatus('checkout');
    }
  });
})();
</script>