@extends('layouts.frontend')

@section('title', 'নির্বাচনী ইশতেহার - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Hero Section -->
    <section class="bg-bd-green-500 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">নির্বাচনী ইশতেহার</h1>
                <p class="text-bd-green-100 text-lg">আমাদের প্রতিশ্রুতি ও অগ্রগতি</p>
            </div>
        </div>
    </section>

    <!-- Stats Summary -->
    <section class="py-8 bg-white border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-3 gap-6 text-center">
                <div class="p-4">
                    <div class="text-3xl font-bold text-green-600">{{ $stats['completed'] }}</div>
                    <div class="text-gray-600">সম্পন্ন</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl font-bold text-blue-600">{{ $stats['ongoing'] }}</div>
                    <div class="text-gray-600">চলমান</div>
                </div>
                <div class="p-4">
                    <div class="text-3xl font-bold text-gray-600">{{ $stats['pending'] }}</div>
                    <div class="text-gray-600">বিচারাধীন</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Filter Section -->
    <section class="py-6 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap gap-3 justify-center">
                <a href="{{ route('manifestos') }}"
                    class="px-4 py-2 rounded-full text-sm font-medium transition
                        {{ !request('status') && !request('category') ? 'bg-bd-green-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100 border' }}">
                    সব
                </a>
                @foreach (\App\Models\Manifesto::STATUSES as $key => $label)
                    <a href="{{ route('manifestos', ['status' => $key]) }}"
                        class="px-4 py-2 rounded-full text-sm font-medium transition
                            {{ request('status') === $key ? 'bg-bd-green-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100 border' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Manifestos List -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if ($manifestos->count() > 0)
                <div class="space-y-6">
                    @foreach ($manifestos as $manifesto)
                        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
                            <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                                <div class="flex-1">
                                    <div class="flex items-center gap-3 mb-2">
                                        <span
                                            class="px-3 py-1 text-xs font-medium rounded-full
                                            {{ $manifesto->status === 'completed' ? 'bg-green-100 text-green-700' : ($manifesto->status === 'ongoing' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700') }}">
                                            {{ $manifesto->status_label }}
                                        </span>
                                        @if ($manifesto->category)
                                            <span
                                                class="px-3 py-1 text-xs font-medium rounded-full bg-bd-green-50 text-bd-green-600">
                                                {{ $manifesto->category_label }}
                                            </span>
                                        @endif
                                    </div>
                                    <h3 class="text-xl font-bold text-gray-900 mb-2">{{ $manifesto->title }}</h3>
                                    @if ($manifesto->description)
                                        <p class="text-gray-600 mb-4">{{ $manifesto->description }}</p>
                                    @endif
                                </div>
                                <div class="md:w-48 flex-shrink-0">
                                    <div class="text-right mb-2">
                                        <span
                                            class="text-2xl font-bold 
                                            {{ $manifesto->progress_percentage >= 100 ? 'text-green-600' : ($manifesto->progress_percentage >= 50 ? 'text-blue-600' : 'text-gray-600') }}">
                                            {{ $manifesto->progress_percentage }}%
                                        </span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-3">
                                        <div class="h-3 rounded-full transition-all duration-500
                                            {{ $manifesto->progress_percentage >= 100 ? 'bg-green-500' : ($manifesto->progress_percentage >= 50 ? 'bg-blue-500' : 'bg-bd-green-500') }}"
                                            style="width: {{ min($manifesto->progress_percentage, 100) }}%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-10">
                    {{ $manifestos->links() }}
                </div>
            @else
                <div class="text-center py-16">
                    <div class="w-24 h-24 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-clipboard-list text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">কোনো ইশতেহার পাওয়া যায়নি</h3>
                    <p class="text-gray-600">এই বিভাগে এখনো কোনো ইশতেহার যোগ করা হয়নি।</p>
                </div>
            @endif
        </div>
    </section>
@endsection