@extends('admin.layout.tamplate')

@section('content')
<div class="p-6 md:p-10 space-y-8"> 
 @include('admin.layout.breadcumb')

    <div class="flex flex-col md:flex-row gap-4 justify-between items-center bg-white p-6 rounded-[2rem] shadow-sm border border-sky-50">
        <div class="flex flex-col md:flex-row gap-4 w-full md:w-auto items-center">
            <div class="relative w-full md:w-80">
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-sky-400 text-sm"></i>
                <input type="text" placeholder="Cari judul berita..." class="w-full pl-12 pr-4 py-3 rounded-xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 focus:ring-4 focus:ring-sky-500/5 transition text-sm">
            </div>
            <select class="bg-sky-50/50 border border-sky-100 px-4 py-3 rounded-xl text-sm outline-none focus:border-sky-500 text-slate-600 w-full md:w-48">
                <option>Semua Kategori</option>
                <option>Kegiatan</option>
                <option>Pendidikan</option>
            </select>
        </div>
        
        <a href="" class="w-full md:w-auto bg-sky-600 hover:bg-sky-700 text-white px-6 py-3 rounded-xl text-sm font-bold transition flex items-center justify-center gap-2 shadow-lg shadow-sky-100 transform active:scale-95">
            <i class="fas fa-plus"></i> Tambah Berita Baru
        </a>
    </div>

    <div class="glass-card rounded-[2.5rem] overflow-hidden shadow-sm border border-sky-50">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-sky-50/50 text-sky-900/40 text-[10px] uppercase tracking-[0.2em] font-bold">
                    <tr>
                        <th class="px-10 py-6">Informasi Konten</th> 
                        <th class="px-10 py-6">Kategori</th>
                        <th class="px-10 py-6">Status</th>
                        <th class="px-10 py-6">Tanggal Rilis</th>
                        <th class="px-10 py-6 text-center">Tindakan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-sky-50 bg-white">
                    <tr class="hover:bg-sky-50/30 transition group">
                        <td class="px-10 py-7"> 
                            <div class="flex items-center gap-5">
                                <div class="w-20 h-14 bg-slate-100 rounded-xl overflow-hidden shrink-0 shadow-inner border border-sky-50">
                                    <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                                </div>
                                <div>
                                    <p class="font-bold text-sky-950 text-base line-clamp-1">Pelatihan Tukang Kayu Profesional di Sentani</p>
                                    <p class="text-xs text-slate-400 mt-1 flex items-center gap-2">
                                        <i class="far fa-user text-sky-400"></i> Admin Utama 
                                        <span class="text-slate-200">|</span> 
                                        <i class="far fa-eye text-sky-400"></i> 1,240 View
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td class="px-10 py-7">
                            <span class="px-4 py-1.5 bg-sky-100 text-sky-600 text-[10px] font-bold rounded-lg uppercase tracking-wider">Kegiatan</span>
                        </td>
                        <td class="px-10 py-7">
                            <span class="flex items-center gap-2 text-[10px] font-bold text-green-600 uppercase">
                                <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span> Terbit
                            </span>
                        </td>
                        <td class="px-10 py-7">
                            <div class="text-sm text-slate-600 font-medium font-mono">03 Feb 2026</div>
                            <div class="text-[10px] text-slate-400">14:20 WIT</div>
                        </td>
                        <td class="px-10 py-7">
                            <div class="flex justify-center gap-3">
                                <button title="Edit" class="w-10 h-10 rounded-xl bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white transition-all flex items-center justify-center shadow-sm">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button title="Hapus" class="w-10 h-10 rounded-xl bg-red-50 text-red-600 hover:bg-red-600 hover:text-white transition-all flex items-center justify-center shadow-sm">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </td>
                    </tr>

                    <tr class="hover:bg-sky-50/30 transition group">
                        <td class="px-10 py-7">
                            <div class="flex items-center gap-5">
                                <div class="w-20 h-14 bg-slate-100 rounded-xl overflow-hidden shrink-0 shadow-inner border border-sky-50">
                                    <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                                </div>
                                <div>
                                    <p class="font-bold text-sky-950 text-base line-clamp-1">Pembukaan Pendaftaran Batch 5 YPTP</p>
                                    <p class="text-xs text-slate-400 mt-1 flex items-center gap-2">
                                        <i class="far fa-user text-sky-400"></i> Admin Utama
                                        <span class="text-slate-200">|</span> 
                                        <i class="far fa-eye text-sky-400"></i> 856 View
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td class="px-10 py-7">
                            <span class="px-4 py-1.5 bg-yellow-100 text-yellow-700 text-[10px] font-bold rounded-lg uppercase tracking-wider">Pendaftaran</span>
                        </td>
                        <td class="px-10 py-7">
                            <span class="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase">
                                <span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Draft
                            </span>
                        </td>
                        <td class="px-10 py-7">
                            <div class="text-sm text-slate-600 font-medium font-mono">01 Feb 2026</div>
                            <div class="text-[10px] text-slate-400">09:00 WIT</div>
                        </td>
                        <td class="px-10 py-7">
                            <div class="flex justify-center gap-3">
                                <button title="Edit" class="w-10 h-10 rounded-xl bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white transition-all flex items-center justify-center shadow-sm">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button title="Hapus" class="w-10 h-10 rounded-xl bg-red-50 text-red-600 hover:bg-red-600 hover:text-white transition-all flex items-center justify-center shadow-sm">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="px-10 py-6 bg-sky-50/30 border-t border-sky-50 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-[10px] text-sky-900/40 font-bold uppercase tracking-widest">Menampilkan 2 dari 84 Berita</p>
            <div class="flex gap-2">
                <button class="w-10 h-10 flex items-center justify-center rounded-xl border border-sky-100 bg-white text-sky-400 hover:bg-sky-600 hover:text-white transition shadow-sm"><i class="fas fa-chevron-left text-xs"></i></button>
                <button class="w-10 h-10 flex items-center justify-center rounded-xl bg-sky-600 text-white font-bold shadow-lg shadow-sky-100">1</button>
                <button class="w-10 h-10 flex items-center justify-center rounded-xl border border-sky-100 bg-white text-sky-600 hover:bg-sky-600 hover:text-white transition shadow-sm">2</button>
                <button class="w-10 h-10 flex items-center justify-center rounded-xl border border-sky-100 bg-white text-sky-400 hover:bg-sky-600 hover:text-white transition shadow-sm"><i class="fas fa-chevron-right text-xs"></i></button>
            </div>
        </div>
    </div>
</div>
@endsection