

<?php $__env->startSection('title', 'Pusat Notifikasi | PRADIPA'); ?>

<?php $__env->startSection('content'); ?>
<div class="flex flex-col gap-6 max-w-4xl mx-auto">
    <!-- Header Halaman -->
    <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col sm:flex-row justify-between sm:items-center gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Pusat Notifikasi & Log Aktivitas</h2>
            <p class="text-sm text-slate-500 mt-1 font-medium">Pantau perubahan status pengusulan dan pesan masuk dari koordinasi dinas.</p>
        </div>
        
        <?php if($notifikasis->where('is_read', false)->count() > 0): ?>
            <form action="<?php echo e(route('shared.notifikasi.mark_all')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <button type="submit" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold rounded-lg transition-all flex items-center gap-1.5">
                    <i data-lucide="check-check" class="w-4 h-4"></i>
                    Tandai Semua Dibaca
                </button>
            </form>
        <?php endif; ?>
    </div>

    <!-- Tampilan Toast Flash Message Sukses -->
    <?php if(session('success')): ?>
        <div class="bg-emerald-100 border-l-4 border-emerald-600 text-emerald-800 p-4 rounded-xl shadow-sm text-sm flex items-center gap-2">
            <i data-lucide="check-circle" class="text-emerald-600"></i>
            <span class="font-medium"><?php echo e(session('success')); ?></span>
        </div>
    <?php endif; ?>

    <!-- LIST NOTIFIKASI -->
    <div class="flex flex-col gap-3">
        <?php $__empty_1 = true; $__currentLoopData = $notifikasis; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $n): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <?php
                // Tentukan skema warna berdasarkan tipe notifikasi
                $bgClass = "bg-white";
                $borderClass = "border-slate-200";
                $iconColor = "text-blue-500";
                $iconName = "info";

                if ($n->tipe === 'success') {
                    $borderClass = "border-emerald-200";
                    $iconColor = "text-emerald-600";
                    $iconName = "check-circle";
                } elseif ($n->tipe === 'warning') {
                    $borderClass = "border-amber-200";
                    $iconColor = "text-amber-600";
                    $iconName = "alert-triangle";
                } elseif ($n->tipe === 'danger') {
                    $borderClass = "border-rose-200";
                    $iconColor = "text-rose-600";
                    $iconName = "x-circle";
                }

                // Efek redup jika sudah dibaca
                $opacityClass = $n->is_read ? "opacity-60" : "font-semibold";
            ?>

            <div class="<?php echo e($bgClass); ?> border <?php echo e($borderClass); ?> p-5 rounded-xl shadow-sm flex items-start gap-4 transition-all hover:translate-x-1 <?php echo e($opacityClass); ?>">
                <!-- Ikon Utama Tipe -->
                <div class="p-2.5 rounded-lg bg-slate-50 flex items-center justify-center shrink-0 <?php echo e($iconColor); ?>">
                    <i data-lucide="<?php echo e($iconName); ?>" class="w-6 h-6" style="width:1.5rem; height:1.5rem;"></i>
                </div>

                <!-- Detail Notifikasi -->
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between gap-4">
                        <h4 class="text-sm font-bold text-slate-800"><?php echo e($n->judul); ?></h4>
                        <span class="text-[10px] text-slate-400 font-medium whitespace-nowrap"><?php echo e(\Carbon\Carbon::parse($n->created_at)->diffForHumans()); ?></span>
                    </div>
                    <p class="text-xs text-slate-500 mt-1 leading-relaxed"><?php echo e($n->pesan); ?></p>
                    
                    <!-- Tombol Aksi Tautan Link -->
                    <?php if($n->tautan): ?>
                        <div class="mt-3 flex items-center gap-3">
                            <a href="<?php echo e($n->tautan); ?>" class="text-[11px] font-bold text-emerald-700 hover:underline flex items-center gap-1">
                                <i data-lucide="external-link" class="w-3.5 h-3.5" style="width:0.875rem; height:0.875rem;"></i>
                                Buka Berkas Usulan
                            </a>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Tombol Tandai Dibaca (jika belum dibaca) -->
                <?php if(!$n->is_read): ?>
                    <form action="<?php echo e(route('shared.notifikasi.mark_read', $n->id)); ?>" method="POST" class="shrink-0 self-center">
                        <?php echo csrf_field(); ?>
                        <button type="submit" title="Tandai sudah dibaca" class="p-1.5 hover:bg-slate-100 text-slate-400 hover:text-slate-600 rounded-lg transition-colors">
                            <i data-lucide="check" class="w-5 h-5" style="width:1.25rem; height:1.25rem;"></i>
                        </button>
                    </form>
                <?php endif; ?>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <!-- Tampilan Kosong -->
            <div class="bg-white p-12 text-center rounded-xl border border-slate-200 shadow-sm flex flex-col items-center justify-center gap-3">
                <div class="bg-slate-50 p-4 rounded-full text-slate-400">
                    <i data-lucide="bell-off" class="w-10 h-10" style="width:2.5rem; height:2.5rem;"></i>
                </div>
                <h4 class="font-bold text-slate-800 text-base">Tidak ada notifikasi baru</h4>
                <p class="text-xs text-slate-400 max-w-sm">Semua aman! Kami akan memberi tahu Anda di sini jika ada pembaharuan berkas, status pengajuan, atau revisi berkas dari kabupaten.</p>
            </div>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laragon\www\pradipa\resources\views/shared/notifikasi.blade.php ENDPATH**/ ?>