@extends('layouts.master')

@section('content')
<div class="container-fluid">


    <!-- Content Row -->
    <div class="row">
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Jumlah Admin</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{count($users)}}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Jumlah Blog Post</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{count($blogs)}}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-blog fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Jumlah Provinsi
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{count($provinces)}}</div>
                                </div>
                                <div class="col">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                 Jumlah Kota</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{count($cities)}}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-home fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Jumlah Penghubung</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{count($calls)}}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-folder fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Jumlah Testimoni</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{count($testimonies)}}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-book-open fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Jumlah pengunjung website 1 minggu terakhir
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{ $visitorCount }}</div>
                                </div>
                                <div class="col">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
    
<div class="row">
    <div class="col-md-6">
    <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Data Hari Pengunjung Website Orbit360 7 Hari Terakhir</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <div id="chart_div" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Data Hari Pengunjung Website Orbit360 Bulan Ini</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <div id="dayOfWeekChart" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
    <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Waktu Pengunjung Website Orbit360 7 Hari Terakhir</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <div id="timeRangeChartlast7days" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Waktu Pengunjung Website Orbit360 Bulan Ini</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <div id="timeRangeChart" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>
</div>

    <div class="card shadow mb-4">
        <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
            <h6 class="m-0 font-weight-bold text-primary">Data Pengunjung Website Orbit Bulan ini</h6>
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-center align-items-center" style="height: 100%; overflow-x: auto;">
                <div id="dailyChart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="card shadow mb-4">
        <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
            <h6 class="m-0 font-weight-bold text-primary">Data Bulanan Pengunjung Website Orbit360</h6>
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-center align-items-center" style="height: 100%; overflow-x: auto;">
                <div id="MonthChart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>
    <div class="card shadow mb-4">
        <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
            <h6 class="m-0 font-weight-bold text-primary">Data Tahunan Pengunjung Website Orbit</h6>
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-center align-items-center" style="height: 100%; overflow-x: auto;">
                <div id="yearlyChart" style="width: 100%; height: 400px;"></div>            
            </div>
        </div>
    </div>
    
    <div class="card shadow mb-4">
        <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
            <h6 class="m-0 font-weight-bold text-primary">Data Lengkap Total Pengunjung Website Orbit360</h6>
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-center align-items-center" style="height: 100%; overflow-x: auto;">
                <div id="calendar_basic" style="width: 90%; max-width: 1200px; height: 400px;"></div>
            </div>
        </div>
    </div>
    
    <div class="row">
    <div class="col-md-6">
    <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Data Kota Pengunjung Website Orbit360 7 Hari Terakhir</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <div id="Top7city" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Data Kota Pengunjung Website Orbit360 Bulan ini</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <div id="Citychartmonth" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>
    </div>
    
    <div class="row">
    <div class="col-md-6">
    <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Data Kota Pengunjung Website Orbit360 Bulan Lalu</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <div id="lastmonthcitychart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
                <h6 class="m-0 font-weight-bold text-primary">Data Lengkap Kota Pengunjung Website Orbit360 </h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center" style="height: 500px;">
                <canvas id="pieChart"></canvas>
            </div>
        </div>
    </div>
    </div>
    
    <div class="card shadow mb-4">
        <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
            <h6 class="m-0 font-weight-bold text-primary">Top 10 Kota Pengunjung Website Orbit360</h6>
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-center align-items-center" style="height: 100%; overflow-x: auto;">
                <div id="cityChart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>

    
    <div class="card shadow mb-4">
        <div class="card-header py-3 form-inline justify-content-between bg-gradient-primary">
            <h6 class="m-0 font-weight-bold text-primary">Data Penghubung Orbit360</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered " id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th class="text-center">Nama Sekolah</th>
                            <th class="text-center">alamat Email</th>
                            <th class="text-center">Nomor Telepon</th>
                            <th class="text-center">Pesan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($calls as $call)
                        <tr>
                            <td class="text-center">{{($call['nama'])}}</td>
                            <td class="text-center">{{($call['email'])}}</td>
                            <td class="text-center">{{($call['nomor_hp'])}}</td>
                            <td>{!!strip_tags($call->pesan)!!}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Get the data from your backend or define it here
  const data = [
    @foreach ($uniqueCities as $uniqueCity)
      { city: '{{$uniqueCity->city}}', count: {{$uniqueCity->count}} },
    @endforeach 
  ];

  // Extract labels and data values from the data
  const labels = data.map(item => item.city);
  const counts = data.map(item => item.count);

  // Generate an array of 100 random colors
  const colors = generateRandomColors(100);

  // Create the pie chart
  const ctx = document.getElementById('pieChart').getContext('2d');
  const pieChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: labels,
      datasets: [{
        data: counts,
        backgroundColor: colors,
        borderWidth: 1,
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
      },
      title: {
        display: true,
        text: 'Data Penghubung Orbit360',
      },
    },
  });

  // Function to generate an array of random colors
  function generateRandomColors(count) {
    const colors = [];
    for (let i = 0; i < count; i++) {
      const color = getRandomColor();
      colors.push(color);
    }
    return colors;
  }

  // Function to generate a random color
  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
</script>

<!--<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() {-->
<!--            var data = google.visualization.arrayToDataTable([-->
<!--                ['Day', 'Visitor Count'],-->
<!--                @foreach ($days as $index => $day)-->
<!--                    ['{{ $day }}', {{ $visitorCounts[$index] }}],-->
<!--                @endforeach-->
<!--            ]);-->

<!--            var options = {-->
<!--                title: 'Visitor Counts by Day',-->
<!--                hAxis: {title: 'Day', titleTextStyle: {color: '#333'}},-->
<!--                vAxis: {minValue: 0}-->
<!--            };-->

<!--            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));-->
<!--            chart.draw(data, options);-->
<!--        }-->
<!--    </script>-->

<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() {
        var data = google.visualization.arrayToDataTable([
            ['Hari', 'Total Pengunjung'],
            @foreach ($visitorCounts as $index => $count)
                ['{{ $days[$index] }}', {{ $count }}],
            @endforeach
        ]);

        var options = {
            title: 'Total Pengunjung',
            hAxis: {title: 'Hari', titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load("current", { packages: ["calendar"] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'date', id: 'Date' });
            dataTable.addColumn({ type: 'number', id: 'Visitors' });

            var data = [
                @foreach ($dataTable as $data)
                    [new Date('{{ $data[0] }}'), {{ $data[1] }}],
                @endforeach
            ];

            dataTable.addRows(data);

            var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

            var options = {
                title: "",
                height: 1000,
            };

            chart.draw(dataTable, options);
        }
    </script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawCityChart);

    function drawCityChart() {
        var data = google.visualization.arrayToDataTable([
            ['City', 'Pengunjung', { role: 'style' }],
            @foreach ($topCities as $city)
                ['{{ $city->city }}', {{ $city->count }}, 'blue'],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 380,
            hAxis: {
                title: 'Kota',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('cityChart'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawCityChart);

    function drawCityChart() {
        var data = google.visualization.arrayToDataTable([
            ['Month', 'Pengunjung', { role: 'style' }],
            @foreach ($monthlyData as $month => $visitors)
                ['{{ date('F', mktime(0, 0, 0, $month, 1)) }}', {{ $visitors }}, 'blue'],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 380,
            hAxis: {
                title: 'Bulan',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('MonthChart'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawDailyChart);

    function drawDailyChart() {
        var data = google.visualization.arrayToDataTable([
            ['Hari', 'Pengunjung', { role: 'style' }],
            @foreach ($dailyVisitors as $day => $visitors)
                ['{{ $day }}', {{ $visitors }}, 'blue'],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 380,
            hAxis: {
                title: 'Hari',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('dailyChart'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawYearlyChart);

    function drawYearlyChart() {
        var data = google.visualization.arrayToDataTable([
            ['Tahun', 'Pengunjung', { role: 'style' }],
            @foreach ($yearlyData as $year => $visitors)
                ['{{ $year }}', {{ $visitors }}, 'blue'],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 380,
            hAxis: {
                title: 'Tahun',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('yearlyChart'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawCityChart);

    function drawCityChart() {
        var data = google.visualization.arrayToDataTable([
            ['Kota', 'Pengunjung', { role: 'style' }],
            @foreach ($topCitiesLast7Days as $city)
                ['{{ $city->city }}', {{ $city->count }}, 'blue'],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 400,
            hAxis: {
                title: 'Kota',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('Top7city'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawPlacesChart);

    function drawPlacesChart() {
        var data = google.visualization.arrayToDataTable([
            ['Kota', 'Pengunjung', { role: 'style' }],
            @foreach ($topPlacesThisMonth as $place)
                ['{{ $place->city }}', {{ $place->count }}, 'blue'],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 400,
            hAxis: {
                title: 'Kota',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('Citychartmonth'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawPlacesChart);

    function drawPlacesChart() {
        var data = google.visualization.arrayToDataTable([
            ['Kota', 'Pengunjung', { role: 'style' }],
            @foreach ($topPlacesLastMonth as $place)
                ['{{ $place->city }}', {{ $place->count }}, 'blue'],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 400,
            hAxis: {
                title: 'Kota',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('lastmonthcitychart'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawDayOfWeekChart);

    function drawDayOfWeekChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Hari');
        data.addColumn('number', 'Pengunjung');

        data.addRows([
            @foreach ($accessByDayOfWeek as $day)
                ['{{ $daysOfWeek[$day->dayOfWeek - 1] }}', {{ $day->count }}],
            @endforeach
        ]);

        var options = {
            title: '',
            height: 400,
            hAxis: {
                title: 'Hari',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('dayOfWeekChart'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawTimeRangeChart);

    function drawTimeRangeChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Jangka Waktu');
        data.addColumn('number', 'Pengunjung');

        data.addRows([
            @for ($i = 0; $i < count($timeRanges); $i++)
                ['{{ $timeRanges[$i] ?? '' }}', {{ isset($accessByTimeRange[$i]) ? $accessByTimeRange[$i]->count : 0 }}],
            @endfor
        ]);

        var options = {
            title: '',
            height: 400,
            hAxis: {
                title: 'Jangka Waktu',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('timeRangeChart'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawTimeRangeChart);

    function drawTimeRangeChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Jangka Waktu');
        data.addColumn('number', 'Pengunjung');

        data.addRows([
            @for ($i = 0; $i < count($accessByTimeRangeLast7Days); $i++)
                ['{{ $timeRanges[$i] ?? '' }}', {{ $accessByTimeRangeLast7Days[$i]->count ?? 0 }}],
            @endfor
        ]);

        var options = {
            title: '',
            height: 400,
            hAxis: {
                title: 'Jangka Waktu',
                minValue: 0
            },
            vAxis: {
                title: 'Pengunjung'
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('timeRangeChartlast7days'));
        chart.draw(data, options);
    }
</script>
    
@endsection