{{--
    x-classroom-poll-widget
    Rendered INSIDE #panel-poll in live.blade.php (FIX BUG-P1).
    No longer a floating overlay — it lives in the sidebar poll tab.

    FIX BUG-P1: Widget is now placed inside #panel-poll, not outside the panel.
    FIX BUG-P2: No fixed/absolute positioning needed — it flows naturally in the panel.
    FIX BUG-P3: sessionId prop is accepted but not needed in template (used by JS).
--}}
@props(['sessionId', 'poll' => null, 'isTeacher' => false])

<div id="poll-widget" class="{{ $poll ? '' : 'hidden' }} w-full">

    {{-- Question --}}
    <div class="mb-4">
        <p class="text-[10px] font-bold text-blue-400 uppercase tracking-wider mb-1">
            📊 @if($isTeacher) Active Poll @else Quick Question! 🎯 @endif
        </p>
        <p id="poll-question" class="text-sm font-semibold text-white leading-snug">
            {{ $poll?->question ?? '' }}
        </p>
        <p id="poll-timer" class="text-[10px] text-gray-400 mt-1">
            @if($isTeacher) Vote now! @else Quick question time! Answer now! 🎯 @endif
        </p>
    </div>

    {{-- Options --}}
    <div id="poll-options" class="space-y-1.5 mb-3">
        {{-- Populated dynamically by pollShowWidget() in live.blade.php --}}
        @if($poll)
            @php $options = is_array($poll->options) ? $poll->options : json_decode($poll->options, true) ?? []; @endphp
            @foreach($options as $i => $opt)
            <div class="mb-2">
                <button class="w-full text-left px-3 py-2 rounded-lg border border-gray-600
                               hover:border-blue-500 hover:bg-blue-900/20 transition-all text-sm
                               text-gray-300 flex justify-between items-center"
                        onclick="pollVote({{ $poll->id }}, '{{ addslashes($opt) }}')">
                    <span>{{ $opt }}</span>
                    <span class="poll-count font-mono text-xs text-gray-500"
                          data-option="{{ $opt }}">0</span>
                </button>
                <div class="poll-bar-track">
                    <div class="poll-bar-fill" data-bar="{{ $i }}"></div>
                </div>
            </div>
            @endforeach
        @endif
    </div>

    {{-- Footer --}}
    <div class="flex items-center justify-between text-[10px] text-gray-500 pt-2 border-t border-gray-700/50">
        <span id="poll-total-votes">0 votes</span>

        @if($isTeacher)
        <button id="close-poll-btn"
                onclick="pollClose()"
                class="text-red-400 hover:text-red-300 font-medium transition-colors">
            ✕ @if($isTeacher) Close Poll @else Time's Up! ⏰ @endif
        </button>
        @endif
    </div>

</div>