@extends('admin.layouts.index')
@section('judul', 'Beranda')
@section('subjudul', 'Selamat datang!')

@section('konten')
<div class="container-default animated fadeInRight">
  <div class="row">
    
    @if(Auth::user()->Group->nama == 'Posyandu Kecamatan' || Auth::user()->Group->nama == 'Posyandu Kelurahan')
    <div class="col-md-12">
      <h4 class="title">
        @if(Auth::user()->Group->nama == 'Posyandu Kecamatan')
        Kecamatan, {{ Auth::user()->kecamatan->nama_vertikal }}
        @elseif(Auth::user()->Group->nama == 'Posyandu Kelurahan')
        Kelurahan, {{ @Auth::user()->kelurahan->keterangan_kelurahan }}
        @endif
      </h4>
    </div>
    @endif
    
    @if(
    Auth::user()->Group->nama == 'Posyandu Lansia' || Auth::user()->Group->nama == 'Posyandu Balita' ||
    Auth::user()->Group->nama == 'Admin Posyandu' || Auth::user()->Group->nama == 'Posyandu Kecamatan'||
    Auth::user()->Group->nama == 'Posyandu Kelurahan'|| Auth::user()->Group->nama == 'Administrator' )
    
    <div class="col-md-6">
      <div class="row">
        @if( Auth::user()->Group->nama != 'Posyandu Lansia' )
        <div class="col-lg-6">
          <a href="{{ route('admin.posyandu.balita.create') }}">
            <div class="panel panel-default">
              <div class="panel-title"> Tambah Data Posyandu Balita
              </div>
              <div class="panel-body text-center">
                <img src="{{ asset('admin/img/family.png') }}" alt="" style="width: 50px;">
              </div>
            </div>
          </a>
        </div>
        <div class="col-lg-6">
          <a href="{{ route('admin.posyandu.balita.index') }}">
            <div class="panel panel-default">
              <div class="panel-title">Laporan Posyandu Balita
              </div>
              <div class="panel-body text-center">
                <img src="{{ asset('admin/img/family.png') }}" alt="" style="width: 50px;">
              </div>
            </div>
          </a>
        </div>
        @endif
  
        @if( Auth::user()->Group->nama != 'Posyandu Balita' )
        <div class="col-lg-6">
          <a href="{{ route('admin.posyandu.lansia.create') }}">
            <div class="panel panel-default">
              <div class="panel-title"> Tambah Data Posyandu Lansia
              </div>
              <div class="panel-body text-center">
                <img src="{{ asset('admin/img/old.png') }}" alt="" style="width: 50px;">
              </div>
            </div>
          </a>
        </div>
        <div class="col-lg-6">
          <a href="{{ route('admin.posyandu.lansia.index') }}">
            <div class="panel panel-default">
              <div class="panel-title">Laporan Posyandu Lansia
              </div>
              <div class="panel-body text-center">
                <img src="{{ asset('admin/img/old.png') }}" alt="" style="width: 50px;">
              </div>
            </div>
          </a>
        </div>
        @endif
      </div>

      @if( Auth::user()->Group->nama == 'Admin Posyandu' || Auth::user()->Group->nama == 'Posyandu Kecamatan'||
      Auth::user()->Group->nama == 'Posyandu Kelurahan'|| Auth::user()->Group->nama == 'Administrator' )
      <div class="row">
        <div class="col-lg-6">
          <a href="#">
            <div class="panel panel-default">
              <div class="panel-title"><span class="label label-default pull-right">Total</span> Statistik Pengunjung Keseluruhan
              </div>
              <div class="panel-body">
                <h1 class="no-margins"><span data-counter="counterup"
                    data-value="{{ App\Models\Visitor::count() }}">{{ App\Models\Visitor::count() }}</span></h1>
              </div>
            </div>
          </a>
        </div>
        <div class="col-lg-6">
          <a href="#">
            <div class="panel panel-default">
              <div class="panel-title"><span class="label label-default pull-right">Total</span> Statistik Pengunjung Hari Ini
              </div>
              <div class="panel-body">
                <h1 class="no-margins"><span data-counter="counterup"
                    data-value="{{ App\Models\Visitor::where('date', today())->count() }}">{{ App\Models\Visitor::where('date', today())->count() }}</span></h1>
              </div>
            </div>
          </a>
        </div>
      </div>
      @endif
    </div>
    
    <div class="col-md-6">
      <div class="row">
        @if( Auth::user()->Group->nama == 'Admin Posyandu' || Auth::user()->Group->nama == 'Posyandu Kecamatan'||
        Auth::user()->Group->nama == 'Posyandu Kelurahan'|| Auth::user()->Group->nama == 'Administrator' )
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-title">
              Grafik Posyandu Lansia
            </div>
            <div class="panel-body">
              <canvas id="pos-lansia" height="300"></canvas>
            </div>
          </div>
        </div>  
        @endif
      </div>
    </div>
    
    @if( Auth::user()->Group->nama == 'Admin Posyandu' || Auth::user()->Group->nama == 'Posyandu Kecamatan'||
    Auth::user()->Group->nama == 'Posyandu Kelurahan'|| Auth::user()->Group->nama == 'Administrator' )
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-title">
          Grafik Posyandu Balita
        </div>
        <div class="panel-body">
          <canvas id="pos-balita" height="400"></canvas>
        </div>
      </div>
    </div>  
    @endif

    @endif

    @if( Auth::user()->Group->nama != 'Posyandu Balita' && Auth::user()->Group->nama != 'Posyandu Lansia')
    <div class="col-lg-8">
      <div class="panel panel-default">
        <div class="panel-title">
          Log User
        </div>
        <div class="panel-body">
          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>No</th>
                  <th>User</th>
                  <th>Keterangan</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($userLogs as $data)
                <tr>
                  <td>{{ $loop->iteration }}</td>
                  <td>
                    @if( is_numeric($data->user->nama) )
                      @if($data->user->group_id == '5' || $data->user->group_id == '6')
                        {!!  Helper::namaPosyandu($data->user->nama) !!}
                        @else
                        {{ $data->user->nama }}
                      @endif
                    @else
                        {{ $data->user->nama }}
                    @endif
                  </td>
                  <td>{{ $data->keterangan }}</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    @endif


  </div>
