@extends('admin.layout.tamplate')

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

        @include('admin.layout.alert')


        {{-- Toolbar: Search, Filter & Add --}}
        <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-sky-50">
            <form action="{{ route('dashboard.program') }}" method="GET" class="flex flex-col md:flex-row gap-4">
                {{-- Input Pencarian --}}
                <div class="relative flex-1">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-sky-400"></i>
                    <input type="text" name="s" value="{{ request('s') }}" placeholder="Cari judul program..."
                        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 transition text-sm">
                </div>

                {{-- Filter Kategori --}}
                <div class="md:w-60">
                    <select name="category" onchange="this.form.submit()"
                        class="w-full px-4 py-3 rounded-xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm text-sky-950 font-medium">
                        <option value="">Semua Kategori</option>
                        @foreach ($categories as $cat)
                            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Group Tombol Aksi --}}
                <div class="flex gap-2">
                    {{-- Tombol Cari --}}
                    <button type="submit"
                        class="flex-1 md:flex-none px-6 py-3 bg-sky-100 hover:bg-sky-200 text-sky-600 rounded-xl text-sm font-bold transition flex items-center justify-center gap-2">
                        <i class="fas fa-magnifying-glass"></i> Cari
                    </button>

                    {{-- Tombol Tambah --}}
                    <a href="{{ route('dashboard.program.tambah') }}"
                        class="flex-[2] md:flex-none bg-sky-600 hover:bg-sky-700 text-white px-6 py-3 rounded-xl text-sm font-bold transition shadow-lg shadow-sky-100 flex items-center justify-center gap-2">
                        <i class="fas fa-plus"></i> <span class="whitespace-nowrap">Program Baru</span>
                    </a>
                </div>
            </form>
        </div>
        {{-- Tabel Section --}}
        <div class="bg-white 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 font-bold tracking-widest">
                        <tr>
                            <th class="px-8 py-5">Program</th>
                            <th class="px-8 py-5">Kategori</th>
                            <th class="px-8 py-5 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-sky-50">
                        @forelse($datas as $item)
                            <tr class="hover:bg-sky-50/20 transition group">
                                <td class="px-8 py-6">
                                    <div class="flex items-center gap-4">
                                        <div
                                            class="w-12 h-12 rounded-xl overflow-hidden border border-sky-100 shrink-0 bg-sky-50 flex items-center justify-center">
                                            @php
                                                $imagePath = 'uploads/programs/meta/' . $item->image_meta;
                                                $hasImage = $item->image_meta && file_exists(public_path($imagePath));
                                            @endphp
                                            @if ($hasImage)
                                                <img src="{{ asset($imagePath) }}" class="w-full h-full object-cover">
                                            @else
                                                <img src="https://ui-avatars.com/api/?name={{ urlencode($item->title) }}&background=f0f9ff&color=0ea5e9&bold=true"
                                                    class="w-full h-full object-cover opacity-80">
                                            @endif
                                        </div>
                                        <div>
                                            <p class="font-bold text-sky-950 text-sm line-clamp-1">{{ $item->title }}</p>
                                            <p
                                                class="text-[10px] text-slate-400 font-mono italic opacity-0 group-hover:opacity-100 transition-opacity uppercase tracking-tighter">
                                                Slug: {{ $item->slug }}
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-6">
                                    <span
                                        class="px-3 py-1 bg-sky-100 text-sky-600 text-[10px] font-bold rounded-lg uppercase">
                                        {{ $item->category_program->name ?? 'Uncategorized' }}
                                    </span>
                                </td>
                                <td class="px-8 py-6">
                                    <div class="flex justify-center gap-2">
                                        <a href="{{ route('dashboard.program.ubah', $item->id) }}"
                                            class="w-9 h-9 flex items-center justify-center rounded-xl bg-sky-50 text-sky-600 hover:bg-sky-600 hover:text-white transition shadow-sm"><i
                                                class="fas fa-edit text-xs"></i></a>
                                        <form action="{{ route('dashboard.program.hapus', $item->id) }}" method="POST"
                                            onsubmit="return confirm('Hapus program ini?')">
                                            @csrf @method('DELETE')
                                            <button type="submit"
                                                class="w-9 h-9 flex items-center justify-center rounded-xl bg-red-50 text-red-500 hover:bg-red-600 hover:text-white transition shadow-sm"><i
                                                    class="fas fa-trash text-xs"></i></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3"
                                    class="px-8 py-20 text-center text-slate-400 text-xs font-bold uppercase tracking-widest">
                                    Data tidak ditemukan</td>
                            </tr>
                        @endforelse
                    </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 {{ $datas->firstItem() ?? 0 }} sampai {{ $datas->lastItem() ?? 0 }} dari
                    {{ $datas->total() }} Berita
                </p>
                <div class="pagination-sky mt-6">
                    {{ $datas->links('pagination::tailwind') }}
                </div>

            </div>
        </div>
    </div>
 

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const alertBox = document.getElementById('alert-box');
            if (alertBox) {
                setTimeout(() => {
                    alertBox.style.opacity = '0';
                    setTimeout(() => alertBox.remove(), 500);
                }, 4000);
            }
        });
    </script>
@endsection