<x-app-layout>

    <x-module-hero
        title="Edit Poll: {{ Str::limit($poll->question, 50) }}"
        description="Update poll settings and options"
        icon="fa-edit">

        <x-slot name="backButton">
            <a href="{{ route('advocacy.polls.show', $poll) }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Poll
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view campaigns')
            <a href="{{ route('advocacy.campaigns.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.campaigns.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-bullhorn text-sm"></i> Campaigns
            </a>
            @endcan
            @can('view polls')
            <a href="{{ route('advocacy.polls.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.polls.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-poll text-sm"></i> Polls
            </a>
            @endcan
            @can('view stories')
            <a href="{{ route('advocacy.stories.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.stories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-newspaper text-sm"></i> Health Stories
            </a>
            @endcan
        </x-slot>

    </x-module-hero>

    <div class="p-6">

        <div class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-sm text-yellow-800">
            <i class="fas fa-info-circle mr-2"></i>
            Only draft polls can be edited. Once a poll is active, it cannot be modified.
        </div>

        @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg text-sm">
            <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
        </div>
        @endif

        <form action="{{ route('advocacy.polls.update', $poll) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- Poll Question --}}
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-question-circle text-purple-600 mr-2"></i> Poll Question
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label for="question" class="block text-sm font-medium text-gray-700 mb-1">
                            Question <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="question" id="question"
                               value="{{ old('question', $poll->question) }}" required
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">
                        @error('question')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="description" id="description" rows="2"
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">{{ old('description', $poll->description) }}</textarea>
                    </div>
                    <div>
                        <label for="campaign_id" class="block text-sm font-medium text-gray-700 mb-1">Related Campaign</label>
                        <select name="campaign_id" id="campaign_id"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">
                            <option value="">No campaign</option>
                            @foreach($campaigns as $campaign)
                            <option value="{{ $campaign->id }}"
                                    {{ old('campaign_id', $poll->campaign_id) == $campaign->id ? 'selected' : '' }}>
                                {{ $campaign->title }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- Answer Options --}}
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-list text-purple-600 mr-2"></i> Answer Options
                </h3>
                <div id="options-container" class="space-y-2">
                    @foreach($poll->options as $option)
                    <div class="flex gap-2 items-center">
                        <input type="hidden" name="options[{{ $loop->index }}][id]" value="{{ $option->id }}">
                        <input type="text" name="options[{{ $loop->index }}][option_text]"
                               value="{{ old("options.{$loop->index}.option_text", $option->option_text) }}" required
                               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">
                        <span class="text-xs text-gray-500 px-2 whitespace-nowrap">{{ $option->votes_count }} votes</span>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Settings --}}
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-cog text-purple-600 mr-2"></i> Settings
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="poll_type" class="block text-sm font-medium text-gray-700 mb-1">Poll Type</label>
                        <select name="poll_type" id="poll_type"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">
                            <option value="single_choice"   {{ old('poll_type', $poll->poll_type) == 'single_choice'   ? 'selected' : '' }}>Single Choice</option>
                            <option value="multiple_choice" {{ old('poll_type', $poll->poll_type) == 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
                        </select>
                    </div>
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                        <select name="status" id="status"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">
                            <option value="draft"  {{ old('status', $poll->status) == 'draft'  ? 'selected' : '' }}>Draft</option>
                            <option value="active" {{ old('status', $poll->status) == 'active' ? 'selected' : '' }}>Active</option>
                        </select>
                    </div>
                    <div>
                        <label for="display_position" class="block text-sm font-medium text-gray-700 mb-1">Display Position</label>
                        <select name="display_position" id="display_position"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">
                            <option value="sidebar" {{ old('display_position', $poll->display_position) == 'sidebar' ? 'selected' : '' }}>Sidebar</option>
                            <option value="inline"  {{ old('display_position', $poll->display_position) == 'inline'  ? 'selected' : '' }}>Inline</option>
                            <option value="modal"   {{ old('display_position', $poll->display_position) == 'modal'   ? 'selected' : '' }}>Modal Popup</option>
                        </select>
                    </div>
                    <div>
                        <label for="ends_at" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
                        <input type="datetime-local" name="ends_at" id="ends_at"
                               value="{{ old('ends_at', $poll->ends_at?->format('Y-m-d\TH:i')) }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 text-sm">
                    </div>
                    <div class="md:col-span-2 space-y-2">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="show_results" value="1"
                                   {{ old('show_results', $poll->show_results) ? 'checked' : '' }}
                                   class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                            <span class="text-sm text-gray-700">Show results after voting</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="results_public" value="1"
                                   {{ old('results_public', $poll->results_public) ? 'checked' : '' }}
                                   class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                            <span class="text-sm text-gray-700">Make results public</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="allow_other" value="1"
                                   {{ old('allow_other', $poll->allow_other) ? 'checked' : '' }}
                                   class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                            <span class="text-sm text-gray-700">Allow "Other" option</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('advocacy.polls.show', $poll) }}"
                   class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm font-medium">
                    Cancel
                </a>
                <button type="submit"
                        class="px-5 py-2.5 bg-purple-700 text-white rounded-lg hover:bg-purple-800 transition text-sm font-medium">
                    <i class="fas fa-save mr-2"></i> Update Poll
                </button>
            </div>

        </form>
    </div>

</x-app-layout>