</div>
@endsection

@push('scripts')
{{-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> --}}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<script>
  $(document).ready(function(){
    const groupName = "{{ \Auth::user()->Group->nama }}";

    if( groupName != 'Posyandu Balita' )
    {
      const ctxPosLansia = document.getElementById('pos-lansia').getContext('2d');
      const chartPosLansia = new Chart(ctxPosLansia, {
        type: 'doughnut',
        data: {
          labels: ['Jumlah Lansia Memiliki KMS', 'Jumlah Lansia'],
          datasets: [
            {
              label: 'Dataset 1',
              data: @json($grafikPosyanduLansia),
              backgroundColor: ['#FCC235', '#209BFF'],
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            datalabels: {
                color: '#ffffff',
                formatter: Math.round(),
                font: {
                  weight: 'bold',
                  size: 16,
                },
            },
            legend: {
              position: 'top',
            },
            title: {
              display: false,
              text: 'Chart'
            }
          }
        },
      });
    }

    if( groupName != 'Posyandu Lansia' )
    {
      const ctxPosBalita = document.getElementById('pos-balita').getContext('2d');
      const chartPosBalita = new Chart(ctxPosBalita, {
        type: 'bar',
        data: {
          labels: ['Jumlah Kader', 'Jumlah Kader Aktif', 'Jumlah Balita', 'Jumlah Ibu Hamil Imunisasi', 'Jumlah PUS KB'],
          datasets: [
            {
              label: 'satu',
              data: @json($grafikPosyanduBalita),
              backgroundColor: ['#FCC235', '#209BFF', '#FA6385', '#FCC235', '#36A100'],
            },
          ],
        },
        options: {
          legend: {
              display: false,
          },
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            datalabels: {
                anchor: 'end',
                align: 'middle',
                color: '#000',
                formatter: Math.round(),
                font: {
                  weight: 'bold',
                  size: 13,
                },
            },
            title: {
              display: false,
              text: 'Chart'
            },
          },
        },
      });
    }

  });

</script>
@endpush