@extends('layouts.site')

@section('title', 'Active Community Polls')
@section('meta-description', 'Participate in active community polls and share your opinion on health topics.')

@section('content')
<!-- Hero -->
<div class="bg-gradient-to-r from-purple-600 to-indigo-700">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 text-center">
        <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">
            <i class="fas fa-poll mr-3"></i>Community Polls
        </h1>
        <p class="text-xl text-purple-100 max-w-5xl mx-auto">
            Your voice matters. Participate in our active polls and help shape community health decisions.
        </p>
    </div>
</div>

<!-- Breadcrumb -->
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-purple-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('advocacy.public.index') }}" class="hover:text-purple-600 transition">Advocacy</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">Community Polls</span>
        </nav>
    </div>
</div>

<!-- Polls -->
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    @if($polls->count() > 0)
        <div class="space-y-8">
            @foreach($polls as $poll)
                <div x-data="pollComponent({{ $poll->id }})"
                     class="bg-white rounded-2xl shadow-md overflow-hidden border border-gray-100">

                    <!-- Poll Header -->
                    <div class="bg-gradient-to-r from-purple-50 to-indigo-50 px-6 py-5 border-b border-purple-100">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                @if($poll->campaign)
                                    <span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 text-xs font-semibold rounded-full mb-2">
                                        <i class="fas fa-bullhorn mr-1"></i>{{ $poll->campaign->title }}
                                    </span>
                                @endif
                                <h2 class="text-xl font-bold text-gray-900">{{ $poll->question }}</h2>
                                @if($poll->description)
                                    <p class="text-gray-600 mt-1 text-sm">{{ $poll->description }}</p>
                                @endif
                            </div>
                            @if($poll->is_featured)
                                <span class="text-yellow-400 text-xl flex-shrink-0"><i class="fas fa-star"></i></span>
                            @endif
                        </div>

                        <div class="flex flex-wrap items-center gap-4 mt-3 text-sm text-gray-500">
                            <span>
                                <i class="fas fa-users mr-1"></i>
                                {{ $poll->total_responses }} {{ Str::plural('response', $poll->total_responses) }}
                            </span>
                            <span class="capitalize">
                                <i class="fas fa-list-ul mr-1"></i>
                                {{ str_replace('_', ' ', $poll->poll_type) }}
                            </span>
                            @if($poll->ends_at)
                                <span>
                                    <i class="fas fa-clock mr-1"></i>
                                    Ends {{ $poll->ends_at->diffForHumans() }}
                                </span>
                            @endif
                        </div>
                    </div>

                    <!-- Options / Voting -->
                    <div class="px-6 py-6">
                        <!-- Voting Form (shown before voting) -->
                        <div x-show="!hasVoted" class="space-y-3">
                            @foreach($poll->options as $option)
                                <button @click="vote({{ $option->id }})"
                                        class="w-full flex items-center gap-3 px-5 py-4 border-2 border-gray-200 rounded-xl text-left
                                               hover:border-purple-400 hover:bg-purple-50 transition-all duration-200 group">
                                    <span class="w-5 h-5 rounded-full border-2 border-gray-300 group-hover:border-purple-500 flex-shrink-0 transition-colors"></span>
                                    <span class="text-gray-800 font-medium">{{ $option->option_text }}</span>
                                </button>
                            @endforeach

                            <p class="text-xs text-gray-400 mt-2">
                                <i class="fas fa-shield-alt mr-1"></i>
                                Your vote is anonymous.
                            </p>
                        </div>

                        <!-- Results (shown after voting) -->
                        <div x-show="hasVoted" class="space-y-4">
                            @foreach($poll->options as $option)
                                <div>
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-sm font-medium text-gray-700">{{ $option->option_text }}</span>
                                        <span class="text-sm font-bold text-purple-600"
                                              x-text="(results[{{ $option->id }}] ?? 0) + '%'"></span>
                                    </div>
                                    <div class="h-3 bg-gray-100 rounded-full overflow-hidden">
                                        <div class="h-full bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full transition-all duration-700"
                                             :style="'width: ' + (results[{{ $option->id }}] ?? 0) + '%'"></div>
                                    </div>
                                </div>
                            @endforeach

                            <p class="text-sm text-gray-500 pt-2 border-t">
                                <i class="fas fa-users mr-1"></i>
                                <span x-text="totalVotes"></span> total votes
                            </p>
                        </div>

                        <!-- Message -->
                        <p x-show="message" x-text="message"
                           class="mt-4 text-sm text-center py-2 px-4 rounded-lg"
                           :class="hasVoted ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'"></p>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="text-center py-20">
            <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-poll text-purple-400 text-3xl"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No Active Polls</h3>
            <p class="text-gray-500">There are no active polls at the moment. Check back soon!</p>
            <a href="{{ route('advocacy.public.index') }}"
               class="inline-flex items-center mt-6 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                <i class="fas fa-arrow-left mr-2"></i>Back to Advocacy
            </a>
        </div>
    @endif
</div>

@push('scripts')
<script>
function pollComponent(pollId) {
    return {
        pollId: pollId,
        hasVoted: false,
        results: {},
        totalVotes: 0,
        message: '',

        vote(optionId) {
            if (this.hasVoted) return;

            fetch(`/advocacy/polls/${this.pollId}/vote`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ option_id: optionId }),
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    this.hasVoted = true;
                    this.message = data.message;
                    this.totalVotes = data.total_votes;
                    data.results.forEach(r => { this.results[r.id] = r.percentage; });
                } else {
                    this.message = data.message;
                }
            })
            .catch(() => { this.message = 'An error occurred. Please try again.'; });
        }
    }
}
</script>
@endpush
@endsection
