@extends('layouts.dashboard')
@section('title', 'Live Dashboard — ' . $election->title)

@push('styles')
<style>
    .stat-card { border: none; border-radius: 12px; }
    .stat-value { font-size: 2.5rem; font-weight: 800; line-height: 1; }
    .candidate-bar { height: 22px; border-radius: 6px; transition: width .5s ease; }
    .position-card { border-left: 4px solid #4f46e5; }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h2 class="fw-bold mb-0">Live Dashboard</h2>
        <p class="text-muted mb-0">{{ $election->title }}</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-primary btn-sm" onclick="refreshData()">
            <i class="bi bi-arrow-clockwise me-1"></i>Refresh
        </button>
        <a href="{{ route('admin.reports.results', $election) }}" class="btn btn-primary btn-sm">
            <i class="bi bi-bar-chart me-1"></i>Full Report
        </a>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card stat-card p-3 h-100 border-start border-primary border-4">
            <small class="text-muted fw-semibold text-uppercase">Total Voters</small>
            <div class="stat-value text-primary" id="statTotal">{{ number_format($totalVoters) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card p-3 h-100 border-start border-success border-4">
            <small class="text-muted fw-semibold text-uppercase">Voted</small>
            <div class="stat-value text-success" id="statVoted">{{ number_format($votedVoters) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card p-3 h-100 border-start border-warning border-4">
            <small class="text-muted fw-semibold text-uppercase">Pending</small>
            <div class="stat-value text-warning" id="statPending">{{ number_format($notVoted) }}</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card p-3 h-100 border-start border-info border-4">
            <small class="text-muted fw-semibold text-uppercase">Turnout</small>
            <div class="stat-value text-info" id="statTurnout">{{ $turnout }}%</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-6">
        <div class="card p-3 h-100">
            <h6 class="fw-bold mb-3">Voter Turnout</h6>
            <canvas id="turnoutChart" height="200"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card p-3 h-100">
            <h6 class="fw-bold mb-3">Votes by Position</h6>
            <canvas id="positionChart" height="200"></canvas>
        </div>
    </div>
</div>

@foreach($positions as $position)
<div class="card p-4 mb-4 position-card">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold mb-0">{{ $position->name }}</h5>
        <span class="badge bg-primary rounded-pill">{{ $position->votes_count }} vote(s)</span>
    </div>
    @if($position->candidates->isEmpty())
        <p class="text-muted small">No candidates.</p>
    @else
        @foreach($position->candidates as $candidate)
        @php
            $pct = $position->votes_count > 0 ? round(($candidate->votes_count / $position->votes_count) * 100, 1) : 0;
            $isLeader = $loop->first && $position->votes_count > 0;
        @endphp
        <div class="mb-3">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="fw-semibold">
                    @if($isLeader)<i class="bi bi-trophy-fill text-warning me-1"></i>@endif
                    {{ $candidate->name }}
                </span>
                <span class="text-muted small">{{ $candidate->votes_count }} votes &nbsp; ({{ $pct }}%)</span>
            </div>
            <div class="progress" style="height:22px">
                <div class="progress-bar {{ $isLeader ? 'bg-success' : 'bg-primary' }} candidate-bar"
                     style="width:{{ $pct }}%">
                    {{ $pct > 5 ? $pct . '%' : '' }}
                </div>
            </div>
        </div>
        @endforeach
    @endif
</div>
@endforeach

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const turnoutCtx = document.getElementById('turnoutChart').getContext('2d');
new Chart(turnoutCtx, {
    type: 'doughnut',
    data: {
        labels: ['Voted', 'Not Voted'],
        datasets: [{ data: [{{ $votedVoters }}, {{ $notVoted }}], backgroundColor: ['#22c55e', '#f97316'] }]
    },
    options: { plugins: { legend: { position: 'bottom' } }, cutout: '60%' }
});

const posCtx = document.getElementById('positionChart').getContext('2d');
new Chart(posCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($positions->pluck('name')) !!},
        datasets: [{ label: 'Votes', data: {!! json_encode($positions->pluck('votes_count')) !!}, backgroundColor: '#6366f1' }]
    },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});

function refreshData() {
    fetch('{{ route("admin.dashboard.api-stats", $election) }}')
        .then(r => r.json())
        .then(d => {
            document.getElementById('statTotal').textContent = d.total_voters.toLocaleString();
            document.getElementById('statVoted').textContent = d.voted_voters.toLocaleString();
            document.getElementById('statPending').textContent = d.not_voted.toLocaleString();
            document.getElementById('statTurnout').textContent = d.turnout + '%';
        });
}

setInterval(refreshData, 30000);
</script>
@endpush