@extends('backend.layouts.app')
@section('content')
    <div class="aiz-main-content aiz-titlebar ">
        <div class="row mb-3">
            <div class="col-12">
                <h1 class="h3">Keywords - Searched : <span style="color:#eb1a23 ">{{ 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">
                            Search List
                        </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="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>Clicked Search Results -CTR</th>
                                            <th>Date</th>
                                            <th>Time</th>
                                        </tr>
                                    </thead>
                                    <tbody id="searchPage">
                                        @if ($search_users->count() > 0)
                                            @foreach ($search_users as $k => $data)
                                                <tr>
                                                    <td class="text-center">1</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->name ?? $data->ip_address) }}</p>
                                                        </div>
                                                    </td>
                                                    <td style="white-space: nowrap">
                                                        Yes
                                                    </td>
                                                    <td style="white-space: nowrap">
                                                        {{ $data->created_at ? $data->created_at->format('Y-d-m') : 'N/A' }}
                                                    </td>
                                                    <td style="white-space: nowrap">
                                                        {{ $data->created_at ? $data->created_at->format('h:i:s A') : 'N/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>
                                                </td>
                                            </tr>
                                        @endif

                                    </tbody>
                                </table>
                            </div>
                            <div class="aiz-pagination">
                                <div class="perPage">
                                    Total Keyword(s): <strong>--</strong>
                                </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();
                    let url = new URL(window.location.href);
                    url.searchParams.set('year', selectedYear);
                    window.location.href = url.toString();
                });

            });
        </script>

    @endsection