@extends('layouts.app')

@section('title', $kitab->title)

@section('content')
<div class="max-w-7xl mx-auto px-4 py-10">
    {{-- Breadcrumb --}}
    <nav class="mb-8" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
            <li>
                <a href="{{ route('kitab.index') }}" class="hover:text-emerald-600 transition-colors duration-200">
                    Kumpulan Kitab
                </a>
            </li>
            <li class="flex items-center">
                <svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
            </li>
            <li class="text-emerald-600 font-medium">
                {{ $kitab->title }}
            </li>
        </ol>
    </nav>
    {{-- ================= BREADCRUMB & HEADER ================= --}}
    <div class="mb-8">
        {{-- Title --}}
        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
            {{ $kitab->title }}
        </h1>

        {{-- Category & Metadata --}}
        <div class="flex flex-wrap items-center gap-3 mt-4">
            @if($kitab->category)
                <span class="inline-flex items-center px-3 py-1.5 rounded-full
                            text-sm font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
                    <i class="fas fa-folder mr-1.5"></i>
                    {{ $kitab->category->name }}
                </span>
            @endif

            {{-- Date --}}
            @if($kitab->created_at)
                <span class="inline-flex items-center text-sm text-gray-500">
                    <i class="far fa-calendar-alt mr-1.5"></i>
                    {{ $kitab->created_at->format('d M Y') }}
                </span>
            @endif

            {{-- PDF Badge --}}
            <span class="inline-flex items-center px-3 py-1.5 rounded-full
                        text-sm font-medium bg-red-50 text-red-700 border border-red-100">
                <i class="fas fa-file-pdf mr-1.5"></i>
                Format PDF
            </span>
        </div>
    </div>

    {{-- ================= MAIN GRID ================= --}}
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">

        {{-- ================= INFO PANEL (LEFT) ================= --}}
        <aside class="lg:col-span-3 space-y-6">
            {{-- Stats Card --}}
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 sticky top-24">
                <h3 class="text-lg font-semibold text-gray-900 mb-5 pb-3 border-b border-gray-100">
                    <i class="fas fa-chart-bar text-emerald-600 mr-2"></i>
                    Statistik
                </h3>

                <ul class="space-y-4">
                    <li class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
                                <i class="fas fa-eye text-blue-600 text-sm"></i>
                            </div>
                            <span class="text-sm font-medium text-gray-700">Dilihat</span>
                        </div>
                        <span class="text-lg font-bold text-gray-900">
                            {{ number_format($kitab->view_count ?? 0) }}
                        </span>
                    </li>

                    <li class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center mr-3">
                                <i class="fas fa-download text-emerald-600 text-sm"></i>
                            </div>
                            <span class="text-sm font-medium text-gray-700">Diunduh</span>
                        </div>
                        <span class="text-lg font-bold text-gray-900">
                            {{ number_format($kitab->download_count ?? 0) }}
                        </span>
                    </li>

                    <li class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                                <i class="fas fa-hdd text-purple-600 text-sm"></i>
                            </div>
                            <span class="text-sm font-medium text-gray-700">Ukuran File</span>
                        </div>
                        <span class="text-lg font-bold text-gray-900">
                            {{ $kitab->formatted_file_size ?? '-' }}
                        </span>
                    </li>
                </ul>

                {{-- Download Button --}}
                <div class="mt-8 pt-5 border-t border-gray-100">
                    <a href="{{ route('kitab.download', $kitab->slug) }}"
                       onclick="event.preventDefault(); document.getElementById('download-form').submit();"
                       class="w-full inline-flex items-center justify-center gap-2
                              px-6 py-3.5 rounded-xl text-base font-semibold
                              bg-gradient-to-r from-emerald-600 to-emerald-700 text-white
                              hover:from-emerald-700 hover:to-emerald-800
                              transition-all duration-200 transform hover:-translate-y-0.5
                              shadow-lg hover:shadow-xl">
                        <i class="fas fa-download text-lg"></i>
                        Unduh Sekarang
                    </a>
                    <form id="download-form" action="{{ route('kitab.download', $kitab->slug) }}" method="POST" class="hidden">
                        @csrf
                    </form>
                    
                    <p class="mt-3 text-xs text-gray-500 text-center">
                        <i class="fas fa-shield-alt mr-1"></i>
                        File aman dan sudah terverifikasi
                    </p>
                </div>
            </div>

            {{-- Description Card (if exists) --}}
            @if($kitab->deskripsi)
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-info-circle text-emerald-600 mr-2"></i>
                        Deskripsi
                    </h3>
                    <p class="text-sm text-gray-600 leading-relaxed">
                        {{ $kitab->deskripsi }}
                    </p>
                </div>
            @endif
        </aside>

        {{-- ================= PDF VIEWER (RIGHT) ================= --}}
        <section class="lg:col-span-9">
            {{-- Viewer Header --}}
            <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-5 mb-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-1">
                            <i class="fas fa-book-open text-emerald-600 mr-2"></i>
                            Baca Online
                        </h3>
                        <p class="text-sm text-gray-500">
                            Dokumen dapat dibaca langsung di browser
                        </p>
                    </div>
                    <div class="flex items-center gap-3">
                        <span class="inline-flex items-center px-3 py-1.5 rounded-lg
                                    text-sm font-medium bg-gray-100 text-gray-700">
                            <i class="fas fa-expand-alt mr-1.5"></i>
                            Scroll untuk zoom
                        </span>
                        <button onclick="window.open('{{ asset('storage/' . $kitab->pdf_file) }}', '_blank')"
                                class="inline-flex items-center px-4 py-2 rounded-lg
                                       text-sm font-medium bg-blue-50 text-blue-700
                                       hover:bg-blue-100 transition-colors">
                            <i class="fas fa-external-link-alt mr-1.5"></i>
                            Buka di Tab Baru
                        </button>
                    </div>
                </div>
            </div>

            {{-- PDF Viewer --}}
            <div class="relative border border-gray-100 rounded-2xl
                        overflow-hidden min-h-[600px]">
                
                {{-- Loading State --}}
                <div id="pdf-loading" 
                     class="absolute inset-0 flex flex-col items-center justify-center
                            bg-gradient-to-br from-gray-50 to-white z-10">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 
                                border-emerald-600 mb-4"></div>
                    <p class="text-sm text-gray-500">
                        Memuat dokumen PDF...
                    </p>
                </div>

                <iframe
                    id="pdf-viewer"
                    src="{{ asset('storage/' . $kitab->pdf_file) }}#toolbar=0&navpanes=0&scrollbar=1"
                    class="relative z-20 w-full h-[75vh] rounded-2xl border-0"
                    loading="lazy"
                    onload="document.getElementById('pdf-loading').style.display = 'none';"
                    title="PDF Viewer - {{ $kitab->title }}">
                </iframe>
            </div>

            {{-- Viewer Tips --}}
            <div class="mt-4 bg-blue-50 border border-blue-100 rounded-xl p-4">
                <div class="flex items-start">
                    <i class="fas fa-lightbulb text-blue-600 text-lg mt-0.5 mr-3"></i>
                    <div>
                        <h4 class="text-sm font-semibold text-blue-900 mb-1">
                            Tips Membaca
                        </h4>
                        <ul class="text-xs text-blue-700 space-y-1">
                            <li>• Gunakan scroll mouse untuk memperbesar/memperkecil</li>
                            <li>• Klik dan drag untuk menggeser halaman</li>
                            <li>• Gunakan tombol <kbd class="px-1.5 py-0.5 bg-white border border-blue-200 rounded text-xs">Ctrl + F</kbd> untuk mencari teks</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

    </div>

    {{-- ================= RELATED KITABS ================= --}}
    @if($relatedKitabs && $relatedKitabs->count() > 0)
        <div class="mt-16 pt-10 border-t border-gray-100">
            <h3 class="text-2xl font-bold text-gray-900 mb-6">
                <i class="fas fa-bookmark text-emerald-600 mr-2"></i>
                Kitab Serupa
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($relatedKitabs as $related)
                    <a href="{{ route('kitab.show', $related->slug) }}"
                       class="group bg-white border border-gray-100 rounded-xl p-4
                              hover:border-emerald-200 hover:shadow-md transition-all">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-book text-emerald-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-900 group-hover:text-emerald-700
                                          line-clamp-2 mb-1">
                                    {{ $related->title }}
                                </h4>
                                <div class="flex items-center text-xs text-gray-500">
                                    <i class="fas fa-download mr-1"></i>
                                    {{ $related->download_count ?? 0 }} unduhan
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif
</div>

@push('styles')
<style>
    #pdf-viewer {
        filter: saturate(0.98) contrast(1.02);
    }
    
    .shadow-lg {
        box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1), 
                    0 8px 10px -6px rgba(16, 185, 129, 0.1);
    }
</style>
@endpush

@push('scripts')
<script>
    // Auto hide loading after 5 seconds (fallback)
    setTimeout(() => {
        const loading = document.getElementById('pdf-loading');
        if (loading) loading.style.display = 'none';
    }, 5000);

    // Track PDF view time
    let startTime = new Date();
    window.addEventListener('beforeunload', () => {
        const endTime = new Date();
        const viewTime = Math.round((endTime - startTime) / 1000); // in seconds
        
        // You can send this to your analytics here
        console.log('PDF viewed for', viewTime, 'seconds');
    });
</script>
@endpush
@endsection