@extends('layouts.app')

@section('title', 'Home')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet"
        href="{{ asset('library/jqvmap/dist/jqvmap.min.css') }}">
    <link rel="stylesheet"
        href="{{ asset('library/summernote/dist/summernote-bs4.min.css') }}">
@endpush

@section('main')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Dashboard</h1>
            </div>
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="hero bg-primary text-white">
                        <div class="hero-inner">
                            <div class="row">
                                <div class="col-2">
                                    <img style="width: 170px; padding: 5px; float: right;" src="{{ asset('storage/'.$kecamatan->logo) }}" alt="Logo Kabupaten">
                                </div>
                                <div class="col-10">
                                    <h2 style="color: black">Selamat Datang, {{ Auth::user()->name }}!</h2>
                                    <p class="lead" style="color: black">di Dashboard Sistem Informasi dan Teknologi Desa</p>
                                    <p>&nbsp;</p>
                                    @if (Auth::user()->role == 3)
                                    <h4> <b>{{ $desa->jenis.' '.ucwords(strtolower($desa->nama_desa)) }}</b> </h4>
                                    @else
                                    <h4> <b>SISTEKDES</b> </h4>
                                    @endif
                                    <p>Kecamatan {{ ucwords(strtolower(getKecamatanName($kecamatan->kecamatan_kec))) }} | {{ ucwords(strtolower(getKotaName($kecamatan->kota_kec))) }}</p>
                                </div>           
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1" title="Total Data Penduduk">
                        <div class="card-icon bg-primary">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Penduduk</h4>
                            </div>
                            <div class="card-body">
                                {{ $penduduk }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1" title="Total Data Penduduk">
                        <div class="card-icon bg-primary">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Keluarga</h4>
                            </div>
                            <div class="card-body">
                                {{ $keluarga }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1" title="Total Berita di-Post">
                        <div class="card-icon bg-danger">
                            <i class="far fa-newspaper"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Berita</h4>
                            </div>
                            <div class="card-body">
                                {{ $berita }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1" title="Total Surat Bulan Ini">
                        <div class="card-icon bg-warning">
                            <i class="far fa-file"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Surat bulan ini</h4>
                            </div>
                            <div class="card-body">
                                {{ $total_surat }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-md-12 col-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Statistik Surat Minggu Ini</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart"
                                height="136.5"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-12 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Berita Terbaru</h4>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled list-unstyled-border">
                                @foreach ($posts as $item)
                                <li class="media">
                                    <img class="rounded-circle mr-3"
                                        width="50"
                                        src="{{ asset('img/avatar/avatar-1.png') }}"
                                        alt="avatar">
                                    <div class="media-body">
                                        <div class="float-right">{{ \Carbon\Carbon::parse($item->created_at)->translatedFormat('F d, Y') }}</div>
                                        <div class="media-title">{{ $item->author->name }}</div>
                                        <span class="text-small text-muted">{{ $item->title }}</span>
                                    </div>
                                </li>
                                @endforeach

                            </ul>
                            <div class="pt-1 pb-1 text-center">
                                <a href="{{ route('posts.index') }}"
                                    class="btn btn-primary btn-lg btn-round">
                                    Lihat semua berita
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <!-- JS Libraies -->
    <script src="{{ asset('library/chart.js/dist/Chart.min.js') }}"></script>
    <script src="{{ asset('library/jqvmap/dist/jquery.vmap.min.js') }}"></script>

    <!-- Page Specific JS File -->
    <script src="{{ asset('js/page/index-0.js') }}"></script>

    <script>
var statistics_chart = document.getElementById("myChart").getContext('2d');
var jumlah = {!! $hari !!}
var label  = {!! $label !!} 
var myChart = new Chart(statistics_chart, {
  type: 'line',
  data: {
    labels: label,
    datasets: [{
      label: 'Statistics',
      data: jumlah,
      borderWidth: 5,
      borderColor: '#6777ef',
      backgroundColor: 'transparent',
      pointBackgroundColor: '#fff',
      pointBorderColor: '#6777ef',
      pointRadius: 4
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        gridLines: {
          display: false,
          drawBorder: false,
        },
        ticks: {
          stepSize: 150
        }
      }],
      xAxes: [{
        gridLines: {
          color: '#fbfbfb',
          lineWidth: 2
        }
      }]
    },
  }
});
    </script>
@endpush