@extends('layouts.contentLayoutMaster')

{{-- title --}}
@section('title','Beranda')
{{-- venodr style --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/charts/apexcharts.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/dragula.min.css')}}">
@endsection

{{-- page style --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/dashboard-analytics.css')}}">
@endsection

@section('content')
<!-- Dashboard Analytics Start -->
<section id="dashboard-analytics">
    
      <div class="row">
        <!-- Website Analytics Starts-->
        <div class="col-md-4 col-sm-12">
          <div class="row">
            <!-- Conversion Chart Starts-->
            <div class="col-12">
              <div class="row">
                <div class="col-12">
                  <div class="card">
                    <div class="card-header">
                      <h3 class="greeting-text">Hello {{auth()->user()->name}}!</h3>
                      <p class="mb-1">Selamat Datang.</p>
                      <img src="{{asset('images/logo/fakfak.png')}}" height="50" width="50" class="img-fluid"
                              alt="Fakfak" style="margin-left: 30px"/>
                    </div>
                    <div class="card-content">
                      <div class="card-body">
                        <div class="d-flex justify-content-between align-items-end">
                          <div class="dashboard-content-left">
                            <h1 class="text-primary font-large-1 text-bold-500">E-Surat</h1>
                            <p>Kelurahan Wagom, Distrik Pariwari, Kabupaten Fakfak, Provinsi Papua Barat</p>
                            <a href="{{ route('profil.index') }}" type="button" class="btn btn-danger glow">Profil</a>
                          </div>
                          <!--<div class="dashboard-content-right">-->
                          <!--  <img src="{{asset('images/logo/fakfak.png')}}" height="220" width="220" class="img-fluid"-->
                          <!--    alt="Dashboard Ecommerce" />-->
                          <!--</div>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="card bg-secondary bg-lighten-1">
                    <div class="card-body d-flex align-items-center justify-content-between text-white">
                      <div class="d-flex align-items-center">
                        <div class="avatar bg-secondary bg-light m-0 p-25 mr-75 mr-xl-2">
                          <div class="avatar-content">
                            <i class="bx bx-user text-secondary font-medium-2"></i>
                          </div>
                        </div>
                        <div class="total-amount">
                          <h5 class="mb-0 white">{{ $countadmin }}</h5>
                          <small class="text-muted white">Admin</small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="card bg-primary bg-lighten-1">
                    <div class="card-body d-flex align-items-center justify-content-between text-white">
                      <div class="d-flex align-items-center">
                        <div class="avatar bg-primary bg-light m-0 p-25 mr-75 mr-xl-2">
                          <div class="avatar-content">
                            <i class="bx bx-user text-primary font-medium-2"></i>
                          </div>
                        </div>
                        <div class="total-amount">
                          <h5 class="mb-0 white">{{ $countlurah }}</h5>
                          <small class="text-muted white">Lurah</small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="card bg-warning bg-lighten-1">
                    <div class="card-body d-flex align-items-center justify-content-between text-white">
                      <div class="d-flex align-items-center">
                        <div class="avatar bg-warning bg-light m-0 p-25 mr-75 mr-xl-2">
                          <div class="avatar-content">
                            <i class="bx bx-user text-warning font-medium-2"></i>
                          </div>
                        </div>
                        <div class="total-amount">
                          <h5 class="mb-0 white">{{ $countstaff }}</h5>
                          <small class="text-muted white">Staff</small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="card bg-info bg-lighten-1">
                    <div class="card-body d-flex align-items-center justify-content-between text-white">
                      <div class="d-flex align-items-center">
                        <div class="avatar bg-info bg-light m-0 p-25 mr-75 mr-xl-2">
                          <div class="avatar-content">
                            <i class="bx bx-user text-info font-medium-2"></i>
                          </div>
                        </div>
                        <div class="total-amount">
                          <h5 class="mb-0 white">{{ $countwarga }}</h5>
                          <small class="text-muted white">Warga</small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-8 col-sm-12">
          @role ('admin|lurah|staff')
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">Statistik Surat</h4>
              </div>
              <div class="card-content">
                <div class="card-body">
                  {!! $chart->container() !!}
                  <script src="{{ $chart->cdn() }}"></script>
                  {{ $chart->script() }}
                </div>
              </div>
            </div>
          @endrole
          @role ('warga')
            <div class="row">
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKTM</h3>
                      <p class="card-text">Surat Keterangan Tidak Mampu</p>
                      <a href="{{ route('sktm.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKD</h3>
                      <p class="card-text">Surat Keterangan Domisili</p>
                      <a href="{{ route('skd.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SPK</h3>
                      <p class="card-text">Surat Keterangan Pengantar KTP & KK</p>
                      <a href="{{ route('spk.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKDU</h3>
                      <p class="card-text">Surat Keterangan Domisili Usaha</p>
                      <a href="{{ route('skdu.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKBPM</h3>
                      <p class="card-text">Surat Keterangan Belum Pernah Menikah</p>
                      <a href="{{ route('skbpm.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKPD</h3>
                      <p class="card-text">Surat Keterangan Pindah Daerah</p>
                      <a href="{{ route('skpd.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKL</h3>
                      <p class="card-text">Surat Keterangan Kelahiran</p>
                      <a href="{{ route('skl.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKKP</h3>
                      <p class="card-text">Surat Keterangan Kematian & Pemakaman</p>
                      <a href="{{ route('skkp.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKMB</h3>
                      <p class="card-text">Surat Keterangan Tidak Berada Ditempat</p>
                      <a href="{{ route('skmb.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-6 activity-card">
                <div class="card text-center">
                  <div class="card-content d-flex">
                    <div class="card-body">
                      <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-1">
                        <i class="bx bx-briefcase-alt font-medium-5"></i>
                      </div>
                      <h3 class="card-title mb-1">SKJD</h3>
                      <p class="card-text">Surat Keterangan Janda/Duda</p>
                      <a href="{{ route('skjd.index') }}" class="btn btn-sm btn-danger">Klik Disini</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          @endrole
        </div>
      </div>
    
  </section>
  <!-- Dashboard Analytics end -->
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/charts/apexcharts.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/dragula.min.js')}}"></script>
@endsection

@section('page-scripts')
<script src="{{asset('js/scripts/pages/dashboard-analytics.js')}}"></script>
<script src="{{asset('js/scripts/charts/chart-apex.js')}}"></script>
@endsection