@push('styles')
<style>
    .has-votes {
        background-color: #fff8e1;
    }
    .has-votes .form-control:read-only {
        background-color: #fff8e1;
        border-color: #ffd54f;
    }
    .input-group-text.bg-warning {
        border-color: #ffd54f;
    }
</style>
@endpush
<div class="card section-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title ">
            {{ __('labels.voting_options') }} @if(isset($isRequire) && $isRequire) <span class="text-danger">*</span> @endif
        </h5>
        @if(!isset($readonly) || !$readonly)
        <button type="button" class="btn btn-primary btn-sm" onclick="addNewOption()">
            <i class="fa-solid fa-plus me-1"></i> {{ __('labels.add_option') }}
        </button>
        @endif
    </div>
    @error('vote_options')
        <div class="alert alert-danger alert-dismissible fade show">
            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
                stroke-linecap="round" stroke-linejoin="round" class="me-2">
                <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
                <line x1="15" y1="9" x2="9" y2="15"></line>
                <line x1="9" y1="9" x2="15" y2="15"></line>
            </svg>
            <strong>{{ __('labels.error') }}!</strong> {{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"><span><i
                        class="fa-solid fa-xmark"></i></span>
            </button>
        </div>
    @enderror

    <div class="table-responsive">
        <table id="vote-option-table" class="table display">
            <thead>
                <tr>
                    <th><strong>#</strong></th>
                    <th><strong>{{ strtoupper(__('labels.option')) }}</strong></th>
                    @if(!isset($readonly) || !$readonly)
                    <th><strong>{{ __('labels.action') }}</strong></th>
                    @endif
                </tr>
            </thead>
            <tbody id="vote-option-tbody">
                @php
                    // Ensure voteOptions is an array
                    $voteOptions = $voteOptions ?? [];
                    
                    // Default options if empty
                    if (empty($voteOptions)) {
                        $voteOptions = [
                            ['id' => null, 'label' => __('labels.yes'), 'votes_count' => 0, 'is_new' => true],
                            ['id' => null, 'label' => __('labels.no'), 'votes_count' => 0, 'is_new' => true]
                        ];
                    }
                @endphp
                
                @foreach ($voteOptions as $index => $voteOption)
                    @php
                        $hasVotes = isset($voteOption['votes_count']) && $voteOption['votes_count'] > 0;
                        $canDelete = !$hasVotes && (!isset($readonly) || !$readonly);
                    @endphp
                    
                    <tr id="vote-option-{{ $index }}" 
                        class="{{ $hasVotes ? 'has-votes' : '' }}"
                        data-has-votes="{{ $hasVotes ? '1' : '0' }}">
                        <td>{{ $index+1 }}</td>
                        <td>
                            <div class="input-group">
                                @if($voteOption['id'] ?? false)
                                    <input type="hidden" name="vote_options[{{ $index }}][id]" value="{{ $voteOption['id'] }}">
                                @endif
                                
                                <input type="text" 
                                       class="form-control form-control-sm {{ $hasVotes ? 'bg-light' : '' }}" 
                                       name="vote_options[{{ $index }}][label]" 
                                       value="{{ old('vote_options.' . $index . '.label', $voteOption['label'] ?? $voteOption['name'] ?? '') }}"
                                       {{ (isset($readonly) && $readonly) || $hasVotes ? 'readonly' : '' }} 
                                       required
                                       data-original-value="{{ $voteOption['label'] ?? $voteOption['name'] ?? '' }}">
                                
                                @if($hasVotes)
                                    <span class="input-group-text bg-warning text-dark">
                                        <i class="fa-solid fa-vote-yea me-1"></i>
                                        {{ $voteOption['votes_count'] }} {{ __('labels.votes') }}
                                    </span>
                                @endif
                                
                            </div>
                            @if($hasVotes)
                                <small class="text-muted d-block mt-1">
                                    <i class="fa-solid fa-info-circle"></i>
                                    {{ __('labels.cannot_edit_has_votes') }}
                                </small>
                            @endif
                        </td>
                        @if(!isset($readonly) || !$readonly)
                        <td>
                            <button type="button" 
                                    class="btn btn-danger btn-xs {{ !$canDelete ? 'disabled' : '' }}" 
                                    onclick="{{ $canDelete ? 'removeVoteOption(' . $index . ')' : 'showCannotDeleteMessage()' }}"
                                    {{ !$canDelete ? 'disabled' : '' }}
                                    title="{{ $hasVotes ? __('labels.has_votes_cannot_delete') : ''}}">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    
    @if(!isset($readonly) || !$readonly)
    {{-- <div class="card-footer">
        <small class="text-muted">
            <i class="fa-solid fa-info-circle me-1"></i>
            {{ __('labels.vote_options_info') }}
        </small>
    </div> --}}
    @endif
</div>