@extends('frontend.layout.main')
@section('main-container')
    @include('frontend.BusinessProfileCreate.profileTop')
    <style>
        .customPosition {
            position: absolute;
            bottom: 0px
        }

        .graphsection {
            position: relative;
        }

        .text-bold {
            font-weight: bold;
            font-size: 30px;
        }

        #dash-list::before {
            background: #05478d;
        }

        #blogCount::before {
            background: #0598c5;
        }

        #symbol {
            display: none;
        }
    </style>
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <!-- Pass PHP data to JavaScript in a hidden script tag -->
    <script id="monthly-clicks-data" type="application/json">
        {!! json_encode($monthlyClicks) !!}
    </script>
    <script>
        $(document).ready(function() {
            var monthlyClicks = JSON.parse(document.getElementById('monthly-clicks-data').textContent);


            console.log('[100, 150, 220, 180, 250, 120, 170, 210, 190, 230, 160, 190]');
            // Replace with your actual monthly user data (adjust data as needed)
            var monthlyUserData = {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Number of Total Clicks",
                    data: monthlyClicks,
                    backgroundColor: '#0062cc',
                    borderColor: '#0062cc',
                }]
            };
            // '[100, 150, 220, 180, 250, 120, 170, 210, 190, 230, 160, 190]'
            // {{ json_encode($monthlyClicks) }}
            var ctx = document.getElementById('chartContainer').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: monthlyUserData,
                options: {
                    scales: {
                        x: {
                            stacked: false,
                            barThickness: 50,
                            minBarLength: 0
                        },
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    title: {
                        display: true,
                        text: "Number of Total Clicks Per Month (Static)"
                    }
                }
            });

            // Gauge chart data (using Plotly)
            var data = [{
                domain: {
                    x: [0, 1],
                    y: [0, 1]
                },
                value: '{{ $todayTotal }}',
                title: {
                    text: "Today Clicks"
                },
                type: "indicator",
                mode: "gauge+number",
                gauge: {
                    axis: {
                        range: [0, 100],
                        tickvals: [0, 25, 50, 75, 100],
                        ticktext: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
                    },
                    bar: {
                        color: "#0062cc"
                    }
                }
            }];

            var layout = {
                width: 300,
                height: 200,
                margin: {
                    t: 0,
                    b: 0
                }
            };

            Plotly.newPlot('myDiv', data, layout);
        });
    </script>

    <section class="mb-5 mt-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-4 col-6 mb-4">
                    <div class="dash-header-right">
                        <div class="dash-focus dash-list" id="dash-list">
                            <h2>{{ $businessProfile->bus_profile_count }}</h2>
                            <p>Total Clicks</p>
                        </div>

                    </div>
                </div>
                <div class="col-md-4 col-6 mb-4">
                    <div class="dash-header-right">
                        <div class="dash-focus dash-book">
                            <h2>{{ $currentMonthTotal }}</h2>
                            <p>New Users Current Month</p>
                        </div>

                    </div>
                </div>
                <div class="col-md-4 col-6 mb-4">
                    <div class="dash-header-right">
                        <div class="dash-focus dash-rev">
                            <h2>{{ $RealTimeUsers }}</h2>
                            <p>Real Time Users</p>
                        </div>

                    </div>
                </div>
                <div class="col-md-4 col-6">
                    <div class="dash-header-right">
                        <div class="dash-focus dash-list">
                            <h2>{{ $serviceCount }}</h2>
                            <p>Service Clicks</p>
                        </div>

                    </div>
                </div>
                <div class="col-md-4 col-6">
                    <div class="dash-header-right">
                        <div class="dash-focus dash-list" id="blogCount">
                            <h2>{{ $BlogCount }}</h2>
                            <p>Blog Clicks</p>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="graphsection mt-5 mb-5">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <canvas id="chartContainer" style="height: 300px; width: 100%;"></canvas>
                </div>
                <div class="col-4">
                    <div class="customPosition">
                        <div id='myDiv'></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                  <div class="table-scroll">
                      <table class="table table-bordered table-striped table-list">
                          <thead class="thead-dark">
                              <tr>
                                  <th scope="col">Service Name</th>
                                  <th scope="col">Clicks</th>
                              </tr>
                          </thead>
                          <tbody>
                              @php
                                  $totalClicks = 0;
                              @endphp
                              @foreach ($serviceListing as $ad)
                                  <tr>
                                      <td class="table-number">
                                          <h6>{{ $ad->title }}</h6>
                                      </td>
                                      <td class="table-number">
                                          <h6>{{ $ad->count }}</h6>
                                          @php
                                              $totalClicks += $ad->count;
                                          @endphp
                                      </td>
                                  </tr>
                              @endforeach
                          </tbody>
                          <tfoot>
                              <tr>
                                  <th scope="col">Total Clicks</th>
                                  <th scope="col">{{ $totalClicks }}</th>
                              </tr>
                          </tfoot>
                      </table>
                  </div>
              </div>
            
              <div class="col-md-6">
                <div class="table-scroll">
                    <table class="table table-bordered table-striped table-list">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">Blog Name</th>
                                <th scope="col">Clicks</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $totalClicks = 0;
                            @endphp
                            @foreach ($blogListing as $blog)
                                <tr>
                                    <td class="table-number">
                                        <h6>{{ $blog->b_title }}</h6>
                                    </td>
                                    <td class="table-number">
                                        <h6>{{ $blog->count }}</h6>
                                        @php
                                            $totalClicks += $blog->count;
                                        @endphp
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th scope="col">Total Clicks</th>
                                <th scope="col">{{ $totalClicks }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            </div>
        </div>
    </section>
@endsection