@extends('layouts.app')

@section('title', 'Hasil Pencarian: ' . ($keyword ?? ''))

@section('content')
<div class="bg-gray-50/50 py-12 min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-10">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-4">
                {!! iconSearch('w-8 h-8 text-primary') !!}
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Hasil Pencarian</h1>
            @if($keyword)
                <p class="text-gray-500">Menampilkan hasil untuk: <span class="font-semibold text-primary">"{{ $keyword }}"</span></p>
            @endif
            <p class="text-sm text-gray-400 mt-2">{{ $books->total() }} buku ditemukan</p>
        </div>

        <!-- Search Form -->
        <div class="max-w-2xl mx-auto mb-10">
            <form action="{{ route('books.search') }}" method="GET" class="flex gap-3">
                <input type="text" name="q" value="{{ $keyword }}" 
                       placeholder="Cari judul, penulis, atau sinopsis..."
                       class="input-modern flex-1">
                <button type="submit" class="btn-primary inline-flex items-center gap-2">
                    {!! iconSearch('w-4 h-4') !!}
                    Cari
                </button>
            </form>
        </div>

        <!-- Books Grid -->
        @if($books->count() > 0)
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-5">
            @foreach($books as $book)
            <a href="{{ route('book.show', $book->slug) }}" class="group">
                <div class="book-card-modern">
                    <div class="relative aspect-[2/3] bg-gradient-to-br from-primary/20 to-primary/5 overflow-hidden">
                        @if($book->cover_image)
                            <img src="{{ Storage::url($book->cover_image) }}" alt="{{ $book->title }}" 
                                 class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                        @else
                            <div class="w-full h-full flex items-center justify-center">
                                {!! iconBook('w-10 h-10 text-primary/30') !!}
                            </div>
                        @endif
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2">
                            <div class="flex justify-between text-white text-xs">
                                <span class="flex items-center gap-1">{!! iconEye('w-3 h-3') !!} {{ number_format($book->total_views) }}</span>
                                <span class="flex items-center gap-1">⭐ {{ number_format($book->rating ?? 0, 1) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-semibold text-sm text-gray-800 line-clamp-2">{{ $book->title }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ $book->author }}</p>
                    </div>
                </div>
            </a>
            @endforeach
        </div>

        <div class="mt-10">
            {{ $books->appends(['q' => $keyword])->links() }}
        </div>
        @else
        <div class="text-center py-16 bg-white rounded-2xl">
            {!! iconSearch('w-16 h-16 text-gray-300 mx-auto mb-4') !!}
            <h3 class="text-lg font-semibold text-gray-800 mb-2">Tidak Ada Hasil</h3>
            <p class="text-gray-500">Tidak ditemukan buku dengan kata kunci "{{ $keyword }}"</p>
            <a href="{{ route('home') }}" class="inline-flex items-center gap-2 text-primary mt-4 hover:underline">
                {!! iconHome('w-4 h-4') !!}
                Kembali ke Beranda
            </a>
        </div>
        @endif
    </div>
</div>
@endsection