@extends('layouts.panel.app', ['title' => 'BIG Data'])

@section('content')
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<style>
    .select2-container--default .select2-selection--single {
        min-height: 24px !important;
        padding: 0px 0px !important;
        border: 1px solid #ccc;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px !important;
        text-align: left !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 24px !important;
        line-height: 24px !important;
        margin-top: -4px !important;
    }
</style>
<section class="section">
    <div id="mainDiv">
        <div class="row">
            <div class="col-md-6 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Chart Anggota
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_kota" name="select_kota" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_kec" name="select_kec" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <button onclick="loadDataChartAnggota('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>

                            <div class="row">
                                <div class="col-md-12 ">
                                    <i style="font-size: 10px;
                                        color: #4287FE;
                                        font-weight: 100;
                                        cursor:pointer" class="fas fa-light fa-eye" onclick="detailChartAnggota()"> Lihat Detail
                                    </i>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="card-stats-items"> -->

                        <canvas style="position:relative;
                                    margin: auto;" id="chartAnggota">
                        </canvas>
                        <div class="row" style="margin-bottom: 15px;">
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="totAnggota"></span><br />
                                <span style="font-size:11px"> Total Dokter Anggota</span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="countDS"></span><br />
                                <span style="font-size:11px" id="txtPercentDS">
                                </span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="countDU"></span>
                                <br />
                                <span style="font-size:11px" id="txtPercentDU">
                                </span>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
            <div class="col-md-6 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Lulusan Anggota
                                    </span>
                                </div>
                                <div class="col-md-4" style="white-space: nowrap; text-align: right;">
                                    <select style="margin-right: 3px; display: inline-block;" class="form-control select-sm select2" id="select_univ" name="select_univ" placeholder="Pilih Semua">
                                        <option value="ALL">Lihat semua</option>
                                        @foreach ($univ as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                        @endforeach
                                    </select>

                                    <!-- <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_univ" name="select_univ" placeholder="Universitas" required>
                                        <option value="ALL">Universitas</option>
                                        @foreach($univ as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select> -->

                                </div>
                                <div class="col-md-3">
                                    <button onclick="loadDataLulusanAnggota('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>
                            <div class="row">
                                <div class="col-md-12 ">
                                    <i style="font-size: 10px;
                                        color: #4287FE;
                                        font-weight: 100;
                                        cursor:pointer" class="fas fa-light fa-eye" onclick="detailLulusanAnggota()"> Lihat Detail
                                    </i>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="card-stats-items"> -->
                        <canvas style="position:relative;
                                    margin: auto;" id="lulusanAnggota">
                        </canvas>
                        <div class="row" style="margin-bottom: 15px;">
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="totLulusanAnggota"></span><br />
                                <span style="font-size:11px"> Total Dokter Anggota</span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="countLulusanDS"></span><br />
                                <span style="font-size:11px" id="txtPercentLulusanDS">
                                </span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="countLulusanDU"></span>
                                <br />
                                <span style="font-size:11px" id="txtPercentLulusanDU">
                                </span>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Gender Dokter
                                    </span>
                                </div>
                            </div>
                            <div class="row" style="margin-bottom:20px">
                                <div class="col-md-12 ">
                                    <i style="font-size: 10px;
                                        color: #4287FE;
                                        font-weight: 100;
                                        cursor:pointer" class="fas fa-light fa-eye" onclick="detailGenderDokter()"> Lihat Detail
                                    </i>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4  " style="border-right: solid 1px #d9d9d9;">
                                    <div class="row" style="margin-bottom:15px">
                                        <div class="col-md-12" style="font-size:14px">Dokter Anggota</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countGDDAM">{{$gender_anggota['daMale']}}</span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Laki-laki</span>
                                        </div>
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countGDDAF">{{$gender_anggota['daFemale']}}</span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-5.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Perempuan</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4  " style="border-right: solid 1px #d9d9d9;">
                                    <div class="row" style="margin-bottom:15px">
                                        <div class="col-md-12 " style="font-size:14px">Dokter Spesialis</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countGDDSM">{{$gender_anggota['dsMale']}}</span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Laki-laki</span>
                                        </div>
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countGDDSF">{{$gender_anggota['dsFemale']}}</span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-5.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Perempuan</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 ">
                                    <div class="row" style="margin-bottom:15px">
                                        <div class="col-md-12 " style="font-size:14px">Dokter Umum</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countGDDUM">{{$gender_anggota['duMale']}}</span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Laki-laki</span>
                                        </div>
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countGDDUF">{{$gender_anggota['duFemale']}}</span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-5.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Perempuan</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Kelompok Usia
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_kota_kel_usia" name="select_kota_kel_usia" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_kec_kel_usia" name="select_kec_kel_usia" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>

                                    <!-- <button onclick="cok('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button> -->

                                    <button onclick="loadDataKelompokUsiaAnggota('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>
                            <div class="row" style="margin-bottom:20px">
                                <div class="col-md-12 ">
                                    <i style="font-size: 10px;
                                        color: #4287FE;
                                        font-weight: 100;
                                        cursor:pointer" class="fas fa-light fa-eye" onclick="detailKelompokUsiaAnggota()"> Lihat Detail
                                    </i>
                                </div>
                            </div>
                        </div>
                        <canvas id="kelompokUsiaAnggota">
                        </canvas>
                        <button style="
                                    margin-left: 10px;
                                    margin-bottom: 15px;" onclick="resetChartKeompokUsia()" class="btn btn-sm2 btn-info">Reset Zoom</button>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Tempat praktek
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_kota_tpt_praktek" name="select_kota_tpt_praktek" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_kec_tpt_praktek" name="select_kec_tpt_praktek" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>

                                    <!-- <button onclick="cok('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button> -->

                                    <button onclick="loadDataTptPraktekAnggota('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>

                            <div class="row" style="margin-bottom: 30px;">
                                <div class="col-md-12 ">
                                    <i style="font-size: 10px;
                                        color: #4287FE;
                                        font-weight: 100;
                                        cursor:pointer" class="fas fa-light fa-eye" onclick="detailTempatPraktek()"> Lihat Detail
                                    </i>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">

                                    <div class="row">
                                        <div class="col-md-4" style="text-align: right;margin: auto;">
                                            <i style="font-size: 14px;
                                                    background-color: #99ccff;
                                                    color: #4287FE;
                                                    padding: 5px;
                                                    font-weight: 100;
                                                    border-radius: 5px;
                                                    border: solid 10px #e6f2ff;" class="fas fa-chart-bar">
                                            </i>
                                        </div>
                                        <div class="col-md-8">
                                            <span>Total Tempat Praktek</span></br>
                                            <span style="font-weight:bold;font-size:20px" id="totPraktek">
                                                0
                                            </span>
                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-4" style="text-align: right;margin: auto;">
                                            <i style="font-size: 14px;
                                                    background-color: #99ccff;
                                                    color: #4287FE;
                                                    padding: 5px;
                                                    font-weight: 100;
                                                    border-radius: 5px;
                                                    border: solid 10px #e6f2ff;" class="fas fa-chart-bar">
                                            </i>
                                        </div>
                                        <div class="col-md-8">
                                            <span>di Rumah Sakit</span></br>
                                            <span style="font-weight:bold;font-size:20px" id="praktekRS">
                                                0
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-4" style="text-align: right;margin: auto;">
                                            <i style="font-size: 14px;
                                                    background-color: #99ccff;
                                                    color: #4287FE;
                                                    padding: 5px;
                                                    font-weight: 100;
                                                    border-radius: 5px;
                                                    border: solid 10px #e6f2ff;" class="fas fa-chart-bar">
                                            </i>
                                        </div>
                                        <div class="col-md-8">
                                            <span>di Tempat Pribadi</span></br>
                                            <span style="font-weight:bold;font-size:20px" id="praktekRP">
                                                0
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Detail Rasio Penduduk & Jumlah Rumah Sakit
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_kota_rasio" name="select_kota_rasio" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_kec_rasio" name="select_kec_rasio" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>

                                    <!-- <button onclick="cok('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button> -->

                                    <button onclick="loadDataDetailRasio('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>

                            <div class="row">
                                <div class="col-md-12 ">
                                    <i style="font-size: 10px;
                                        color: #4287FE;
                                        font-weight: 100;
                                        cursor:pointer" class="fas fa-light fa-eye" onclick="detailRasioPenduduk()"> Lihat Detail
                                    </i>
                                </div>
                            </div>
                        </div>
                        <canvas id="detailRasio">
                        </canvas>
                        <button style="
                                            margin-left: 10px;
                                            margin-bottom: 15px;" onclick="resetChartRatio()" class="btn btn-sm2 btn-info">Reset Zoom</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="divDetailChartAnggota">
        <div class="row" style="display:table;">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
                <!-- <i onclick="back()" id="back" class="fas fa-solid fa-chevron-left"></i> -->
                <i onclick="back()" id="back" style="font-size: 25px;
                            background-color: #00C853;
                            color: #fff;
                            padding: 6px 11px;
                            border-radius: 25px;
                            border: solid 1px #00C853;" class="fas fa-solid fa-chevron-left">
                </i>
                <!-- <button onclick="back()" id="back" class="btn btn-sm2 btn-success"></button>           -->
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span class="title-detail-chart">
                    Anggota
                </span>
            </div>
        </div>
        <div class="row" style="display:table;margin-bottom: 10px">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span style="margin-left: 40px">
                    List Anggota
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Chart Anggota
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_detail_kota" name="select_detail_kota" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_kec" name="select_detail_kec" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_dokter" name="select_detail_dokter" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Dokter</option>
                                        <option value="DOKTER UMUM">DOKTER UMUM</option>
                                        <option value="DOKTER SPESIALIS">DOKTER SPESIALIS</option>
                                    </select>
                                    <button onclick="loadDataDetailChartAnggota('false');loadDataDetailTableAnggota('false')" id="filter_detail_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>
                        </div>
                        <!-- <div class="card-stats-items"> -->
                        <canvas style="position:relative;
                                    margin: auto;" id="detailChartAnggota">
                        </canvas>
                        <div class="row" style="margin-bottom: 15px;">
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="detailTotAnggota"></span><br />
                                <span style="font-size:11px"> Total Dokter Anggota</span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="detailCountDS"></span><br />
                                <span style="font-size:11px" id="detailTxtPercentDS">
                                </span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="detailCountDU"></span>
                                <br />
                                <span style="font-size:11px" id="detailTxtPercentDU">
                                </span>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="card card-statistic-2" style="padding: 20px;">
                <div class="card-stats">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="title-chart">
                                Detail Anggota
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <figure class="avatar mr-2 avatar-xs">
                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                            </figure>
                            <span style="font-size:10px">Total Dokter ( </span>
                            <span style="font-size:10px;color:green" id="detailTotAnggota2"></span>
                            <span style="font-size:10px"> )</span>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <form id="tableDetailChartAnggotaSearchForm">
                                <div class="d-flex mb-3">
                                    <input type="search" id="tableDetailChartAnggotaSearch" class="form-control me-2" placeholder="Masukan Pencarian...">
                                    <button type="submit" class="btn btn-info">Cari</button>
                                </div>
                            </form>
                            <table id="tableDetailChartAnggota" class="table table-striped mb-0 display" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Nama</th>
                                        <th>NPAC / NPA IDI</th>
                                        <th>Tipe Dokter</th>
                                        <th>Alamat/Lokasi</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="divDetailLulusanAnggota">
        <div class="row" style="display:table;">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
                <!-- <i onclick="back()" id="back" class="fas fa-solid fa-chevron-left"></i> -->
                <i onclick="back()" id="back" style="font-size: 25px;
                            background-color: #00C853;
                            color: #fff;
                            padding: 6px 11px;
                            border-radius: 25px;
                            border: solid 1px #00C853;" class="fas fa-solid fa-chevron-left">
                </i>
                <!-- <button onclick="back()" id="back" class="btn btn-sm2 btn-success"></button>           -->
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span class="title-detail-chart">
                    Lulusan Anggota
                </span>
            </div>
        </div>
        <div class="row" style="display:table;margin-bottom: 10px">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span style="margin-left: 40px">
                    Lulusan Anggota
                </span>
            </div>
        </div>



        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-8 ">
                                    <span class="title-chart">
                                        Lulusan Anggota
                                    </span>
                                </div>
                                <div class="col-md-2" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" class="select2" id="select_detail_univ" name="select_detail_univ" placeholder="Pilih Semua">
                                        <option value="ALL">Lihat semua</option>
                                        @foreach ($univ as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                        @endforeach
                                    </select>
                                    <!-- <select style="margin-right:3px;display: inline-block;"; class="form-control  select-sm" id="select_detail_univ" name="select_detail_univ" placeholder="Universitas" required>
                                        <option value="ALL">Universitas</option>
                                        @foreach($univ as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select> -->
                                </div>

                                <div class="col-md-2">
                                    <button onclick="loadDataDetailLulusanAnggota('false');loadDataDetailLulusanTableAnggota('false');" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                            </div>
                        </div>
                        <canvas style="position:relative;
                                    margin: auto;" id="detailLulusanAnggota">
                        </canvas>
                        <div class="row" style="margin-bottom: 15px;">
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="detailLulusanTotAnggota"></span><br />
                                <span style="font-size:11px"> Total Dokter Anggota</span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="detailLulusanCountDS"></span><br />
                                <span style="font-size:11px" id="detailLulusanTxtPercentDS">
                                </span>
                            </div>
                            <div class="col-md-4" style="text-align:center">
                                <span style="font-size:20px" id="detailLulusanCountDU"></span>
                                <br />
                                <span style="font-size:11px" id="detailLulusanTxtPercentDU">
                                </span>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="card card-statistic-2" style="padding: 20px;">
                <div class="card-stats">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="title-chart">
                                Detail Lulusan Anggota
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <figure class="avatar mr-2 avatar-xs">
                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                            </figure>
                            <span style="font-size:10px">Total Dokter ( </span>
                            <span style="font-size:10px;color:green" id="detailLulusanTotAnggota2"></span>
                            <span style="font-size:10px"> )</span>
                        </div>
                    </div>
                    <table id="tableDetailLulusanAnggota" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Tipe Dokter</th>
                                <th>Lulusan Kampus</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="divDetailGenderDokter">
        <div class="row" style="display:table;">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
                <!-- <i onclick="back()" id="back" class="fas fa-solid fa-chevron-left"></i> -->
                <i onclick="back()" id="back" style="font-size: 25px;
                            background-color: #00C853;
                            color: #fff;
                            padding: 6px 11px;
                            border-radius: 25px;
                            border: solid 1px #00C853;" class="fas fa-solid fa-chevron-left">
                </i>
                <!-- <button onclick="back()" id="back" class="btn btn-sm2 btn-success"></button>           -->
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span class="title-detail-chart">
                    Gender Anggota
                </span>
            </div>
        </div>
        <div class="row" style="display:table;margin-bottom: 10px">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span style="margin-left: 40px">
                    Gender Anggota
                </span>
            </div>
        </div>



        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Gender Dokter
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_gender" name="select_detail_gender" placeholder="Universitas" required>
                                        <option value="ALL">Gender</option>
                                        <option value="L">Laki-laki</option>
                                        <option value="P">Perempuan</option>
                                    </select>
                                    <button onclick="loadDataDetailGenderDokter('false');loadDataDetailTableGenderDokter('false');" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4  " style="border-right: solid 1px #d9d9d9;">
                                    <div class="row" style="margin-bottom:15px">
                                        <div class="col-md-12" style="font-size:14px">Dokter Anggota</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countDetailGDDAM"></span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Laki-laki</span>
                                        </div>
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countDetailGDDAF"></span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-5.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Perempuan</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4  " style="border-right: solid 1px #d9d9d9;">
                                    <div class="row" style="margin-bottom:15px">
                                        <div class="col-md-12 " style="font-size:14px">Dokter Spesialis</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countDetailGDDSM"></span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Laki-laki</span>
                                        </div>
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countDetailGDDSF"></span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-5.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Perempuan</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 ">
                                    <div class="row" style="margin-bottom:15px">
                                        <div class="col-md-12 " style="font-size:14px">Dokter Umum</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countDetailGDDUM"></span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Laki-laki</span>
                                        </div>
                                        <div class="col-md-6 ">
                                            <span style="font-size:20px" id="countDetailGDDUF"></span>
                                            <br />
                                            <figure class="avatar mr-2 avatar-xs">
                                                <img src="{{asset('assets-panel/img/avatar/avatar-5.png')}}" alt="...">

                                            </figure>
                                            <span style="font-size:10px">Perempuan</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="card card-statistic-2" style="padding: 20px;">
                <div class="card-stats">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="title-chart">
                                Detail Gender Anggota
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <figure class="avatar mr-2 avatar-xs">
                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                            </figure>
                            <span style="font-size:10px">Total Anggota ( </span>
                            <span style="font-size:10px;color:green" id="detailGenderTotGender2"></span>
                            <span style="font-size:10px"> )</span>
                        </div>
                    </div>
                    <table id="tableDetailGenderDokter" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Tipe Dokter</th>
                                <th>Gender</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="divDetailKelompokUsia">
        <div class="row" style="display:table;">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
                <!-- <i onclick="back()" id="back" class="fas fa-solid fa-chevron-left"></i> -->
                <i onclick="back()" id="back" style="font-size: 25px;
                            background-color: #00C853;
                            color: #fff;
                            padding: 6px 11px;
                            border-radius: 25px;
                            border: solid 1px #00C853;" class="fas fa-solid fa-chevron-left">
                </i>
                <!-- <button onclick="back()" id="back" class="btn btn-sm2 btn-success"></button>           -->
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span class="title-detail-chart">
                    Kelompok Usia
                </span>
            </div>
        </div>

        <div class="row" style="display:table;margin-bottom: 10px">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span style="margin-left: 40px">
                    Kelompok Usia
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Kelompok Usia
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_detail_kota_kel_usia" name="select_detail_kota_kel_usia" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_kec_kel_usia" name="select_detail_kec_kel_usia" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_kel_usia" name="select_detail_kel_usia" placeholder="Usia" required>
                                        <option value="ALL">Pilih Usia</option>
                                        <option value="26_30">26 - 30</option>
                                        <option value="31_35">31 - 35</option>
                                        <option value="36_40">36 - 40</option>
                                        <option value="41_45">41 - 45</option>
                                        <option value="46_50">46 - 50</option>
                                        <option value="51_55">51 - 55</option>
                                        <option value="56_60">56 - 60</option>
                                        <option value="61_65">61 - 65</option>
                                        <option value="66_70">66 - 70</option>
                                    </select>

                                    <!-- <button onclick="cok('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button> -->

                                    <button onclick="loadDataDetailKelompokUsiaAnggota('false');loadDataDetailTableKelompokUsiaAnggota('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>
                        </div>
                        <canvas id="detailKelompokUsiaAnggota">
                        </canvas>
                        <button style="
                                    margin-left: 10px;
                                    margin-bottom: 15px;" onclick="resetChartDetailKeompokUsia()" class="btn btn-sm2 btn-info">Reset Zoom</button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="card card-statistic-2" style="padding: 20px;">
                <div class="card-stats">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="title-chart">
                                Detail Kelompok Usia
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <figure class="avatar mr-2 avatar-xs">
                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                            </figure>
                            <span style="font-size:10px">Total Anggota ( </span>
                            <span style="font-size:10px;color:green" id="detailKelompokUsia2"></span>
                            <span style="font-size:10px"> )</span>
                        </div>
                    </div>
                    <table id="tableDetailKelompokUsia" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Tipe Dokter</th>
                                <th>Kelompok Usia</th>
                                <th>Alamat</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="divDetailTempatPraktek">
        <div class="row" style="display:table;">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
                <!-- <i onclick="back()" id="back" class="fas fa-solid fa-chevron-left"></i> -->
                <i onclick="back()" id="back" style="font-size: 25px;
                            background-color: #00C853;
                            color: #fff;
                            padding: 6px 11px;
                            border-radius: 25px;
                            border: solid 1px #00C853;" class="fas fa-solid fa-chevron-left">
                </i>
                <!-- <button onclick="back()" id="back" class="btn btn-sm2 btn-success"></button>           -->
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span class="title-detail-chart">
                    Tempat Praktek
                </span>
            </div>
        </div>

        <div class="row" style="display:table;margin-bottom: 10px">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span style="margin-left: 40px">
                    List Tempat Praktek
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 ">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row" style="margin-bottom: 15px;">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Tempat Praktek
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_detail_kota_tpt_praktek" name="select_detail_kota_tpt_praktek" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_kec_tpt_praktek" name="select_detail_kec_tpt_praktek" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_tpt_praktek" name="select_detail_tpt_praktek" placeholder="Usia" required>
                                        <option value="ALL">Pilih tempat praktek</option>
                                        <option value="rs">Rumah Sakit</option>
                                        <option value="rp">Tempat Pribadi</option>
                                    </select>

                                    <!-- <button onclick="cok('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button> -->

                                    <button onclick="loadDataDetailTempatPraktek('false');loadDataDetailTableTempatPraktek('false')" id="filter_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>
                            <div class="row">
                                <div class="col-md-4">

                                    <div class="row">
                                        <div class="col-md-4" style="text-align: right;margin: auto;">
                                            <i style="font-size: 14px;
                                                    background-color: #99ccff;
                                                    color: #4287FE;
                                                    padding: 5px;
                                                    font-weight: 100;
                                                    border-radius: 5px;
                                                    border: solid 10px #e6f2ff;" class="fas fa-chart-bar">
                                            </i>
                                        </div>
                                        <div class="col-md-8">
                                            <span>Total Tempat Praktek</span></br>
                                            <span style="font-weight:bold;font-size:20px" id="totDetailPraktek">
                                                0
                                            </span>
                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-4" style="text-align: right;margin: auto;">
                                            <i style="font-size: 14px;
                                                    background-color: #99ccff;
                                                    color: #4287FE;
                                                    padding: 5px;
                                                    font-weight: 100;
                                                    border-radius: 5px;
                                                    border: solid 10px #e6f2ff;" class="fas fa-chart-bar">
                                            </i>
                                        </div>
                                        <div class="col-md-8">
                                            <span>di Rumah Sakit</span></br>
                                            <span style="font-weight:bold;font-size:20px" id="detailPraktekRS">
                                                0
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-4" style="text-align: right;margin: auto;">
                                            <i style="font-size: 14px;
                                                    background-color: #99ccff;
                                                    color: #4287FE;
                                                    padding: 5px;
                                                    font-weight: 100;
                                                    border-radius: 5px;
                                                    border: solid 10px #e6f2ff;" class="fas fa-chart-bar">
                                            </i>
                                        </div>
                                        <div class="col-md-8">
                                            <span>di Tempat Pribadi</span></br>
                                            <span style="font-weight:bold;font-size:20px" id="detailPraktekRP">
                                                0
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="card card-statistic-2" style="padding: 20px;">
                <div class="card-stats">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="title-chart">
                                Detail Tempat Praktek
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <figure class="avatar mr-2 avatar-xs">
                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                            </figure>
                            <span style="font-size:10px">Sarana TempatPraktek ( </span>
                            <span style="font-size:10px;color:green" id="detailTempatPraktek2"></span>
                            <span style="font-size:10px"> )</span>
                        </div>
                    </div>
                    <table id="tableDetailTempatPraktek" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Tipe</th>
                                <th>Nama Sarana Kesehatan</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="divDetailRasio">
        <div class="row" style="display:table;margin-bottom: 10px">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
                <!-- <i onclick="back()" id="back" class="fas fa-solid fa-chevron-left"></i> -->
                <i onclick="back()" id="back" style="font-size: 25px;
                            background-color: #00C853;
                            color: #fff;
                            padding: 6px 11px;
                            border-radius: 25px;
                            border: solid 1px #00C853;" class="fas fa-solid fa-chevron-left">
                </i>
                <!-- <button onclick="back()" id="back" class="btn btn-sm2 btn-success"></button>           -->
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span class="title-detail-chart">
                    Rasio Penduduk
                </span>
            </div>
        </div>
        <div class="row" style="display:table;margin-bottom: 10px">
            <div class="col-md-1" style="display:table-cell;vertical-align:middle;">
            </div>
            <div class="col-md-11" style="display:table-cell;vertical-align:middle;">
                <span style="margin-left: 40px">
                    Kelompok Usia
                </span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card card-statistic-2">
                    <div class="card-stats">
                        <div class="card-stats-title">
                            <div class="row">
                                <div class="col-md-5 ">
                                    <span class="title-chart">
                                        Rasio Penduduk & Jumlah Rumah Sakit
                                    </span>
                                </div>
                                <div class="col-md-7" style="white-space: nowrap;text-align: right;">
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control select-sm" id="select_detail_rasio_kota" name="select_detail_rasio_kota" placeholder="Pilih Kota" required>
                                        <option value="ALL">Pilih Kota</option>
                                        @foreach($kabkot as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <select style="margin-right:3px;display: inline-block;" ; class="form-control  select-sm" id="select_detail_rasio_kec" name="select_detail_rasio_kec" placeholder="Pilih kecamatan" required>
                                        <option value="ALL">Pilih Kecamatan</option>
                                        @foreach($kec as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <button onclick="loadDataDetailChartRasio('false');loadDataDetailTableRasio('false')" id="filter_detail_chart_anggota" class="btn btn-sm2 btn-info">Filter</button>
                                </div>
                                <!-- <div class= "col-md-3 ">Filter Kecamatan</div>
                                <div class= "col-md-3 ">Filter</div> -->
                            </div>
                        </div>
                        <!-- <div class="card-stats-items"> -->

                        <div class="row">
                            <div class="col-md-12 ">

                                <canvas id="detailRasioPenduduk">
                                </canvas>

                                <button style="
                                            margin-left: 10px;
                                            margin-bottom: 15px;" onclick="resetChartDetailRatio()" class="btn btn-sm2 btn-info">Reset Zoom</button>

                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="card card-statistic-2" style="padding: 20px;">
                <div class="card-stats">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="title-chart">
                                Detail Rasio Penduduk & Jumlah Rumah Sakit
                            </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <figure class="avatar mr-2 avatar-xs">
                                <img src="{{asset('assets-panel/img/avatar/avatar-1.png')}}" alt="...">

                            </figure>
                            <span style="font-size:10px">Total Dokter ( </span>
                            <span style="font-size:10px;color:green" id="detailTotAnggota2"></span>
                            <span style="font-size:10px"> )</span>
                        </div>
                    </div>
                    <table id="tableDetailRasio" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Rasio Penduduk</th>
                                <th>Jumlah Rumah Sakit</th>
                                <th>Dokter Umum</th>
                                <th>Dokter Spesialis</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </div>


</section>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<script>
    $(document).ready(function() {

        // .select2-selection__rendered {
        //     line-height: 21px !important;
        // }
        // .select2-container .select2-selection--single {
        //     height: 25px !important;
        // }
        // .select2-selection__arrow {
        //     height: 24px !important;
        // }

        loadDataChartAnggota(onReload = true);
        loadDataLulusanAnggota(onReload = true);
        loadDataKelompokUsiaAnggota(onReload = true);
        loadDataTptPraktekAnggota(onReload = true);
        loadDataDetailRasio(onReload = true);

        $("#divDetailChartAnggota").hide();
        $("#divDetailLulusanAnggota").hide();
        $("#divDetailGenderDokter").hide();
        $("#divDetailKelompokUsia").hide();
        $("#divDetailTempatPraktek").hide();
        $("#divDetailRasio").hide();

        // <div id="divDetailTempatPraktek">loadDataDetailTempatPraktek('false');loadDataDetailTableTempatPraktek('false')

    });


    function back() {

        $("#mainDiv").show();

        $("#divDetailChartAnggota").hide();
        $("#divDetailLulusanAnggota").hide();
        $("#divDetailGenderDokter").hide();
        $("#divDetailKelompokUsia").hide();
        $("#divDetailTempatPraktek").hide();
        $("#divDetailRasio").hide();
    }

    function detailRasioPenduduk() {

        $("#mainDiv").hide();

        $("#divDetailLulusanAnggota").hide();
        $("#divDetailGenderDokter").hide();
        $("#divDetailKelompokUsia").hide();
        $("#divDetailChartAnggota").hide();
        $("#divDetailTempatPraktek").hide();
        $("#divDetailRasio").show();

        loadDataDetailChartRasio(true);
        loadDataDetailTableRasio(true);

    }

    function detailTempatPraktek() {

        $("#mainDiv").hide();

        $("#divDetailLulusanAnggota").hide();
        $("#divDetailGenderDokter").hide();
        $("#divDetailKelompokUsia").hide();
        $("#divDetailChartAnggota").hide();
        $("#divDetailRasio").hide();
        $("#divDetailTempatPraktek").show();

        loadDataDetailTempatPraktek(true);
        loadDataDetailTableTempatPraktek(true);

    }

    function detailKelompokUsiaAnggota() {

        $("#mainDiv").hide();

        $("#divDetailChartAnggota").hide();
        $("#divDetailLulusanAnggota").hide();
        $("#divDetailGenderDokter").hide();
        $("#divDetailTempatPraktek").hide();
        $("#divDetailRasio").hide();
        $("#divDetailKelompokUsia").show();

        loadDataDetailKelompokUsiaAnggota(true);
        loadDataDetailTableKelompokUsiaAnggota(true);
    }


    function detailGenderDokter() {

        $("#mainDiv").hide();

        $("#divDetailChartAnggota").hide();
        $("#divDetailLulusanAnggota").hide();
        $("#divDetailKelompokUsia").hide();
        $("#divDetailTempatPraktek").hide();
        $("#divDetailRasio").hide();
        $("#divDetailGenderDokter").show();

        loadDataDetailGenderDokter(true);
        loadDataDetailTableGenderDokter(true);
    }

    function detailLulusanAnggota() {

        $("#mainDiv").hide();

        $("#divDetailChartAnggota").hide();
        $("#divDetailGenderDokter").hide();
        $("#divDetailKelompokUsia").hide();
        $("#divDetailTempatPraktek").hide();
        $("#divDetailRasio").hide();
        $("#divDetailLulusanAnggota").show();

        loadDataDetailLulusanAnggota(true);
        loadDataDetailLulusanTableAnggota(true);

    }

    function detailChartAnggota() {

        $("#mainDiv").hide();

        $("#divDetailLulusanAnggota").hide();
        $("#divDetailGenderDokter").hide();
        $("#divDetailKelompokUsia").hide();
        $("#divDetailTempatPraktek").hide();
        $("#divDetailRasio").hide();
        $("#divDetailChartAnggota").show();

        loadDataDetailChartAnggota(true);
        loadDataDetailTableAnggota(true);

    }



    function resetChartRatio() {

        let chartStatus = Chart.getChart("detailRasio"); // <canvas> id

        chartStatus.resetZoom('none');
    }

    function resetChartDetailRatio() {

        let chartStatus = Chart.getChart("detailRasioPenduduk"); // <canvas> id

        chartStatus.resetZoom('none');
    }

    function resetChartKeompokUsia() {

        let chartStatus = Chart.getChart("kelompokUsiaAnggota"); // <canvas> id

        chartStatus.resetZoom('none');
    }

    function resetChartDetailKeompokUsia() {

        let chartStatus = Chart.getChart("detailKelompokUsiaAnggota"); // <canvas> id

        chartStatus.resetZoom('none');
    }




    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////  start detail chart ///////////////////////////////////////////////////


    function loadDetailChartRasio(dataAnggota) {


        // const _chartAnggota = document.getElementById('chartAnggota');
        const _lulusanAnggota = document.getElementById('detailRasioPenduduk');

        let chartStatus = Chart.getChart("detailRasioPenduduk"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        const data = {
            labels: dataAnggota['lb'],
            datasets: [{
                    label: 'Rasio Penduduk',
                    data: dataAnggota['rp'],
                },
                {
                    label: 'Rumah Sakit',
                    data: dataAnggota['rs'],
                },
                {
                    label: 'Dokter umum',
                    data: dataAnggota['du'],
                },
                {
                    label: 'Dokter Spesialis',
                    data: dataAnggota['ds'],
                },
            ]
        }

        new Chart(_lulusanAnggota, {
            type: 'bar',

            data: data,

            options: {
                responsive: true,
                layout: {
                    padding: 30
                },
                categoryPercentage: 1.0,
                barPercentage: 1.0,
                barThickness: 15,
                plugins: {
                    zoom: {
                        pan: {

                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                            // pan options and/or events
                        },
                        zoom: {
                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                        }
                    },
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        // text: 'Chart.js Bar Chart'
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        }
                    },
                }
            },
        });
    }

    function loadDetailTempatPraktek(dataAnggota) {

        const _totPraktek = document.getElementById('totDetailPraktek');
        const _praktekRP = document.getElementById('detailPraktekRP');
        const _praktekRS = document.getElementById('detailPraktekRS');

        const tot = dataAnggota['tot'];
        const rs = dataAnggota['rs'];
        const rp = dataAnggota['rp'];

        $(_totPraktek).text(tot)
        $(_praktekRP).text(rp)
        $(_praktekRS).text(rs)
    }

    function loadDetailChartKelompokUsiaAnggota(dataAnggota) {
        // alert(JSON.stringify(dataAnggota))
        // return;
        // const _chartAnggota = document.getElementById('chartAnggota');
        const _lulusanAnggota = document.getElementById('detailKelompokUsiaAnggota');
        const _totalKelompokUsia = document.getElementById('detailKelompokUsia2');

        $(_totalKelompokUsia).text(dataAnggota['tot'])


        let chartStatus = Chart.getChart("detailKelompokUsiaAnggota"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        const data = {
            labels: ["26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "55-60", "61-65", "66-70"],
            datasets: [{
                    label: 'Dokter Anggota',
                    data: dataAnggota['da'],
                },
                {
                    label: 'Dokter Spesialis',
                    data: dataAnggota['ds'],
                },
                {
                    label: 'Dokter umum',
                    data: dataAnggota['du'],
                },
            ]
        }

        new Chart(_lulusanAnggota, {
            type: 'bar',

            data: data,

            options: {
                responsive: true,
                layout: {
                    padding: 30
                },
                categoryPercentage: 1.0,
                barPercentage: 1.0,
                barThickness: 15,
                plugins: {


                    zoom: {
                        pan: {

                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                            // pan options and/or events
                        },
                        zoom: {
                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                        }
                    },
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        // text: 'Chart.js Bar Chart'
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        }
                    },
                },
                // plugins: {
                //     zoom: {
                //         zoom: {
                //         wheel: {
                //             enabled: true,
                //         },
                //         pinch: {
                //             enabled: true
                //         },
                //         mode: 'xy',
                //         }
                //     }
                // },
            },

        });
    }

    function loadDetailGenderDokter(dataAnggota) {

        const _countDetailGDDAM = document.getElementById('countDetailGDDAM');
        const _countDetailGDDAF = document.getElementById('countDetailGDDAF');

        const _countDetailGDDSM = document.getElementById('countDetailGDDSM');
        const _countDetailGDDSF = document.getElementById('countDetailGDDSF');

        const _countDetailGDDUM = document.getElementById('countDetailGDDUM');
        const _countDetailGDDUF = document.getElementById('countDetailGDDUF');

        const _totAnggota = document.getElementById('detailGenderTotGender2');

        const daMale = dataAnggota['daMale'];
        const daFemale = dataAnggota['daFemale'];
        const dsMale = dataAnggota['dsMale'];
        const dsFemale = dataAnggota['dsFemale'];
        const duMale = dataAnggota['duMale'];
        const duFemale = dataAnggota['duFemale'];

        $(_totAnggota).text(daMale + daFemale)

        $(_countDetailGDDAM).text(daMale)
        $(_countDetailGDDAF).text(daFemale)

        $(_countDetailGDDSM).text(dsMale)
        $(_countDetailGDDSF).text(dsFemale)

        $(_countDetailGDDUM).text(duMale)
        $(_countDetailGDDUF).text(duFemale)

    }

    function loadDetailLulusanAnggota(dataAnggota) {

        // return;
        const _chartAnggota = document.getElementById('detailLulusanAnggota');

        const _totAnggota = document.getElementById('detailLulusanTotAnggota');
        const _totAnggota2 = document.getElementById('detailLulusanTotAnggota2');
        const _countDU = document.getElementById('detailLulusanCountDU');
        const _countDS = document.getElementById('detailLulusanCountDS');
        const _txtPercentDU = document.getElementById('detailLulusanTxtPercentDU');
        const _txtPercentDS = document.getElementById('detailLulusanTxtPercentDS');

        const totAnggota = dataAnggota['totAnggota'];

        const countDU = dataAnggota['countDU'];
        const countDS = dataAnggota['countDS'];
        const percentDU = dataAnggota['percentDU'];
        const percentDS = dataAnggota['percentDS'];

        const txtDokU = "Dokter Umum ( " + countDU + " )";
        const txtDokS = "Dokter Spesialis ( " + countDS + " )";
        const txtPercentDU = "Dokter Umum ( " + percentDU + " )";
        const txtPercentDS = "Dokter Spesialis ( " + percentDS + " )";

        $(_totAnggota).text(totAnggota)
        $(_totAnggota2).text(totAnggota)
        $(_countDU).text(countDU)
        $(_countDS).text(countDS)
        $(_txtPercentDU).text(txtPercentDU)
        $(_txtPercentDS).text(txtPercentDS)


        let chartStatus = Chart.getChart("detailLulusanAnggota"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        new Chart(_chartAnggota, {
            type: 'doughnut',
            data: {
                labels: [txtDokS, txtDokU],
                datasets: [{
                    data: [countDS, countDU],
                    borderWidth: 1
                }]
            },
            options: {
                aspectRatio: 1,
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 25,
                    }
                },
                // cutoutPercentage: 90,   
                cutout: 85,
                legend: {
                    display: false,
                },
                title: {
                    display: false,
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
                // scales: {
                //     xAxes: [{
                //         ticks: {
                //             display: false
                //         }
                //     }]
                // }
            },

            plugins: {
                zoom: {
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        pinch: {
                            enabled: true
                        },
                        mode: 'xy',
                    }
                }
            },
            plugins: [{
                id: 'text',
                beforeDraw: function(chart, a, b) {
                    var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = totAnggota,
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            }]
        });
    }

    function loadDetailChartAnggota(dataAnggota) {
        // return;
        const _chartAnggota = document.getElementById('detailChartAnggota');

        const _totAnggota = document.getElementById('detailTotAnggota');
        const _totAnggota2 = document.getElementById('detailTotAnggota2');
        const _countDU = document.getElementById('detailCountDU');
        const _countDS = document.getElementById('detailCountDS');
        const _txtPercentDU = document.getElementById('detailTxtPercentDU');
        const _txtPercentDS = document.getElementById('detailTxtPercentDS');

        const totAnggota = dataAnggota['totAnggota'];

        const countDU = dataAnggota['countDU'];
        const countDS = dataAnggota['countDS'];
        const percentDU = dataAnggota['percentDU'];
        const percentDS = dataAnggota['percentDS'];

        const txtDokU = "Dokter Umum ( " + countDU + " )";
        const txtDokS = "Dokter Spesialis ( " + countDS + " )";
        const txtPercentDU = "Dokter Umum ( " + percentDU + " )";
        const txtPercentDS = "Dokter Spesialis ( " + percentDS + " )";

        $(_totAnggota).text(totAnggota)
        $(_totAnggota2).text(totAnggota)
        $(_countDU).text(countDU)
        $(_countDS).text(countDS)
        $(_txtPercentDU).text(txtPercentDU)
        $(_txtPercentDS).text(txtPercentDS)


        let chartStatus = Chart.getChart("detailChartAnggota"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        new Chart(_chartAnggota, {
            type: 'doughnut',
            data: {
                labels: [txtDokS, txtDokU],
                datasets: [{
                    data: [countDS, countDU],
                    borderWidth: 1
                }]
            },
            options: {
                aspectRatio: 1,
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 25,
                    }
                },
                // cutoutPercentage: 90,   
                cutout: 85,
                legend: {
                    display: false,
                },
                title: {
                    display: false,
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
                // scales: {
                //     xAxes: [{
                //         ticks: {
                //             display: false
                //         }
                //     }]
                // }
            },
            plugins: [{
                id: 'text',
                beforeDraw: function(chart, a, b) {
                    var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = totAnggota,
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            }]
        });

    }

    ////////////////////////////////////////  end detail chart ///////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////  start detail ajax ///////////////////////////////////////////////////

    // 
    function loadDataDetailChartRasio(onReload) {

        // var kota_id = $('#select_kota_kel_usia').find(":selected").text();
        // var kec_id  = $('#select_kec_kel_usia').find(":selected").text();
        var kota_id = $("select#select_detail_rasio_kota").val();
        var kec_id = $("select#select_detail_rasio_kec").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
        }

        $.ajax({
            url: '/admin/big-data/data-chart-ratio-penduduk-rs/' + kota_id + "/" + kec_id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadDetailChartRasio(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDataDetailTempatPraktek(onReload) {

        var kota_id = $("select#select_detail_kota_tpt_praktek").val();
        var kec_id = $("select#select_detail_kec_tpt_praktek").val();
        var tpt_praktek = $("select#select_detail_tpt_praktek").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
            tpt_praktek = "ALL";
        }

        $.ajax({
            url: '/admin/big-data/data-detail-tempat-praktek/' + kota_id + "/" + kec_id + "/" + tpt_praktek,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadDetailTempatPraktek(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDataDetailKelompokUsiaAnggota(onReload) {

        var kota_id = $("select#select_detail_kota_kel_usia").val();
        var kec_id = $("select#select_detail_kec_kel_usia").val();
        var range_usia = $("select#select_detail_kel_usia").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
            range_usia = "ALL";
        }

        $.ajax({
            url: '/admin/big-data/data-detail-chart-kelompok-usia-anggota/' + kota_id + "/" + kec_id + "/" + range_usia,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadDetailChartKelompokUsiaAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDataDetailGenderDokter(onReload) {

        var gender = $("select#select_detail_gender").val();

        if (onReload === true) {
            gender = "ALL";
        }

        $.ajax({
            url: '/admin/big-data/data-gender-anggota/' + gender,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadDetailGenderDokter(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDataDetailChartAnggota(onReload) {


        var kota_id = $("select#select_detail_kota").val();
        var kec_id = $("select#select_detail_kec").val();
        var dokter = $("select#select_detail_dokter").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
            dokter = "ALL";
        }

        $.ajax({
            // url: '/admin/big-data/data-chart-anggota/' + kota_id +"/"+kec_id+"/"+dokter,
            url: '/admin/big-data/data-chart-anggota/' + kota_id + "/" + kec_id + "/" + dokter,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadDetailChartAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });

    }

    function loadDataDetailLulusanAnggota(onReload) {

        // var kota_id = $('#select_univ').find(":selected").text();
        var univ_id = $("select#select_detail_univ").val();
        if (onReload === true) {
            univ_id = "ALL";
        }
        $.ajax({
            url: '/admin/big-data/data-lulusan-anggota/' + univ_id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadDetailLulusanAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    ////////////////////////////////////////  end detail ajax ///////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////  start detail table ///////////////////////////////////////////////////


    function loadDataDetailTableRasio(onReload) {


        var kota_id = $("select#select_detail_rasio_kota").val();
        var kec_id = $("select#select_detail_rasio_kec").val();
        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
        }


        $('#tableDetailRasio').DataTable({
            destroy: true,
            searching: false,
            dom: 'rtip',
            ajax: '/admin/big-data/data-detail-table-detail-rasio/' + kota_id + "/" + kec_id,
            processing: true,
            serverSide: true
        });
    }

    function loadDataDetailTableTempatPraktek(onReload) {

        var kota_id = $("select#select_detail_kota_tpt_praktek").val();
        var kec_id = $("select#select_detail_kec_tpt_praktek").val();
        var tpt_praktek = $("select#select_detail_tpt_praktek").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
            tpt_praktek = "ALL";
        }


        $('#tableDetailTempatPraktek').DataTable({
            destroy: true,
            searching: false,
            dom: 'rtip',
            ajax: '/admin/big-data/data-detail-table-tempat-praktek/' + kota_id + "/" + kec_id + "/" + tpt_praktek,
            processing: true,
            serverSide: true
        });
    }

    function loadDataDetailTableKelompokUsiaAnggota(onReload) {
        var kota_id = $("select#select_detail_kota_kel_usia").val();
        var kec_id = $("select#select_detail_kec_kel_usia").val();
        var range_usia = $("select#select_detail_kel_usia").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
            range_usia = "ALL";
        }


        $('#tableDetailKelompokUsia').DataTable({
            destroy: true,
            searching: false,
            dom: 'rtip',
            ajax: '/admin/big-data/data-detail-table-kelompok-usia-anggota/' + kota_id + "/" + kec_id + "/" + range_usia,
            processing: true,
            serverSide: true
        });
    }

    function loadDataDetailTableGenderDokter(onReload) {

        var gender = $("select#select_detail_gender").val();

        if (onReload === true) {
            gender = "ALL";
        }

        $('#tableDetailGenderDokter').DataTable({
            destroy: true,
            searching: false,
            dom: 'rtip',
            ajax: '/admin/big-data/table-data-gender-dokter/' + gender,
            processing: true,
            serverSide: true
        });
    }

    function loadDataDetailTableAnggota(onReload) {

        var kota_id = $("select#select_detail_kota").val();
        var kec_id = $("select#select_detail_kec").val();
        var dokter = $("select#select_detail_dokter").val();
        var param = $("input#tableDetailChartAnggotaSearch").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
            dokter = "ALL";
            param = "ALL";
        }

        if (param === "") {
            param = "ALL";
        }

        // $('#tableDetailChartAnggota').DataTable({
        //     destroy: true,
        //     searching: false,
        //     dom: 'rtip',
        //     ajax: '/admin/big-data/table-data-chart-anggota/' + kota_id + "/" + kec_id + "/" + dokter + "/" + param,
        //     processing: true,
        //     serverSide: true,
        // });

        $(document).ready(function() {
            var table = $('#tableDetailChartAnggota').DataTable({
                destroy: true,
                dom: 'rtip',
                ajax: {
                    url: '/admin/big-data/table-data-chart-anggota/' + kota_id + "/" + kec_id + "/" + dokter + "/" + param,
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                processing: true,
                serverSide: true,
                order: [
                    [0, 'asc']
                ],
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Cari...",
                    emptyTable: "Tidak ada data",
                    show: "Tampilkan",
                    lengthMenu: "Tampilkan _MENU_ data",
                    info: "Data _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(disaring dari _MAX_ total data)",
                    zeroRecords: "Tidak ada data yang sesuai",
                    paginate: {
                        previous: "Sebelumnya",
                        next: "Selanjutnya"
                    }
                },
            });

            $('#tableDetailChartAnggotaSearchForm').on('submit', function(e) {
                e.preventDefault();
                var searchValue = $('#tableDetailChartAnggotaSearch').val();
                if (searchValue === "") {
                    searchValue = "ALL";
                }
                var url = '/admin/big-data/table-data-chart-anggota/' + kota_id + "/" + kec_id + "/" + dokter + "/" + searchValue;
                table.ajax.url(url).load();
                loadDataDetailTableAnggota(false);
            });


            $('#tableDetailChartAnggotaSearch').on('keyup', function() {
                param = $(this).val();
                table.ajax.reload();
            });
        });

    }

    function loadDataDetailLulusanTableAnggota(onReload) {

        var univ_id = $("select#select_detail_univ").val();
        if (onReload === true) {
            univ_id = "ALL";
        }

        $('#tableDetailLulusanAnggota').DataTable({
            destroy: true,
            searching: false,
            dom: 'rtip',
            ajax: '/admin/big-data/data-table-lulusan-anggota/' + univ_id,
            processing: true,
            serverSide: true
        });
    }

    ////////////////////////////////////////  end detail table ///////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////




    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////  start main chart ///////////////////////////////////////////////////

    function loadKelompokUsiaAnggota(dataAnggota) {
        // return;
        // const _chartAnggota = document.getElementById('chartAnggota');
        const _lulusanAnggota = document.getElementById('kelompokUsiaAnggota');

        let chartStatus = Chart.getChart("kelompokUsiaAnggota"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        const data = {
            labels: ["26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "55-60", "61-65", "66-70"],
            datasets: [{
                    label: 'Dokter Anggota',
                    data: dataAnggota['da'],
                },
                {
                    label: 'Dokter Spesialis',
                    data: dataAnggota['ds'],
                },
                {
                    label: 'Dokter umum',
                    data: dataAnggota['du'],
                },
            ]
        }

        new Chart(_lulusanAnggota, {
            type: 'bar',

            data: data,

            options: {
                responsive: true,
                layout: {
                    padding: 30
                },
                categoryPercentage: 1.0,
                barPercentage: 1.0,
                barThickness: 15,
                plugins: {
                    zoom: {
                        pan: {

                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                            // pan options and/or events
                        },
                        zoom: {
                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                        }
                    },
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        // text: 'Chart.js Bar Chart'
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        }
                    },
                }
            },
        });

    }

    function loadLulusanAnggota(dataAnggota) {
        // return;
        // const _chartAnggota = document.getElementById('chartAnggota');
        const _lulusanAnggota = document.getElementById('lulusanAnggota');

        const _totAnggota = document.getElementById('totLulusanAnggota');
        const _countDU = document.getElementById('countLulusanDU');
        const _countDS = document.getElementById('countLulusanDS');
        const _txtPercentDU = document.getElementById('txtPercentLulusanDU');
        const _txtPercentDS = document.getElementById('txtPercentLulusanDS');

        const totAnggota = dataAnggota['totAnggota'];

        const countDU = dataAnggota['countDU'];
        const countDS = dataAnggota['countDS'];
        const percentDU = dataAnggota['percentDU'];
        const percentDS = dataAnggota['percentDS'];

        const txtDokU = "Dokter Umum ( " + countDU + " )";
        const txtDokS = "Dokter Spesialis ( " + countDS + " )";
        const txtPercentDU = "Dokter Umum ( " + percentDU + " )";
        const txtPercentDS = "Dokter Spesialis ( " + percentDS + " )";

        $(_totAnggota).text(totAnggota)
        $(_countDU).text(countDU)
        $(_countDS).text(countDS)
        $(_txtPercentDU).text(txtPercentDU)
        $(_txtPercentDS).text(txtPercentDS)


        let chartStatus = Chart.getChart("lulusanAnggota"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        new Chart(_lulusanAnggota, {
            type: 'doughnut',
            data: {
                labels: [txtDokS, txtDokU],
                datasets: [{
                    data: [countDS, countDU],
                    borderWidth: 1
                }]
            },
            options: {
                aspectRatio: 1,
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 25,
                    }
                },
                // cutoutPercentage: 90,   
                cutout: 85,
                legend: {
                    display: false,
                },
                title: {
                    display: false,
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
                // scales: {
                //     xAxes: [{
                //         ticks: {
                //             display: false
                //         }
                //     }]
                // }
            },
            plugins: [{
                id: 'text',
                beforeDraw: function(chart, a, b) {
                    var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = totAnggota,
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            }]
        });

    }

    function loadChartAnggota(dataAnggota) {
        // return;
        const _chartAnggota = document.getElementById('chartAnggota');

        const _totAnggota = document.getElementById('totAnggota');
        const _countDU = document.getElementById('countDU');
        const _countDS = document.getElementById('countDS');
        const _txtPercentDU = document.getElementById('txtPercentDU');
        const _txtPercentDS = document.getElementById('txtPercentDS');

        const totAnggota = dataAnggota['totAnggota'];

        const countDU = dataAnggota['countDU'];
        const countDS = dataAnggota['countDS'];
        const percentDU = dataAnggota['percentDU'];
        const percentDS = dataAnggota['percentDS'];

        const txtDokU = "Dokter Umum ( " + countDU + " )";
        const txtDokS = "Dokter Spesialis ( " + countDS + " )";
        const txtPercentDU = "Dokter Umum ( " + percentDU + " )";
        const txtPercentDS = "Dokter Spesialis ( " + percentDS + " )";

        $(_totAnggota).text(totAnggota)
        $(_countDU).text(countDU)
        $(_countDS).text(countDS)
        $(_txtPercentDU).text(txtPercentDU)
        $(_txtPercentDS).text(txtPercentDS)


        let chartStatus = Chart.getChart("chartAnggota"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        new Chart(_chartAnggota, {
            type: 'doughnut',
            data: {
                labels: [txtDokS, txtDokU],
                datasets: [{
                    data: [countDS, countDU],
                    borderWidth: 1
                }]
            },
            options: {
                aspectRatio: 1,
                responsive: true,
                maintainAspectRatio: true,
                cutoutPercentage: 85,
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 25,
                    }
                },
                // cutoutPercentage: 90,   
                cutout: 85,
                legend: {
                    display: false,
                },
                title: {
                    display: false,
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
                // scales: {
                //     xAxes: [{
                //         ticks: {
                //             display: false
                //         }
                //     }]
                // }
            },
            plugins: [{
                id: 'text',
                beforeDraw: function(chart, a, b) {
                    var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = totAnggota,
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            }]
        });

    }

    function loadTptPraktekAnggota(dataAnggota) {

        const _totPraktek = document.getElementById('totPraktek');
        const _praktekRP = document.getElementById('praktekRP');
        const _praktekRS = document.getElementById('praktekRS');

        const tot = dataAnggota['tot'];
        const rs = dataAnggota['rs'];
        const rp = dataAnggota['rp'];

        $(_totPraktek).text(tot)
        $(_praktekRP).text(rp)
        $(_praktekRS).text(rs)
    }

    function loadDetailRasio(dataAnggota) {

        // const _chartAnggota = document.getElementById('chartAnggota');
        const _lulusanAnggota = document.getElementById('detailRasio');

        let chartStatus = Chart.getChart("detailRasio"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        const data = {
            labels: dataAnggota['lb'],
            datasets: [{
                    label: 'Rasio Penduduk',
                    data: dataAnggota['rp'],
                },
                {
                    label: 'Rumah Sakit',
                    data: dataAnggota['rs'],
                },
                {
                    label: 'Dokter umum',
                    data: dataAnggota['du'],
                },
                {
                    label: 'Dokter Spesialis',
                    data: dataAnggota['ds'],
                },
            ]
        }

        new Chart(_lulusanAnggota, {
            type: 'bar',

            data: data,

            options: {
                responsive: true,
                layout: {
                    padding: 30
                },
                categoryPercentage: 1.0,
                barPercentage: 1.0,
                barThickness: 15,
                plugins: {
                    zoom: {
                        pan: {

                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                            // pan options and/or events
                        },
                        zoom: {
                            wheel: {
                                enabled: true,
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                        }
                    },
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        // text: 'Chart.js Bar Chart'
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        }
                    },
                }
            },
        });
    }


    ////////////////////////////////////////  end main chart /////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////  start main ajax ////////////////////////////////////////////////////

    function loadDataChartAnggota(onReload) {

        // var kota_id = $('#select_kota').find(":selected").text();
        // var kec_id  = $('#select_kec').find(":selected").text();

        var kota_id = $("select#select_kota").val();
        var kec_id = $("select#select_kec").val();
        var dokter = "ALL"
        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
        }

        $.ajax({
            url: '/admin/big-data/data-chart-anggota/' + kota_id + "/" + kec_id + "/" + dokter,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadChartAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });

    }

    function loadDataLulusanAnggota(onReload) {
        // var kota_id = $('#select_univ').find(":selected").text();
        var univ_id = $("select#select_univ").val();
        if (onReload === true) {
            univ_id = "ALL";
        }
        if (!univ_id) {
            return;
        }
        $.ajax({
            url: '/admin/big-data/data-lulusan-anggota/' + univ_id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadLulusanAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDataKelompokUsiaAnggota(onReload) {
        // var kota_id = $('#select_kota_kel_usia').find(":selected").text();
        // var kec_id  = $('#select_kec_kel_usia').find(":selected").text();
        var kota_id = $("select#select_kota_kel_usia").val();
        var kec_id = $("select#select_kec_kel_usia").val();


        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
        }
        $.ajax({
            url: '/admin/big-data/data-chart-kelompok-usia-anggota/' + kota_id + "/" + kec_id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadKelompokUsiaAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDataTptPraktekAnggota(onReload) {

        var kota_id = $("select#select_kota_tpt_praktek").val();
        var kec_id = $("select#select_kec_tpt_praktek").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
        }
        $.ajax({
            url: '/admin/big-data/data-chart-tpt-praktek-anggota/' + kota_id + "/" + kec_id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadTptPraktekAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDataDetailRasio(onReload) {
        // var kota_id = $('#select_kota_kel_usia').find(":selected").text();
        // var kec_id  = $('#select_kec_kel_usia').find(":selected").text();
        var kota_id = $("select#select_kota_rasio").val();
        var kec_id = $("select#select_kec_rasio").val();

        if (onReload === true) {
            kota_id = "ALL";
            kec_id = "ALL";
        }

        $.ajax({
            url: '/admin/big-data/data-chart-ratio-penduduk-rs/' + kota_id + "/" + kec_id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                // alert(JSON.stringify(data))
                loadDetailRasio(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    ////////////////////////////////////////  end main ajax //////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////


    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////  start event on change //////////////////////////////////////////////



    $('#select_detail_rasio_kota').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_detail_rasio_kec').empty();
                    $('#select_detail_rasio_kec').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_detail_rasio_kec').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    $('#select_detail_kota_tpt_praktek').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_detail_kec_tpt_praktek').empty();
                    $('#select_detail_kec_tpt_praktek').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_detail_kec_tpt_praktek').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    $('#select_detail_kota_kel_usia').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_detail_kec_kel_usia').empty();
                    $('#select_detail_kec_kel_usia').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_detail_kec_kel_usia').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    $('#select_detail_kota').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_detail_kec').empty();
                    $('#select_detail_kec').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_detail_kec').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    $('#select_kota').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_kec').empty();
                    $('#select_kec').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_kec').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    $('#select_kota_kel_usia').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_kec_kel_usia').empty();
                    $('#select_kec_kel_usia').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_kec_kel_usia').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    $('#select_kota_tpt_praktek').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_kec_tpt_praktek').empty();
                    $('#select_kec_tpt_praktek').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_kec_tpt_praktek').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    $('#select_kota_rasio').on('change', function() {
        var kota_id = $(this).val();
        // alert(provinsi_id)
        if (kota_id) {
            $.ajax({
                url: '/admin/big-data/get_kecamatan_by_kota_id/' + kota_id,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('#select_kec_rasio').empty();
                    $('#select_kec_rasio').append('<option value="ALL">-- Kecamatan --</option>');
                    $.each(data, function(key, value) {
                        $('#select_kec_rasio').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            // $('#prof_sip3_regency').empty();
            // $('#prof_sip3_subdistrict').empty();
            // $('#prof_sip3_village').empty();
        }
    });

    ////////////////////////////////////////  end event on change ////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
</script>

@endsection