@extends('layouts.app')

@section('title', 'All Sevas')

@section('content')
    <div class="bg-[#FFF9E6] py-12">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold text-center mb-8">Available Sevas</h1>

            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Sidebar Filters -->
                <div class="lg:w-1/4">
                    <form method="GET" id="seva-filter-form">
                        <div class="bg-white rounded-lg shadow-md p-6">
                            <h2 class="text-xl font-bold mb-4">Filters</h2>

                            <!-- Category Filter -->
                            <div class="mb-6">
                                <h3 class="font-semibold mb-3">Categories</h3>
                                <div class="space-y-4">
                                    @foreach($categoriesByTemple as $templeName => $categories)
                                        <div class="border-b border-gray-200 pb-3 last:border-b-0">
                                            <h4 class="font-medium text-gray-900 mb-2">{{ $templeName }}</h4>
                                            <div class="space-y-2">
                                                @foreach($categories as $category)
                                                    <label class="flex items-center">
                                                        <input type="checkbox"
                                                               class="form-checkbox text-red-700 rounded"
                                                               name="category[]"
                                                               value="{{ $category->id }}"
                                                               {{ in_array($category->id, request('category', [])) ? 'checked' : '' }}>
                                                        <span class="ml-2 text-sm">{{ $category->name }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Price Range Filter -->
                            {{-- <div class="mb-6">
                                <h3 class="font-semibold mb-3">Price Range</h3>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="radio" class="form-radio text-red-700" name="price" value="0-500">
                                        <span class="ml-2">₹0 - ₹500</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" class="form-radio text-red-700" name="price" value="501-2000">
                                        <span class="ml-2">₹501 - ₹2,000</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" class="form-radio text-red-700" name="price" value="2001-5000">
                                        <span class="ml-2">₹2,001 - ₹5,000</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" class="form-radio text-red-700" name="price" value="5000+">
                                        <span class="ml-2">Above ₹5,000</span>
                                    </label>
                                </div>
                            </div> --}}

                            <!-- Duration Filter -->
                            {{-- <div class="mb-6">
                                <h3 class="font-semibold mb-3">Duration</h3>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox text-red-700 rounded" name="duration[]" value="15">
                                        <span class="ml-2">15 minutes</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox text-red-700 rounded" name="duration[]" value="30">
                                        <span class="ml-2">30 minutes</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox text-red-700 rounded" name="duration[]" value="60">
                                        <span class="ml-2">1 hour</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="form-checkbox text-red-700 rounded" name="duration[]" value="120+">
                                        <span class="ml-2">Above 1 hour</span>
                                    </label>
                                </div>
                            </div> --}}

                            <!-- Apply Filters Button -->
                            <button class="w-full bg-red-700 text-white py-2 px-4 rounded-lg hover:bg-red-800 transition-colors duration-300">
                                Apply Filters
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Sevas Grid -->
                <div class="lg:w-3/4">
                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-10">
                        @if($sevas->count())
                            @foreach($sevas as $seva)
                                <div class="bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300 card-hover">
                                    @if(!empty($seva['image']))
                                        <img
                                            src="{{ $seva['image'] }}"
                                            alt="{{ $seva['name'] }}"
                                            class="w-full h-66 object-cover"
                                            onerror="this.style.display='none';this.nextElementSibling.style.display='flex';"
                                        >
                                        <div style="display:none;" class="w-full h-66 bg-gray-200 flex items-center justify-center">
                                            <svg class="w-full h-full text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120">
                                                <rect width="120" height="120" fill="#e5e7eb"/>
                                                <circle cx="40" cy="40" r="12" fill="#d1d5db"/>
                                                <rect x="24" y="70" width="72" height="28" rx="4" fill="#d1d5db"/>
                                                <path d="M24 98l24-28a4 4 0 016 0l20 24 8-10a4 4 0 016 0l12 14" stroke="#b0b6be" stroke-width="3" fill="none"/>
                                            </svg>
                                        </div>
                                    @else
                                        <div class="w-full h-66 bg-gray-200 flex items-center justify-center">
                                            <svg class="w-full h-full text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120">
                                                <rect width="120" height="120" fill="#e5e7eb"/>
                                                <circle cx="40" cy="40" r="12" fill="#d1d5db"/>
                                                <rect x="24" y="70" width="72" height="28" rx="4" fill="#d1d5db"/>
                                                <path d="M24 98l24-28a4 4 0 016 0l20 24 8-10a4 4 0 016 0l12 14" stroke="#b0b6be" stroke-width="3" fill="none"/>
                                            </svg>
                                        </div>
                                    @endif
                                    <div class="bg-gray-100 p-4">
                                        <h2 class="text-lg font-bold mb-2">{{ $seva['name'] }}</h2>
                                        <p class="text-gray-600 mb-4 text-sm">{{ Str::limit($seva['description'], 50) }}</p>

                                        <div class="flex items-center justify-between mb-4">
                                            <div>
                                                <span class="price">₹<span>{{ $seva['price'] }}</span></span>
                                            </div>
                                            <a href="{{ route('sevas.book', $seva['slug']) }}" class="btn-primary px-4 py-2 rounded-md font-medium">
                                                Book Now
                                            </a>
                                        </div>

                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-span-full flex flex-col items-center justify-center py-16">
                                <svg class="w-24 h-24 text-red-200 mb-4" fill="none" viewBox="0 0 64 64">
                                    <circle cx="32" cy="32" r="32" fill="#FDE68A"/>
                                    <path d="M20 44c0-6.627 5.373-12 12-12s12 5.373 12 12" stroke="#F59E42" stroke-width="2" stroke-linecap="round"/>
                                    <ellipse cx="24" cy="28" rx="2" ry="3" fill="#F59E42"/>
                                    <ellipse cx="40" cy="28" rx="2" ry="3" fill="#F59E42"/>
                                    <path d="M28 38c1.333 1.333 6.667 1.333 8 0" stroke="#F59E42" stroke-width="2" stroke-linecap="round"/>
                                </svg>
                                <h3 class="text-xl font-semibold text-red-700 mb-2">No Sevas Found</h3>
                                <p class="text-gray-500 text-center max-w-md">We couldn't find any sevas matching your selection. Please try adjusting your filters or check back later for new sevas at our temple.</p>
                            </div>
                        @endif
                    </div>

                    <!-- Pagination -->
                    @include('components.pagination', ['paginator' => $sevas])
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // Filter functionality can be added here
    document.addEventListener('DOMContentLoaded', function() {
        const filterForm = document.querySelector('.filters-form');
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        const radioButtons = document.querySelectorAll('input[type="radio"]');

        // Add event listeners for filter changes
        [...checkboxes, ...radioButtons].forEach(input => {
            input.addEventListener('change', function() {
                // Handle filter changes
                // You can implement AJAX calls here to fetch filtered results
            });
        });
    });
</script>
@endpush