@extends('layouts.app')

@section('title', 'Kitab Digital')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8 lg:py-12">

    {{-- Header Section --}}
    <div class="mb-10">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
            Kitab Digital
        </h1>
        <p class="text-gray-600 max-w-3xl">
            Koleksi kitab klasik dan kontemporer dalam format PDF untuk mendukung pembelajaran dan kajian Islam
        </p>
    </div>

    {{-- Filter & Search Section --}}
    <div class="bg-white rounded-2xl shadow-sm p-6 mb-10 border border-gray-100">
        <form method="GET" class="space-y-4 md:space-y-0">
            <div class="flex flex-col md:flex-row md:items-end gap-6">
                {{-- Search Input --}}
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <div class="flex items-center">
                            <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            Cari Kitab
                        </div>
                    </label>
                    <div class="relative">
                        <input type="text" name="search" value="{{ request('search') }}"
                            placeholder="Masukkan judul kitab atau pengarang..." class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 text-sm
                                   focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500
                                   transition-colors duration-200 placeholder-gray-400">
                        <svg class="absolute left-3 top-3.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </div>
                </div>

                {{-- Category Filter --}}
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <div class="flex items-center">
                            <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                            </svg>
                            Kategori
                        </div>
                    </label>
                    <select name="category" class="w-full px-4 py-3 rounded-lg border border-gray-300 text-sm
                               focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500
                               transition-colors duration-200 appearance-none bg-white">
                        <option value="">Semua Kategori</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ request('category')==$cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                        @endforeach
                    </select>
                    <div
                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 hidden md:block">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                        </svg>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="flex flex-col sm:flex-row gap-3 md:flex-col">
                    <button type="submit" class="px-6 py-3 bg-emerald-600 hover:bg-emerald-700
                               text-white text-sm font-medium rounded-lg transition-all duration-200
                               focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500
                               flex items-center justify-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                        Terapkan Filter
                    </button>

                    @if(request()->hasAny(['search', 'category']))
                    <a href="{{ route('kitab.index') }}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200
                                  text-gray-700 text-sm font-medium rounded-lg transition-all duration-200
                                  flex items-center justify-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                        Reset
                    </a>
                    @endif
                </div>
            </div>

            {{-- Active Filters --}}
            @if(request()->hasAny(['search', 'category']))
            <div class="pt-4 border-t border-gray-100">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="text-sm text-gray-500">Filter aktif:</span>
                    @if(request('search'))
                    <span
                        class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100">
                        "{{ request('search') }}"
                        <a href="{{ request()->fullUrlWithQuery(['search' => null]) }}"
                            class="ml-1.5 text-blue-500 hover:text-blue-700">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </a>
                    </span>
                    @endif
                    @if(request('category'))
                    @php $selectedCat = \App\Models\KitabCategory::find(request('category')) @endphp
                    @if($selectedCat)
                    <span
                        class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
                        {{ $selectedCat->name }}
                        <a href="{{ request()->fullUrlWithQuery(['category' => null]) }}"
                            class="ml-1.5 text-emerald-500 hover:text-emerald-700">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </a>
                    </span>
                    @endif
                    @endif
                </div>
            </div>
            @endif
        </form>
    </div>

    {{-- Stats Section --}}
    <div class="mb-8">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">
                    Koleksi Kitab
                </h2>
                <p class="text-sm text-gray-600 mt-1">
                    {{ $kitabs->total() }} kitab tersedia
                </p>
            </div>

            {{-- Sort Options --}}
            @if($kitabs->count() > 0)
            <div class="flex items-center space-x-2">
                <span class="text-sm text-gray-500">Urutkan:</span>
                <select onchange="window.location.href = this.value"
                    class="text-sm border-0 bg-transparent focus:ring-0 text-gray-700 font-medium">
                    <option value="{{ request()->fullUrlWithQuery(['sort' => 'latest']) }}" {{ request('sort', 'latest'
                        )=='latest' ? 'selected' : '' }}>
                        Terbaru
                    </option>
                    <option value="{{ request()->fullUrlWithQuery(['sort' => 'title']) }}" {{ request('sort')=='title'
                        ? 'selected' : '' }}>
                        A-Z
                    </option>
                    <option value="{{ request()->fullUrlWithQuery(['sort' => 'popular']) }}" {{
                        request('sort')=='popular' ? 'selected' : '' }}>
                        Terpopuler
                    </option>
                </select>
            </div>
            @endif
        </div>
    </div>

    {{-- Kitab Grid --}}
    @if($kitabs->count() > 0)
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
        @foreach($kitabs as $kitab)
        @include('components.card-kitab', ['kitab' => $kitab])
        @endforeach
    </div>

    @if($kitabs->hasPages())
    <div class="mt-12">
        {{ $kitabs->withQueryString()->links() }}
    </div>
    @endif

    @else
    {{-- Empty State --}}
    <div class="text-center py-16 bg-white rounded-2xl shadow-sm border border-gray-100">
        <div class="max-w-md mx-auto">
            <div class="w-20 h-20 mx-auto rounded-full bg-emerald-50 flex items-center justify-center mb-6">
                <svg class="w-10 h-10 text-emerald-500" 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.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">
                Kitab Tidak Ditemukan
            </h3>
            <p class="text-gray-600 mb-6">
                @if(request()->hasAny(['search', 'category']))
                Tidak ada kitab yang sesuai dengan filter pencarian Anda. Coba ubah kata kunci atau filter kategori.
                @else
                Belum ada kitab yang tersedia. Silakan tambahkan kitab pertama.
                @endif
            </p>
            @if(request()->hasAny(['search', 'category']))
            <a href="{{ route('kitab.index') }}" class="inline-flex items-center px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 
                              text-white font-medium rounded-lg text-sm transition-colors duration-200">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
                Reset Filter
            </a>
            @endif
        </div>
    </div>
    @endif

</div>

@push('styles')
<style>
    select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @media (max-width: 768px) {
        select {
            background-position: right 0.75rem center;
        }
    }
</style>
@endpush
@endsection