@extends('indexlayout')

@section('title', 'Dinas')
@push('style')
@endpush
@section('content')
    <main id="js-page-content" role="main" class="page-content">
        <ol class="breadcrumb page-breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Capaian Kinerja dan Anggaran UKPD</a></li>
            <li class="breadcrumb-item">Jumlah Pegawai</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-lg-5">
                <div id="panel-6" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Chart Pegawai
                        </h2>
                    </div>
                    <div class="panel-container show">
                        <div id="chartpegawai">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-7">
                <div id="panel-1" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Tabel Pegawai
                        </h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content table">

                            <!-- datatable start -->
                            <table id="dt-pns1" class="table table-bordered table-hover table-striped w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Jumlah Pegawai</th>
                                        <th>Pria</th>
                                        <th>Wanita</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Jumlah Pegawai PNS/ASN</td>
                                        <td>376 </td>
                                        <td>150 </td>
                                        <td><a href="{{ route('sadmin.pendukung.detailpns') }}" class="text-danger">526 </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>Jumlah Pegawai P3K</td>
                                        <td>5</td>
                                        <td>7</td>
                                        <td><a href="{{ route('sadmin.pendukung.detailpppk') }}" class="text-danger">12</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>Jumlah Pegawai PJLP</td>
                                        <td>12.019 </td>
                                        <td>1.006 </td>
                                        <td><a href="{{ route('sadmin.pendukung.detailpjlp') }}" class="text-danger">13.025
                                            </a></td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- datatable end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@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/linechart.js') }}"></script>
    <script src="{{ asset('layout/dist/js/pegawai.js') }}"></script>
    <script src="{{ asset('layout/dist/js/detailpegawai.js') }}"></script>
@endpush