@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        /* Table styling for alignment */
        #voteTable td.title {
            color: #007bff;
            font-weight: bold;
            text-align: left;
            padding-right: 5px;
        }

        #voteTable td.separator {
            text-align: center;
            width: 10px;
        }

        #voteTable td.count {
            color: #6c757d;
            text-align: right;
            white-space: nowrap;
        }

        .option-label {
            transition: transform 0.3s, background-color 0.3s;
        }

        /* Selected effect */
        .btn-check:checked+.option-label {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }

        /* Custom checkmark */
        .checkmark-container {
            display: none;
        }

        .custom-checkmark {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 10%;
            background-color: yellowgreen;
            color: white;
            font-size: 16px;
            text-align: center;
            line-height: 24px;
            font-weight: bold;
        }

        /* Show checkmark when selected */
        .btn-check:checked+.option-label .checkmark-container {
            display: block;
        }

        .custom-checkmark::after {
            content: "✔";
        }
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card shadow-lg">
                        <div class="card-header text-white">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg d-flex justify-content-start">
                                {{-- button back --}}
                                <button class="btn btn-secondary mb-0" onclick="history.back()">
                                    <i class="fas fa-arrow-left me-1"></i> Kembali
                                </button>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <h2 class="text-primary text-center">Results Of Voting {{ $voting[0]->title }}</h2>
                            <h5 class="text-primary text-center">{{ $voting[0]->description }}</h5>

                            <div class="col-lg-8 text-center d-flex flex-column align-items-center mt-4">
                                <canvas id="votePieChart" style="max-width: 500px; max-height: 500px;"
                                    class="my-4"></canvas>
                            </div>
                            <div class="col-lg-4 d-flex flex-column align-items-start justify-content-center">
                                <div class="image-container mb-3">
                                    <img src="{{ asset('/storage' . '/' . $voting[0]->options) }}" alt="Voting Option Image"
                                        class="img-fluid rounded shadow"
                                        style="width: 100%; max-width: 250px; border: 2px solid #ddd;">
                                </div>
                                <h3 class="text-secondary">Vote Breakdown</h3>
                                <table class="table table-borderless mt-3" style="width: 100%;" id="voteTable">
                                    {{-- Table rows will be populated here --}}
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
<div class="row mt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row justify-content-center g-3">
                    @foreach ($list as $data)
                        <!-- Card -->
                        <div class="col-md-4 position-relative">
                            <div class="card h-100 text-center option-card">
                                <label
                                    class="btn btn-outline-primary w-100 h-100 d-flex flex-column align-items-center p-3 option-label"
                                    for="{{ $data->id }}">
                                    <img src="{{ asset('/storage' . '/' . $data->images) }}" class="img-fluid mb-2"
                                        alt="Option {{ $data->id }}">
                                    <span class="fw-bold fs-5">Pilihan {{ $data->title }}</span>
                                    <p class="mt-1 option-label">{{ $data->description }}</p>
                                </label>
                                <!-- Button to Toggle Voter List -->
                                <button class="btn btn-primary mt-3" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#votersList{{ $data->id }}" aria-expanded="false"
                                    aria-controls="votersList{{ $data->id }}">
                                    Show Users who voted
                                </button>
                            </div>
                            <!-- Collapsible Voter List -->
                            <div class="collapse position-absolute bg-white p-3 border rounded shadow"
                                style="z-index: 10; width: 90%; top: 100%; left: 5%;" id="votersList{{ $data->id }}">
                                <div class="d-flex flex-wrap">
                                    @php

                                        $users = DB::table("tr_voting")
                                            ->join("users", "users.id","=","tr_voting.id_user")
                                            ->where("id_option",$data->id)
                                            ->where("tr_voting.isactive","1")
                                            ->get();

                                        // dd($data,$users);

                                        // Dummy users data
                                        // $users = [
                                        //     ['name' => 'John Doe', 'email' => 'john.doe@example.com'],
                                        //     ['name' => 'Jane Smith', 'email' => 'jane.smith@example.com'],
                                        //     ['name' => 'Alice Brown', 'email' => 'alice.brown@example.com'],
                                        //     ['name' => 'Bob Davis', 'email' => 'bob.davis@example.com'],
                                        //     ['name' => 'Lisa White', 'email' => 'lisa.white@example.com'],
                                        // ];
                                    @endphp
                                    @foreach ($users as $user)

                                        <div class=" border rounded p-2 me-3 mb-2 bg-light text-dark small" style="min-width: 50px;">
                                            {{ $user->username }}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>









    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

    <script>
        // Data from your PHP array
        var voteData = @json($result);
        const listData = @json($list);

        // Generate color mapping by id
        const colorMapping = {};
        voteData.forEach(item => {
            colorMapping[item.id] = getRandomColor();
        });

        // Generate random color function
        function getRandomColor() {
            const r = Math.floor(Math.random() * 150); // Red in range 0-100
            const g = Math.floor(Math.random() * 150); // Green in range 0-100
            const b = Math.floor(Math.random() * 150); // Blue in range 0-100
            return `rgba(${r}, ${g}, ${b}, 0.6)`; // Slight transparency
        }


        // Prepare data for the chart
        const labels = voteData.map(item => item.title);
        const votes = voteData.map(item => item.vote);
        const backgroundColors = voteData.map(item => colorMapping[item.id]);
        const borderColors = backgroundColors.map(color => color.replace('0.6', '1')); // Make borders solid

        // Populate the vote table with colors
        const voteTable = document.getElementById('voteTable');
        voteData.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="title" colspan="2" style="color: ${colorMapping[item.id]}">${item.title}</td>
                <td class="separator">:</td>
                <td class="count">${item.vote}</td>
            `;
            voteTable.appendChild(row);
        });

        // Create the pie chart
        const ctx = document.getElementById('votePieChart').getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Votes',
                    data: votes,
                    backgroundColor: backgroundColors,
                    borderColor: borderColors,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#333',
                            font: {
                                size: 14,
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                const totalVotes = votes.reduce((acc, curr) => acc + curr, 0);
                                const currentValue = votes[tooltipItem.dataIndex];
                                const percentage = ((currentValue / totalVotes) * 100).toFixed(2);
                                return `${labels[tooltipItem.dataIndex]}: ${currentValue} (${percentage}%)`;
                            }
                        }
                    },
                    datalabels: {
                        formatter: (value, context) => {
                            const totalVotes = votes.reduce((acc, curr) => acc + curr, 0);
                            const percentage = ((value / totalVotes) * 100).toFixed(2);
                            return `${percentage}%`;
                        },
                        color: '#fff',
                        font: {
                            size: 12,
                            weight: 'bold'
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });

        // Apply colors to option cards
        listData.forEach(data => {
            const optionLabel = document.querySelector(`label[for="${data.id}"]`);
            if (optionLabel && colorMapping[data.id]) {
                optionLabel.style.backgroundColor = colorMapping[data.id].replace('0.6', '1'); // Apply the color
                optionLabel.style.color = 'white'; // Optional: Make text white for contrast
                optionLabel.style.borderColor = colorMapping[data.id].replace('0.6', '1');
            }
        });
    </script>
@endpush