@extends('layouts.app')

@section('title', 'Hasil Event - ' . $event->name)

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center py-3 mb-4">
        <h4 class="fw-bold mb-0">
            <span class="text-muted fw-light">Hasil /</span> {{ $event->name }}
        </h4>
        <div>
            <a href="{{ route('admin.results.export', $event) }}" class="btn btn-success">
                <i class="bx bx-download me-1"></i> Ekspor CSV
            </a>
            <a href="{{ route('admin.results.index') }}" class="btn btn-outline-secondary ms-2">
                Kembali
            </a>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6 mb-4 mb-md-0">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span>Total Peserta Terdaftar</span>
                            <div class="d-flex align-items-end mt-2">
                                <h4 class="mb-0 me-2">{{ $totalVoters }}</h4>
                            </div>
                        </div>
                        <span class="badge bg-label-primary rounded p-2">
                            <i class="bx bx-group bx-sm"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span>Total Suara Masuk</span>
                            <div class="d-flex align-items-end mt-2">
                                <h4 class="mb-0 me-2">{{ $totalVotes }}</h4>
                                <small class="text-success">({{ $totalVoters > 0 ? round(($totalVotes / $totalVoters) * 100, 2) : 0 }}% Partisipasi)</small>
                            </div>
                        </div>
                        <span class="badge bg-label-success rounded p-2">
                            <i class="bx bx-check-shield bx-sm"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Chart -->
        <div class="col-md-8 col-12 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between pb-0">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Distribusi Suara</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div id="resultsChart" style="min-height: 400px;"></div>
                </div>
            </div>
        </div>

        <!-- Leaderboard -->
        <div class="col-md-4 col-12 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between pb-0">
                    <div class="card-title mb-0">
                        <h5 class="m-0 me-2">Perolehan Suara</h5>
                    </div>
                </div>
                <div class="card-body mt-4">
                    <ul class="p-0 m-0">
                        @foreach($candidates->sortByDesc('votes_count') as $candidate)
                            <li class="d-flex mb-4 pb-1">
                                <div class="avatar flex-shrink-0 me-3">
                                    @if($candidate->photo_path)
                                        <img src="{{ Storage::url($candidate->photo_path) }}" alt="Candidate" class="rounded" width="40" height="40" style="object-fit: cover;">
                                    @else
                                        <span class="avatar-initial rounded bg-label-primary"><i class="bx bx-user"></i></span>
                                    @endif
                                </div>
                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                    <div class="me-2">
                                        <h6 class="mb-0">{{ $candidate->name }}</h6>
                                        <small class="text-muted">ID: {{ $candidate->id }}</small>
                                    </div>
                                    <div class="user-progress">
                                        <small class="fw-semibold">{{ $candidate->votes_count }}</small>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var options = {
            series: [{
                name: 'Suara',
                data: {!! json_encode($chartData['data']) !!}
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    horizontal: true,
                }
            },
            dataLabels: {
                enabled: true
            },
            xaxis: {
                categories: {!! json_encode($chartData['labels']) !!},
            },
            colors: ['#2563EB']
        };

        var chart = new ApexCharts(document.querySelector("#resultsChart"), options);
        chart.render();
    });
</script>
@endpush