@extends('layouts.admin_sidebar')

@section('content')
<div class="p-6 lg:p-8 bg-slate-50 min-h-screen">

    {{-- Page Header --}}
    <div class="mb-8">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-md shadow-blue-500/30">
                <i data-lucide="megaphone" class="w-5 h-5 text-white"></i>
            </div>
            <div>
                <h1 class="text-2xl font-extrabold text-slate-900 leading-tight">Pengumuman & Informasi</h1>
                <p class="text-sm text-slate-500">Kirim informasi penting kepada seluruh pelanggan</p>
            </div>
        </div>
    </div>


    <div class="grid grid-cols-1 xl:grid-cols-5 gap-6">

        {{-- ============================================================ --}}
        {{-- FORM BUAT PENGUMUMAN BARU --}}
        {{-- ============================================================ --}}
        <div class="xl:col-span-2">
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden sticky top-6">
                <div class="p-5 border-b border-slate-100 flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
                        <i data-lucide="send" class="w-4 h-4"></i>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900">Buat Pengumuman</h2>
                        <p class="text-xs text-slate-500">Otomatis terkirim ke semua pelanggan</p>
                    </div>
                </div>
                <div class="p-5">
                    <form action="{{ route('admin.pengumuman.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                        @csrf

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Judul Pengumuman</label>
                            <input type="text" name="judul" id="judul"
                                class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-medium text-slate-800 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-all"
                                placeholder="cth: Pengiriman Libur Lebaran" value="{{ old('judul') }}" required>
                            @error('judul') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Tipe / Kategori</label>
                            <div class="grid grid-cols-2 gap-2">
                                @foreach([
                                    ['info',    '💬 Informasi',    'bg-blue-50 border-blue-300 text-blue-700',    'peer-checked:bg-blue-500 peer-checked:text-white peer-checked:border-blue-500'],
                                    ['success', '✅ Kabar Baik',   'bg-green-50 border-green-300 text-green-700',  'peer-checked:bg-green-500 peer-checked:text-white peer-checked:border-green-500'],
                                    ['warning', '⚠️ Peringatan',   'bg-yellow-50 border-yellow-300 text-yellow-700','peer-checked:bg-yellow-500 peer-checked:text-white peer-checked:border-yellow-500'],
                                    ['danger',  '🚫 Penting',      'bg-red-50 border-red-300 text-red-700',        'peer-checked:bg-red-500 peer-checked:text-white peer-checked:border-red-500'],
                                ] as [$val, $lbl, $defaultClass, $checkedClass])
                                <label class="cursor-pointer">
                                    <input type="radio" name="tipe" value="{{ $val }}" class="peer sr-only" {{ old('tipe', 'info') === $val ? 'checked' : '' }}>
                                    <div class="flex items-center justify-center px-2 py-2 text-xs font-bold rounded-xl border-2 transition-all {{ $defaultClass }} {{ $checkedClass }}">
                                        {{ $lbl }}
                                    </div>
                                </label>
                                @endforeach
                            </div>
                            @error('tipe') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Isi Pesan</label>
                            <textarea name="konten" id="konten" rows="5"
                                class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-medium text-slate-800 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-all resize-none"
                                placeholder="Tulis pesan pengumuman untuk pelanggan..." required>{{ old('konten') }}</textarea>
                            @error('konten') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Foto (Opsional)</label>
                            <input type="file" name="foto" id="foto" accept="image/*"
                                class="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm font-medium text-slate-600 bg-slate-50 focus:outline-none file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-all">
                            @error('foto') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-xl border border-slate-200">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_aktif" id="is_aktif" class="sr-only peer" {{ old('is_aktif', true) ? 'checked' : '' }}>
                                <div class="w-10 h-5 bg-gray-300 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-5 peer-checked:bg-blue-500 after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                            <div>
                                <p class="text-xs font-bold text-slate-800">Tampilkan di Halaman Pelanggan</p>
                                <p class="text-xs text-slate-500">Pengumuman akan terlihat di dashboard pelanggan</p>
                            </div>
                        </div>

                        {{-- Info box --}}
                        <div class="flex items-start gap-2.5 p-3 bg-blue-50 rounded-xl border border-blue-100">
                            <i data-lucide="info" class="w-4 h-4 text-blue-500 shrink-0 mt-0.5"></i>
                            <p class="text-xs text-blue-700 leading-relaxed">
                                Pengumuman akan otomatis dikirim sebagai <strong>notifikasi</strong> ke semua akun pelanggan yang terdaftar.
                            </p>
                        </div>

                        <button type="submit"
                            class="w-full py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold rounded-xl shadow-md shadow-blue-500/25 transition-all duration-200 transform hover:-translate-y-0.5 flex items-center justify-center gap-2">
                            <i data-lucide="megaphone" class="w-4 h-4"></i>
                            Publikasikan & Kirim
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- ============================================================ --}}
        {{-- LIST PENGUMUMAN --}}
        {{-- ============================================================ --}}
        <div class="xl:col-span-3 space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="text-base font-bold text-slate-800">
                    Riwayat Pengumuman
                    <span class="ml-2 inline-flex items-center justify-center w-6 h-6 bg-blue-100 text-blue-600 text-xs font-black rounded-full">{{ $pengumumanList->count() }}</span>
                </h2>
            </div>

            @forelse($pengumumanList as $p)
            @php
                $tipeConfig = [
                    'info'    => ['border-blue-200 bg-blue-50/40',   'bg-blue-100 text-blue-600',   'bg-blue-500',   '💬 Informasi'],
                    'success' => ['border-green-200 bg-green-50/40', 'bg-green-100 text-green-600', 'bg-green-500',  '✅ Kabar Baik'],
                    'warning' => ['border-yellow-200 bg-yellow-50/40','bg-yellow-100 text-yellow-700','bg-yellow-500','⚠️ Peringatan'],
                    'danger'  => ['border-red-200 bg-red-50/40',     'bg-red-100 text-red-600',     'bg-red-500',    '🚫 Penting'],
                ];
                $cfg = $tipeConfig[$p->tipe] ?? $tipeConfig['info'];
            @endphp
            <div class="bg-white rounded-2xl border {{ $cfg[0] }} shadow-sm overflow-hidden hover:shadow-md transition-all duration-300 group" id="card-{{ $p->id }}">
                <div class="p-5">
                    <div class="flex items-start justify-between gap-3 mb-3">
                        <div class="flex items-center gap-2.5 flex-wrap">
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 {{ $cfg[1] }} rounded-full text-xs font-bold">
                                {{ $cfg[3] }}
                            </span>
                            @if($p->is_aktif)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-[11px] font-bold">
                                    <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span> Aktif
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-slate-100 text-slate-500 rounded-full text-[11px] font-bold">
                                    <span class="w-1.5 h-1.5 bg-slate-400 rounded-full"></span> Nonaktif
                                </span>
                            @endif
                        </div>
                        <div class="flex items-center gap-2 shrink-0">
                            <button onclick="openEditModal({{ $p->id }}, '{{ addslashes($p->judul) }}', '{{ addslashes($p->konten) }}', '{{ $p->tipe }}', {{ $p->is_aktif ? 'true' : 'false' }})"
                                class="p-2 rounded-xl bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 transition-colors border border-slate-200"
                                title="Edit">
                                <i data-lucide="pencil" class="w-4 h-4"></i>
                            </button>
                            <form action="{{ route('admin.pengumuman.destroy', $p->id) }}" method="POST" class="delete-form-pengumuman">
                                @csrf @method('DELETE')
                                <button type="button"
                                    class="p-2 rounded-xl bg-red-50 hover:bg-red-100 text-red-400 hover:text-red-600 transition-colors border border-red-100 btn-delete"
                                    title="Hapus">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                    <h3 class="font-bold text-slate-900 text-base mb-2 leading-snug">{{ $p->judul }}</h3>
                    <p class="text-sm text-slate-600 leading-relaxed whitespace-pre-line">{{ Str::limit($p->konten, 200) }}</p>

                    @if($p->foto)
                        <div class="mt-3">
                            <img src="{{ asset('images/pengumuman/' . $p->foto) }}" alt="Foto Pengumuman" class="w-full h-auto rounded-lg max-h-48 object-cover border border-slate-100">
                        </div>
                    @endif

                    <div class="mt-3 pt-3 border-t border-slate-100 flex items-center justify-between">
                        <span class="text-[11px] text-slate-400 flex items-center gap-1">
                            <i data-lucide="clock" class="w-3 h-3"></i>
                            {{ $p->created_at->translatedFormat('d M Y, H:i') }}
                        </span>
                        <span class="text-[11px] text-slate-400 flex items-center gap-1">
                            <i data-lucide="send" class="w-3 h-3"></i>
                            Terkirim ke semua pelanggan
                        </span>
                    </div>
                </div>
            </div>
            @empty
            <div class="bg-white rounded-2xl border border-slate-200 p-12 text-center">
                <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="megaphone-off" class="w-8 h-8 text-slate-300"></i>
                </div>
                <p class="text-slate-500 font-semibold">Belum ada pengumuman</p>
                <p class="text-sm text-slate-400 mt-1">Buat pengumuman pertama untuk pelanggan Anda</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

