@extends('layouts.app')

@section('title', $book->title . ' - Detail Bab')

@section('content')
<div class="bg-gray-50/50 py-10">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="flex items-center gap-2 text-xs text-gray-500 mb-8 bg-white px-4 py-2.5 rounded-xl border border-gray-100 shadow-sm inline-flex">
            <a href="{{ route('home') }}" class="hover:text-blue-600 transition font-medium">CDP</a>
            <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <span class="text-gray-700 font-semibold truncate max-w-[200px]">{{ $book->title }}</span>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
            
            <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 p-6 md:p-8 shadow-sm">
                <div class="flex flex-col md:flex-row gap-8 items-center md:items-start">
                    
                    <div class="w-44 shrink-0">
                        <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 relative group">
                            <div class="aspect-[2/3] bg-gradient-to-br from-blue-400 to-blue-600 relative flex flex-col justify-between p-4">
                                @if($book->cover_image)
                                    <img src="{{ Storage::url($book->cover_image) }}" alt="{{ $book->title }}" class="absolute inset-0 w-full h-full object-cover">
                                @endif
                                
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <svg class="w-12 h-12 text-white opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                    </svg>
                                </div>

                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2.5 flex justify-between text-white text-[11px] font-medium z-10">
                                    <span class="flex items-center gap-0.5">👁 {{ number_format($book->total_views) }}</span>
                                    <span class="flex items-center gap-0.5 text-yellow-300">⭐ {{ number_format($book->rating ?? 0, 1) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex-grow text-center md:text-left space-y-4">
                        <div>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-50 text-blue-600 mb-2">
                                Modul Materi
                            </span>
                            <h1 class="text-2xl font-bold text-gray-900 leading-tight">
                                {{ $book->title }}
                            </h1>
                        </div>

                        <div class="border-t border-b border-gray-100 py-3 my-2 grid grid-cols-2 gap-4 text-left">
                            <div>
                                <span class="text-[11px] uppercase tracking-wider text-gray-400 block">Dilihat</span>
                                <span class="text-sm font-semibold text-gray-800">{{ number_format($book->total_views) }} Kali</span>
                            </div>
                            <div>
                                <span class="text-[11px] uppercase tracking-wider text-gray-400 block">Rating Materi</span>
                                <span class="text-sm font-semibold text-gray-800">⭐ {{ number_format($book->rating ?? 0, 1) }} / 5.0</span>
                            </div>
                        </div>

                        <div class="pt-2">
                            <a href="{{ route('book.read', $book->slug) }}" class="inline-flex items-center justify-center gap-2 px-8 py-3 bg-blue-600 text-white font-semibold rounded-xl shadow-md hover:bg-blue-700 hover:shadow-lg transition duration-200 text-sm w-full md:w-auto">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                </svg>
                                Baca Sekarang
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm space-y-4">
                <h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider border-b border-gray-100 pb-3 flex items-center gap-2">
                    📚 Bab Pembelajaran Lainnya
                </h3>
                
                <div class="space-y-3 max-h-[420px] overflow-y-auto pr-1">
                    @forelse($relatedBooks ?? \App\Models\Book::where('id', '!=', $book->id)->take(5)->get() as $related)
                        <a href="{{ route('book.show', $related->slug) }}" class="flex gap-3 p-2 rounded-xl hover:bg-gray-50 border border-transparent hover:border-gray-100 transition group">
                            <div class="w-14 h-20 bg-gradient-to-br from-blue-400 to-blue-500 rounded-lg shrink-0 overflow-hidden relative shadow-sm">
                                @if($related->cover_image)
                                    <img src="{{ Storage::url($related->cover_image) }}" alt="{{ $related->title }}" class="w-full h-full object-cover">
                                @endif
                            </div>
                            <div class="flex flex-col justify-center min-w-0">
                                <h4 class="font-bold text-xs text-gray-800 line-clamp-2 leading-tight group-hover:text-blue-600 transition mb-1">
                                    {{ $related->title }}
                                </h4>
                                <div class="flex items-center gap-2 text-[10px] text-gray-400">
                                    <span>👁 {{ number_format($related->total_views) }}</span>
                                    <span>⭐ {{ number_format($related->rating ?? 0, 1) }}</span>
                                </div>
                            </div>
                        </a>
                    @empty
                        <p class="text-xs text-gray-400 text-center py-4">Tidak ada bab lain tersedia.</p>
                    @endforelse
                </div>
            </div>

        </div>
    </div>
</div>
@endsection