@extends('admin.layouts.app')
@section('title', 'Manajemen Notifikasi')
@section('header', 'Manajemen Notifikasi')

@section('content')
<div x-data="notifikasiForm" class="min-h-screen bg-slate-50 p-3">

    <style>
        [x-cloak] {
            display: none !important;
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .modal-scroll::-webkit-scrollbar {
            width: 7px;
        }

        .modal-scroll::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }

        .modal-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        .modal-scroll::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>

    {{-- Flash Success --}}
    @if(session('success'))
        <div x-data="{ show: true }"
            x-show="show"
            x-transition:enter="transform ease-out duration-500"
            x-transition:enter-start="-translate-y-10 opacity-0"
            x-transition:enter-end="translate-y-0 opacity-100"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="-translate-y-10 opacity-0"
            x-init="setTimeout(() => show = false, 4000)"
            class="fixed top-4 left-1/2 z-50 w-[90%] max-w-sm -translate-x-1/2 rounded-xl bg-green-500 px-4 py-3 text-sm text-white shadow-xl"
            role="alert">

            <div class="flex items-start justify-between gap-3">
                <div class="flex gap-3">
                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/15">
                        <i class="fas fa-check text-xs"></i>
                    </div>

                    <div>
                        <p class="text-sm font-bold">Sukses!</p>
                        <p class="mt-0.5 text-xs leading-relaxed text-white/90">
                            {{ session('success') }}
                        </p>
                    </div>
                </div>

                <button @click="show = false"
                    class="flex h-7 w-7 items-center justify-center rounded-lg text-base font-bold leading-none text-white/90 transition hover:bg-white/15 hover:text-white">
                    &times;
                </button>
            </div>
        </div>
        @php session()->forget('success'); @endphp
    @endif

    {{-- Flash Error --}}
    @if(session('error'))
        <div x-data="{ show: true }"
            x-show="show"
            x-transition:enter="transform ease-out duration-500"
            x-transition:enter-start="-translate-y-10 opacity-0"
            x-transition:enter-end="translate-y-0 opacity-100"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="-translate-y-10 opacity-0"
            x-init="setTimeout(() => show = false, 4000)"
            class="fixed top-4 left-1/2 z-50 w-[90%] max-w-sm -translate-x-1/2 rounded-xl bg-red-600 px-4 py-3 text-sm text-white shadow-xl"
            role="alert">

            <div class="flex items-start justify-between gap-3">
                <div class="flex gap-3">
                    <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/15">
                        <i class="fas fa-triangle-exclamation text-xs"></i>
                    </div>

                    <div>
                        <p class="text-sm font-bold">Gagal!</p>
                        <p class="mt-0.5 text-xs leading-relaxed text-white/90">
                            {{ session('error') }}
                        </p>
                    </div>
                </div>

                <button @click="show = false"
                    class="flex h-7 w-7 items-center justify-center rounded-lg text-base font-bold leading-none text-white/90 transition hover:bg-white/15 hover:text-white">
                    &times;
                </button>
            </div>
        </div>
        @php session()->forget('error'); @endphp
    @endif

    {{-- Header --}}
    <div class="mx-auto mb-4 w-full max-w-5xl overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
        <div class="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-3">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
                    <i class="fas fa-bell text-xs"></i>
                </div>

                <div>
                    <h2 class="text-base font-bold text-slate-800">Manajemen Notifikasi</h2>
                    <p class="mt-0.5 text-xs text-slate-500">
                        Kirim dan pantau riwayat notifikasi audit kepada auditor.
                    </p>
                </div>
            </div>

            <button @click="showModal = true"
                class="inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 text-xs font-semibold text-white shadow-sm transition hover:bg-blue-700">
                <i class="fas fa-paper-plane text-[11px]"></i>
                Kirim Notifikasi
            </button>
        </div>
    </div>

    {{-- Search --}}
    <div class="mx-auto mb-3 w-full max-w-5xl">
        <div class="relative">
            <input type="text"
                id="searchInput"
                placeholder="Cari notifikasi..."
                class="h-9 w-full rounded-lg border border-slate-200 bg-white pl-3 pr-9 text-xs text-slate-700 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">

            <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-400">
                <svg class="h-3.5 w-3.5"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            </span>
        </div>
    </div>

    {{-- Riwayat Notifikasi --}}
    <div class="mx-auto w-full max-w-5xl overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
        <div class="border-b border-slate-100 bg-white px-4 py-3">
            <div class="flex items-center gap-3">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600">
                    <i class="fas fa-clock-rotate-left text-xs"></i>
                </div>

                <div>
                    <h3 class="text-sm font-bold text-slate-800">Riwayat Kirim Notifikasi</h3>
                    <p class="mt-0.5 text-xs text-slate-500">
                        Daftar notifikasi yang telah dikirim melalui sistem.
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-slate-50/60 px-4 py-3">
            <div id="notifList" class="space-y-2">
                @forelse($notifikasi as $item)
                    <a href="{{ route('admin.notifikasi.lihat', $item->id) }}"
                        class="group block rounded-xl border border-slate-200 bg-white px-3 py-3 shadow-sm transition hover:border-blue-200 hover:shadow-md">

                        <div class="flex items-start gap-3">
                            <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 transition group-hover:bg-blue-600 group-hover:text-white">
                                <i class="fas fa-bullhorn text-xs"></i>
                            </div>

                            <div class="min-w-0 flex-1">
                                <div class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
                                    <p class="truncate text-xs font-bold text-slate-800">
                                        {{ $item->data['judul'] ?? 'Notifikasi' }}
                                    </p>

                                    <span class="shrink-0 rounded-full bg-slate-100 px-2.5 py-0.5 text-[10px] font-semibold text-slate-500">
                                        {{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}
                                    </span>
                                </div>

                                <p class="mt-1 line-clamp-2 text-[11px] leading-relaxed text-slate-500">
                                    {{ $item->data['isi_pesan'] ?? '-' }}
                                </p>
                            </div>

                            <div class="hidden h-8 w-8 shrink-0 items-center justify-center rounded-lg text-slate-400 transition group-hover:bg-slate-100 group-hover:text-blue-600 sm:flex">
                                <i class="fas fa-chevron-right text-[10px]"></i>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="rounded-xl border border-dashed border-slate-300 bg-white px-4 py-7 text-center">
                        <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-slate-400">
                            <i class="fas fa-bell-slash text-xs"></i>
                        </div>

                        <p class="mt-2 text-xs font-semibold text-slate-600">Belum ada notifikasi yang dikirim.</p>
                        <p class="mt-1 text-[11px] text-slate-400">Riwayat notifikasi akan tampil setelah admin mengirim pesan.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Modal Kirim Notifikasi --}}
    <div
        x-show="showModal"
        x-cloak
        x-transition.opacity
        class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 px-4 py-5 backdrop-blur-sm">

        <div
            @click.away="showModal = false"
            x-show="showModal"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95 translate-y-2"
            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100 translate-y-0"
            x-transition:leave-end="opacity-0 scale-95 translate-y-2"
            class="modal-scroll relative z-50 w-full max-w-xl max-h-[88vh] overflow-y-auto rounded-xl border border-slate-200 bg-white shadow-2xl">

            {{-- Modal Kirim Notifikasi --}}
    <div
        x-show="showModal"
        x-cloak
        x-transition.opacity
        class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 px-4 py-6 backdrop-blur-sm">

        <div
            @click.away="showModal = false"
            x-show="showModal"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95 translate-y-2"
            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100 translate-y-0"
            x-transition:leave-end="opacity-0 scale-95 translate-y-2"
            class="modal-scroll relative z-50 w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl border border-slate-200 bg-white shadow-2xl">

            {{-- Header Modal --}}
            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-slate-100 bg-white px-6 py-4">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
                        <i class="fas fa-paper-plane text-sm"></i>
                    </div>

                    <div>
                        <h3 class="text-base font-bold text-slate-800">
                            Kirim Notifikasi
                        </h3>
                        <p class="mt-0.5 text-xs text-slate-500">
                            Buat pesan notifikasi audit untuk auditor.
                        </p>
                    </div>
                </div>

                <button type="button"
                    @click="showModal = false"
                    class="flex h-9 w-9 items-center justify-center rounded-xl text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
                    <i class="fas fa-xmark text-sm"></i>
                </button>
            </div>

            {{-- Form Kirim Notifikasi --}}
            <form method="POST" action="{{ route('admin.notifikasi.kirim') }}" enctype="multipart/form-data">
                @csrf

                <div class="px-6 py-5">

                    {{-- Mode Penerima --}}
                    <div class="mb-5">
                        <label class="mb-2 block text-xs font-semibold text-slate-600">Kirim ke:</label>

                        <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
                            <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 text-xs font-semibold text-slate-600 transition hover:bg-white"
                                :class="mode === 'umum' ? 'border-blue-300 bg-blue-50 text-blue-600 ring-2 ring-blue-100' : ''">
                                <input type="radio" name="mode" value="umum" x-model="mode" class="text-blue-600 focus:ring-blue-500">
                                Umum
                            </label>

                            <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 text-xs font-semibold text-slate-600 transition hover:bg-white"
                                :class="mode === 'semua' ? 'border-blue-300 bg-blue-50 text-blue-600 ring-2 ring-blue-100' : ''">
                                <input type="radio" name="mode" value="semua" x-model="mode" class="text-blue-600 focus:ring-blue-500">
                                Semua Auditor
                            </label>

                            <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 text-xs font-semibold text-slate-600 transition hover:bg-white"
                                :class="mode === 'beberapa' ? 'border-blue-300 bg-blue-50 text-blue-600 ring-2 ring-blue-100' : ''">
                                <input type="radio" name="mode" value="beberapa" x-model="mode" class="text-blue-600 focus:ring-blue-500">
                                Auditor Tertentu
                            </label>
                        </div>
                    </div>

                    {{-- Email --}}
                    <template x-if="mode === 'beberapa'">
                        <div class="mb-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                            <label class="mb-2 block text-xs font-semibold text-slate-600">
                                Email User <span class="font-normal text-slate-400">(maks. 3)</span>
                            </label>

                            <template x-for="i in 3" :key="i">
                                <input type="email"
                                    name="emails[]"
                                    placeholder="contoh@gmail.com"
                                    class="mb-2 h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 last:mb-0 focus:border-blue-500 focus:ring-4 focus:ring-blue-100">
                            </template>
                        </div>
                    </template>

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">

                        {{-- Subjek --}}
                        <div>
                            <label class="mb-1.5 block text-xs font-semibold text-slate-600">Subjek Pesan</label>
                            <select name="selected_subject"
                                x-model="selectedSubject"
                                @change="updatePesan()"
                                class="h-10 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100">
                                <option value="">-- Pilih Subjek --</option>
                                <option value="audit">Jadwal Audit</option>
                                <option value="verifikasi">Jadwal Verifikasi Audit</option>
                            </select>
                        </div>

                        {{-- Tema --}}
                        <div x-show="selectedSubject">
                            <label class="mb-1.5 block text-xs font-semibold text-slate-600">Tema</label>
                            <select name="tema"
                                x-model="selectedTema"
                                @change="updatePesan()"
                                class="h-10 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100">
                                <option value="">-- Pilih Tema --</option>
                                @foreach($temaList as $tema)
                                    <option value="{{ $tema->nama }}">{{ $tema->nama }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Tanggal --}}
                        <div x-show="selectedSubject">
                            <label class="mb-1.5 block text-xs font-semibold text-slate-600">Tanggal</label>
                            <input type="date"
                                name="tanggal"
                                x-model="selectedTanggal"
                                @change="updatePesan()"
                                class="h-10 w-full rounded-xl border border-slate-200 bg-slate-50 px-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100">
                        </div>

                        {{-- Foto --}}
                        <div>
                            <label class="mb-1.5 block text-xs font-semibold text-slate-600">
                                Lampirkan Foto <span class="font-normal text-slate-400">(opsional)</span>
                            </label>

                            <input type="file"
                                name="foto"
                                class="block h-10 w-full cursor-pointer rounded-xl border border-slate-200 bg-slate-50 text-xs text-slate-600 file:mr-3 file:h-full file:border-0 file:bg-blue-600 file:px-3 file:text-xs file:font-semibold file:text-white hover:file:bg-blue-700">

                            <p class="mt-1 text-[11px] text-slate-400">* Kosongkan jika tidak ada lampiran.</p>

                            @error('foto')
                                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Isi Pesan --}}
                        <div class="md:col-span-2">
                            <label class="mb-1.5 block text-xs font-semibold text-slate-600">Isi Pesan</label>
                            <textarea name="isi_pesan"
                                x-model="isiPesan"
                                rows="7"
                                placeholder="Tulis pesan..."
                                class="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-3 text-sm leading-relaxed text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-100"></textarea>
                        </div>
                    </div>
                </div>

                {{-- Footer Button --}}
                <div class="sticky bottom-0 z-10 flex items-center justify-end gap-2 border-t border-slate-100 bg-white px-6 py-4 shadow-[0_-8px_20px_rgba(15,23,42,0.06)]">
                    <button type="button"
                        @click="showModal = false"
                        class="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-white px-4 text-sm font-medium text-slate-600 ring-1 ring-slate-200 transition hover:bg-slate-100">
                        <i class="fas fa-xmark text-xs"></i>
                        Batal
                    </button>

                    <button type="submit"
                        class="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-blue-600 px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 hover:shadow-md">
                        <i class="fas fa-paper-plane text-xs"></i>
                        Kirim Notifikasi
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