{{-- ======================================================== --}}
{{-- MODAL EDIT PENGUMUMAN --}}
{{-- ======================================================== --}}
<div id="editModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden animate-modal-in">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-amber-50 flex items-center justify-center text-amber-500">
                    <i data-lucide="pencil" class="w-4 h-4"></i>
                </div>
                <h3 class="font-bold text-slate-900">Edit Pengumuman</h3>
            </div>
            <button onclick="closeEditModal()" class="p-2 rounded-xl hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        <form id="editForm" method="POST" enctype="multipart/form-data" class="p-5 space-y-4">
            @csrf
            @method('PUT')

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Judul</label>
                <input type="text" name="judul" id="edit_judul"
                    class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-medium text-slate-800 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-all"
                    required>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Tipe</label>
                <div class="grid grid-cols-2 gap-2">
                    @foreach([
                        ['info',    '💬 Informasi',  'bg-blue-50 border-blue-300 text-blue-700',    'peer-checked:bg-blue-500 peer-checked:text-white peer-checked:border-blue-500'],
                        ['success', '✅ Kabar Baik',  'bg-green-50 border-green-300 text-green-700',  'peer-checked:bg-green-500 peer-checked:text-white peer-checked:border-green-500'],
                        ['warning', '⚠️ Peringatan',  'bg-yellow-50 border-yellow-300 text-yellow-700','peer-checked:bg-yellow-500 peer-checked:text-white peer-checked:border-yellow-500'],
                        ['danger',  '🚫 Penting',     'bg-red-50 border-red-300 text-red-700',        'peer-checked:bg-red-500 peer-checked:text-white peer-checked:border-red-500'],
                    ] as [$val, $lbl, $dClass, $cClass])
                    <label class="cursor-pointer">
                        <input type="radio" name="tipe" value="{{ $val }}" class="peer sr-only edit-tipe-radio">
                        <div class="flex items-center justify-center px-2 py-2 text-xs font-bold rounded-xl border-2 transition-all {{ $dClass }} {{ $cClass }}">
                            {{ $lbl }}
                        </div>
                    </label>
                    @endforeach
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Isi Pesan</label>
                <textarea name="konten" id="edit_konten" rows="5"
                    class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-medium text-slate-800 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-all resize-none"
                    required></textarea>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1.5 uppercase tracking-wide">Foto Baru (Hanya jika ingin mengganti)</label>
                <input type="file" name="foto" id="edit_foto" accept="image/*"
                    class="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm font-medium text-slate-600 bg-slate-50 focus:outline-none file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-all">
            </div>

            <div class="flex items-center gap-3 p-3 bg-slate-50 rounded-xl border border-slate-200">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="is_aktif" id="edit_is_aktif" class="sr-only peer">
                    <div class="w-10 h-5 bg-gray-300 peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-5 peer-checked:bg-blue-500 after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                </label>
                <p class="text-xs font-bold text-slate-800">Tampilkan di halaman pelanggan</p>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="button" onclick="closeEditModal()"
                    class="flex-1 py-2.5 border border-slate-200 text-slate-600 font-bold rounded-xl hover:bg-slate-50 transition-colors">
                    Batal
                </button>
                <button type="submit"
                    class="flex-1 py-2.5 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-bold rounded-xl shadow-md shadow-amber-500/25 transition-all duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="save" class="w-4 h-4"></i> Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    @keyframes fadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
    .animate-fade-in { animation: fadeIn .4s ease-out; }
    @keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
    .animate-modal-in { animation: modalIn .25s ease-out; }
