@extends('layouts.dashboard_template')

@section('content')
    <section class="content-header">
        <h1>
            {{ $page_title ?? 'Page Title' }}
            <small>{{ $page_description ?? '' }}</small>
        </h1>
    </section>

    <section class="content container-fluid">
        <div class="row">
            @if (auth()->check() && (auth()->user()->hasRole('super-admin') || auth()->user()->can('access.data.data_desa')))
                <div class="col-lg-3 col-xs-6" data-testid="card-desa">
                    <div class="small-box bg-aqua">
                        <div class="inner">
                            <h3>{{ number_format($data['desa'] ?? 0, 0, ',', '.') }}</h3>
                            <p>{{ config('setting.sebutan_desa') }}</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-building-o"></i>
                        </div>
                        <a href="{{ route('data.data-desa.index') }}" class="small-box-footer">
                            Selengkapnya <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
            @endif

            @if (auth()->check() && (auth()->user()->hasRole('super-admin') || auth()->user()->can('access.data.penduduk')))
                <div class="col-lg-3 col-xs-6" data-testid="card-penduduk">
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3>{{ number_format($data['penduduk'] ?? 0, 0, ',', '.') }}</h3>
                            <p>Penduduk</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-user"></i>
                        </div>
                        <a href="{{ route('data.penduduk.index') }}" class="small-box-footer">
                            Selengkapnya <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
            @endif

            @if (auth()->check() && (auth()->user()->hasRole('super-admin') || auth()->user()->can('access.data.keluarga')))
                <div class="col-lg-3 col-xs-6" data-testid="card-keluarga">
                    <div class="small-box bg-yellow">
                        <div class="inner">
                            <h3>{{ number_format($data['keluarga'] ?? 0, 0, ',', '.') }}</h3>
                            <p>Keluarga</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <a href="{{ route('data.keluarga.index') }}" class="small-box-footer">
                            Selengkapnya <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
            @endif

            @if (auth()->check() && (auth()->user()->hasRole('super-admin') || auth()->user()->can('access.data.program_bantuan')))
                <div class="col-lg-3 col-xs-6" data-testid="card-program-bantuan">
                    <div class="small-box bg-red">
                        <div class="inner">
                            <h3>{{ number_format($data['program_bantuan'] ?? 0, 0, ',', '.') }}</h3>
                            <p>Program Bantuan</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-heart-o"></i>
                        </div>
                        <a href="{{ route('data.program-bantuan.index') }}" class="small-box-footer">
                            Selengkapnya <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
            @endif
        </div>

        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs pull-right">
                <li class=""><a href="#tab_1-1" data-toggle="tab" data-testid="tab-user-agent">User Agent</a></li>
                <li class="active"><a href="#tab_2-2" data-toggle="tab" data-testid="tab-top-pages">Top 10 Halaman Terpopuler</a></li>
                <li class="pull-left header">
                    <i class="fa fa-pie-chart"></i>
                    Statistik Pengunjung Website
                    <small>[ <a href="{{ route('counter.index') }}">Selengkapnya <i class="fa fa-arrow-circle-right"></i>
                        </a> ]</small>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane" id="tab_1-1" data-testid="pane-user-agent">
                    <div class="row">
                        <!-- Browser Chart -->
                        <div class="col-md-4">
                            <figure class="highcharts-figure">
                                <div id="browser-chart" data-testid="chart-browser"></div>
                            </figure>
                        </div>

                        <!-- Device Chart -->
                        <div class="col-md-4">
                            <figure class="highcharts-figure">
                                <div id="device-chart" data-testid="chart-device"></div>
                            </figure>
                        </div>

                        <!-- Platform Chart -->
                        <div class="col-md-4">
                            <figure class="highcharts-figure">
                                <div id="platform-chart" data-testid="chart-platform"></div>
                            </figure>
                        </div>
                    </div>
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane active" id="tab_2-2" data-testid="pane-top-pages">
                    <table class="table table-bordered table-striped dataTable">
                        <thead>
                            <tr>
                                <th>URL</th>
                                <th>Page Views</th>
                                <th>Unique Visitors</th>
                                <th>Bounce Rate</th>
                            </tr>
                        </thead>
                        <tbody data-testid="table-top-pages">
                            @foreach ($top_pages_visited as $index => $page)
                                <tr>
                                    <td>{{ $page->url }} <a href="{{ $page->url }}" target="_blank"><i class="fa fa-fw fa-link"></i></a> </td>
                                    <td>{{ $page->total_views }}</td>
                                    <td>{{ $page->unique_visitors }}</td>
                                    <td>
                                        @if (isset($page->bounces))
                                            {{ round(($page->bounces / $page->total_views) * 100, 1) }}%
                                        @else
                                            -
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /.tab-content -->
        </div>
    </section>
    @include('partials.asset_highcharts')
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const browserData = @json($browserData);
            const deviceData = @json($deviceData);
            const platformData = @json($platformData);

            // Browser Chart
            Highcharts.chart('browser-chart', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'Browser Usage Distribution'
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Browsers',
                    colorByPoint: true,
                    data: browserData
                }]
            });

            // Device Chart
            Highcharts.chart('device-chart', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'Device Usage Distribution'
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Devices',
                    colorByPoint: true,
                    data: deviceData
                }]
            });

            // Platform Chart
            Highcharts.chart('platform-chart', {
                chart: {
                    type: 'pie'
                },
                title: {
                    text: 'Platform Usage Distribution'
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Platforms',
                    colorByPoint: true,
                    data: platformData
                }]
            });
        });
    </script>
@endpush