@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 --}}
        <div class="bg-white p-6 rounded-[2rem] shadow-sm border border-sky-50">
            <form action="{{ route('dashboard.komentar') }}" method="GET" class="flex flex-col md:flex-row gap-4">
                <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 nama, email, atau isi komentar..."
                        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>

                <div class="md:w-60">
                    <select name="status" 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 Status</option>
                        <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Aktif</option>
                        <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Pending</option>
                    </select>
                </div>

                <div class="flex gap-2">
                    <button type="submit"
                        class="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 Komentar jika Admin ingin input manual --}}
                    {{-- <a href="{{ route('dashboard.komentar.tambah') }}"
                        class="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> Tambah
                    </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">Pengirim</th>
                            <th class="px-8 py-5">Komentar</th>
                            <th class="px-8 py-5">Status</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-10 h-10 rounded-full overflow-hidden shrink-0">
                                            <img src="https://ui-avatars.com/api/?name={{ urlencode($item->name) }}&background=0ea5e9&color=fff" class="w-full h-full object-cover">
                                        </div>
                                        <div>
                                            <p class="font-bold text-sky-950 text-sm">{{ $item->name }}</p>
                                            <p class="text-[11px] text-slate-400">{{ $item->email }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-6">
                                    <p class="text-sm text-sky-900 font-medium line-clamp-1">{{ $item->comment }}</p>
                                    <p class="text-[10px] text-sky-500 font-bold uppercase tracking-tighter italic">
                                        On: {{ $item->news->title ?? 'News Deleted' }}
                                    </p>
                                </td>
                                <td class="px-8 py-6">
                                    @if($item->is_active)
                                        <span class="px-3 py-1 bg-emerald-100 text-emerald-600 text-[10px] font-bold rounded-lg uppercase">Aktif</span>
                                    @else
                                        <span class="px-3 py-1 bg-amber-100 text-amber-600 text-[10px] font-bold rounded-lg uppercase">Pending</span>
                                    @endif
                                </td>
                                <td class="px-8 py-6">
                                    <div class="flex justify-center gap-2">
                                        <a href="{{ route('dashboard.komentar.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" title="Edit/Approve">
                                            <i class="fas fa-edit text-xs"></i>
                                        </a>
                                        <form action="{{ route('dashboard.komentar.hapus', $item->id) }}" method="POST"
                                            onsubmit="return confirm('Hapus komentar 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="4" class="px-8 py-20 text-center text-slate-400 text-xs font-bold uppercase tracking-widest">
                                    Komentar 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 }} - {{ $datas->lastItem() ?? 0 }} dari {{ $datas->total() }} Komentar
                </p>
                <div class="pagination-sky">
                    {{ $datas->links('pagination::tailwind') }}
                </div>
            </div>
        </div>
    </div>
@endsection