@extends('layouts.app')

@section('title', 'Manajemen Dokumen AI')

@section('content')
<div class="bg-gray-50 min-h-screen">

    <!-- 🔷 HEADER BG -->
    <div class="h-48 md:h-64 bg-gradient-to-r from-blue-900 via-blue-600 to-blue-400 w-full absolute top-0 left-0 z-0"></div>

    <div class="container max-w-6xl mx-auto px-4 py-8 relative z-10">

        <!-- HEADER -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
            <div class="text-white">
                <h1 class="text-2xl md:text-3xl font-bold">🤖 Pusat Data Chatbot</h1>
                <p class="text-blue-100 text-sm">Kelola dokumen pengetahuan AI</p>
            </div>

            <a href="{{ route('admin.dashboard') }}"
                class="w-full sm:w-auto text-center px-4 py-2 rounded-xl bg-white/10 backdrop-blur border border-white/20 text-white hover:bg-white/20 transition">
                Kembali
            </a>
        </div>

        <!-- NOTIFIKASI -->
        @if(session('success') || session('error'))
        <div class="mb-6 p-4 rounded-xl shadow border-l-4 
            {{ session('success') ? 'bg-green-50 border-green-500 text-green-700' : 'bg-red-50 border-red-500 text-red-700' }}">
            <p class="font-bold">
                {{ session('success') ? 'Berhasil!' : 'Gagal!' }}
            </p>
            <p>{{ session('success') ?: session('error') }}</p>
        </div>
        @endif

        <!-- 📤 UPLOAD CARD -->
        <div class="bg-white rounded-2xl shadow-sm border p-6 mb-6">

            <h2 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
                📤 Upload Dokumen
            </h2>

            <form action="{{ route('admin.documents.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div>
                    <label class="text-sm font-semibold text-gray-700 block mb-2">
                        Pilih File PDF
                    </label>

                    <input type="file" name="document" accept=".pdf"
                        class="w-full border border-gray-300 rounded-xl px-3 py-2 text-sm cursor-pointer" required>
                </div>

                <div class="mt-5 flex flex-col sm:flex-row justify-end gap-2">
                    <button type="submit"
                        class="px-5 py-2 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700 transition">
                        Upload & Update AI
                    </button>
                </div>
            </form>
        </div>

        <!-- 📄 LIST DOKUMEN -->
        <div class="bg-white rounded-2xl shadow-sm border overflow-hidden">

            <div class="p-5 border-b">
                <h2 class="font-bold text-gray-700">Daftar Dokumen</h2>
            </div>

            <!-- DESKTOP -->
            <div class="hidden md:block overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-xs uppercase text-gray-500">
                        <tr>
                            <th class="px-6 py-3">Nama File</th>
                            <th class="px-6 py-3 text-right">Aksi</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y">
                        @forelse ($files as $file)
                        <tr class="hover:bg-gray-50">

                            <td class="px-6 py-4 flex items-center gap-3">
                                <span class="text-red-500 text-lg">📄</span>
                                <span class="font-medium text-gray-800">
                                    {{ $file->getFilename() }}
                                </span>
                            </td>

                            <td class="px-6 py-4 text-right">
                                <form action="{{ route('admin.documents.destroy', $file->getFilename()) }}"
                                      method="POST"
                                      onsubmit="return confirm('Hapus dokumen ini?');">
                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                        style="
                                            background:#f43f5e;
                                            color:white;
                                            padding:6px 12px;
                                            border-radius:999px;
                                            font-size:12px;
                                            font-weight:bold;
                                        ">
                                        Hapus
                                    </button>
                                </form>
                            </td>

                        </tr>
                        @empty
                        <tr>
                            <td colspan="2" class="text-center py-10 text-gray-500">
                                Belum ada dokumen
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- 📱 MOBILE -->
            <div class="md:hidden p-4 space-y-3">
                @forelse ($files as $file)
                <div class="border rounded-xl p-4 flex justify-between items-center">

                    <div class="flex items-center gap-2">
                        <span class="text-red-500">📄</span>
                        <span class="text-sm font-semibold">
                            {{ $file->getFilename() }}
                        </span>
                    </div>

                    <form action="{{ route('admin.documents.destroy', $file->getFilename()) }}"
                          method="POST"
                          onsubmit="return confirm('Hapus dokumen ini?');">
                        @csrf
                        @method('DELETE')

                        <button type="submit"
                            style="
                                background:#f43f5e;
                                color:white;
                                padding:5px 10px;
                                border-radius:999px;
                                font-size:10px;
                                font-weight:bold;
                            ">
                            Hapus
                        </button>
                    </form>

                </div>
                @empty
                <div class="text-center text-gray-500 py-10">
                    Belum ada dokumen
                </div>
                @endforelse
            </div>

        </div>

    </div>
</div>
@endsection