@extends('layouts.app')

@section('content')
    <!-- Konten -->
    <div class="py-10 px-6 max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">

        <!-- Daftar Buku -->
        <div class="bg-white/10 backdrop-blur-md rounded-2xl shadow-xl border border-white/20 p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-white">Daftar Buku Terbaru <span class="text-sm text-gray-300">(5 data terbaru)</span></h3>
                <a href="{{ route('loans.create') }}" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm ml-2">📖 Pinjam Buku</a>
            </div>

            <table class="w-full text-sm text-left border-collapse border border-white/20">
                <thead class="bg-white/20 text-white">
                    <tr>
                        <th class="border border-white/20 p-2">Judul</th>
                        <th class="border border-white/20 p-2">Penulis</th>
                        <th class="border border-white/20 p-2">Tahun</th>
                        <th class="border border-white/20 p-2">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($books as $book)
                        <tr class="hover:bg-white/10 transition">
                            <td class="border border-white/20 p-2">{{ $book->title }}</td>
                            <td class="border border-white/20 p-2">{{ $book->author }}</td>
                            <td class="border border-white/20 p-2">{{ $book->year }}</td>
                            <td class="border border-white/20 p-2">{{ ucfirst($book->status) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-3 text-right">
                <a href="{{ route('books.index') }}" class="text-blue-300 hover:text-blue-400 text-sm">Lihat Semua Buku →</a>
            </div>
        </div>

        <!-- Chatbot -->
        <div class="bg-white/10 backdrop-blur-md rounded-2xl shadow-xl border border-white/20 p-6 flex flex-col">
            <h3 class="text-lg font-semibold mb-3 text-white">🤖 Chatbot Perpustakaan</h3>
            <div id="chat-box" class="flex-1 overflow-y-auto p-3 mb-3 bg-white/10 rounded-lg h-80 text-sm text-white"></div>
            <form id="chat-form" class="flex gap-2">
                <input type="text" id="user-input" placeholder="Ketik pertanyaan kamu..." class="flex-1 p-2 rounded bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-blue-400 border border-white/30 outline-none" required>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Kirim</button>
            </form>
        </div>

    </div>

    <footer class="text-center text-gray-300 text-sm mt-10 py-4 border-t border-white/20">
        © {{ date('Y') }} Sistem Perpustakaan. Semua hak dilindungi.
    </footer>

    <script>
        const form = document.getElementById('chat-form');
        const input = document.getElementById('user-input');
        const chatBox = document.getElementById('chat-box');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const message = input.value.trim();
            if (!message) return;

            chatBox.innerHTML += `<p><b>Anda:</b> ${message}</p>`;
            input.value = '';

            const res = await fetch('{{ route("chat") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ message })
            });

            const data = await res.json();
            const reply = data.reply ?? "Maaf, saya tidak dapat menjawab saat ini.";
            chatBox.innerHTML += `<p><b>Chatbot:</b> ${reply}</p>`;
            chatBox.scrollTop = chatBox.scrollHeight;
        });
    </script>

</body>
@endsection