@extends('layouts.public')
@section('title', 'Ballot — ' . $election->title)

@push('styles')
<style>
    .candidate-card { cursor: pointer; transition: all .2s ease; border: 2px solid transparent !important; }
    .candidate-card:hover { border-color: #6366f1 !important; transform: translateY(-2px); }
    .candidate-card.selected { border-color: #4f46e5 !important; background: #ede9fe !important; }
    .candidate-card.selected .check-icon { display: flex !important; }
    .check-icon { display: none; width: 28px; height: 28px; background: #4f46e5; border-radius: 50%; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
    .position-section { border-left: 4px solid #4f46e5; padding-left: 1rem; }
    .ballot-progress { position: sticky; top: 0; background: #fff; z-index: 100; padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
    .candidate-thumb { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .candidate-thumb-placeholder { width: 56px; height: 56px; border-radius: 50%; background: #e0e7ff; display: flex; align-items: center; justify-content: center; color: #6366f1; flex-shrink: 0; }
</style>
@endpush

@section('content')
<div class="ballot-progress shadow-sm">
    <div class="container d-flex align-items-center gap-3">
        <span class="fw-semibold text-primary"><i class="bi bi-person-check me-1"></i>{{ $voter->full_name }}</span>
        <div class="flex-grow-1">
            <div class="progress" style="height:8px">
                <div class="progress-bar bg-primary" id="ballotProgress" style="width:0%"></div>
            </div>
        </div>
        <small class="text-muted" id="progressLabel">0 / {{ $positions->count() }} positions</small>
    </div>
</div>

<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="mb-4">
                <h2 class="fw-bold">{{ $election->title }}</h2>
                <p class="text-muted">Select ONE candidate per position. Review carefully before submitting — you cannot change your vote.</p>
            </div>

            @if($errors->any())
            <div class="alert alert-danger">
                @foreach($errors->all() as $err)
                    <div><i class="bi bi-exclamation-circle me-1"></i>{{ $err }}</div>
                @endforeach
            </div>
            @endif

            <form method="POST" action="{{ route('voting.submit') }}" id="ballotForm">
                @csrf

                @foreach($positions as $position)
                <div class="card p-4 mb-4" data-position="{{ $position->id }}">
                    <div class="position-section mb-4">
                        <h4 class="fw-bold mb-1">{{ $position->name }}</h4>
                        @if($position->description)
                            <small class="text-muted">{{ $position->description }}</small>
                        @endif
                        <div class="mt-1">
                            <small class="text-primary fw-semibold" id="selection-label-{{ $position->id }}">
                                <i class="bi bi-hand-index me-1"></i>Please select a candidate
                            </small>
                        </div>
                    </div>

                    <div class="row g-3">
                        @foreach($position->candidates as $candidate)
                        <div class="col-12">
                            <div class="card candidate-card p-3" onclick="selectCandidate({{ $position->id }}, {{ $candidate->id }}, this)">
                                <div class="d-flex align-items-center gap-3">
                                    @if($candidate->photo)
                                        <img src="{{ asset('storage/' . $candidate->photo) }}" alt="{{ $candidate->name }}" class="candidate-thumb">
                                    @else
                                        <div class="candidate-thumb-placeholder"><i class="bi bi-person-fill"></i></div>
                                    @endif
                                    <div class="flex-grow-1">
                                        <div class="fw-bold">{{ $candidate->name }}</div>
                                        @if($candidate->campaign_message)
                                            <small class="text-muted">{{ Str::limit($candidate->campaign_message, 80) }}</small>
                                        @endif
                                    </div>
                                    <div class="check-icon"><i class="bi bi-check-lg"></i></div>
                                </div>
                                <input type="radio" name="votes[{{ $position->id }}]" value="{{ $candidate->id }}"
                                       id="vote-{{ $position->id }}-{{ $candidate->id }}" class="d-none position-radio-{{ $position->id }}">
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach

                <div class="card p-4 bg-light border-0 mb-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirmVote" required>
                        <label class="form-check-label fw-semibold" for="confirmVote">
                            I confirm that my selections are final and I understand that I cannot vote again.
                        </label>
                    </div>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-lg" id="submitBtn" disabled>
                        <i class="bi bi-send-check me-1"></i>Submit My Ballot
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const totalPositions = {{ $positions->count() }};
let selected = {};

function selectCandidate(positionId, candidateId, card) {
    document.querySelectorAll(`[data-position="${positionId}"] .candidate-card`).forEach(c => c.classList.remove('selected'));
    card.classList.add('selected');
    document.getElementById(`vote-${positionId}-${candidateId}`).checked = true;
    selected[positionId] = candidateId;
    document.getElementById(`selection-label-${positionId}`).innerHTML = '<i class="bi bi-check-circle-fill me-1"></i>Selected';
    document.getElementById(`selection-label-${positionId}`).classList.add('text-success');
    updateProgress();
}

function updateProgress() {
    const count = Object.keys(selected).length;
    const pct = Math.round((count / totalPositions) * 100);
    document.getElementById('ballotProgress').style.width = pct + '%';
    document.getElementById('progressLabel').textContent = `${count} / ${totalPositions} positions`;
    const confirm = document.getElementById('confirmVote');
    document.getElementById('submitBtn').disabled = !(count === totalPositions && confirm.checked);
}

document.getElementById('confirmVote').addEventListener('change', updateProgress);

document.getElementById('ballotForm').addEventListener('submit', function(e) {
    if (Object.keys(selected).length < totalPositions) {
        e.preventDefault();
        alert('Please select a candidate for every position before submitting.');
        return;
    }
    if (!confirm('Are you sure you want to submit your ballot? This action cannot be undone.')) {
        e.preventDefault();
    }
});
</script>
@endpush