</style>

<script>
    const BASE_URL = "{{ url('admin/pengumuman') }}";

    function openEditModal(id, judul, konten, tipe, isAktif) {
        document.getElementById('editForm').action = BASE_URL + '/' + id;
        document.getElementById('edit_judul').value  = judul;
        document.getElementById('edit_konten').value = konten;
        document.getElementById('edit_is_aktif').checked = isAktif;

        document.querySelectorAll('.edit-tipe-radio').forEach(r => {
            r.checked = (r.value === tipe);
        });

        const modal = document.getElementById('editModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeEditModal() {
        const modal = document.getElementById('editModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    document.getElementById('editModal').addEventListener('click', function(e) {
        if (e.target === this) closeEditModal();
    });

    document.addEventListener('DOMContentLoaded', () => {
        lucide.createIcons();

        // SweetAlert untuk hapus pengumuman
        // SweetAlert untuk hapus pengumuman
        document.querySelectorAll('.btn-delete').forEach(btn => {
            btn.addEventListener('click', function() {
                const form = this.closest('form');
                Swal.fire({
                    title: 'Hapus Pengumuman?',
                    text: "Tindakan ini tidak bisa dibatalkan dan pengumuman akan hilang dari dashboard pelanggan.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#94a3b8',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal',
                    customClass: {
                        popup: 'rounded-3xl',
                        title: 'font-bold text-slate-800',
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection