@extends('layouts.dashboard_admin')

@section('content')
<div class="container-widget animated fadeInRight">
    <div class="row">
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-title"><span class="pull-right"><span class="bar" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="16" width="32"><rect fill="#3F51B5" x="0" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="3.3" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="6.6" y="0" width="2.3" height="16"></rect><rect fill="#d7d7d7" x="9.899999999999999" y="5.333333333333334" width="2.3" height="10.666666666666666"></rect><rect fill="#3F51B5" x="13.2" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="16.5" y="0" width="2.3" height="16"></rect><rect fill="#3F51B5" x="19.799999999999997" y="3.555555555555557" width="2.3" height="12.444444444444443"></rect><rect fill="#d7d7d7" x="23.099999999999998" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="26.4" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="29.7" y="12.444444444444445" width="2.3" height="3.5555555555555554"></rect></svg></span> PUBLISHED POSTS 
                </div>

                <div class="panel-body">
                    <h1 class="no-margins"><span >{{ $posts_count }}</span></h1>                            
                </div>
            </div>
        </div>            

        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-title"><span class="pull-right"><span class="bar" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="16" width="32"><rect fill="#3F51B5" x="0" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="3.3" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="6.6" y="0" width="2.3" height="16"></rect><rect fill="#d7d7d7" x="9.899999999999999" y="5.333333333333334" width="2.3" height="10.666666666666666"></rect><rect fill="#3F51B5" x="13.2" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="16.5" y="0" width="2.3" height="16"></rect><rect fill="#3F51B5" x="19.799999999999997" y="3.555555555555557" width="2.3" height="12.444444444444443"></rect><rect fill="#d7d7d7" x="23.099999999999998" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="26.4" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="29.7" y="12.444444444444445" width="2.3" height="3.5555555555555554"></rect></svg></span> USERS
                </div>
                
                <div class="panel-body">
                    <h1 class="no-margins"><span >{{ $users_count }}</span></h1>                            
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-title"><span class="pull-right"><span class="bar" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="16" width="32"><rect fill="#3F51B5" x="0" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="3.3" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="6.6" y="0" width="2.3" height="16"></rect><rect fill="#d7d7d7" x="9.899999999999999" y="5.333333333333334" width="2.3" height="10.666666666666666"></rect><rect fill="#3F51B5" x="13.2" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="16.5" y="0" width="2.3" height="16"></rect><rect fill="#3F51B5" x="19.799999999999997" y="3.555555555555557" width="2.3" height="12.444444444444443"></rect><rect fill="#d7d7d7" x="23.099999999999998" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="26.4" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="29.7" y="12.444444444444445" width="2.3" height="3.5555555555555554"></rect></svg></span> CATEGORIES
                </div>
                
                <div class="panel-body">
                    <h1 class="no-margins"><span >{{ $categories_count }}</span></h1>                            
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-title"><span class="pull-right"><span class="bar" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="16" width="32"><rect fill="#3F51B5" x="0" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="3.3" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="6.6" y="0" width="2.3" height="16"></rect><rect fill="#d7d7d7" x="9.899999999999999" y="5.333333333333334" width="2.3" height="10.666666666666666"></rect><rect fill="#3F51B5" x="13.2" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="16.5" y="0" width="2.3" height="16"></rect><rect fill="#3F51B5" x="19.799999999999997" y="3.555555555555557" width="2.3" height="12.444444444444443"></rect><rect fill="#d7d7d7" x="23.099999999999998" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="26.4" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="29.7" y="12.444444444444445" width="2.3" height="3.5555555555555554"></rect></svg></span> Informasi Publik
                </div>
                
                <div class="panel-body">
                    <h1 class="no-margins"><span >{{ $dip_count }}</span></h1>                            
                </div>
            </div>
        </div>
        
    </div>
    <div class="row">
        <div class="col-lg">
            <div class="panel panel-default">
                <div class="panel-title"><span class="pull-right"><span class="bar" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="16" width="32"><rect fill="#3F51B5" x="0" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="3.3" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="6.6" y="0" width="2.3" height="16"></rect><rect fill="#d7d7d7" x="9.899999999999999" y="5.333333333333334" width="2.3" height="10.666666666666666"></rect><rect fill="#3F51B5" x="13.2" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="16.5" y="0" width="2.3" height="16"></rect><rect fill="#3F51B5" x="19.799999999999997" y="3.555555555555557" width="2.3" height="12.444444444444443"></rect><rect fill="#d7d7d7" x="23.099999999999998" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="26.4" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="29.7" y="12.444444444444445" width="2.3" height="3.5555555555555554"></rect></svg></span> Jumlah Data Informasi Publik
                </div>
                
                <div class="panel-body">
                    <div class="col">
                        <form action="{{ url('admin') }}" method="GET" class="row">
                            <div class="form-group col-3"  >
                                <select name="tahun" id="tahun" class="select2-single form-control">
                                    <option value="{{date('Y') -2 }}" @if(date('Y') -2 == $request->get('tahun', date('Y'))) selected @endif>{{date('Y') -2}}</option>
                                    <option value="{{date('Y') -1 }}" @if(date('Y') -1 == $request->get('tahun', date('Y'))) selected @endif>{{date('Y') -1}}</option>
                                    <option value="{{date('Y') }}" @if(date('Y') == $request->get('tahun', date('Y'))) selected @endif>{{date('Y')}}</option>
                                </select>
                                
                            </div>
                            <div class="form-group col-2"  >
                                <button type="submit" class="btn btn-success">Cari</button>
                            </div>
                        </form>
                    </div>
                    <div>
                        
                        <canvas id="dip"></canvas>
                      </div>           
                </div>
            </div>
            
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg">
            <div class="panel panel-default">
                <div class="panel-title"><span class="pull-right"><span class="bar" style="display: none;">5,3,9,6,5,9,7,3,5,2</span><svg class="peity" height="16" width="32"><rect fill="#3F51B5" x="0" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="3.3" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="6.6" y="0" width="2.3" height="16"></rect><rect fill="#d7d7d7" x="9.899999999999999" y="5.333333333333334" width="2.3" height="10.666666666666666"></rect><rect fill="#3F51B5" x="13.2" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="16.5" y="0" width="2.3" height="16"></rect><rect fill="#3F51B5" x="19.799999999999997" y="3.555555555555557" width="2.3" height="12.444444444444443"></rect><rect fill="#d7d7d7" x="23.099999999999998" y="10.666666666666668" width="2.3" height="5.333333333333333"></rect><rect fill="#3F51B5" x="26.4" y="7.111111111111111" width="2.3" height="8.88888888888889"></rect><rect fill="#d7d7d7" x="29.7" y="12.444444444444445" width="2.3" height="3.5555555555555554"></rect></svg></span> Jumlah Pengunjung
                </div>
                
                <div class="panel-body">
                    <div class="col">
                        <form action="{{ url('admin') }}" method="GET" class="row">
                            <div class="form-group col-3"  >
                                <select name="tahun" id="tahun" class="select2-single form-control">
                                    <option value="{{date('Y') -2 }}" @if(date('Y') -2 == $request->get('tahun', date('Y'))) selected @endif>{{date('Y') -2}}</option>
                                    <option value="{{date('Y') -1 }}" @if(date('Y') -1 == $request->get('tahun', date('Y'))) selected @endif>{{date('Y') -1}}</option>
                                    <option value="{{date('Y') }}" @if(date('Y') == $request->get('tahun', date('Y'))) selected @endif>{{date('Y')}}</option>
                                </select>
                                
                            </div>
                            <div class="form-group col-2"  >
                                <button type="submit" class="btn btn-success">Cari</button>
                            </div>
                        </form>
                    </div>
                    <div>
                        
                        <canvas id="visitor"></canvas>
                      </div>           
                </div>
            </div>
            
        </div>
    </div>
</div>
<!-- Toastr -->
<script src="{{asset('asset_admin/html/js/toastr/toastr.min.js')}}"></script>
<script src="{{asset('asset_admin/html/js/toastr/toastr-plugin.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    

const labels = [
    'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'Oktober',
  'November',
  'Desember',
];
// const data = {
//   labels: labels,
//   datasets: [{
//     label: 'Data Informasi Publik',
//     backgroundColor: 'rgb(255, 99, 132)',
//     borderColor: 'rgb(255, 99, 132)',
//     data: {!! json_encode($dip) !!},
//   }]
// };

// const data2 = {
//   labels: labels,
//   datasets: [{
//     label: 'Data Pengunjung',
//     backgroundColor: 'rgb(255, 99, 132)',
//     borderColor: 'rgb(255, 99, 132)',
//     data: {!! json_encode($v) !!},
//   }]
// };

// const config = {
//     type: 'line',
//     data,
//     options: {}
// };

// const config2 = {
//     type: 'line',
//     data2,
//     options: {}
// };

// var myChart = new Chart(
//     document.getElementById('dip'),
//     config
//   );
  
//  var myChart2 = new Chart(
//     document.getElementById('visitor'),
//     config2
//   );
  
const ctx = document.getElementById('dip');
const ctx2 = document.getElementById('visitor');

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
    label: 'Data Informasi Publik',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: {!! json_encode($dip) !!},
    }]
  },
});

const myChart2 = new Chart(ctx2, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
    label: 'Data Pengunjung',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: {!! json_encode($v) !!},
    }]
  },
});
</script>
@endsection