@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-blue">
                <div class="inner">
                    <h3 id="kabupaten">{{ Helper::jumlahKabupaten() }}</h3>

                    <p>Kabupaten</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('kabupaten') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3 id="kecamatan">{{ Helper::jumlahKecamatan() }}</h3>

                    <p>Kecamatan</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('kecamatan') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-green">
                <div class="inner">
                    <h3 id="kelurahan">{{ Helper::jumlahKelurahan() }}</h3>

                    <p>Kelurahan</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('kelurahan') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-red">
                <div class="inner">
                    <h3 id="user">{{ Helper::jumlahUser() }}</h3>

                    <p>User</p>
                </div>
                <div class="icon">
                    <i class="fa fa-user"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('user') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>
        <!-- ./col -->
    </div>
    <div class="row">
        <!-- ./col -->

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3 id="DptBelumTerdaftar">{{ Helper::jumlahDPTBelumTerdaftar() }}</h3>

                    <p>Total DPT belum terdaftar</p>
                </div>
                <div class="icon">
                    <i class="fa fa-users"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('dpt?status=1') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>

        <!-- ./col -->

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-orange">
                <div class="inner">
                    <h3 id="datawarga">{{ Helper::jumlahWarga() }}</h3>

                    <p>Total Data Warga</p>
                </div>
                <div class="icon">
                    <i class="fa fa-users"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('data-warga') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>
        <!-- ./col -->
        <!-- ./col -->

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3 id="surduk_masuk">{{ Helper::surdukMasuk() }}</h3>
                    {{-- <h3>0</h3> --}}
                    <p>Data Surduk Masuk</p>
                </div>
                <div class="icon">
                    <i class="fa fa-file-o"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>

        <!-- ./col -->

        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-orange">
                <div class="inner">
                    <h3 id="surduk_keluar">{{ Helper::surdukKeluar() }}</h3>
                    {{-- <h3>0</h3> --}}
                    <p>Data Surduk Keluar</p>
                </div>
                <div class="icon">
                    <i class="fa fa-file-o"></i>
                </div>
                @if (Auth::user()->role == 1)
                    <a href="{{ url('') }}" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                @endif
            </div>
        </div>
        <!-- ./col -->
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Data Warga Perhari</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body chart-responsive">
                    <div class="chart" id="revenue-chart" style="height: 300px;"></div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Data Warga Per Kabupaten <strong>Total : <span
                                id="kabupaten-total">{{ Helper::grafikPie('kabupaten')['total'] }}</span></strong></h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body chart-responsive">
                    <canvas id="grafik-per-kabupaten" height="250px"></canvas>

                </div>
                <!-- /.box-body -->
            </div>
        </div>

    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-3">
                            <h3 class="box-title">Data Warga Per Kecamatan di Kabupaten : </h3>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control select2" id="kabupaten_id" name="kabupaten_id"
                                onchange="updateGrafikKecamatan(this.value)">
                                <option value="0">Semua</option>
                                @foreach ($kabupatens as $key => $kabupaten)
                                    <option value="{{ $key }}">{{ $kabupaten }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <strong>Total : <span
                                    id="kecamatan-total">{{ Helper::grafikPie('kecamatan')['total'] }}</span></strong>
                        </div>
                    </div>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body chart-responsive">
                    <canvas id="grafik-per-kecamatan" height="250px"></canvas>

                </div>
                <!-- /.box-body -->
            </div>
        </div>

    </div>

    <div class="row">


        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-3">
                            <h3 class="box-title">Data Warga Per Kelurahan di Kecamatan : </h3>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control select2" id="kecamatan_id" name="kecamatan_id"
                                onchange="updateGrafikKelurahan(this.value)">
                                <option value="0">Semua</option>
                                @foreach ($kecamatans as $key => $kecamatan)
                                    <option value="{{ $key }}">{{ $kecamatan }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <strong>Total : <span
                                    id="kelurahan-total">{{ Helper::grafikPie('kelurahan')['total'] }}</span></strong>
                        </div>
                    </div>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body chart-responsive">
                    <canvas id="grafik-per-kelurahan" height="250px"></canvas>

                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>

    <div class="row">


        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-3">
                            <h3 class="box-title">Data Warga Per RT di kelurahan : </h3>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control select2" id="kelurahan_id" name="kelurahan_id"
                                onchange="updateGrafikRt(this.value)">
                                <option value="0">Semua</option>
                                @foreach ($kelurahans as $key => $kelurahan)
                                    <option value="{{ $key }}">{{ $kelurahan }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <strong>Total : <span id="rt-total">{{ Helper::grafikPie('rt')['total'] }}</span></strong>
                        </div>
                    </div>


                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body chart-responsive">
                    <canvas id="grafik-per-rt" height="250px"></canvas>

                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        function isMobile() {
            return window.innerWidth <= 768; // Adjust this value according to your design
        }


        setTimeout(function() {
            if ($("#grafik-per-kabupaten").length) {
                var kab = new Chart(document.getElementById("grafik-per-kabupaten"), {
                    type: 'bar',
                    data: {
                        labels: <br />
<b>Fatal error</b>:  Uncaught Error: Class &quot;Helper&quot; not found in /home/aplikasiposinfo/public_html/datawarga.samarinda.app/resources/views/home.blade.php:339
Stack trace:
#0 {main}
  thrown in <b>/home/aplikasiposinfo/public_html/datawarga.samarinda.app/resources/views/home.blade.php</b> on line <b>339</b><br />