@extends('layouts.vertical', ['subtitle' => 'Dashboards'])

@section('content')

@include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'SIBEDAS'])

<div class="row">
    <!-- Card 1 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Total Potensi Berkas</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus1"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus1"></h3>
                    </div>
                </div>
            </div>
            <div id="char-pbg-status-1"></div>
        </div>
    </div>

    <!-- Card 2 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Berkas Terverifikasi</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus2"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus2"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-2"></div>
        </div>
    </div>

    <!-- Card 3 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Berkas Belum Terverifikasi</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus3"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus3"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-3"></div>
        </div>
    </div>

    <!-- Card 4 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Non Usaha</p>
                        <h5 class="text-dark mt-2 mb-0" id="countNonUsaha"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalNonUsaha"></h3>
                    </div>
                </div>
            </div>
            <div id="chartNonUsaha"></div>
        </div>
    </div>
</div>

<div class="row">
        <!-- Card 5 -->
        <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Usaha</p>
                        <h5 class="text-dark mt-2 mb-0" id="countBusinessDocuments"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalBusinessDocuments"></h3>
                    </div>
                </div>
            </div>
            <div id="chartBusinessDocuments"></div>
        </div>
    </div>

    <!-- Card 6 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Berproses Di Dinas Teknis</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus4"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus4"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-4"></div>
        </div>
    </div>

    <!-- Card 7 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Berproses Di DPMPTSP</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus5"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus5"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-5"></div>
        </div>
    </div>

    <!-- Card 8 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Realisasi Terbit PBG</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus6"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus6"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-6"></div>
        </div>
    </div>
</div>

<div class="row">
        <!-- Card 5 -->
        <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Progres Manual</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus7"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus7"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-7"></div>
        </div>
    </div>

    <!-- Card 6 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Perkiraan Potensi PBG Dari Tata Ruang</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus20"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus20"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-20"></div>
        </div>
    </div>

    <!-- Card 7 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Perkiraan Potensi PBG Dari Tata Ruang</p>
                        <h5 class="text-dark mt-2 mb-0" id="countStatus24"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalStatus24"></h3>
                    </div>
                </div>
            </div>
            <div id="chart-pbg-status-24"></div>
        </div>
    </div>

    <!-- Card 8 -->
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <p class="text-muted mb-0 text-truncate">Target PAD</p>
                        <h5 class="text-dark mt-2 mb-0" id="countTargetPAD"></h5>
                        <h3 class="text-dark mt-2 mb-0" id="totalTargetPAD"></h3>
                    </div>
                </div>
            </div>
            <div id="chart12"></div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
@vite(['resources/js/dashboards/bigdata.js'])
@endsection