@extends('adminlte::page')

@section('title', 'More Classy Admin Dashboard')

@section('content_header')
    <h1>
        <i class="fa fa-fw fa-tachometer-alt" style="color: #F44D01"></i>
        {{ $vendor['name'] }} General Analytics
    </h1>
@stop

@section('content')
    <p>Hello <strong>{{ $admin['name'] }}</strong>! <br /> Welcome to {{ $vendor['name'] }} Information Management System admin panel.</p>
    {{-- <hr/> --}}
    <br />

    {{-- Locations --}}
    <div class="container">
        {{-- <div class="row">
            <div class="col-12">
                <div id="weekly_stores_output" style="margin-bottom: 1em;" class="chart-display"></div>
                <hr/>
            </div>
        </div> --}}
        {{-- pu2023-pie-chart --}}
        <div class="row">
            <div class="col-6">
                <div id="pu2023-pie-chart" style="width: 600px; height: 500px"></div>
            </div>
        {{-- </div>
        <div class="row"> --}}
            <div class="col-6">
                <div id="2023listings-pie-chart" style="width: 600px; height: 500px"></div>
                {{-- listings-per-week-pie-chart --}}
                {{-- <div id="listings-per-week-pie-chart" style="width: 400px; height: 500px"></div> --}}
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <div id="pie-chart" style="width: 600px; height: 500px"></div>
            </div>
        {{-- </div>
        <div class="row"> --}}
            <div class="col-6">
                <div id="listings-pie-chart" style="width: 600px; height: 500px"></div>
                {{-- listings-per-week-pie-chart --}}
                {{-- <div id="listings-per-week-pie-chart" style="width: 400px; height: 500px"></div> --}}
            </div>
        </div>

        {{--  --}}
        <div class="row">
            <div class="col-6">
                <div id="sellers-pie-chart" style="width: 600px; height: 500px"></div>
            </div>
        {{-- </div>
        <div class="row"> --}}
            <div class="col-6">
                <div id="buyers-pie-chart" style="width: 600px; height: 500px"></div>
            </div>
        </div>

        {{-- banners-pie-chart --}}
        <div class="row">
            <div class="col-6">
                <div id="banners-pie-chart" style="width: 600px; height: 500px"></div>
            </div>
        {{-- </div>
        <div class="row"> --}}
            <div class="col-6">
                <div id="blogs-pie-chart" style="width: 600px; height: 500px"></div>
            </div>
        </div>

        <hr/>

        <h2><small>{{ $vendor['name'] }} Locations.</small></h2>
        <hr/>
        <div class="row">
            <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $location['countries'] }}" text="Countries" icon="fas fa-lg fa-globe text-orange" icon-theme="white"/>
            </div>
            <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $location['regions'] }}" text="Regions" icon="fas fa-lg fa-map text-orange" icon-theme="white"/>
            </div>
            <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $location['places'] }}" text="Places" icon="fas fa-lg fa-location-arrow text-orange" icon-theme="white"/>
            </div>
            <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $location['areas'] }}" text="Areas" icon="fas fa-lg fa-street-view text-orange" icon-theme="white"/>
            </div>
        </div>
    </div>

    <div class="container">
        <br/>
        <h2><small>{{ $vendor['name'] }} Marketplace.</small></h2>
        <hr/>
        <div class="row">
            <div class="col-lg-4 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $categories; }}" text="Categories" icon="fas fa-lg fa-list text-orange" icon-theme="white"/>
            </div>
            <div class="col-lg-4 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $listings; }}" text="Listings" icon="fas fa-lg fa-shopping-bag text-orange" icon-theme="white"/>
            </div>
            {{-- <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $vendors; }}" text="Sellers" icon="fas fa-lg fa-users text-orange" icon-theme="white"/>
            </div> --}}
            <div class="col-lg-4 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $stores; }}" text="Stores" icon="fas fa-lg fa-shopping-basket text-orange" icon-theme="white"/>
            </div>
            {{-- <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $enquiries; }}" text="Enquiries" icon="fas fa-lg fa-envelope text-orange" icon-theme="white"/>
            </div> --}}
        </div>
    </div>
    <br/>

    {{-- Users:  --}}
    <div class="container">
        <h2><small>{{ $vendor['name'] }} Users.</small></h2>
        <hr/>
        <div class="row">
            <div class="col-lg-4 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $admins }}" text="Administrators" icon="fas fa-lg fa-globe text-orange" icon-theme="white"/>
            </div>
            <div class="col-lg-4 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $sellers }}" text="Sellers" icon="fas fa-lg fa-map text-orange" icon-theme="white"/>
            </div>
            <div class="col-lg-4 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $buyers }}" text="Buyers" icon="fas fa-lg fa-location-arrow text-orange" icon-theme="white"/>
            </div>
            {{-- <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $location['areas'] }}" text="Areas" icon="fas fa-lg fa-street-view text-orange" icon-theme="white"/>
            </div> --}}
        </div>
    </div>


    {{-- Users:  --}}
    <div class="container">
        <h2 style="text-align:center;"><small>More Classifieds Agency Weekly Preview</small></h2>
        <hr/>
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-md-12">
                <h5 class="card-header">Weekly New Stores Registered</h5>
                <hr/>
                
                <table id="weekly_stores_tbl" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Verified</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            {{-- <th>OTP</th> --}}
                            <th>Registration Date</th>
                            {{-- <th>Action</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($weekly_new_sellers as $u)
                            {{-- @if ($u['user_id'] = 1) --}}
                                <tr>
                                    <td>
                                        <input type="checkbox" name="adm_id_{{ $u->id }}" value="{{ $u->id; }}" />
                                    </td>
                                    <td>
                                        @if ($u->verification_status === 'verified')
                                            <span class="badge badge-success">
                                                <i class="fa fa-check"></i>
                                            </span>
                                        @else
                                            <span class="badge badge-danger">
                                                <i class="fa fa-times"></i>
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $u->name; }}
                                    </td>
                                    <td>{{ $u->email; }}</td>
                                    <td>{{ $u->phone; }}</td>
                                    {{-- <td>{{ $u->otp; }}</td> --}}
                                    <td>{{ $u->created_at; }}</td>
                                </tr>
                            {{-- @endif --}}
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-md-12">
                <h5 class="card-header">Weekly New Ad Listings</h5>
                <hr/>
                {{-- listings_tbl --}}
                <table id="listings_tbl" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            {{-- <th>Image</th> --}}
                            <th>Ad Type</th>
                            <th>Title</th>
                            <th>Status</th>
                            <th>Price(KES.)</th>
                            {{-- <th>Location</th> --}}
                            {{-- <th>Action</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($weekly_listings as $ad)
                            <tr>
                                <td>
                                    <input type="checkbox" name="ad_id_{{ $ad->id }}" value="{{ $ad->id; }}" />
                                </td>
                                {{-- <td>
                                    
                                    @if ($ad['pictures'] != null)
                                        <img src="/{{ $ad['pictures'][0]['filename'] }}" alt="{{ $ad['title'] }}" width="50">
                                    @else
                                        <img src="/more/media/prod_1.jpeg" alt="{{ $ad['title'] }}" width="50">
                                    @endif
                                </td> --}}
                                <td>{{ $ad->ad_type; }}</td>
                                <td>{{ $ad->title; }}</td>
                                <td>
                                    @if ($ad->approved)
                                        <span class="badge badge-pill badge-success">APPROVED</span>
                                    @else
                                        <span class="badge badge-pill badge-danger">NOT APPROVED</span>
                                    @endif
                                </td>
                                <td>{{ number_format($ad->price, 2); }}</td>
                                {{-- <td>{{ $ad['country_name']; }}, {{ $ad['region_name']; }}, {{ $ad['place_name'] }}, {{ $ad['area_name'] }}</td> --}}
                                
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{-- <div class="col-lg-3 col-sm-12 col-md-6">
                <x-adminlte-info-box title="{{ $location['areas'] }}" text="Areas" icon="fas fa-lg fa-street-view text-orange" icon-theme="white"/>
            </div> --}}
        </div>
    </div>
    <br />

    {{-- <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Analytics</div>
                    <div class="card-body">
                        <h1>{{ $vendors_chart->options['chart_title'] }}</h1>
                        {!! $vendors_chart->renderHtml() !!}
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
@stop

@section('css')
    {{-- <link rel="stylesheet" href="css/admin_custom.css"> --}}
    <link href="https://cdn.datatables.net/2.0.5/css/dataTables.dataTables.css"/>
    <link href="https://cdn.datatables.net/select/2.0.1/css/select.dataTables.css"/>
    <link href="//code.highcharts.com/css/highcharts.css"/>
@stop

@section('js')
    {{-- <script src="https://code.jquery.com/jquery-3.7.1.js"></script> --}}
    <script src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/select/2.0.1/js/dataTables.select.js"></script>
    <script src="https://cdn.datatables.net/select/2.0.1/js/select.dataTables.js"></script>
    {{-- <script src="//code.highcharts.com/highcharts.js"></script> --}}

    {{-- Google charts --}}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            // 2023 Users
            var p_data = google.visualization.arrayToDataTable([
                ['Month Name', 'Registered User Count'],

                @php
                    foreach ($registered_users_per_month_2023pieChart as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var p_options = {
                title: 'Users Registered in 2023',
                is3D: false,
            };
            var p_chart = new google.visualization.PieChart(document.getElementById('pu2023-pie-chart'));
            p_chart.draw(p_data, p_options);

            // 2023 Listings
            var pl_data = google.visualization.arrayToDataTable([
                ['Month Name', 'Registered Listings Count'],

                @php
                    foreach ($registered_listings_per_month_2023pieChart as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var pl_options = {
                title: 'Ads Listed in 2023',
                is3D: false,
            };
            var pl_chart = new google.visualization.PieChart(document.getElementById('2023listings-pie-chart'));
            pl_chart.draw(pl_data, pl_options);

            // Users
            var data = google.visualization.arrayToDataTable([
                ['Month Name', 'Registered User Count'],

                @php
                    foreach ($registered_users_per_month_pieChart as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var options = {
                title: 'Users Registered in 2024',
                is3D: false,
            };
            var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
            chart.draw(data, options);

            // Listings
            var l_data = google.visualization.arrayToDataTable([
                ['Month Name', 'Registered Listings Count'],

                @php
                    foreach ($registered_listings_per_month_pieChart as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var l_options = {
                title: 'Ads Listed in 2024',
                is3D: false,
            };
            var l_chart = new google.visualization.PieChart(document.getElementById('listings-pie-chart'));
            l_chart.draw(l_data, l_options);

            // listings-per-week-pie-chart $data['registered_sellers_per_month_pieChart']
            var s_data = google.visualization.arrayToDataTable([
                ['Month Name', 'Registered Sellers Per Month Count'],

                @php
                    foreach ($registered_sellers_per_month_pieChart as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var s_options = {
                title: 'Registered Sellers Per Month in 2024',
                is3D: false,
            };
            var s_chart = new google.visualization.PieChart(document.getElementById('sellers-pie-chart'));
            s_chart.draw(s_data, s_options);

            // listings-per-week-pie-chart $data['registered_sellers_per_month_pieChart']
            var b_data = google.visualization.arrayToDataTable([
                ['Month Name', 'Registered Buyers Per Month Count'],

                @php
                    foreach ($registered_buyers_per_month_pieChart as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var b_options = {
                title: 'Registered Buyers Per Month in 2024',
                is3D: false,
            };
            var b_chart = new google.visualization.PieChart(document.getElementById('buyers-pie-chart'));
            b_chart.draw(b_data, b_options);

            // listings-per-week-pie-chart $data['registered_sellers_per_month_pieChart']
            var ban_data = google.visualization.arrayToDataTable([
                ['Month Name', 'Banner Ads Per Month Count'],

                @php
                    foreach ($banners_per_month as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var ban_options = {
                title: 'Banner Ads Per Month in 2024',
                is3D: false,
            };
            var ban_chart = new google.visualization.PieChart(document.getElementById('banners-pie-chart'));
            ban_chart.draw(ban_data, ban_options);

            // blogs_per_month
            var bl_data = google.visualization.arrayToDataTable([
                ['Month Name', 'Blogs Per Month Count'],

                @php
                    foreach ($blogs_per_month as $d) {
                        echo "['" . $d->month_name . "', " . $d->count . '],';
                    }
                @endphp
            ]);
            var bl_options = {
                title: 'Blogs Per Month in 2024',
                is3D: false,
            };
            var bl_chart = new google.visualization.PieChart(document.getElementById('blogs-pie-chart'));
            bl_chart.draw(bl_data, bl_options);
        }
    </script>

    <script src="https://code.highcharts.com/es5/highcharts.js"></script>
    <script src="https://code.highcharts.com/es5/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script>
        // Create DataTable
        var table = $('#weekly_stores_tbl').DataTable();

        // A point click event that uses the Renderer to draw a label next to the point
        // On subsequent clicks, move the existing label instead of creating a new one.
        Highcharts.addEvent(Highcharts.Point, 'click', function () {
            if (this.series.options.className.indexOf('popup-on-click') !== -1) {
                const chart = this.series.chart;
                const date = Highcharts.dateFormat('%A, %b %e, %Y', this.x);
                const text = `<b>${date}</b><br/>${this.y} ${this.series.name}`;

                const anchorX = this.plotX + this.series.xAxis.pos;
                const anchorY = this.plotY + this.series.yAxis.pos;
                const align = anchorX < chart.chartWidth - 200 ? 'left' : 'right';
                const x = align === 'left' ? anchorX + 10 : anchorX - 10;
                const y = anchorY - 30;
                if (!chart.sticky) {
                    chart.sticky = chart.renderer
                        .label(text, x, y, 'callout',  anchorX, anchorY)
                        .attr({
                            align,
                            fill: 'rgba(0, 0, 0, 0.75)',
                            padding: 10,
                            zIndex: 7 // Above series, below tooltip
                        })
                        .css({
                            color: 'white'
                        })
                        .on('click', function () {
                            chart.sticky = chart.sticky.destroy();
                        })
                        .add();
                } else {
                    chart.sticky
                        .attr({ align, text })
                        .animate({ anchorX, anchorY, x, y }, { duration: 250 });
                }
            }
        });


        Highcharts.chart('weekly_stores_output', {

            chart: {
                scrollablePlotArea: {
                    minWidth: 700
                }
            },

            data: {
                csvURL: 'https://www.highcharts.com/samples/data/analytics.csv',
                beforeParse: function (csv) {
                    return csv.replace(/\n\n/g, '\n');
                }
            },

            title: {
                text: 'Daily sessions at more.co.ke',
                align: 'left'
            },

            subtitle: {
                text: 'Source: More Classifieds Analytics',
                align: 'left'
            },

            xAxis: {
                tickInterval: 7 * 24 * 3600 * 1000, // one week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            },

            yAxis: [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],

            legend: {
                align: 'left',
                verticalAlign: 'top',
                borderWidth: 0
            },

            tooltip: {
                shared: true,
                crosshairs: true
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    className: 'popup-on-click',
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                name: 'All sessions',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: 'New users'
            }]
        });

        
        // Create chart
        // var chart = Highcharts.chart('weekly_stores_output', {
        //     chart: {
        //         type: 'pie',
        //         styledMode: true
        //     },
        //     title: {
        //         text: 'Weekly New Stores Registered'
        //     },
        //     series: [
        //         {
        //             data: chartData(table)
        //         }
        //     ]
        // });
        
        // On each draw, update the data in the chart
        // table.on('draw', function () {
        //     chart.series[0].setData(chartData(table));
        // });
        
        // function chartData(table) {
        //     var counts = {};
        
        //     // Count the number of entries for each position
        //     table
        //         .column(1, { search: '' })
        //         .data()
        //         .each(function (val) {
        //             if (counts[val]) {
        //                 counts[val] += 1;
        //             }
        //             else {
        //                 counts[val] = 1;
        //             }
        //         });
        
        //     // And map it to the format highcharts uses
        //     return $.map(counts, function (val, key) {
        //         return {
        //             name: key,
        //             y: val
        //         };
        //     });
        // }
    </script>

@stop

@section('javascript')
{{-- {!! $vendors_chart->renderChartJsLibrary() !!}
{!! $vendors_chart->renderJs() !!} --}}
@endsection