@extends('backend.layouts.app')
@section('content')
    <style>
        :root {
            --star-size: 25px;
            --star-color: #fff;
            --star-background: #fc0;
        }

        .Stars {
            --percent: calc(var(--rating) / 5 * 100%);

            display: inline-block;
            font-size: var(--star-size);
            font-family: Times; // make sure ★ appears correctly
            line-height: 1;

            &::before {
                content: '★★★★★';
                letter-spacing: 3px;
                background: linear-gradient(90deg, #ffcd06 var(--percent), #c1b2b2 var(--percent));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        // Just to make a preview more beautifull

        body {
            background: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        * {
            position: relative;
            box-sizing: border-box;
        }
    </style>
    <div class="aiz-main-content aiz-titlebar ">
        <div class="row mb-3">
            <div class="col-12">
                <h1 class="h3">Keywords - User Rating <span style="color:#eb1a23 "> :
                        {{ ucwords($key_words->name) }}</span> </h1>
            </div>
            <div class="col-12 mt-4">
                <div class="Keyword-Outer-div">
                    <div class="Keyword-Filter-div">
                        <div class="Keyword-Heading">
                            Categories
                        </div>
                        <div>
                            <div class="Keyword-Select-div">
                                <div class="form-group m-0">
                                    <select class="form-control Keyword-select-style" id="exampleFormControlSelect1">
                                        <option>This year</option>
                                        <option>2024</option>
                                        <option>2023</option>
                                        <option>2022</option>
                                        <option>2021</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        @php
                            // Group data by sector and calculate total categories per sector
                            $groupedData = $key_ranking_grouped
                                ->groupBy('sector_name')
                                ->map(function ($group) {
                                    return [
                                        'total_categories' => $group->sum('total_categories'),
                                        'data' => $group,
                                    ];
                                })
                                ->sortByDesc('total_categories')
                                ->take(5);
                        @endphp

                        @if ($groupedData->count() > 0)
                            @foreach ($groupedData as $sectorName => $sectorData)
                                @php
                                    $group = $sectorData['data']; // Get original data for this sector
                                    $sectorLabels = $group->sortByDesc('total_categories')->pluck('cat_name')->take(5);
                                    $sectorCounts = $group
                                        ->sortByDesc('total_categories')
                                        ->pluck('average_rating')
                                        ->take(5);

                                    // Calculate total and average rating per keyword
                                    $keywordRatings = $group->groupBy('keyword_name')->map(function ($keywords) {
                                        $totalRating = $keywords->sum('rating'); // Sum of all ratings
                                        $maxPossibleRating = $keywords->count() * 5; // Assuming rating is out of 5
                                        $averageRating =
                                            $maxPossibleRating > 0
                                                ? round(($totalRating / $maxPossibleRating) * 5, 2)
                                                : 0;

                                        return [
                                            'total_rating' => $totalRating,
                                            'average_rating' => $averageRating,
                                        ];
                                    });
                                @endphp

                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="Keyword-Graph-BG">
                                        <div class="Keyword-Filter-div">
                                            <div class="Keyword-Select-title ">
                                                <div class="d-flex">
                                                    <p class="Keyword-category-label">{{ ucwords($sectorName) }}</p>
                                                    <!-- <p class="Keyword-category-Name">&nbsp {{ $group->sum('total_categories') }}</p> -->
                                                </div>


                                                @foreach ($keywordRatings as $keyword => $ratings)
                                                    <div class="Stars" style="--rating: {{ $ratings['average_rating'] }};"
                                                        aria-label="Rating of this product is 2.3 out of 5.">
                                                    </div>
                                                @endforeach

                                            </div>
                                            <div class="Keyword-Increase">
                                                <img src="{{ url('public/assets/img/incrase-keyword.svg') }}"
                                                    alt="">
                                                <span>11.2%</span>
                                            </div>
                                        </div>

                                        <div class="mt-4">
                                            <div id="Piechart-{{ Str::slug($sectorName, '-') }}"></div>
                                            <ul id="labels-list-{{ Str::slug($sectorName, '-') }}"></ul>
                                        </div>


                                    </div>

                                    <script>
                                        document.addEventListener("DOMContentLoaded", function() {
                                            var sectorLabels = @json($sectorLabels);
                                            var sectorCounts = @json($sectorCounts);
                                            var chartId = "Piechart-{{ Str::slug($sectorName, '-') }}";
                                            var listId = "labels-list-{{ Str::slug($sectorName, '-') }}";

                                            var options = {
                                                series: sectorCounts,
                                                chart: {
                                                    width: 380,
                                                    type: 'pie',
                                                    events: {
                                                        mounted: function(ctx) {
                                                            // When the chart is mounted, build the custom legend.
                                                            addCustomLegend(ctx.w.globals.colors);
                                                        }
                                                    }
                                                },
                                                labels: sectorLabels,
                                                legend: {
                                                    show: false // Hide default legend
                                                },
                                                responsive: [{
                                                    breakpoint: 480,
                                                    options: {
                                                        chart: {
                                                            width: 200
                                                        }
                                                    }
                                                }]
                                            };

                                            var chart = new ApexCharts(document.querySelector("#" + chartId), options);
                                            chart.render();

                                            function addCustomLegend(colors) {
                                                const listContainer = document.getElementById(listId);
                                                listContainer.innerHTML = ""; // Clear previous content

                                                sectorLabels.forEach((label, index) => {
                                                    const listItem = document.createElement('li');
                                                    listItem.style.width = "70%";
                                                    listItem.style.display = "flex";
                                                    listItem.style.justifyContent = "space-between";
                                                    listItem.style.alignItems = "center";
                                                    listItem.style.padding = "4px 12px";
                                                    // listItem.style.border = "1px solid #ddd";
                                                    // listItem.style.borderRadius = "5px";
                                                    // listItem.style.marginBottom = "5px";
                                                    listItem.style.cursor = "pointer";
                                                    listItem.style.transition = "background 0.3s ease-in-out";

                                                   
                                                    const colorCircle = document.createElement('span');
                                                    colorCircle.style.display = "inline-block";
                                                    colorCircle.style.width = "12px";
                                                    colorCircle.style.height = "12px";
                                                    colorCircle.style.borderRadius = "50%";
                                                    colorCircle.style.marginRight = "8px";
                                                    colorCircle.style.backgroundColor = colors[index]; 

                                                    
                                                    const labelContainer = document.createElement('div');
                                                    labelContainer.style.display = "flex";
                                                    labelContainer.style.alignItems = "center";
                                                    labelContainer.appendChild(colorCircle);

                                                    const labelSpan = document.createElement('span');
                                                    labelSpan.textContent = label;
                                                    labelContainer.appendChild(labelSpan);

                                                    // Value on the right (Bold)
                                                    const valueSpan = document.createElement('span');
                                                    valueSpan.textContent = sectorCounts[index];
                                                    valueSpan.style.fontWeight = "bold";

                                                    listItem.appendChild(labelContainer);
                                                    listItem.appendChild(valueSpan);

                                                    // Highlight the corresponding pie section and dim others
                                                    listItem.addEventListener("mouseenter", () => {
                                                        const slices = document.querySelectorAll("#" + chartId +
                                                            " .apexcharts-slice");
                                                        slices.forEach((slice, i) => {
                                                            slice.style.opacity = (i === index) ? "1" : "0.3";
                                                        });
                                                    });

                                                    listItem.addEventListener("mouseleave", () => {
                                                        // Reset all slices to full opacity
                                                        const slices = document.querySelectorAll("#" + chartId +
                                                            " .apexcharts-slice");
                                                        slices.forEach(slice => {
                                                            slice.style.opacity = "1";
                                                        });
                                                    });

                                                    listContainer.appendChild(listItem);
                                                });
                                            }
                                        });
                                    </script>
                                </div>
                            @endforeach
                        @endif

                    </div>
                </div>
            </div>
            <div class="col-12 mt-4">
                <div class="Keyword-Outer-div">
                    <div class="Keyword-Filter-div">
                        <!-- <div class="Keyword-Heading">
                                                    Search List
                                                </div> -->
                        <div>
                            <div class="Keyword-Select-div">
                                <div class="form-group m-0">
                                    <select class="form-control Keyword-select-style" id="exampleFormControlSelect1">
                                        <option>This year</option>
                                        <option>2024</option>
                                        <option>2023</option>
                                        <option>2022</option>
                                        <option>2021</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="admin-table table-freezed " id="table_list">
                            <div class="table-responsive ">
                                <table class="table m-0">
                                    <thead>
                                        <tr>
                                            <th width="4%" class="text-center">S.No.</th>
                                            <th>Username</th>
                                            <th>Category</th>
                                            <th>Sector</th>
                                            <th>Rating</th>
                                            <th>Date</th>
                                            <th>Time</th>
                                        </tr>
                                    </thead>
                                    <tbody id="searchPage">

                                        @if ($key_ranking_all->count() > 0)
                                            @foreach ($key_ranking_all as $key => $data)
                                                <tr>
                                                    <td class="text-center">
                                                        {{ $key + 1 + ($key_ranking_all->currentPage() - 1) * $key_ranking_all->perPage() }}
                                                    </td>
                                                    <td style="white-space: nowrap">
                                                        <div class="d-flex">
                                                            <div class="proThumbimg"><img class="img-fluid"
                                                                    src="{{ $data->file_name ?? '' }}"> </div>
                                                            <p class="m-0">
                                                                {{ ucwords($data->user_name ?? $data->ip_address) }}</p>
                                                        </div>
                                                    </td>
                                                    <td style="white-space: nowrap"id=" {{ $data->cat_id }}">

                                                        {{ ucwords($data->cat_name) }}
                                                    </td>
                                                    <td style="white-space: nowrap"id="{{ $data->parent_sector_id }}">
                                                        {{ ucwords($data->sector_name) }}
                                                    </td>
                                                    <td style="white-space: nowrap">

                                                        <div class="Stars" style="--rating: {{ $data->rating }};"
                                                            aria-label="Rating of this product is 2.3 out of 5.">
                                                    </td>
                                                    <td style="white-space: nowrap">
                                                        {{ $data->created_at->format('Y-m-d') }}

                                                    </td>
                                                    <td style="white-space: nowrap">
                                                        {{ $data->created_at->format('H:i:s A') }}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr class="no-data">
                                                <td colspan="50">
                                                    <div class="nodata-col">
                                                        <i
                                                            class="icons @if (!empty(request()->search)) icon-no-data @else icon-no-items @endif"></i>
                                                        <h1>
                                                            @if (!empty(request()->search))
                                                                No result found
                                                            @else
                                                                No data found
                                                            @endif
                                                        </h1>
                                                    </div>
                                            </tr>
                                        @endif

                                    </tbody>
                                </table>
                            </div>
                            <div class="aiz-pagination">
                                <div class="perPage">
                                    Total Keyword(s): <strong>{{ $total_all }}</strong>
                                </div>
                                {{ $key_ranking_all->appends(request()->input())->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

@endsection