@extends('layouts.index')
@section('title')
    Dashboard RS
@endsection
@section('css')
    <link rel="stylesheet" href="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.css" />
    <!-- Custom CSS -->
    <link href="{{ asset('back') }}/libs/chartist/dist/chartist.min.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/js/pages/chartist/chartist-init.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/owl/assets/owl.carousel.min.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/libs/owl/assets/owl.theme.default.min.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/extra-libs/css-chart/css-chart.css" rel="stylesheet" />
    <link href="{{ asset('back') }}/extra-libs/c3/c3.min.css" rel="stylesheet" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.css" />
    <style>
        .integrated-sim-rs {
            border: 2px solid #39cb7f;
        }

        .no-integrated-sim-rs {
            border-style: solid;
            border-color: #fc4b6c;
        }

    </style>

@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-9 col-md-9 align-self-center">
                <h4 class="text-muted mb-0 fw-normal">Dashboard untuk</h4>
                <h1 class="mb-0 fw-bold">Rumah Sakit</h1>

            </div>
            <div class="col-lg-2 col-md-2 ">
                <select class="form-select theme-select border-0" aria-label="Default select example">
                    <option value="1">Ringkasan</option>
                    <option value="1">Dashboard Kunjungan</option>
                    <option value="2">Dashboard Keuangan</option>
                    <option value="3">Dashboard Farmasi</option>
                    <option value="3">Dashboard Pasien</option>
                    <option value="3">Dashboard Asset</option>
                    <option value="3">Dashboard IGD</option>
                    <option value="3">Dashboard Rawat Inap</option>
                    <option value="3">Dashboard Rawat Jalan</option>
                </select>
            </div>



        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- Row -->
        <div class="row">
            <!-- Column -->

            <div class="col-lg-8">
                <div class="card-group">
                    <div class="card">
                        <div class="card-body">
                            <span
                                class="
                        btn btn-xl btn-light-info
                        text-info
                        btn-circle
                        d-flex
                        align-items-center
                        justify-content-center
                      ">
                                <i data-feather="users"></i>
                            </span>
                            <h3 class="mt-3 pt-1 mb-0">
                                {{ $total_pasien->total }}
                            </h3>
                            <h6 class="text-muted mb-0 fw-normal">Total Pasien</h6>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <span
                                class="
                        btn btn-xl btn-light-warning
                        text-warning
                        btn-circle
                        d-flex
                        align-items-center
                        justify-content-center
                      ">
                                <i data-feather="package"></i>
                            </span>
                            <h3 class="mt-3 pt-1 mb-0">
                                {{ $total_dokter->total }}
                            </h3>
                            <h6 class="text-muted mb-0 fw-normal">Total Dokter</h6>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <span
                                class="
                        btn btn-xl btn-light-danger
                        text-danger
                        btn-circle
                        d-flex
                        align-items-center
                        justify-content-center
                      ">
                                <i data-feather="bar-chart"></i>
                            </span>
                            <h3 class="mt-3 pt-1 mb-0 d-flex align-items-center">
                                {{ $total_tenaga_medis->total }}
                            </h3>
                            <h6 class="text-muted mb-0 fw-normal">Total Tenaga Medis </h6>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <span
                                class="
                        btn btn-xl btn-light-success
                        text-success
                        btn-circle
                        d-flex
                        align-items-center
                        justify-content-center
                      ">
                                <i data-feather="refresh-cw"></i>
                            </span>
                            <h3 class="mt-3 pt-1 mb-0">
                                {{ $total_pegawai->total }}
                            </h3>
                            <h6 class="text-muted mb-0 fw-normal">Total Pegawai</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div
                    class="
                  card
                  welcome-card2
                  overflow-hidden
                  bg-light-info
                  border-0
                ">
                    <div class="card-body">
                        <div class="d-flex align-items-start position-relative">
                            <div>
                                <h4 class="fw-bold">Total BOR <sup class="text-danger">*</sup></h4>
                                <h2 class="text-primary">75%</h2>
                            </div>
                            <div class="ms-auto">
                                <span
                                    class="
                          btn btn-lg btn-primary btn-circle
                          d-flex
                          align-items-center
                          justify-content-center
                        ">
                                    <i data-feather="user-check"></i>
                                </span>
                            </div>
                        </div>
                        <a href="#" class="btn btn-info position-relative mt-2">Detail</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 d-flex align-items-stretch ">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Grafik Total Kunjungan Pasien</h3>
                                <h6 class="card-subtitle">Selama Tahun ini</h6>
                            </div>
                            <div class="ms-auto">
                                <ul class="list-style-none">
                                    <li class="list-inline-item">
                                        <i
                                            class="
                              ri-checkbox-blank-circle-fill
                              text-primary
                              fs-1
                              me-1
                            "></i>
                                        BPJS
                                    </li>
                                    <li class="list-inline-item">
                                        <i
                                            class="
                              ri-checkbox-blank-circle-fill
                              text-warning
                              fs-1
                              me-1
                            "></i>
                                        Umum
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div id="kunjungan-pasien-bpjs-bulan" class="ps-3" style="height: 400px;"></div>
                    </div>
                </div>
            </div>

            <!-- column -->
            <div class="col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center pb-3 border-bottom">
                            <div>
                                <h3 class="card-title">Status Pasien</h3>
                                <h6 class="card-subtitle mb-0">Selama Pertahun</h6>
                            </div>
                            <div class="ms-auto">

                            </div>
                        </div>

                        <div class="position-relative">
                            <div id="status-pasien" class="mt-4 pt-2"></div>
                            {{-- <i data-feather="user-check" class="total-sales-icon text-muted-lite feather-xl"></i> --}}
                        </div>
                        <ul class="list-style-none d-flex justify-content-between mt-5">
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-primary
                          fs-1
                          me-1
                        "></i>
                                BPJS
                            </li>
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-warning
                          fs-1
                          me-1
                        "></i>Umum
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- column -->
            <div class="col-lg-4 d-flex align-items-stretch">
                <div class="card w-100 no-integrated-sim-rs">
                    <div class="card-body">
                        <div class="d-flex align-items-center pb-3 border-bottom">
                            <div>
                                <h3 class="card-title">Tingkat Triase <sup class="text-danger">*</sup> </h3>
                            </div>

                        </div>

                        <div class="position-relative">
                            <div id="triase-pasien" class="mt-4 pt-2"></div>
                            <i data-feather="user-check" class="total-sales-icon text-muted-lite feather-xl"></i>
                        </div>
                        <ul class="list-style-none d-flex justify-content-between mt-5">
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-success
                          fs-1
                          me-1
                        "></i>
                                Hijau
                            </li>
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-danger
                          fs-1
                          me-1
                        "></i>Merah
                            </li>
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-warning
                          fs-1
                          me-1
                        "></i>Kuning
                            </li>

                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-secondary
                          fs-1
                          me-1
                        "></i>Hitam
                            </li>

                        </ul>
                    </div>
                </div>
            </div>


            <div class="col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center pb-3 border-bottom">
                            <div>
                                <h3 class="card-title">Jenis Kelamin</h3>
                            </div>

                        </div>

                        <div class="position-relative">
                            <div id="pasien-jenis-kelamin" class="mt-4 pt-2"></div>
                            <i data-feather="user-check" class="total-sales-icon text-muted-lite feather-xl"></i>
                        </div>
                        <ul class="list-style-none d-flex justify-content-between mt-5">
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-info
                          fs-1
                          me-1
                        "></i>
                                Laki -laki
                            </li>
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-primary
                          fs-1
                          me-1
                        "></i>Perempuan
                            </li>

                        </ul>
                    </div>
                </div>
            </div>


            <div class="col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center pb-3 border-bottom">
                            <div>
                                <h3 class="card-title">Kunjungan Pasien</h3>
                            </div>

                        </div>

                        <div class="position-relative">
                            <div id="pasien-lama-baru" class="mt-4 pt-2"></div>
                            <i data-feather="user-check" class="total-sales-icon text-muted-lite feather-xl"></i>
                        </div>
                        <ul class="list-style-none d-flex justify-content-between mt-5">
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-info
                          fs-1
                          me-1
                        "></i>
                                Pasien Baru
                            </li>
                            <li class="list-inline-item">
                                <i
                                    class="
                          ri-checkbox-blank-circle-fill
                          text-primary
                          fs-1
                          me-1
                        "></i>Pasien
                                Lama
                            </li>

                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Grafik Total Kunjungan Pasien</h3>
                                <h6 class="card-subtitle">Per Unit Layanan</h6>
                            </div>
                            <div class="ms-auto">
                                <ul class="list-style-none">
                                    <li class="list-inline-item">
                                        <i
                                            class="
                              ri-checkbox-blank-circle-fill
                              text-primary
                              fs-1
                              me-1
                            "></i>
                                        BPJS
                                    </li>
                                    <li class="list-inline-item">
                                        <i
                                            class="
                              ri-checkbox-blank-circle-fill
                              text-warning
                              fs-1
                              me-1
                            "></i>
                                        Umum
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div id="kunjungan-pasien-bpjs" class="ps-3" style="height: 400px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Keuangan</h3>
                                <h6 class="card-subtitle">Dalam 1 Tahun</h6>
                            </div>
                            <div class="ms-auto">
                                <ul class="list-style-none">
                                    <li class="list-inline-item">
                                        <i
                                            class="
                              ri-checkbox-blank-circle-fill
                              text-primary
                              fs-1
                              me-1
                            "></i>
                                        Pemasukan
                                    </li>
                                    <li class="list-inline-item">
                                        <i
                                            class="
                              ri-checkbox-blank-circle-fill
                              text-warning
                              fs-1
                              me-1
                            "></i>
                                        Pengeluaran
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-4 border-end">
                                <div class="pe-4">
                                    <h3 class="fs-8 d-flex align-items-center mb-0">
                                        Rp. {{ number_format($total_pemasukan[0]->total, 2, ',', '.') }}
                                        <span
                                            class="
                              btn btn-circle btn-sm btn-success
                              fs-1
                              ms-2
                              d-flex
                              align-items-center
                              justify-content-center
                            ">23%</span>
                                    </h3>
                                    <h6 class="fw-normal text-muted mb-0">Pemasukan</h6>
                                    <h3 class="fs-8 d-flex align-items-center mb-0 mt-4">
                                        Rp. 100.000.000
                                    </h3>
                                    <h6 class="fw-normal text-muted mb-0">Pengeluaran <sup class="text-danger">*</sup>
                                    </h6>
                                    <div class="mt-3 mb-4">
                                        <div id="budget-expence-side-chart"></div>
                                    </div>
                                    <a href="#" class="btn btn-info">Detail</a>
                                </div>
                            </div>
                            <div class="col-md-8 revenue">

                                <div class="pemasukan-bulan" style="height: 350px;position: relative;"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <!-- Column -->
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-row align-items-center">
                                <div
                                    class="
                        round
                        rounded-circle
                        text-white
                        d-inline-block
                        text-center
                        bg-success
                      ">
                                    <i data-feather="credit-card" class="feather-sm fill-white"></i>
                                </div>
                                <div class="ms-3 align-self-center">
                                    <h3 class="mb-0">4</h3>
                                    <span class="text-muted">Apotek</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Column -->
                <!-- Column -->
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-row align-items-center">
                                <div
                                    class="
                        round
                        rounded-circle
                        text-white
                        d-inline-block
                        text-center
                        bg-info
                      ">
                                    <i data-feather="users" class="feather-sm fill-white"></i>
                                </div>
                                <div class="ms-3 align-self-center">
                                    <h3 class="mb-0">{{ $total_apoteker->total }}</h3>
                                    <span class="text-muted">Apoteker</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Column -->
                <!-- Column -->
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-row align-items-center">
                                <div
                                    class="
                        round
                        rounded-circle
                        text-white
                        d-inline-block
                        text-center
                        bg-danger
                      ">
                                    <i data-feather="calendar" class="feather-sm fill-white"></i>
                                </div>
                                <div class="ms-3 align-self-center">
                                    <h3 class="mb-0">249</h3>
                                    <span class="text-muted">Jenis Obat <sup class="text-danger">*</sup></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Column -->
                <!-- Column -->
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex flex-row align-items-center">
                                <div
                                    class="
                        round
                        rounded-circle
                        text-white
                        d-inline-block
                        text-center
                        bg-success
                      ">
                                    <i data-feather="settings" class="feather-sm fill-white"></i>
                                </div>
                                <div class="ms-3 align-self-center">
                                    <h3 class="mb-0">6540</h3>
                                    <span class="text-muted">Merk Obat <sup class="text-danger">*</sup></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Column -->
            </div>

            <div class="row">

                <div class="col-lg-4 d-flex align-items-stretch">
                    <div class="card w-100 overflow-hidden">
                        <div class="card-body pb-0">
                            <div class="d-flex align-items-start">
                                <div class="border-bottom py-3">
                                    <h3 class="card-title">Penggunaan Obat <sup class="text-danger">*</sup></h3>
                                    <h6 class="card-subtitle mb-0">Terbanyak</h6>
                                </div>

                            </div>
                            <div class="mt-3 pb-3 d-flex align-items-center">
                                <span class="btn btn-primary btn-circle">
                                    <i data-feather="shopping-cart"></i>
                                </span>
                                <div class="ms-3">
                                    <h5 class="mb-0 fw-bold">Paracetamol</h5>
                                    <span class="text-muted fs-9">Antibiotik</span>
                                </div>
                                <div class="ms-auto">
                                    <span class="badge bg-light-secondary text-muted">+68%</span>
                                </div>
                            </div>

                            <div class=" pb-3 d-flex align-items-center">
                                <span class="btn btn-primary btn-circle">
                                    <i data-feather="shopping-cart"></i>
                                </span>
                                <div class="ms-3">
                                    <h5 class="mb-0 fw-bold">Vitamin C</h5>
                                    <span class="text-muted fs-9">Vitamin</span>
                                </div>
                                <div class="ms-auto">
                                    <span class="badge bg-light-secondary text-muted">+68%</span>
                                </div>
                            </div>


                            <div class="pb-3 d-flex align-items-center">
                                <span class="btn btn-warning btn-circle">
                                    <i data-feather="star"></i>
                                </span>
                                <div class="ms-3">
                                    <h5 class="mb-0 fw-bold">Amoxcilin</h5>
                                    <span class="text-muted fs-9">Antibiotik</span>
                                </div>
                                <div class="ms-auto">
                                    <span class="badge bg-light-secondary text-muted">+68%</span>
                                </div>
                            </div>
                            <div class="pb-3 d-flex align-items-center">
                                <span class="btn btn-success btn-circle">
                                    <i data-feather="message-square"></i>
                                </span>
                                <div class="ms-3">
                                    <h5 class="mb-0 fw-bold">clomipramine</h5>
                                    <span class="text-muted fs-9">Antidepresan</span>
                                </div>
                                <div class="ms-auto">
                                    <span class="badge bg-light-secondary text-muted">+68%</span>
                                </div>
                            </div>

                            <div class="pb-3 d-flex align-items-center">
                                <span class="btn btn-success btn-circle">
                                    <i data-feather="message-square"></i>
                                </span>
                                <div class="ms-3">
                                    <h5 class="mb-0 fw-bold">Cortidex</h5>
                                    <span class="text-muted fs-9">Antiimplasi</span>
                                </div>
                                <div class="ms-auto">
                                    <span class="badge bg-light-secondary text-muted">+68%</span>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

                <div class="col-lg-4 d-flex align-items-stretch">
                    <div class="card w-100 overflow-hidden">
                        <div class="card-body pb-0">
                            <div class="d-flex align-items-start">
                                <div class="border-bottom py-3">
                                    <h3 class="card-title">Stok Obat Habis <sup class="text-danger">*</sup></h3>
                                    <h6 class="card-subtitle mb-0">berdasarkan Jenis</h6>
                                </div>

                            </div>
                            <ul class="list-style-none mt-3 mb-2">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Paracetamol</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">55%</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>
                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Antibiotik</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">20%</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-cyan" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>
                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Vitamin C</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">15%</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>
                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Antidepresan</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">10%</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>

                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Sitotoksik</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">10%</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>


                            </ul>
                        </div>

                    </div>
                </div>


                <div class="col-lg-4 d-flex align-items-stretch">
                    <div class="card w-100 overflow-hidden">
                        <div class="card-body pb-0">
                            <div class="d-flex align-items-start">
                                <div class="border-bottom py-3">
                                    <h3 class="card-title">Obat Akan Expired <sup class="text-danger">*</sup></h3>
                                    <h6 class="card-subtitle mb-0">berdasarkan Merk</h6>
                                </div>

                            </div>
                            <ul class="list-style-none mt-3 mb-2">
                                <li>
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Lantus Solostar 1 Flexpen</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">20 Nov 2021</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>
                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Kombiglyze XR</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">21 Nov 2021</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-cyan" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>
                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Apidra Solostar 1 Pen</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">22 Nov 2021</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>
                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Sanmol Forte</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">23 Nov 2021</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>

                                <li class="mt-4">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6 class="mb-0 fw-bold">
                                                <span class="fw-light">Sumagesic 600 mg</span>
                                            </h6>
                                        </div>
                                        <div class="ms-auto">
                                            <h6 class="mb-0 fw-bold">24 Nov 2021</h6>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </li>


                            </ul>
                        </div>

                    </div>
                </div>



            </div>

            <div class="col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center pb-3 border-bottom">
                            <div>
                                <h3 class="card-title">Kelas Pasien</h3>
                                <h6 class="card-subtitle mb-0">Selama Pertahun</h6>
                            </div>
                            <div class="ms-auto">

                            </div>
                        </div>

                        <div class="position-relative">
                            <div id="kelas-pasien" class="mt-4 pt-2"></div>
                            {{-- <i data-feather="user-check" class="total-sales-icon text-muted-lite feather-xl"></i> --}}
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-lg-8 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Grafik Kelas Pasien</h3>
                                <h6 class="card-subtitle">Selama Tahun ini</h6>
                            </div>
                        </div>

                        <div id="kunjungan-kelas-pasien" class="ps-3" style="height: 400px;"></div>
                    </div>
                </div>
            </div>

            <div class="row pt-40 pb-40">
                <div class="col-md-12">
                    <div class="heading mb-40 px-2">
                        <h3 class="heading__subtitle ">Ketersedian Kamar</h3>
                    </div>
                </div>

                <div class="owl-carousel" id="carouselKamar">
                    @foreach ($ketersediaan_kamar as $item)
                        @php
                            $color = 'success';
                            $label = 'Tersedia';
                            if ($item->tersedia == 0) {
                                $color = 'danger';
                                $label = 'Penuh';
                            }
                        @endphp
                        <div class="item col-md-11 match-row">
                            <div class="card">
                                <div class="card-body text-center match-row">
                                    <br>
                                    <h7 class="">Ruangan</h7>
                                    <h3 class="f-w-600 text-success"><a href="#!">{{ $item->ruang }}</a></h3>
                                    <p style="margin-top: 0px;font-weight: bold;">{{ $item->kelas }}</p>
                                    <span
                                        class="badge bg-light-{{ $color }} text-{{ $color }}">{{ $label }}</span>
                                </div>
                                <div class="row border-top text-center mt-3 mx-3 ">
                                    <div class="col-6 mt-3">
                                        <span>Total Bed</span>
                                        <div class="follow-num counter">
                                            <h4 class="card-title">{{ $item->total_bed }}</h4>
                                        </div>
                                    </div>
                                    <div class="col-6 mt-3">
                                        <span>Tersedia</span>
                                        <div class="follow-num counter">
                                            <h4 class="card-title">{{ $item->tersedia }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <!-- row -->

            <!-- Row -->
            <div class="row">
                <div class="owl-carousel" id="carouselPoli">
                    @foreach ($total_kunjungan_poli_baru_lama as $item)
                        <div class="item col-md-11">
                            <div class="card">
                                <div class="card-body analytics-info">
                                    <div class="d-flex align-items-center mb-3">
                                        <h4 class="mb-0">{{ $item['nama'] }}</h4>

                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="border-end pe-3">
                                            <h6 class="text-muted fw-normal">Total Pasien</h6>
                                            <b>{{ $item['total'] }}</b>
                                        </div>
                                        <div class="ms-3 border-end pe-3">
                                            <h6 class="text-muted fw-normal">Pasien Baru</h6> <i
                                                class="fa fa-plus text-success"></i>
                                            <b>{{ $item['baru'] }}</b>
                                        </div>
                                        <div class="ms-3">
                                            <h6 class="text-muted fw-normal">Pasien Lama</h6>
                                            <b>{{ $item['lama'] }}</b>
                                        </div>
                                    </div>
                                </div>
                                <div id="chart-poli-lama-{{ $loop->iteration }}"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <!-- Row -->

            <!-- Row -->
            <div class="row">
                <div class="owl-carousel" id="carouselPenyakit">
                    <div class="item col-md-11">
                        <div class="card w-100 overflow-hidden">
                            <div class="card-body pb-0">
                                <div class="d-flex align-items-start">
                                    <div class="border-bottom py-3">
                                        <h3 class="card-title">10 Besar Penyakit Instalasi Gawat Darurat</h3>
                                        <h6 class="card-subtitle mb-0">Pertahun</h6>
                                    </div>

                                </div>
                                <ul class="list-style-none mt-3 mb-2">
                                    @foreach ($penyakit_igd as $item)
                                        @php
                                            $color = 'success';
                                            if ($loop->iteration > 2 && $loop->iteration <= 5) {
                                                $color = 'info';
                                            } elseif ($loop->iteration > 5 && $loop->iteration <= 8) {
                                                $color = 'warning';
                                            } elseif ($loop->iteration > 8) {
                                                $color = 'danger';
                                            }
                                        @endphp
                                        <li class="py-3">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <h6 class="mb-0 fw-bold">
                                                        <span class="fw-light" data-bs-toggle="tooltip"
                                                            title="{{ $item->diagnosa }}">{{ Str::limit($item->diagnosa, 15) }}</span>
                                                    </h6>
                                                </div>
                                                <div class="ms-auto">
                                                    <h6 class="mb-0 fw-bold">{{ $item->jml }} Kasus</h6>
                                                </div>
                                            </div>
                                            <div class="progress mt-2">
                                                <div class="progress-bar bg-{{ $color }}" role="progressbar"
                                                    style="width: 25%" aria-valuenow="25" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-11">
                        <div class="card w-100 overflow-hidden">
                            <div class="card-body pb-0">
                                <div class="d-flex align-items-start">
                                    <div class="border-bottom py-3">
                                        <h3 class="card-title">10 Besar Penyakit Rawat Jalan</h3>
                                        <h6 class="card-subtitle mb-0">Pertahun</h6>
                                    </div>

                                </div>
                                <ul class="list-style-none mt-3 mb-2">
                                    @foreach ($penyakit_rawat_jalan as $item)
                                        @php
                                            $color = 'success';
                                            if ($loop->iteration > 2 && $loop->iteration <= 5) {
                                                $color = 'info';
                                            } elseif ($loop->iteration > 5 && $loop->iteration <= 8) {
                                                $color = 'warning';
                                            } elseif ($loop->iteration > 8) {
                                                $color = 'danger';
                                            }
                                        @endphp
                                        <li class="py-3">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <h6 class="mb-0 fw-bold">
                                                        <span class="fw-light" data-bs-toggle="tooltip"
                                                            title="{{ $item->diagnosa }}">{{ Str::limit($item->diagnosa, 15) }}</span>
                                                    </h6>
                                                </div>
                                                <div class="ms-auto">
                                                    <h6 class="mb-0 fw-bold">{{ $item->jml }} Kasus</h6>
                                                </div>
                                            </div>
                                            <div class="progress mt-2">
                                                <div class="progress-bar bg-{{ $color }}" role="progressbar"
                                                    style="width: 25%" aria-valuenow="25" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-11">
                        <div class="card w-100 overflow-hidden">
                            <div class="card-body pb-0">
                                <div class="d-flex align-items-start">
                                    <div class="border-bottom py-3">
                                        <h3 class="card-title">10 Besar Penyakit Rawat Inap</h3>
                                        <h6 class="card-subtitle mb-0">Pertahun</h6>
                                    </div>

                                </div>
                                <ul class="list-style-none mt-3 mb-2">
                                    @foreach ($penyakit_rawat_inap as $item)
                                        @php
                                            $color = 'success';
                                            if ($loop->iteration > 2 && $loop->iteration <= 5) {
                                                $color = 'info';
                                            } elseif ($loop->iteration > 5 && $loop->iteration <= 8) {
                                                $color = 'warning';
                                            } elseif ($loop->iteration > 8) {
                                                $color = 'danger';
                                            }
                                        @endphp
                                        <li class="py-3">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <h6 class="mb-0 fw-bold">
                                                        <span class="fw-light" data-bs-toggle="tooltip"
                                                            title="{{ $item->diagnosa }}">{{ Str::limit($item->diagnosa, 15) }}</span>
                                                    </h6>
                                                </div>
                                                <div class="ms-auto">
                                                    <h6 class="mb-0 fw-bold">{{ $item->jml }} Kasus</h6>
                                                </div>
                                            </div>
                                            <div class="progress mt-2">
                                                <div class="progress-bar bg-{{ $color }}" role="progressbar"
                                                    style="width: 25%" aria-valuenow="25" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-11">
                        <div class="card w-100 overflow-hidden">
                            <div class="card-body pb-0">
                                <div class="d-flex align-items-start">
                                    <div class="border-bottom py-3">
                                        <h3 class="card-title">10 Besar Penyakit Kandungan</h3>
                                        <h6 class="card-subtitle mb-0">Pertahun</h6>
                                    </div>

                                </div>
                                <ul class="list-style-none mt-3 mb-2">
                                    @foreach ($penyakit_kandungan as $item)
                                        @php
                                            $color = 'success';
                                            if ($loop->iteration > 2 && $loop->iteration <= 5) {
                                                $color = 'info';
                                            } elseif ($loop->iteration > 5 && $loop->iteration <= 8) {
                                                $color = 'warning';
                                            } elseif ($loop->iteration > 8) {
                                                $color = 'danger';
                                            }
                                        @endphp
                                        <li class="py-3">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <h6 class="mb-0 fw-bold">
                                                        <span class="fw-light" data-bs-toggle="tooltip"
                                                            title="{{ $item->diagnosa }}">{{ Str::limit($item->diagnosa, 15) }}</span>
                                                    </h6>
                                                </div>
                                                <div class="ms-auto">
                                                    <h6 class="mb-0 fw-bold">{{ $item->jml }} Kasus</h6>
                                                </div>
                                            </div>
                                            <div class="progress mt-2">
                                                <div class="progress-bar bg-{{ $color }}" role="progressbar"
                                                    style="width: 25%" aria-valuenow="25" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Row -->

            <!-- row -->
            <div class="row">
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-12 col-md-12 d-flex align-items-stretch">
                            <!-- earnings card -->
                            <div class="card bg-primary w-100">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <h4 class="card-title text-white">Nilai IKM <sup class="text-danger">*</sup>
                                        </h4>
                                        <div class="ms-auto">
                                            <span
                                                class="
                              btn btn-lg btn-info btn-circle
                              d-flex
                              align-items-center
                              justify-content-center
                            ">
                                                <i data-feather="dollar-sign"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <h2 class="fs-8 text-white mb-0">90,78 (A)</h2>
                                        <span class="text-white op-5">Sangat Baik</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-12 d-flex align-items-stretch">
                            <!-- monthly sales card -->
                            <div class="card w-100 overflow-hidden">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h5 class="fw-normal mb-0 text-muted">
                                                Jumlah Responden <sup class="text-danger">*</sup>
                                            </h5>
                                            <h2 class="mb-0">3246</h2>
                                        </div>
                                        <div class="ms-auto">
                                            <span
                                                class="
                              btn btn-lg btn-warning btn-circle
                              d-flex
                              align-items-center
                              justify-content-center
                            ">
                                                <i data-feather="shopping-bag"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <!-- chart -->

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">

                    <div class="card w-100">
                        <div class="card-body">
                            <div class="d-md-flex align-items-center">
                                <div>
                                    <h3 class="card-title">Nilai IKM <sup class="text-danger">*</sup></h3>
                                    <h6 class="card-subtitle">Pertahun</h6>
                                </div>
                                <div class="ms-auto">
                                    <ul class="list-style-none">
                                        <li class="list-inline-item text-primary">
                                            <i class="ri-checkbox-blank-circle-fill fs-1 me-1"></i>
                                            Ample
                                        </li>
                                        <li class="list-inline-item text-info">
                                            <i class="ri-checkbox-blank-circle-fill fs-1 me-1"></i>Pixel Admin
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div id="ikm-pertahun" class="mt-4"></div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- row end -->

            <!-- column -->



        </div>
        <!-- Row -->
    </div>
@endsection
@section('js')
    <script src="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.min.js"></script>
    <!-- Chart JS -->
    {{-- <script src="{{ asset('back') }}/js/pages/dashboards/dashboard1.js"></script> --}}

    <script src="{{ asset('back') }}/libs/chartist/dist/chartist.min.js"></script>
    <script src="{{ asset('back') }}/libs/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js"></script>
    <script src="{{ asset('back') }}/libs/echarts/dist/echarts-en.min.js"></script>
    <script src="{{ asset('back') }}/libs/flot/excanvas.min.js"></script>
    <script src="{{ asset('back') }}/libs/flot/jquery.flot.js"></script>
    <script src="{{ asset('back') }}/libs/jquery.flot.tooltip/js/jquery.flot.tooltip.min.js"></script>
    <script src="{{ asset('back') }}/extra-libs/c3/d3.min.js"></script>
    <script src="{{ asset('back') }}/extra-libs/c3/c3.min.js"></script>
    <script src="{{ asset('back') }}/libs/gaugeJS/dist/gauge.min.js"></script>
    <script src="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.min.js"></script>
    <script src="{{ asset('back') }}/libs/owl/owl.carousel.min.js"></script>


    <script>
        var option_ikm_pertahun = {
            series: [{
                    name: "Nilai IKM",
                    data: [90, 88, 70, 78, 90, 93, 72, 85, 97, 87, 75, 98],
                },

            ],

            chart: {
                type: "bar",
                height: 160,
                offsetX: -15,
                toolbar: {
                    show: false,
                },
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
                sparkline: {
                    enabled: false,
                },
            },
            grid: {
                show: false,
                borderColor: "transparent",
                padding: {
                    left: 0,
                    right: 0,
                    bottom: 0,
                },
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: "42%",
                    endingShape: "rounded",
                    borderRadius: 5,
                },
            },

            colors: ["#15435A"],
            fill: {
                type: "solid",
                opacity: 1,
            },
            dataLabels: {
                enabled: false,
            },
            markers: {
                size: 0,
            },
            legend: {
                show: false,
            },
            xaxis: {
                type: "category",
                categories: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Ags", "Sep", "Okt", "Nov", "Des"],
            },
            yaxis: {
                show: true,
                min: 0,
                max: 100,
                tickAmount: 3,
            },
            stroke: {
                show: true,
                width: 5,
                lineCap: "butt",
                colors: ["transparent"],
            },
            tooltip: {
                theme: "dark",
            },
        };

        var chart_ikm_pertahun = new ApexCharts(
            document.querySelector("#ikm-pertahun"),
            option_ikm_pertahun
        );
        chart_ikm_pertahun.render();

        // end ikm pertahun
    </script>


    <script>
        var option_kunjungan_kelas_pasien = {
            series: {!! $total_kunjungan_kelas_bulan_json !!},

            chart: {
                type: "bar",
                height: 400,
                stacked: true,
                toolbar: {
                    show: false,
                },
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
                sparkline: {
                    enabled: false,
                },
            },
            grid: {
                show: false,
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: "50%",
                    borderRadius: 9,
                },
            },
            // colors: ["#15435A", "#1EAEB7", "#fec90f", "#FF79B1"],
            fill: {
                type: "solid",
                opacity: 1,
            },
            dataLabels: {
                enabled: false,
            },
            markers: {
                size: 0,
            },
            legend: {
                show: true,
            },
            xaxis: {
                type: "category",
                categories: {!! $total_kunjungan_kelas_bulan_bulan_json !!},
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
            },
            yaxis: {
                show: true,
                tickAmount: 3,
            },
            stroke: {
                show: true,
                curve: "smooth",
                width: 5,
                lineCap: "round",
                colors: ["white"],
            },
            tooltip: {
                theme: "dark",
            },
        };

        var chart_kunjungan_kelas_pasien = new ApexCharts(
            document.querySelector("#kunjungan-kelas-pasien"),
            option_kunjungan_kelas_pasien
        );
        chart_kunjungan_kelas_pasien.render();
    </script>

    <script>
        var option_kunjungan_pasien_bpjs_bulan = {
            series: [{
                    name: "BPJS",
                    data: {{ $pasien_bpjs_bulan_bpjs }},
                },
                {
                    name: "Umum",
                    data: {{ $pasien_bpjs_bulan_umum }},
                },
            ],

            chart: {
                type: "bar",
                height: 400,
                stacked: true,
                toolbar: {
                    show: false,
                },
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
                sparkline: {
                    enabled: false,
                },
            },
            grid: {
                show: false,
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: "50%",
                    borderRadius: 9,
                },
            },
            colors: ["#15435A", "#fec90f"],
            fill: {
                type: "solid",
                opacity: 1,
            },
            dataLabels: {
                enabled: false,
            },
            markers: {
                size: 0,
            },
            legend: {
                show: false,
            },
            xaxis: {
                type: "category",
                categories: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Ags", "Sep", "Okt", "Nov", "Des"],
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
            },
            yaxis: {
                show: true,
                tickAmount: 3,
            },
            stroke: {
                show: true,
                curve: "smooth",
                width: 5,
                lineCap: "round",
                colors: ["white"],
            },
            tooltip: {
                theme: "dark",
            },
        };

        var chart_kunjungan_pasien_bpjs_bulan = new ApexCharts(
            document.querySelector("#kunjungan-pasien-bpjs-bulan"),
            option_kunjungan_pasien_bpjs_bulan
        );
        chart_kunjungan_pasien_bpjs_bulan.render();
    </script>

    <script>
        var option_kunjungan_pasien_bpjs = {
            series: [{
                    name: "BPJS",
                    data: {!! $bpjs_poli_bpjs !!},
                },
                {
                    name: "Umum",
                    data: {!! $bpjs_poli_umum !!},
                },
            ],

            chart: {
                type: "bar",
                height: 400,
                stacked: true,
                toolbar: {
                    show: false,
                },
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
                sparkline: {
                    enabled: false,
                },
            },
            grid: {
                show: false,
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: "50%",
                    borderRadius: 9,
                },
            },
            colors: ["#15435A", "#fec90f"],
            fill: {
                type: "solid",
                opacity: 1,
            },
            dataLabels: {
                enabled: false,
            },
            markers: {
                size: 0,
            },
            legend: {
                show: false,
            },
            xaxis: {
                type: "category",
                categories: {!! $bpjs_poli_poli !!},
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
            },
            yaxis: {
                show: true,
                tickAmount: 3,
            },
            stroke: {
                show: true,
                curve: "smooth",
                width: 5,
                lineCap: "round",
                colors: ["white"],
            },
            tooltip: {
                theme: "dark",
            },
        };

        var chart_kunjungan_pasien_bpjs = new ApexCharts(
            document.querySelector("#kunjungan-pasien-bpjs"),
            option_kunjungan_pasien_bpjs
        );
        chart_kunjungan_pasien_bpjs.render();
    </script>

    <script>
        var option_jenis_kelamin = {
            series: [{{ $total_pasien_jenis_kelamin->l }}, {{ $total_pasien_jenis_kelamin->p }}],
            labels: ["Laki-laki", "Perempuan"],
            chart: {
                height: 280,
                type: "donut",
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
            },
            colors: ["#15435A", "#fec90f"],
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
                // position: "bottom",
                // fontSize: "16px",
                // labels: {
                //   colors: ["#777e89"],
                // },
                // markers: {
                //   width: 8,
                //   height: 8,
                // },
            },
            grid: {
                show: false,
                borderColor: "transparent",
                padding: {
                    top: 0,
                    right: 0,
                },
            },
            stroke: {
                colors: ["transparent"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: "78%",
                        background: "transparent",
                        labels: {
                            show: false,
                            name: {
                                show: true,
                                fontSize: "18px",
                                color: undefined,
                                offsetY: -10,
                            },
                            value: {
                                show: false,
                                color: "#98aab4",
                            },
                            total: {
                                show: false,
                                label: "Our Visitors",
                                color: "#98aab4",
                            },
                        },
                    },
                },
            },
            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };

        var chart_jenis_kelamin = new ApexCharts(
            document.querySelector("#pasien-jenis-kelamin"),
            option_jenis_kelamin
        );
        chart_jenis_kelamin.render();
    </script>

    <script>
        var option_pasien_lama_baru = {
            series: [{{ $total_pasien_baru_lama->baru }}, {{ $total_pasien_baru_lama->lama }}],
            labels: ["Pasien Baru", "Pasien Lama"],
            chart: {
                height: 280,
                type: "donut",
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
            },
            colors: ["#15435A", "#fec90f"],
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
                // position: "bottom",
                // fontSize: "16px",
                // labels: {
                //   colors: ["#777e89"],
                // },
                // markers: {
                //   width: 8,
                //   height: 8,
                // },
            },
            grid: {
                show: false,
                borderColor: "transparent",
                padding: {
                    top: 0,
                    right: 0,
                },
            },
            stroke: {
                colors: ["transparent"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: "78%",
                        background: "transparent",
                        labels: {
                            show: false,
                            name: {
                                show: true,
                                fontSize: "18px",
                                color: undefined,
                                offsetY: -10,
                            },
                            value: {
                                show: false,
                                color: "#98aab4",
                            },
                            total: {
                                show: false,
                                label: "Our Visitors",
                                color: "#98aab4",
                            },
                        },
                    },
                },
            },
            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };

        var chart_pasien_lama_baru = new ApexCharts(
            document.querySelector("#pasien-lama-baru"),
            option_pasien_lama_baru
        );
        chart_pasien_lama_baru.render();
    </script>


    <script>
        var option_triase_pasien = {
            series: ["60", "10", "25", "5"],
            labels: ["Hijau", "Merah", "Kuning", "Hitam"],
            chart: {
                height: 280,
                type: "donut",
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
            },
            colors: ["#39cb7f", "#fc4b6c", "#fec90f", "#6c757d"],
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
                // position: "bottom",
                // fontSize: "16px",
                // labels: {
                //   colors: ["#777e89"],
                // },
                // markers: {
                //   width: 8,
                //   height: 8,
                // },
            },
            grid: {
                show: false,
                borderColor: "transparent",
                padding: {
                    top: 0,
                    right: 0,
                },
            },
            stroke: {
                colors: ["transparent"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: "78%",
                        background: "transparent",
                        labels: {
                            show: false,
                            name: {
                                show: true,
                                fontSize: "18px",
                                color: undefined,
                                offsetY: -10,
                            },
                            value: {
                                show: false,
                                color: "#98aab4",
                            },
                            total: {
                                show: false,
                                label: "Our Visitors",
                                color: "#98aab4",
                            },
                        },
                    },
                },
            },
            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };

        var chart_triase_pasien = new ApexCharts(
            document.querySelector("#triase-pasien"),
            option_triase_pasien
        );
        chart_triase_pasien.render();
    </script>


    <script>
        // -----------------------------------------------------------------------
        // status pasien
        // -----------------------------------------------------------------------
        var option_kelas_pasien = {
            series: {!! $total_kunjungan_kelas_jumlah !!},
            labels: {!! $total_kunjungan_kelas_kelas !!},
            chart: {
                height: 4000,
                type: "donut",
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
            },
            // colors: ["#15435A", "#1EAEB7", "#fec90f", "#FF79B1"],
            dataLabels: {
                enabled: true,
            },
            legend: {
                show: true,
                position: "bottom",
                fontSize: "16px",
                labels: {
                    colors: ["#777e89"],
                },
                markers: {
                    width: 8,
                    height: 8,
                },
            },
            grid: {
                show: false,
                borderColor: "transparent",
                padding: {
                    top: 0,
                    right: 0,
                },
            },
            stroke: {
                colors: ["transparent"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: "78%",
                        background: "transparent",
                        labels: {
                            show: false,
                            name: {
                                show: true,
                                fontSize: "18px",
                                color: undefined,
                                offsetY: -10,
                            },
                            value: {
                                show: false,
                                color: "#98aab4",
                            },
                            total: {
                                show: false,
                                label: "Our Visitors",
                                color: "#98aab4",
                            },
                        },
                    },
                },
            },
            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };

        var chart_kelas_pasien = new ApexCharts(
            document.querySelector("#kelas-pasien"),
            option_kelas_pasien
        );
        chart_kelas_pasien.render();
    </script>

    <script>
        // -----------------------------------------------------------------------
        // status pasien
        // -----------------------------------------------------------------------
        var option_status_pasien = {
            series: [{{ $total_pasien_bpjs->bpjs }}, {{ $total_pasien_bpjs->umum }}],
            labels: ["BPJS", "Umum"],
            chart: {
                height: 280,
                type: "donut",
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
            },
            colors: ["#15435A", "#fec90f"],
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
                // position: "bottom",
                // fontSize: "16px",
                // labels: {
                //   colors: ["#777e89"],
                // },
                // markers: {
                //   width: 8,
                //   height: 8,
                // },
            },
            grid: {
                show: false,
                borderColor: "transparent",
                padding: {
                    top: 0,
                    right: 0,
                },
            },
            stroke: {
                colors: ["transparent"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: "78%",
                        background: "transparent",
                        labels: {
                            show: false,
                            name: {
                                show: true,
                                fontSize: "18px",
                                color: undefined,
                                offsetY: -10,
                            },
                            value: {
                                show: false,
                                color: "#98aab4",
                            },
                            total: {
                                show: false,
                                label: "Our Visitors",
                                color: "#98aab4",
                            },
                        },
                    },
                },
            },
            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };

        var chart_status_pasien = new ApexCharts(
            document.querySelector("#status-pasien"),
            option_status_pasien
        );
        chart_status_pasien.render();
    </script>

    <script>
        // -----------------------------------------------------------------------
        // 
        // -----------------------------------------------------------------------
        var option_triase_pasien = {
            series: [25, 25, 25, 25],
            labels: ["2021", "2020", "2019", "2018"],
            chart: {
                height: 280,
                type: "donut",
                foreColor: "#adb0bb",
                fontFamily: "DM sans",
            },
            colors: ["#1a9bfc", "#15435A", "#fec90f", "#ecf0f2"],
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
                // position: "bottom",
                // fontSize: "16px",
                // labels: {
                //   colors: ["#777e89"],
                // },
                // markers: {
                //   width: 8,
                //   height: 8,
                // },
            },
            grid: {
                show: false,
                borderColor: "transparent",
                padding: {
                    top: 0,
                    right: 0,
                },
            },
            stroke: {
                colors: ["transparent"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: "78%",
                        background: "transparent",
                        labels: {
                            show: false,
                            name: {
                                show: true,
                                fontSize: "18px",
                                color: undefined,
                                offsetY: -10,
                            },
                            value: {
                                show: false,
                                color: "#98aab4",
                            },
                            total: {
                                show: false,
                                label: "Our Visitors",
                                color: "#98aab4",
                            },
                        },
                    },
                },
            },
            tooltip: {
                theme: "dark",
                fillSeriesColor: false,
            },
        };

        var chart_triase_pasien = new ApexCharts(
            document.querySelector("#triase-pasien"),
            option_triase_pasien
        );
        chart_triase_pasien.render();
    </script>


    <script>
        $(function() {
            "use strict";
            new Chartist.Line(
                ".pemasukan-bulan", {
                    labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov",
                        "Des"
                    ],
                    series: [
                        [
                            {{ $total_pemasukan_bulan[0]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[1]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[2]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[3]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[4]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[5]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[6]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[7]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[8]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[9]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[10]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[11]->total ?? 0 }},
                        ],
                        [
                            {{ $total_pemasukan_bulan[0]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[1]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[2]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[3]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[4]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[5]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[6]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[7]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[8]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[9]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[10]->total ?? 0 }},
                            {{ $total_pemasukan_bulan[11]->total ?? 0 }},
                        ],
                    ],
                }, {
                    showArea: true,
                    fullWidth: true,
                    plugins: [Chartist.plugins
                        .tooltip({
                            currency: 'Rp',
                            class: 'class1 class2',
                            appendToBody: true
                        })
                    ], // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
                    axisY: {
                        offset: 60,
                        labelInterpolationFnc: function(value) {
                            return 'Rp' + value / 1000000000 + 'm';
                        },
                    },
                }
            );
        });
    </script>

    <script>
        var sparklineLogin = function() {
            @foreach ($total_kunjungan_poli_baru_lama as $item)
                $("#chart-poli-lama-{{ $loop->iteration }}").sparkline({{ $item['chart'] }}, {
                type: "line",
                width: "100%",
                height: "50",
                lineColor: "#1bc5bd",
                fillColor: "#1bc5bd",
                minSpotColor: "#1bc5bd",
                maxSpotColor: "#1bc5bd",
                highlightLineColor: "rgba(0, 0, 0, 0.2)",
                highlightSpotColor: "#1bc5bd",
                });
            @endforeach

        };
        var sparkResize;
        $(window).resize(function(e) {
            clearTimeout(sparkResize);
            sparkResize = setTimeout(sparklineLogin, 500);
        });
        sparklineLogin();
        $(document).ready(function() {
            $("#carouselKamar").owlCarousel({
                items: 4,
                loop: false,
                rewind: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 1000,
                autoplayHoverPause: true
            });
            $("#carouselPoli").owlCarousel({
                items: 3,
                loop: false,
                rewind: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true
            });
            $("#carouselPenyakit").owlCarousel({
                items: 3,
                loop: false,
                rewind: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true
            });
        });
    </script>

@endsection