@extends('layouts.app')

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

@section('page-style')
<style>
    .border-bottom-dashed {
        border-bottom: 1px dashed #e4e6ef !important;
    }
    .border-bottom-dashed:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
</style>
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Header -->
    <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 }}
            <span class="badge bg-label-{{ $event->status === 'active' ? 'success' : ($event->status === 'closed' ? 'danger' : 'primary') }} ms-2 text-capitalize fs-6">
                {{ $event->status === 'active' ? 'Berlangsung' : ($event->status === 'closed' ? 'Selesai' : $event->status) }}
            </span>
        </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>

    <!-- KPI Cards Grid -->
    <div class="row mb-4">
        <!-- Card 1: Total DPT -->
        <div class="col-sm-6 col-md-3 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between mb-2">
                        <span class="fw-semibold d-block text-muted">Total DPT</span>
                        <span class="badge bg-label-primary rounded p-2">
                            <i class="bx bx-group bx-sm"></i>
                        </span>
                    </div>
                    <h3 class="card-title mb-1 fw-bold text-primary">{{ $totalVoters }}</h3>
                    <small class="text-muted">Pemilih terdaftar</small>
                </div>
            </div>
        </div>
        <!-- Card 2: Total Suara Masuk -->
        <div class="col-sm-6 col-md-3 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between mb-2">
                        <span class="fw-semibold d-block text-muted">Total Suara Masuk</span>
                        <span class="badge bg-label-success rounded p-2">
                            <i class="bx bx-check-shield bx-sm"></i>
                        </span>
                    </div>
                    <h3 class="card-title mb-1 fw-bold text-success">
                        {{ $totalVotes }}
                    </h3>
                    <small class="text-muted">
                        {{ $votersVoted }} pemilih ({{ $totalVoters > 0 ? round(($votersVoted / $totalVoters) * 100, 2) : 0 }}% Partisipasi)
                    </small>
                </div>
            </div>
        </div>
        <!-- Card 3: Belum Memilih -->
        <div class="col-sm-6 col-md-3 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between mb-2">
                        <span class="fw-semibold d-block text-muted">Belum Memilih</span>
                        <span class="badge bg-label-warning rounded p-2">
                            <i class="bx bx-user-voice bx-sm"></i>
                        </span>
                    </div>
                    <h3 class="card-title mb-1 fw-bold text-warning">
                        {{ $votersNotVoted }}
                        <span class="fs-6 fw-normal text-warning">({{ $totalVoters > 0 ? round(($votersNotVoted / $totalVoters) * 100, 2) : 0 }}%)</span>
                    </h3>
                    <small class="text-muted">Belum menyalurkan suara</small>
                </div>
            </div>
        </div>
        <!-- Card 4: Kandidat Terunggul -->
        <div class="col-sm-6 col-md-3 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between mb-2">
                        <span class="fw-semibold d-block text-muted">Terunggul Sementara</span>
                        <span class="badge bg-label-info rounded p-2">
                            <i class="bx bx-trophy bx-sm text-info"></i>
                        </span>
                    </div>
                    <h5 class="card-title mb-1 fw-bold text-truncate text-info" style="max-width: 100%;" title="{{ $leadingCandidate ? $leadingCandidate->name : 'Belum Ada' }}">
                        {{ $leadingCandidate ? $leadingCandidate->name : 'Belum Ada' }}
                    </h5>
                    <small class="text-muted">
                        @if($leadingCandidate)
                            {{ $leadingCandidate->votes_count }} Suara ({{ $leadingCandidate->percentage }}%)
                        @else
                            Menunggu suara masuk
                        @endif
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Multi-Choice Warning Banner -->
    @if($event->max_choices > 1)
    <div class="alert alert-info d-flex align-items-center mb-4 border-0 shadow-sm" role="alert">
        <i class="bx bx-info-circle me-2 fs-4 text-info"></i>
        <div>
            Event ini mengizinkan setiap pemilih untuk memilih hingga <strong>{{ $event->max_choices }} kandidat</strong>.
            Total pilihan suara terkumpul saat ini adalah <strong>{{ $totalVotes }} suara</strong>.
        </div>
    </div>
    @endif

    <div class="row">
        <!-- Chart Visualizations -->
        <div class="col-md-12 col-12 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header d-flex align-items-center justify-content-between border-bottom pb-2">
                    <div class="card-title mb-0">
                        <h5 class="m-0 fw-bold text-primary">Visualisasi Data Suara</h5>
                    </div>
                    <ul class="nav nav-pills card-header-pills" id="chartTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active btn-sm" id="bar-tab" data-bs-toggle="tab" data-bs-target="#bar-tab-pane" type="button" role="tab" aria-controls="bar-tab-pane" aria-selected="true">
                                <i class="bx bx-bar-chart-alt-2 me-1"></i>Distribusi
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link btn-sm" id="donut-tab" data-bs-toggle="tab" data-bs-target="#donut-tab-pane" type="button" role="tab" aria-controls="donut-tab-pane" aria-selected="false">
                                <i class="bx bx-doughnut-chart me-1"></i>Proporsi
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link btn-sm" id="trend-tab" data-bs-toggle="tab" data-bs-target="#trend-tab-pane" type="button" role="tab" aria-controls="trend-tab-pane" aria-selected="false">
                                <i class="bx bx-trending-up me-1"></i>Tren Voting
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body pt-4">
                    <div class="tab-content p-0" id="chartTabsContent">
                        <!-- Bar Chart -->
                        <div class="tab-pane fade show active" id="bar-tab-pane" role="tabpanel" aria-labelledby="bar-tab" tabindex="0">
                            <div id="resultsChart" style="min-height: 380px;"></div>
                        </div>
                        <!-- Donut Chart -->
                        <div class="tab-pane fade" id="donut-tab-pane" role="tabpanel" aria-labelledby="donut-tab" tabindex="0">
                            <div id="donutChart" style="min-height: 380px;"></div>
                        </div>
                        <!-- Trend Chart -->
                        <div class="tab-pane fade" id="trend-tab-pane" role="tabpanel" aria-labelledby="trend-tab" tabindex="0">
                            @if(count($timelineData['labels']) > 0)
                                <div id="trendChart" style="min-height: 380px;"></div>
                            @else
                                <div class="d-flex flex-column align-items-center justify-content-center text-center p-5" style="min-height: 380px;">
                                    <span class="badge bg-label-secondary rounded p-4 mb-3">
                                        <i class="bx bx-trending-up fs-1 text-muted"></i>
                                    </span>
                                    <h5 class="fw-semibold mb-1">Belum Ada Data Tren</h5>
                                    <p class="text-muted mb-0">Grafik tren akan muncul secara otomatis setelah suara masuk mulai terekam.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Leaderboard -->
        <div class="col-md-12 col-12 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header border-bottom pb-3">
                    <h5 class="m-0 fw-bold text-primary">Hasil Perolehan Suara</h5>
                </div>
                <div class="card-body pt-4">
                    <div class="leaderboard-list">
                        @php $rank = 1; @endphp
                        @forelse($rankedCandidates as $candidate)
                            <div class="d-flex flex-column mb-4 pb-3 border-bottom-dashed">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex align-items-center">
                                        <!-- Rank Badge -->
                                        <div class="me-2">
                                            @if($rank == 1)
                                                <span class="badge bg-warning rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;" title="Peringkat 1">
                                                    <i class="bx bxs-crown text-white fs-5"></i>
                                                </span>
                                            @elseif($rank == 2)
                                                <span class="badge bg-secondary rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;" title="Peringkat 2">
                                                    <strong class="text-white">2</strong>
                                                </span>
                                            @elseif($rank == 3)
                                                <span class="badge rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background-color: #CD7F32 !important;" title="Peringkat 3">
                                                    <strong class="text-white">3</strong>
                                                </span>
                                            @else
                                                <span class="badge bg-label-secondary rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                                    <strong>{{ $rank }}</strong>
                                                </span>
                                            @endif
                                        </div>

                                        <!-- Photo -->
                                        <div class="avatar flex-shrink-0 me-3">
                                            @if($candidate->photo_path)
                                                <img src="{{ Storage::url($candidate->photo_path) }}" alt="Candidate" class="rounded-circle border" width="40" height="40" style="object-fit: cover;">
                                            @else
                                                <span class="avatar-initial rounded-circle bg-label-primary border"><i class="bx bx-user"></i></span>
                                            @endif
                                        </div>

                                        <!-- Name & Info -->
                                        <div>
                                            <h6 class="mb-0 fw-bold">{{ $candidate->name }}</h6>
                                            <small class="text-muted">No. Urut {{ $candidate->sort_order }} | ID: {{ $candidate->id }}</small>
                                        </div>
                                    </div>

                                    <!-- Votes & Percent -->
                                    <div class="text-end">
                                        <span class="fw-bold d-block text-primary fs-5">{{ $candidate->votes_count }}</span>
                                        <small class="text-muted">{{ $candidate->percentage }}%</small>
                                    </div>
                                </div>

                                <!-- Progress Bar -->
                                <div class="progress" style="height: 6px;">
                                    @php
                                        $barColorClass = 'bg-primary';
                                        if ($rank == 1) $barColorClass = 'bg-warning';
                                        elseif ($rank == 2) $barColorClass = 'bg-secondary';
                                        elseif ($rank == 3) $barColorClass = '';
                                    @endphp
                                    <div class="progress-bar {{ $barColorClass }} rounded" role="progressbar"
                                         style="width: {{ $candidate->percentage }}%; {{ $rank == 3 ? 'background-color: #CD7F32 !important;' : '' }}"
                                         aria-valuenow="{{ $candidate->percentage }}" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                            @php $rank++; @endphp
                        @empty
                            <div class="text-center py-4 text-muted">
                                <i class="bx bx-user-x fs-1 mb-2"></i>
                                <p>Tidak ada kandidat terdaftar.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // Theme Colors
        const primaryColor = '#2563EB';
        const warningColor = '#FFAB00';
        const infoColor = '#03C3EC';
        const successColor = '#71DD37';

        // --- 1. BAR CHART (Distribusi Suara) ---
        var barOptions = {
            series: [{
                name: 'Pilihan Suara',
                data: {!! json_encode($chartData['data']) !!}
            }],
            chart: {
                type: 'bar',
                height: 350,
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    borderRadius: 5,
                    horizontal: true,
                    barHeight: '60%',
                    distributed: true
                }
            },
            colors: ['#2563EB', '#696cff', '#03c3ec', '#71dd37', '#ff3e1d', '#ffab00', '#8592a3'],
            dataLabels: {
                enabled: true,
                textAnchor: 'start',
                style: {
                    colors: ['#fff'],
                    fontWeight: 'bold'
                },
                formatter: function (val, opt) {
                    return val + " Suara";
                },
                offsetX: 0,
            },
            xaxis: {
                categories: {!! json_encode($chartData['labels']) !!},
                labels: {
                    style: {
                        colors: '#8592a3',
                    }
                }
            },
            yaxis: {
                labels: {
                    style: {
                        colors: '#8592a3',
                        fontWeight: '600'
                    }
                }
            },
            grid: {
                borderColor: '#f1f1f1',
                xaxis: {
                    lines: {
                        show: true
                    }
                }
            },
            legend: {
                show: false
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return val + " Pilihan Suara"
                    }
                }
            }
        };

        var barChart = new ApexCharts(document.querySelector("#resultsChart"), barOptions);
        barChart.render();


        // --- 2. DONUT CHART (Proporsi Persentase) ---
        var donutOptions = {
            series: {!! json_encode($chartData['data']) !!},
            chart: {
                type: 'donut',
                height: 350,
            },
            labels: {!! json_encode($chartData['labels']) !!},
            colors: ['#2563EB', '#696cff', '#03c3ec', '#71dd37', '#ff3e1d', '#ffab00', '#8592a3'],
            stroke: {
                show: true,
                width: 2,
                colors: ['#fff']
            },
            legend: {
                position: 'bottom',
                horizontalAlign: 'center',
                labels: {
                    colors: '#8592a3'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val.toFixed(1) + "%"
                }
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return val + " Suara"
                    }
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }]
        };

        var donutChart = new ApexCharts(document.querySelector("#donutChart"), donutOptions);
        donutChart.render();


        // --- 3. TREND CHART (Akumulasi Suara Masuk) ---
        @if(count($timelineData['labels']) > 0)
        var trendOptions = {
            series: [
                {
                    name: 'Akumulasi Suara',
                    type: 'area',
                    data: {!! json_encode($timelineData['cumulative']) !!}
                },
                {
                    name: 'Kecepatan Voting (per Jam)',
                    type: 'column',
                    data: {!! json_encode($timelineData['counts']) !!}
                }
            ],
            chart: {
                height: 350,
                type: 'line',
                stacked: false,
                toolbar: {
                    show: false
                }
            },
            stroke: {
                width: [3, 0],
                curve: 'smooth'
            },
            colors: [primaryColor, infoColor],
            plotOptions: {
                bar: {
                    columnWidth: '50%',
                    borderRadius: 3
                }
            },
            fill: {
                opacity: [0.15, 0.75],
                gradient: {
                    inverseColors: false,
                    shade: 'light',
                    type: "vertical",
                    opacityFrom: 0.4,
                    opacityTo: 0.15,
                    stops: [0, 90, 100]
                }
            },
            labels: {!! json_encode($timelineData['labels']) !!},
            markers: {
                size: 4,
                colors: [primaryColor],
                strokeColors: '#fff',
                strokeWidth: 2,
            },
            xaxis: {
                type: 'category',
                labels: {
                    style: {
                        colors: '#8592a3',
                    }
                }
            },
            yaxis: [
                {
                    title: {
                        text: 'Akumulasi Suara',
                        style: {
                            color: primaryColor,
                            fontWeight: '600'
                        }
                    },
                    labels: {
                        style: {
                            colors: primaryColor,
                        }
                    }
                },
                {
                    opposite: true,
                    title: {
                        text: 'Suara per Jam',
                        style: {
                            color: infoColor,
                            fontWeight: '600'
                        }
                    },
                    labels: {
                        style: {
                            colors: infoColor,
                        }
                    }
                }
            ],
            tooltip: {
                shared: true,
                intersect: false,
                y: {
                    formatter: function (y) {
                        if (typeof y !== "undefined") {
                            return y + " Suara";
                        }
                        return y;
                    }
                }
            },
            legend: {
                position: 'top',
                horizontalAlign: 'right',
                labels: {
                    colors: '#8592a3'
                }
            }
        };

        var trendChart = new ApexCharts(document.querySelector("#trendChart"), trendOptions);
        trendChart.render();
        @endif

        // Fix ApexCharts render inside Bootstrap tabs
        var tabButtons = document.querySelectorAll('button[data-bs-toggle="tab"]');
        tabButtons.forEach(function(button) {
            button.addEventListener('shown.bs.tab', function (event) {
                // Trigger window resize event to force ApexCharts redraw and size properly
                window.dispatchEvent(new Event('resize'));
            });
        });
    });
</script>
@endpush