@extends('indexlayout')

@section('title', 'Dashboard')
@push('style')
@endpush
@section('content')
    <div class="row">
        <main id="js-page-content" role="main" class="page-content">
            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Sarana & Prasarana</a></li>
                <li class="breadcrumb-item active">KDO/KDOK</li>
                <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
            </ol>

            <div class="row">
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#fd7e14;">
                                40%
                                <small class="m-1 l-h-n">Jumlah PJLP</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div> <!-- end col-->
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#2f74f5;">
                                3,220
                                <small class="m-1 l-h-n"> Jumlah Bank Sampah</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#fd7e14;">
                                40%
                                <small class="m-1 l-h-n">Jumlah PJLP</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div> <!-- end col-->
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#2f74f5;">
                                3,220
                                <small class="m-1 l-h-n"> Jumlah Bank Sampah</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#fd7e14;">
                                40%
                                <small class="m-1 l-h-n">Jumlah PJLP</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div> <!-- end col-->
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#2f74f5;">
                                3,220
                                <small class="m-1 l-h-n"> Jumlah Bank Sampah</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#fd7e14;">
                                40%
                                <small class="m-1 l-h-n">Jumlah PJLP</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div> <!-- end col-->
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#2f74f5;">
                                3,220
                                <small class="m-1 l-h-n"> Jumlah Bank Sampah</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#fd7e14;">
                                40%
                                <small class="m-1 l-h-n">Jumlah PJLP</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div> <!-- end col-->
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#2f74f5;">
                                3,220
                                <small class="m-1 l-h-n"> Jumlah Bank Sampah</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#fd7e14;">
                                40%
                                <small class="m-1 l-h-n">Jumlah PJLP</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div> <!-- end col-->
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#2f74f5;">
                                3,220
                                <small class="m-1 l-h-n"> Jumlah Bank Sampah</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#faab00;">
                                2,500
                                <small class="m-1 l-h-n"> Jumlah KDO</small>
                            </h3>
                        </div> <!-- end card-body-->
                    </div> <!-- end card-->
                </div>
                <div class="col-sm-6 col-xl-2">
                    <div class="p-1 card border-yellow border position-relative mb-g ">
                        <div class="card-body">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500" style="color:#3bc0c3;">
                                3,500
                                <small class="m-1 l-h-n"> Jumlah Rumah Memilah</small>
                            </h3> <!-- end card-body-->
                        </div> <!-- end card-->
                    </div>
                </div>
        </main>
    </div>

@endsection

@push('script')
    <script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> --}}
    <script src="{{ asset('layout/dist/js/tabel.js') }}"></script>
    <script src="{{ asset('layout/dist/js/linechart.js') }}"></script>
    <script src="{{ asset('layout/dist/js/chartpie.js') }}"></script>
    <script src="{{ asset('layout/dist/js/anggarands.js') }}"></script>
@endpush