@extends('layouts.admin')

@section('title', $isEdit ? 'Edit Pengumuman' : 'Buat Pengumuman Baru')

@section('content')
<div class="space-y-6 max-w-5xl mx-auto">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.pengumuman.index') }}" class="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-slate-900 tracking-tight">{{ $isEdit ? 'Edit Pengumuman' : 'Buat Pengumuman Baru' }}</h1>
                <p class="text-xs text-slate-500 mt-0.5">Tentukan isi pengumuman, jenis informasi, dan target karyawan penerima</p>
            </div>
        </div>
    </div>

    <!-- Alert Errors -->
    @if(isset($errors) && $errors->any())
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold shadow-sm">
        <div class="flex items-center gap-2 mb-1.5">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>Terdapat beberapa kesalahan input:</span>
        </div>
        <ul class="list-disc list-inside space-y-0.5 text-[11px] text-rose-700 pl-4">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ $isEdit ? route('admin.pengumuman.update', $pengumuman->id) : route('admin.pengumuman.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @if($isEdit)
            @method('PUT')
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Kolom Kiri: Form Utama Konten -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Card Konten -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                        <i data-lucide="file-text" class="w-4 h-4 text-primary-600"></i>
                        <span>Informasi & Konten Pengumuman</span>
                    </h3>

                    <!-- Judul -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Judul Pengumuman <span class="text-rose-500">*</span></label>
                        <input type="text" name="judul" value="{{ old('judul', $pengumuman->judul) }}" required placeholder="Contoh: Pemberitahuan Libur Bersama Idul Fitri 1448 H" class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all">
                    </div>

                    <!-- Ringkasan -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Ringkasan Singkat (Opsional)</label>
                        <textarea name="ringkasan" rows="2" placeholder="Deskripsi singkat yang tampil pada preview notifikasi atau kartu mobile..." class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all">{{ old('ringkasan', $pengumuman->ringkasan) }}</textarea>
                    </div>

                    <!-- Isi Konten -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Isi Konten Pengumuman Lengkap <span class="text-rose-500">*</span></label>
                        <textarea name="konten" rows="8" required placeholder="Tuliskan isi pengumuman lengkap secara jelas..." class="w-full px-3.5 py-2.5 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 transition-all leading-relaxed">{{ old('konten', $pengumuman->konten) }}</textarea>
                    </div>
                </div>

                <!-- Card Target Audience (Karyawan) -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                            <i data-lucide="users" class="w-4 h-4 text-primary-600"></i>
                            <span>Target Penerima Pengumuman</span>
                        </h3>
                    </div>

                    <!-- Switcher Target -->
                    <div class="grid grid-cols-2 gap-3 p-1.5 rounded-2xl bg-slate-50 border border-slate-200/70">
                        <label class="cursor-pointer">
                            <input type="radio" name="target_audience" value="semua" {{ old('target_audience', $pengumuman->target_audience) === 'semua' ? 'checked' : '' }} class="sr-only peer" onchange="toggleTargetAudience()">
                            <div class="flex items-center justify-center gap-2 py-2.5 px-3 rounded-xl text-xs font-bold transition-all peer-checked:bg-white peer-checked:text-primary-600 peer-checked:shadow-sm text-slate-600">
                                <i data-lucide="globe" class="w-4 h-4"></i>
                                <span>Semua Karyawan (Broadcast)</span>
                            </div>
                        </label>
                        <label class="cursor-pointer">
                            <input type="radio" name="target_audience" value="spesifik" {{ old('target_audience', $pengumuman->target_audience) === 'spesifik' ? 'checked' : '' }} class="sr-only peer" onchange="toggleTargetAudience()">
                            <div class="flex items-center justify-center gap-2 py-2.5 px-3 rounded-xl text-xs font-bold transition-all peer-checked:bg-white peer-checked:text-purple-600 peer-checked:shadow-sm text-slate-600">
                                <i data-lucide="user-check" class="w-4 h-4"></i>
                                <span>Beberapa Karyawan (Spesifik)</span>
                            </div>
                        </label>
                    </div>

                    <!-- Container Pemilihan Karyawan Spesifik -->
                    <div id="spesifikContainer" class="space-y-3 {{ old('target_audience', $pengumuman->target_audience) === 'spesifik' ? '' : 'hidden' }}">
                        <div class="p-3 rounded-xl bg-purple-50/60 border border-purple-100 text-purple-900 text-xs flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <i data-lucide="info" class="w-4 h-4 text-purple-600 shrink-0"></i>
                                <span>Centang karyawan yang berhak membaca pengumuman ini.</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <button type="button" onclick="selectAllPegawai(true)" class="text-[11px] font-bold text-purple-700 hover:underline">Pilih Semua</button>
                                <span class="text-purple-300">|</span>
                                <button type="button" onclick="selectAllPegawai(false)" class="text-[11px] font-bold text-purple-700 hover:underline">Batalkan</button>
                            </div>
                        </div>

                        <!-- Search Bar Pegawai -->
                        <div class="relative">
                            <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                            <input type="text" id="pegawaiSearch" placeholder="Cari nama karyawan, NIP, atau departemen..." onkeyup="filterPegawaiList()" class="w-full pl-8 pr-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-purple-500">
                        </div>

                        <!-- List Pegawai Checkboxes -->
                        <div class="max-h-64 overflow-y-auto space-y-1.5 p-2 rounded-xl border border-slate-100 bg-slate-50/50" id="pegawaiList">
                            @foreach($pegawais as $peg)
                            @php
                                $isChecked = in_array($peg->id, old('pegawai_ids', $selectedPegawaiIds));
                            @endphp
                            <label class="pegawai-item flex items-center justify-between p-2 rounded-xl bg-white border border-slate-100 hover:border-purple-200 transition-colors cursor-pointer select-none" data-search="{{ strtolower($peg->nama_lengkap . ' ' . $peg->nip . ' ' . ($peg->departemen->nama_departemen ?? '') . ' ' . ($peg->jabatan->nama_jabatan ?? '')) }}">
                                <div class="flex items-center gap-2.5 min-w-0">
                                    <input type="checkbox" name="pegawai_ids[]" value="{{ $peg->id }}" {{ $isChecked ? 'checked' : '' }} class="pegawai-checkbox rounded text-purple-600 focus:ring-purple-500">
                                    <div class="truncate">
                                        <p class="text-xs font-bold text-slate-800 truncate">{{ $peg->nama_lengkap }}</p>
                                        <p class="text-[10px] text-slate-400 truncate">NIP: {{ $peg->nip }} • {{ $peg->departemen->nama_departemen ?? '-' }} ({{ $peg->jabatan->nama_jabatan ?? '-' }})</p>
                                    </div>
                                </div>
                            </label>
                            @endforeach
                        </div>
                        <p class="text-[11px] text-slate-400 text-right"><span id="selectedCount">0</span> karyawan terpilih</p>
                    </div>
                </div>
            </div>

            <!-- Kolom Kanan: Pengaturan & Media -->
            <div class="space-y-6">
                <!-- Pengaturan Penerbitan -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                        <i data-lucide="sliders" class="w-4 h-4 text-primary-600"></i>
                        <span>Pengaturan Penerbitan</span>
                    </h3>

                    <!-- Tipe Pengumuman -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Kategori / Tipe <span class="text-rose-500">*</span></label>
                        <select name="tipe" required class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                            <option value="informasi" {{ old('tipe', $pengumuman->tipe) === 'informasi' ? 'selected' : '' }}>Informasi Umum</option>
                            <option value="penting" {{ old('tipe', $pengumuman->tipe) === 'penting' ? 'selected' : '' }}>Penting (Perlu Perhatian)</option>
                            <option value="mendesak" {{ old('tipe', $pengumuman->tipe) === 'mendesak' ? 'selected' : '' }}>Mendesak (Urgent)</option>
                            <option value="acara" {{ old('tipe', $pengumuman->tipe) === 'acara' ? 'selected' : '' }}>Kegiatan / Acara</option>
                        </select>
                    </div>

                    <!-- Tanggal Mulai -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Tanggal Mulai Berlaku <span class="text-rose-500">*</span></label>
                        <input type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai', $pengumuman->tanggal_mulai ? \Carbon\Carbon::parse($pengumuman->tanggal_mulai)->format('Y-m-d') : date('Y-m-d')) }}" required class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500">
                    </div>

                    <!-- Tanggal Selesai -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Tanggal Selesai (Opsional)</label>
                        <input type="date" name="tanggal_selesai" value="{{ old('tanggal_selesai', $pengumuman->tanggal_selesai ? \Carbon\Carbon::parse($pengumuman->tanggal_selesai)->format('Y-m-d') : '') }}" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500">
                        <p class="text-[10px] text-slate-400 mt-1">Kosongkan jika pengumuman berlaku seterusnya tanpa batas waktu.</p>
                    </div>

                    <div class="pt-2 border-t border-slate-100 space-y-3">
                        <!-- Checkbox Pinned -->
                        <label class="flex items-center gap-2.5 cursor-pointer">
                            <input type="checkbox" name="is_pinned" value="1" {{ old('is_pinned', $pengumuman->is_pinned) ? 'checked' : '' }} class="rounded text-amber-500 focus:ring-amber-400">
                            <div>
                                <span class="text-xs font-bold text-slate-700 flex items-center gap-1.5">
                                    <i data-lucide="pin" class="w-3.5 h-3.5 text-amber-500"></i>
                                    Sematkan di Atas (Pinned)
                                </span>
                                <p class="text-[10px] text-slate-400">Tampilkan di posisi teratas dashboard mobile karyawan.</p>
                            </div>
                        </label>

                        <!-- Checkbox Aktif -->
                        <label class="flex items-center gap-2.5 cursor-pointer">
                            <input type="checkbox" name="is_aktif" value="1" {{ old('is_aktif', $pengumuman->is_aktif ?? true) ? 'checked' : '' }} class="rounded text-emerald-600 focus:ring-emerald-500">
                            <div>
                                <span class="text-xs font-bold text-slate-700">Publikasikan Langsung (Aktif)</span>
                                <p class="text-[10px] text-slate-400">Karyawan dapat langsung melihat pengumuman ini.</p>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Media & Lampiran -->
                <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                        <i data-lucide="paperclip" class="w-4 h-4 text-primary-600"></i>
                        <span>Media & Dokumen Lampiran</span>
                    </h3>

                    <!-- Banner / Flyer -->
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Banner Flyer / Gambar (Opsional)</label>
                        @if($isEdit && $pengumuman->gambar)
                        <div class="mb-2 relative rounded-xl overflow-hidden border border-slate-200">
                            <img src="{{ $pengumuman->gambar_url }}" alt="Preview" class="w-full h-32 object-cover">
                            <label class="flex items-center gap-1.5 p-2 bg-rose-50 text-rose-700 text-[11px] font-semibold cursor-pointer">
                                <input type="checkbox" name="hapus_gambar" value="1" class="rounded text-rose-600">
                                <span>Hapus banner saat ini</span>
                            </label>
                        </div>
                        @endif
                        <input type="file" name="gambar" accept="image/jpeg,image/png,image/jpg,image/webp" class="w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                        <p class="text-[10px] text-slate-400 mt-1">Maksimal 3MB (.jpg, .jpeg, .png, .webp)</p>
                    </div>

                    <!-- Lampiran Dokumen -->
                    <div class="pt-3 border-t border-slate-100">
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">Dokumen Surat / Lampiran (PDF/Doc)</label>
                        @if($isEdit && $pengumuman->lampiran_dokumen)
                        <div class="mb-2 p-2.5 rounded-xl bg-slate-50 border border-slate-200 flex items-center justify-between text-xs">
                            <a href="{{ $pengumuman->lampiran_url }}" target="_blank" class="flex items-center gap-2 text-primary-600 font-semibold hover:underline truncate">
                                <i data-lucide="file-text" class="w-4 h-4 shrink-0"></i>
                                <span class="truncate">{{ basename($pengumuman->lampiran_dokumen) }}</span>
                            </a>
                            <label class="flex items-center gap-1.5 text-rose-600 text-[10px] font-semibold cursor-pointer shrink-0 ml-2">
                                <input type="checkbox" name="hapus_lampiran" value="1" class="rounded text-rose-600">
                                <span>Hapus</span>
                            </label>
                        </div>
                        @endif
                        <input type="file" name="lampiran_dokumen" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png" class="w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200">
                        <p class="text-[10px] text-slate-400 mt-1">Maksimal 10MB (PDF, Word, Excel, Gambar)</p>
                    </div>
                </div>

                <!-- Tombol Submit -->
                <div class="flex items-center gap-3">
                    <a href="{{ route('admin.pengumuman.index') }}" class="flex-1 py-2.5 px-4 rounded-xl border border-slate-200 hover:bg-slate-50 text-slate-700 text-xs font-bold text-center transition-colors">
                        Batal
                    </a>
                    <button type="submit" class="flex-1 py-2.5 px-4 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-md shadow-primary-500/20 transition-all flex items-center justify-center gap-2">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        <span>{{ $isEdit ? 'Simpan Perubahan' : 'Terbitkan Pengumuman' }}</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    function toggleTargetAudience() {
        const val = document.querySelector('input[name="target_audience"]:checked').value;
        const container = document.getElementById('spesifikContainer');
        if (val === 'spesifik') {
            container.classList.remove('hidden');
        } else {
            container.classList.add('hidden');
        }
        updateSelectedCount();
    }

    function selectAllPegawai(select) {
        const checkboxes = document.querySelectorAll('.pegawai-checkbox');
        checkboxes.forEach(cb => {
            const parent = cb.closest('.pegawai-item');
            if (!parent.classList.contains('hidden')) {
                cb.checked = select;
            }
        });
        updateSelectedCount();
    }

    function filterPegawaiList() {
        const query = document.getElementById('pegawaiSearch').value.toLowerCase().trim();
        const items = document.querySelectorAll('.pegawai-item');
        items.forEach(item => {
            const dataSearch = item.getAttribute('data-search') || '';
            if (dataSearch.includes(query)) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
    }

    function updateSelectedCount() {
        const checked = document.querySelectorAll('.pegawai-checkbox:checked').length;
        document.getElementById('selectedCount').innerText = checked;
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.pegawai-checkbox').forEach(cb => {
            cb.addEventListener('change', updateSelectedCount);
        });
        updateSelectedCount();
    });
</script>
@endsection