@extends('layouts.app')

@section('content')
<div x-data="{ show: false }" x-init="setTimeout(() => show = true, 100)" x-show="show" x-transition.opacity.duration.700ms class="container mx-auto py-10 px-6">

    <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-8 text-center">📚 Daftar Dokumen</h1>

    <!-- Filter Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Filter by Creator -->
        <div>
            <label for="filter_by_user" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Filter berdasarkan Pengunggah:</label>
            <select id="filter_by_user" name="user" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                <option value="">Semua Pengguna</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ request('user') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Filter by File Type -->
        <div>
            <label for="filter_by_type" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Filter berdasarkan Tipe:</label>
            <select id="filter_by_type" name="file_type" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                <option value="">Semua Tipe</option>
                <option value="pdf" {{ request('file_type') == 'pdf' ? 'selected' : '' }}>PDF</option>
                <option value="doc" {{ request('file_type') == 'doc' ? 'selected' : '' }}>Word</option>
                <option value="ppt" {{ request('file_type') == 'ppt' ? 'selected' : '' }}>PowerPoint</option>
                <option value="xls" {{ request('file_type') == 'xls' ? 'selected' : '' }}>Excel</option>
                <option value="txt" {{ request('file_type') == 'txt' ? 'selected' : '' }}>Teks</option>
            </select>
        </div>

        <!-- Search by Document Name -->
        <div>
            <label for="search_name" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Cari berdasarkan Nama:</label>
            <input type="text" id="search_name" name="name" value="{{ request('name') }}" placeholder="Cari dokumen..." class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
        </div>
    </div>

    <!-- Buttons -->
    <div class="flex flex-wrap justify-center md:justify-start gap-4 mb-8">
        <button id="search_btn" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 shadow-md transition-all">🔎 Cari</button>
        <button id="reset_btn" class="px-6 py-3 bg-gray-500 text-white rounded-lg font-semibold hover:bg-gray-600 shadow-md transition-all">♻️ Reset</button>
    </div>

    <!-- Table of Documents -->
    <div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-xl rounded-2xl p-6">
        <table class="min-w-full text-sm text-gray-800 dark:text-gray-200">
            <thead class="bg-blue-100 dark:bg-blue-900">
                <tr>
                    <th class="px-6 py-3 text-left uppercase font-semibold">Nama Dokumen</th>
                    <th class="px-6 py-3 text-left uppercase font-semibold">Tipe</th>
                    <th class="px-6 py-3 text-left uppercase font-semibold">Pengunggah</th>
                    <th class="px-6 py-3 text-left uppercase font-semibold">Tanggal</th>
                    <th class="px-6 py-3 text-left uppercase font-semibold">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($libraries as $library)
                    <tr class="border-t hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                        <td class="px-6 py-4">{{ $library->name }}</td>
                        <td class="px-6 py-4">{{ strtoupper($library->file_type) }}</td>
                        <td class="px-6 py-4">{{ $library->user->name ?? 'Tidak diketahui' }}</td>
                        <td class="px-6 py-4">{{ $library->created_at->format('Y-m-d H:i') }}</td>
                        <td class="px-6 py-4 space-x-2">
                            <a href="{{ route('libraries.show', $library->id) }}" class="text-blue-600 hover:underline" target="_blank">🔍 Detail</a>

                            <button onclick="previewFile('{{ asset('storage/'.$library->file_path) }}')" class="text-green-600 hover:underline">👁️ Lihat</button>

                            @if(auth()->id() == $library->uploaded_by)
                                <a href="{{ route('libraries.edit', $library->id) }}" class="text-yellow-500 hover:underline">✏️ Edit</a>
                                <button onclick="confirmDelete({{ $library->id }})" class="text-red-500 hover:underline">🗑️ Hapus</button>

                                <form id="delete-form-{{ $library->id }}" action="{{ route('libraries.destroy', $library->id) }}" method="POST" class="hidden">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-6 text-center text-gray-500 dark:text-gray-400">
                            Tidak ada dokumen ditemukan.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-10 flex justify-center">
        {{ $libraries->appends(request()->except('page'))->links() }}
    </div>
</div>

<!-- SweetAlert2 & Preview Modal -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Search & Reset
    document.getElementById('search_btn').addEventListener('click', function() {
        let name = document.getElementById('search_name').value;
        let user = document.getElementById('filter_by_user').value;
        let fileType = document.getElementById('filter_by_type').value;
        let url = new URL(window.location.href);

        if (name) url.searchParams.set('name', name);
        else url.searchParams.delete('name');

        if (user) url.searchParams.set('user', user);
        else url.searchParams.delete('user');

        if (fileType) url.searchParams.set('file_type', fileType);
        else url.searchParams.delete('file_type');

        window.location.href = url;
    });

    document.getElementById('reset_btn').addEventListener('click', function() {
        let url = new URL(window.location.href);
        url.searchParams.delete('name');
        url.searchParams.delete('user');
        url.searchParams.delete('file_type');
        window.location.href = url;
    });

    // Preview Dokumen
    function previewFile(url) {
        Swal.fire({
            title: 'Pratinjau Dokumen',
            html: `<iframe src="${url}" frameborder="0" class="w-full h-96"></iframe>`,
            width: '80%',
            padding: '2em',
            showCloseButton: true,
            showConfirmButton: false,
            background: '#f9fafb',
            customClass: {
                popup: 'rounded-lg shadow-lg'
            }
        });
    }

    // Konfirmasi Hapus
    function confirmDelete(id) {
        Swal.fire({
            title: 'Yakin ingin menghapus?',
            text: "Dokumen yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }
</script>
@endsection