@extends('layouts.app')

@section('title', 'Wirid')

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

    {{-- Header --}}
    <div class="mb-10">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-900">
            Kumpulan Wirid & Doa
        </h1>
        <p class="mt-3 text-gray-600 max-w-2xl">
            Koleksi wirid, zikir, dan doa harian untuk diamalkan dalam kehidupan sehari-hari
        </p>
    </div>

    {{-- Filter Section --}}
    <div class="bg-white rounded-xl shadow-sm p-5 mb-10 border border-gray-100">
        <form method="GET" class="flex flex-col md:flex-row md:items-center gap-4">
            <div class="flex-1 flex flex-col sm:flex-row gap-4">
                {{-- Filter Tipe --}}
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Tipe Amalan
                    </label>
                    <select name="type"
                        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">
                        <option value="">Semua Tipe</option>
                        <option value="doa" {{ request('type') == 'doa' ? 'selected' : '' }}>
                            Doa
                        </option>
                        <option value="wirid" {{ request('type') == 'wirid' ? 'selected' : '' }}>
                            Wirid
                        </option>
                    </select>
                </div>

                {{-- Filter Kategori --}}
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Kategori
                    </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">
                        <option value="">Semua Kategori</option>
                        @foreach(\App\Models\WiridCategory::all() as $cat)
                            <option value="{{ $cat->id }}"
                                {{ request('category') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="pt-1">
                <button 
                    type="submit"
                    class="w-full md:w-auto px-6 py-3 bg-emerald-600 hover:bg-emerald-700 
                           text-white font-medium rounded-lg text-sm transition-all duration-200 
                           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                    Terapkan Filter
                </button>
            </div>
        </form>
    </div>

    {{-- Content Grid --}}
    @if($wirids->count() > 0)
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach($wirids as $wirid)
                @include('components.card-wirid', ['wirid' => $wirid])
            @endforeach
        </div>
    @else
        {{-- Empty State --}}
        <div class="text-center py-16 bg-white rounded-xl shadow-sm border border-gray-100">
            <div class="max-w-md mx-auto">
                <div class="w-16 h-16 mx-auto rounded-full bg-emerald-50 flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">
                    Belum Ada Wirid Ditemukan
                </h3>
                <p class="text-gray-600 mb-6">
                    @if(request()->hasAny(['type', 'category']))
                        Coba ubah filter pencarian Anda
                    @else
                        Tambahkan wirid pertama untuk mulai beramal
                    @endif
                </p>
                @if(request()->hasAny(['type', 'category']))
                    <a href="{{ route('wirid.index') }}" 
                       class="inline-flex items-center px-5 py-2.5 bg-white border border-gray-300 
                              rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 
                              transition-colors duration-200">
                        Reset Filter
                    </a>
                @endif
            </div>
        </div>
    @endif

</div>
@endsection