@extends('layouts.frontend')

@section('title', 'প্রকল্পসমূহ - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Page Header -->
    <section class="bg-bd-green-500 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-3xl md:text-4xl font-bold mb-2">প্রকল্পসমূহ</h1>
            <p class="text-bd-green-100">এলাকার উন্নয়নে গৃহীত সকল প্রকল্প</p>
        </div>
    </section>

    <!-- Filters -->
    <section class="py-6 bg-white border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <form action="{{ route('projects') }}" method="GET" class="flex flex-wrap gap-4">
                <select name="status"
                    class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500">
                    <option value="">সকল অবস্থা</option>
                    <option value="planned" {{ request('status') === 'planned' ? 'selected' : '' }}>পরিকল্পিত</option>
                    <option value="ongoing" {{ request('status') === 'ongoing' ? 'selected' : '' }}>চলমান</option>
                    <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>সম্পন্ন</option>
                </select>
                <select name="category"
                    class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500">
                    <option value="">সকল ক্যাটাগরি</option>
                    <option value="road" {{ request('category') === 'road' ? 'selected' : '' }}>রাস্তা ও সেতু</option>
                    <option value="education" {{ request('category') === 'education' ? 'selected' : '' }}>শিক্ষা</option>
                    <option value="health" {{ request('category') === 'health' ? 'selected' : '' }}>স্বাস্থ্য</option>
                    <option value="water" {{ request('category') === 'water' ? 'selected' : '' }}>পানি ও স্যানিটেশন
                    </option>
                    <option value="electricity" {{ request('category') === 'electricity' ? 'selected' : '' }}>বিদ্যুৎ
                    </option>
                    <option value="other" {{ request('category') === 'other' ? 'selected' : '' }}>অন্যান্য</option>
                </select>
                <button type="submit"
                    class="px-6 py-2 bg-bd-green-500 text-white rounded-lg hover:bg-bd-green-600 transition">
                    <i class="fas fa-filter mr-2"></i>ফিল্টার
                </button>
                @if (request('status') || request('category'))
                    <a href="{{ route('projects') }}"
                        class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
                        <i class="fas fa-times mr-2"></i>রিসেট
                    </a>
                @endif
            </form>
        </div>
    </section>

    <!-- Projects Grid -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if ($projects->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($projects as $project)
                        <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
                            @if ($project->image)
                                <img src="{{ Storage::url($project->image) }}" alt="{{ $project->title }}"
                                    class="w-full h-48 object-cover">
                            @else
                                <div
                                    class="w-full h-48 bg-gradient-to-r from-bd-green-500 to-bd-green-500 flex items-center justify-center">
                                    <i class="fas fa-project-diagram text-4xl text-white"></i>
                                </div>
                            @endif
                            <div class="p-6">
                                <div class="flex items-center gap-2 mb-3">
                                    <span
                                        class="px-3 py-1 text-xs font-medium rounded-full {{ $project->status === 'completed' ? 'bg-green-100 text-green-700' : ($project->status === 'ongoing' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700') }}">
                                        {{ $project->status_label }}
                                    </span>
                                    @if ($project->is_featured)
                                        <span
                                            class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700">
                                            <i class="fas fa-star mr-1"></i>বিশেষ
                                        </span>
                                    @endif
                                </div>
                                <h3 class="text-lg font-bold text-gray-900 mb-2">{{ $project->title }}</h3>
                                <p class="text-gray-600 text-sm mb-4">{{ Str::limit($project->description, 100) }}</p>

                                @if ($project->location)
                                    <p class="text-sm text-gray-500 mb-3">
                                        <i class="fas fa-map-marker-alt mr-2 text-bd-green-500"></i>{{ $project->location }}
                                    </p>
                                @endif

                                <div class="mb-4">
                                    <div class="flex justify-between text-sm text-gray-600 mb-1">
                                        <span>অগ্রগতি</span>
                                        <span>{{ $project->progress }}%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-bd-green-500 h-2 rounded-full transition-all"
                                            style="width: {{ $project->progress }}%"></div>
                                    </div>
                                </div>

                                <a href="{{ route('projects.show', $project) }}"
                                    class="text-bd-green-500 hover:text-bd-green-600 font-medium">
                                    বিস্তারিত দেখুন →
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-12">
                    {{ $projects->links() }}
                </div>
            @else
                <div class="text-center py-16">
                    <i class="fas fa-folder-open text-6xl text-gray-300 mb-4"></i>
                    <h3 class="text-xl font-semibold text-gray-600 mb-2">কোনো প্রকল্প পাওয়া যায়নি</h3>
                    <p class="text-gray-500">এই ফিল্টার অনুযায়ী কোনো প্রকল্প নেই</p>
                </div>
            @endif
        </div>
    </section>
@endsection