@extends('backend.layouts.app')
@section('content')
    <style>
        a#key_wordrating {
            font-size: 16px;
        }

        :root {
            --star-size: 30px;
            --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-Overview : <span style="color:#d7282f ">{{ ucwords($key_wordname) }}</span></h1>
            </div>
            <div class="col-12 mt-4">
                <div class="Keyword-Outer-div">
                    <div class="Keyword-Heading">
                        Search Volume
                    </div>
                    <div class="Keyword-Graph-BG">
                        <div class="Keyword-Filter-div">
                            <div class="Keyword-Select-Filter">
                                <div>
                                    <i class="icons icon-location1 locationIcon"></i>
                                </div>
                                <div class="Keyword-Select-div">
                                    <div class="form-group m-0">
                                        <select class="form-control Keyword-select-style" id="exampleFormControlSelect1">
                                            <option>India</option>
                                            <option>USA</option>
                                            <option>Afganistan</option>
                                            <option>United Kingdom</option>
                                            <option>United Arab Emirates</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="Keyword-Select-Filter">
                                <div class="Keyword-Select-div">
                                    <div class="form-group m-0">
                                        <select class="form-control Keyword-select-style" id="yearly_filter" name="year">
                                            <option value="{{ now()->year }}" selected>This Year ({{ now()->year }})
                                            </option>
                                            @for ($i = 1; $i <= 5; $i++)
                                                <option value="{{ now()->year - $i }}"
                                                    {{ request('year') == now()->year - $i ? 'selected' : '' }}>
                                                    {{ now()->year - $i }}
                                                </option>
                                            @endfor
                                        </select>


                                    </div>
                                </div>
                                <div>
                                    <button class="download-graph-data btn">
                                        Save Report
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div id="chart"></div>
                        </div>
                    </div>
                </div>
            </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="yearly_filter" name="year">
                                        <option value="{{ now()->year }}" selected>This Year ({{ now()->year }})
                                        </option>
                                        @for ($i = 1; $i <= 5; $i++)
                                            <option value="{{ now()->year - $i }}"
                                                {{ request('year') == now()->year - $i ? 'selected' : '' }}>
                                                {{ now()->year - $i }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        @php
                            // Group data by sector and calculate total categories per sector
                            $groupedData = $key_ranking
                                ->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="row">
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <div class="Keyword-Graph-BG keyword-cards m-0" id="rating_box">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/rating.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">Rating</p>
                                <div>
                                    <div class="Stars" style="--rating: {{ $overall_avg_rating }};"
                                        aria-label="Rating of this product is 2.3 out of 5.">({{ $overall_avg_rating }})
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <a href="{{ url('admin/keyword_linked_products') }}/{{$key}}"><div class="Keyword-Graph-BG keyword-cards m-0">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/prod-icon.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">Product</p>
                                <div>
                                    <p class="Keyword-data">
                                        
                                    
                                    {{ $total_products }}</p>
                                </div>
                            </div></a>
                            
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <div class="Keyword-Graph-BG keyword-cards m-0">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/seller-icon.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">Seller Adoption Rate</p>
                                <div>
                                    <p class="Keyword-data">{{ $percentage_usage }}%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-3">
                            <div class="Keyword-Graph-BG keyword-cards m-0">
                                <div class="Keyword-Img-div">
                                    <img src="{{ url('public/assets/img/search-icon.svg') }}" alt="">
                                </div>
                                <p class="Keyword-Img-heading">
                                    Search To Click Rate (CTR)
                                </p>
                                <div>
                                    <p class="Keyword-data">{{ $click_rate }}%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        var searchData = @json($search_count);

        var monthlyData = new Array(12).fill(0);

        searchData.forEach(function(item) {
            var monthIndex = item.month - 1;
            monthlyData[monthIndex] = item.total_searched;
        });

        var options = {
            series: [{
                name: 'Search Count',
                data: monthlyData
            }],
            chart: {
                height: 350,
                type: 'area'
            },
            dataLabels: {
                enabled: true
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                labels: {
                    rotate: -45
                }
            },
            yaxis: {
                min: 0,
                labels: {
                    formatter: function(value) {
                        return value.toLocaleString();
                    }
                }
            },
            grid: {
                show: false
            },
            tooltip: {
                x: {
                    formatter: function(value) {
                        return value;
                    }
                }
            }
        };


        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
        $(document).ready(function() {
            $('#yearly_filter').on('change', function() {
                let selectedYear = $(this).val(); // Get selected value
                let url = new URL(window.location.href); // Get current URL
                url.searchParams.set('year', selectedYear); // Update query parameter
                window.location.href = url.toString(); // Reload page with updated URL
            });

        });
    </script>

@endsection