# 📖 Tutorial Manajemen Tema — Dashboard Admin Undangin

Panduan lengkap untuk **menambah, mengedit, dan menghapus** tema undangan di dashboard admin.

---

## 📑 Daftar Isi

- [Akses Halaman Tema](#-akses-halaman-tema)
- [Tutorial 1 — Menambah Tema Baru](#-tutorial-1--menambah-tema-baru)
- [Tutorial 2 — Edit Tema](#-tutorial-2--edit-tema)
- [Tutorial 3 — Hapus & Restore Tema](#-tutorial-3--hapus--restore-tema)
- [Troubleshooting](#-troubleshooting)
- [Catatan Keamanan](#-catatan-keamanan)
- [Workflow Cepat](#-workflow-cepat)

---

## 🚪 Akses Halaman Tema

1. Login sebagai **admin** → buka `/admin/dashboard`
2. Klik menu **Manajemen Tema** atau langsung buka URL `/admin/themes`

Anda akan melihat daftar semua tema dengan info: thumbnail, nama, status (Aktif/Nonaktif), harga, dan tombol aksi (Edit / Hapus / Restore).

---

## ➕ Tutorial 1 — Menambah Tema Baru

### Langkah-langkah

#### 1. Buka form tambah tema
Di halaman daftar tema, klik tombol biru-ungu **+ Tambah Tema** di pojok kanan atas card "Daftar Tema".

#### 2. Isi Informasi Tema

| Field | Wajib? | Keterangan |
|-------|--------|------------|
| **Nama Tema** | ✅ Ya | Contoh: `Royal Sapphire`, `Bali Sunset` |
| **Slug** | ✅ Ya | Otomatis terisi dari nama. Hanya huruf kecil, angka, dan tanda hubung. Contoh: `royal-sapphire` |
| **Harga Normal** | ❌ Opsional | Kosongkan jika ingin pakai harga default global dari `.env` |
| **Harga Promo** | ❌ Opsional | Harus lebih kecil dari Harga Normal |
| **Status Aktif** | Toggle | Centang jika ingin langsung tampil di katalog publik |

> ⚠️ **Slug bersifat permanen** — tidak bisa diubah setelah dibuat (karena jadi nama folder Blade & URL preview).

#### 3. Upload Aset (semua opsional, bisa dilakukan nanti)

- **Thumbnail** — gambar preview tema (PNG/JPG/WebP, max 4MB)
- **Musik Default** — backsound MP3 default tema (max 10MB)
- **File Blade** — upload `.blade.php` jadi (jika developer sudah siapkan template eksternal)

#### 4. Pilih Sumber Konten Blade (pilih SALAH SATU)

Ada 3 cara mengisi konten template Blade tema:

| Cara | Kapan dipakai |
|------|---------------|
| Upload file `.blade.php` | Developer sudah membuat template eksternal |
| Pilih **Duplikasi dari Tema Existing** | Mau buat variasi dari tema yang sudah ada (contoh: copy `barakah-love`, lalu ganti warna) |
| Tidak pilih keduanya | Sistem akan buat starter template minimal — Anda edit di Code Editor setelahnya |

#### 5. Klik tombol "Buat Tema"

Sistem otomatis akan:
- Membuat folder `resources/views/themes/{slug}/`
- Menyimpan file `index.blade.php`
- Memindahkan thumbnail ke `public/assets/thumbnail/{slug}.png`
- Memindahkan musik ke `public/assets/music/{slug}.mp3`
- Redirect ke halaman **Edit Tema**

---

## ✏️ Tutorial 2 — Edit Tema

Halaman Edit Tema punya **3 tab** yang bisa Anda pindahkan kapan saja:

### Tab 1️⃣ — 📝 Metadata & Aset

Untuk mengubah:
- Nama tema (slug TIDAK bisa diubah)
- Harga normal & promo
- Status aktif (toggle on/off)
- Ganti thumbnail (preview tampil di kiri sebelum upload)
- Ganti musik default (audio player bisa langsung didengar)

> Klik **"Simpan Metadata"** untuk apply perubahan.

### Tab 2️⃣ — 💻 Code Editor (Monaco)

Edit langsung kode HTML/Blade tema dengan editor full-screen yang punya fitur:

- ✅ Syntax highlight HTML
- ✅ Minimap di kanan untuk navigasi cepat
- ✅ Word wrap otomatis
- ✅ Counter jumlah baris
- ✅ Hotkey **Ctrl+S** untuk save cepat

#### Variabel yang bisa Anda pakai di template

```blade
{{ $invitation->getGroomName() }}        {{-- Nama mempelai pria --}}
{{ $invitation->getBrideName() }}        {{-- Nama mempelai wanita --}}
{{ $invitation->getAkadDatetime() }}     {{-- Tanggal akad --}}
{{ $invitation->getResepsiDatetime() }}  {{-- Tanggal resepsi --}}
{{ $invitation->getCoverImage() }}       {{-- URL cover --}}
{{ $invitation->getMusicFile() }}        {{-- URL musik --}}
{{ $invitation->getQuote() }}            {{-- Quote --}}
```

> Klik **"Simpan Konten"** atau tekan **Ctrl+S** untuk simpan.

> ⚠️ **Setelah save, view cache otomatis dibersihkan** — perubahan langsung tampak saat refresh halaman undangan.

### Tab 3️⃣ — 🪄 Duplikasi

Untuk **menimpa** konten Blade tema ini dengan salinan dari tema lain:

1. Pilih tema sumber dari dropdown
2. Konfirmasi popup peringatan
3. Klik **"Salin Konten"**

> ⚠️ **Konten lama akan ditimpa total**. Setelah duplikasi, biasanya Anda perlu sesuaikan path gambar/musik di kode supaya merujuk ke slug tema ini, bukan tema sumber.

### Tombol Preview

Di pojok kanan atas halaman edit, klik tombol **👁 Preview** → buka tab baru dengan render undangan menggunakan **data dummy** (foto Unsplash, nama contoh) untuk verifikasi tampilan tanpa perlu order asli.

---

## 🗑️ Tutorial 3 — Hapus & Restore Tema

### Hapus (Nonaktifkan)

1. Di halaman daftar tema, cari tema yang ingin dihapus
2. Klik tombol merah **🗑 Hapus** di kanan baris tema
3. Akan muncul konfirmasi:
   > *"Nonaktifkan tema 'X'? Tema akan disembunyikan dari katalog publik. Undangan yang sudah pakai tema ini tetap berfungsi."*
4. Klik **OK**

#### Apa yang terjadi setelah hapus?

Tema dinonaktifkan (`is_active = false`):

- ❌ **Tidak tampil** di katalog publik (`/themes`)
- ❌ **Tidak bisa dipilih** saat order undangan baru
- ✅ Undangan eksisting yang pakai tema ini **TETAP berfungsi normal**
- ✅ Folder Blade & aset **TIDAK dihapus** dari disk

### Restore (Aktifkan Kembali)

Tema yang dinonaktifkan muncul dengan badge abu-abu **Nonaktif**. Tombol kanan berubah menjadi tombol biru:

1. Klik tombol biru **🔄 Restore**
2. Tema langsung aktif kembali tanpa konfirmasi (aksi non-destruktif)

> 💡 **Hapus permanen?** Sengaja tidak disediakan untuk mencegah kerusakan undangan eksisting yang masih merujuk ke tema. Jika benar-benar perlu hapus permanen, lakukan manual via SSH/file manager dengan hati-hati.

---

## 🛠️ Troubleshooting

| Masalah | Solusi |
|---------|--------|
| **"Folder tema dengan slug ini sudah ada"** saat tambah tema | Slug berbenturan dengan folder lama. Pilih slug lain ATAU hapus folder `resources/views/themes/{slug}/` lewat file manager |
| **Perubahan kode Blade tidak tampak setelah save** | Jalankan `php artisan view:clear` di terminal. Atau hard refresh browser (Ctrl+F5) |
| **Upload thumbnail/musik gagal** | Cek ukuran file (thumbnail max 4MB, musik max 10MB). Pastikan format sesuai (PNG/JPG/WebP untuk gambar, MP3 untuk audio) |
| **Tema tidak muncul di `/themes`** | Pastikan toggle **Tema aktif** dicentang di tab Metadata |
| **Code editor (Monaco) tidak loading** | Cek koneksi internet — Monaco di-load dari CDN jsdelivr. Clear browser cache jika perlu |
| **Validasi slug ditolak** | Slug HANYA boleh huruf kecil, angka, dan tanda hubung (`-`). Tidak boleh spasi, simbol lain, atau huruf besar |
| **Harga promo lebih besar dari harga normal** | Harga promo wajib lebih kecil. Jika harga normal kosong, akan dibandingkan dengan harga default global |

---

## 🔐 Catatan Keamanan

- **Hanya akun admin** yang bisa akses semua route ini (middleware `auth + admin`)
- File Blade dieksekusi sebagai PHP — **jangan paste kode dari sumber tidak terpercaya** ke Code Editor
- Slug divalidasi dengan regex `^[a-z0-9]+(?:-[a-z0-9]+)*$` untuk mencegah path traversal
- Semua aksi tercatat di tabel `activity_logs` untuk audit trail dengan event:
  - `theme.created` — tema baru dibuat
  - `theme.updated` — metadata tema diubah
  - `theme.content_updated` — konten Blade diedit
  - `theme.duplicated` — konten dicopy dari tema lain
  - `theme.deactivated` — tema dihapus (soft delete)
  - `theme.restored` — tema diaktifkan kembali
  - `theme.price_updated` — harga tema diubah

---

## ⚡ Workflow Cepat

### Skenario: Buat 3 variasi warna dari tema `barakah-love`

1. Klik **+ Tambah Tema** → nama: `Barakah Gold`, slug otomatis `barakah-gold` → pilih sumber duplikasi: `Barakah Love` → submit
2. Otomatis masuk ke halaman Edit Tema → buka tab **💻 Code Editor**
3. Ubah class warna Tailwind (mis. `bg-rose-500` → `bg-amber-500`)
4. Tekan **Ctrl+S** untuk simpan
5. Klik **👁 Preview** di pojok kanan atas untuk verifikasi
6. Ulangi langkah 1-5 untuk variasi `Barakah Emerald`, `Barakah Royal`

⏱️ **Selesai dalam < 5 menit per tema.**

---

## 📚 Referensi Teknis

### Struktur File Tema

```
resources/views/themes/{slug}/index.blade.php   ← konten template
public/assets/thumbnail/{slug}.png               ← thumbnail preview
public/assets/music/{slug}.mp3                   ← musik default
```

### Tabel `themes` (database)

| Kolom | Tipe | Keterangan |
|-------|------|-----------|
| `id` | bigint | Primary key |
| `name` | string | Nama tema |
| `slug` | string (unique) | URL & nama folder |
| `view_path` | string | Path Blade (`themes.{slug}.index`) |
| `thumbnail` | string\|null | Filename thumbnail |
| `is_active` | boolean | Status aktif |
| `price` | int\|null | Harga normal |
| `promo_price` | int\|null | Harga promo |

### Routes Admin Tema

| Method | URI | Aksi |
|--------|-----|------|
| GET | `/admin/themes` | List semua tema |
| GET | `/admin/themes/create` | Form tambah tema |
| POST | `/admin/themes` | Simpan tema baru |
| GET | `/admin/themes/{id}/edit` | Form edit tema |
| PUT | `/admin/themes/{id}` | Update metadata |
| PUT | `/admin/themes/{id}/content` | Update konten Blade |
| POST | `/admin/themes/{id}/duplicate` | Duplikasi dari tema lain |
| DELETE | `/admin/themes/{id}` | Soft delete (nonaktifkan) |
| POST | `/admin/themes/{id}/restore` | Aktifkan kembali |
| POST | `/admin/themes/{id}/price` | Update harga (legacy) |
| POST | `/admin/themes/default-price` | Update harga default global |

---

_Dokumen ini dibuat untuk platform Undangin._