{{-- Search --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('searchInput');

    if (searchInput) {
        searchInput.addEventListener('input', function () {
            const keyword = this.value.toLowerCase();

            document.querySelectorAll('#notifList a').forEach(item => {
                const text = item.innerText.toLowerCase();
                item.style.display = text.includes(keyword) ? '' : 'none';
            });
        });
    }
});
</script>

{{-- Alpine --}}
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('notifikasiForm', () => ({
        mode: 'umum',
        showModal: false,
        selectedSubject: '',
        selectedTema: '',
        selectedTanggal: '',
        isiPesan: '',
        templates: {
            umum: {
                audit: `📢 Jadwal Audit (Umum)

Yth. Bapak/Ibu,

Bersama ini saya informasikan bahwa Audit 5S akan dilaksanakan pada:

Hari/Tanggal   : [TANGGAL_AUDIT]  
Tema           : [TEMA_AUDIT]  

Mohon diinformasikan juga kepada PIC terkait yang tidak memiliki akses sistem/email.

Terima kasih atas perhatian dan kerjasamanya.

Hormat kami,  
Tim Audit 5S`,
                verifikasi: `📢 Jadwal Verifikasi Temuan Audit (Umum)

Yth. Bapak/Ibu,

Bersama ini saya informasikan bahwa Verifikasi hasil Audit 5S akan dilaksanakan pada:

Hari/Tanggal   : [TANGGAL_VERIFIKASI]  
Tema           : [TEMA_AUDIT]  

Mohon diinformasikan juga kepada PIC terkait yang tidak memiliki akses sistem/email.

Terima kasih atas perhatian dan kerjasamanya.

Hormat kami,  
Tim Audit 5S`,
            },
            semua: {
                audit: `📢 Jadwal Audit 5S

Yth. Seluruh Auditor,

Bersama dengan ini saya mengundang Bapak/Ibu, untuk meeting persiapan Audit 5S dengan tema “[TEMA_AUDIT]”.
Meeting akan dilaksanakan pada:

Hari/Tanggal   : [TANGGAL_AUDIT]  
Waktu          : WIB  
Tempat         :  

Daftar Auditor yang telah ditunjuk oleh masing-masing divisi antara lain:

Stamping       : Bpk. Pranadi / Bpk. Erfan
Assy.-Machining: Bpk. Andy
                 Ibu Stephani
Injection      : Bpk. Surya / Bpk. Bambang / Bpk. Julius
Logistic       : Bpk. Sarman / Ibu Dini
HRD-GA         : Bpk. Agus / Bpk. Reno / Bpk. Elans
Rubber         : Bpk. Randy / Bpk. Rio
Tooling        : Bpk. Sugiarto / Bpk. Hariyanto
                 Bpk. Ferry / Bpk. Cahyo
Admin          : Ibu Rizkita
                 Ibu Ayu
                 Ibu Laras
                 Ibu Meity
                 Ibu Fia
                 Ibu Vera

Mohon info ini disampaikan juga kepada PIC terkait yang tidak memiliki e-mail. 
Diharapkan hadir tepat waktu.

Terima kasih atas perhatian dan kerjasamanya.

Hormat kami,  
Tim Audit 5S`,
                verifikasi: `📢 Jadwal Verifikasi Temuan Audit

Yth. Seluruh Auditor,

Bersama dengan ini saya mengundang Bapak/Ibu, untuk meeting persiapan Verifikasi Temuan Audit 5S dengan tema “[TEMA_AUDIT]”.
Meeting akan dilaksanakan pada:

Hari/Tanggal   : [TANGGAL_VERIFIKASI]  
Waktu          : WIB  
Tempat         :  

Daftar Auditor yang telah ditunjuk oleh masing-masing divisi antara lain:

Stamping       : Bpk. Pranadi / Bpk. Erfan
Assy.-Machining: Bpk. Andy
                 Ibu Stephani
Injection      : Bpk. Surya / Bpk. Bambang / Bpk. Julius
Logistic       : Bpk. Sarman / Ibu Dini
HRD-GA         : Bpk. Agus / Bpk. Reno / Bpk. Elans
Rubber         : Bpk. Randy / Bpk. Rio
Tooling        : Bpk. Sugiarto / Bpk. Hariyanto
                 Bpk. Ferry / Bpk. Cahyo
Admin          : Ibu Rizkita
                 Ibu Ayu
                 Ibu Laras
                 Ibu Meity
                 Ibu Fia
                 Ibu Vera

Mohon info ini disampaikan juga kepada PIC terkait yang tidak memiliki e-mail. 
Diharapkan hadir tepat waktu.

Terima kasih atas perhatian dan kerjasamanya.

Hormat kami,  
Tim Audit 5S`,
            },
            beberapa: {
                audit: `📢 Jadwal Audit 5S

Yth. Bapak/Ibu,

Dengan hormat,  
Sehubungan dengan program Audit 5S, bersama ini kami informasikan bahwa Audit akan dilaksanakan pada:

Hari/Tanggal   : [TANGGAL_AUDIT]  
Tema           : [TEMA_AUDIT]  

Mohon Bapak/Ibu berkenan hadir sesuai jadwal yang telah ditentukan.

Atas perhatian dan kerjasamanya, kami ucapkan terima kasih.

Hormat kami,  
Tim Audit 5S`,
                verifikasi: `📢 Jadwal Verifikasi Audit

Yth. Bapak/Ibu,

Dengan hormat,  
Bersama ini kami informasikan bahwa Verifikasi hasil Audit 5S akan dilaksanakan dengan ketentuan sebagai berikut:

Hari/Tanggal   : [TANGGAL_VERIFIKASI]  
Tema           : [TEMA_AUDIT]  

Dimohon untuk dapat menyiapkan dokumen pendukung serta hadir tepat waktu sesuai jadwal.

Atas perhatian dan kerjasamanya, kami sampaikan terima kasih.

Hormat kami,  
Tim Audit 5S`,
            }
        },
        init() {
            this.$watch('mode', () => {
                this.selectedSubject = '';
                this.selectedTema = '';
                this.selectedTanggal = '';
                this.isiPesan = '';
            });
        },
        updatePesan() {
            if (!this.selectedSubject) {
                this.isiPesan = '';
                return;
            }

            let template = this.templates[this.mode][this.selectedSubject];

            if (this.selectedTema) {
                template = template.replace('[TEMA_AUDIT]', this.selectedTema);
            }

            if (this.selectedTanggal) {
                const formatted = new Date(this.selectedTanggal).toLocaleDateString('id-ID', {
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                });

                template = template
                    .replace('[TANGGAL_AUDIT]', formatted)
                    .replace('[TANGGAL_VERIFIKASI]', formatted);
            }

            this.isiPesan = template;
        }
    }))
})
</script>
@endsection