@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')}}/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" />

@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">
              12000
            </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">
              32

            </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">
              20
            </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">
              835
            </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</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" 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">
        <div class="card-body">
          <div class="d-flex align-items-center pb-3 border-bottom">
            <div>
              <h3 class="card-title">Tingkat Triase</h3>
            </div>

          </div>

          <div class="position-relative">
            <div id="chartPendidikan" 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="chartGendre" 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="chartStatus" 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="unit-layanan" 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. 202.000.000
                  <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</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="total-revenue4" style="height: 350px"></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">9</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">40</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</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</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</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</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</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>
          <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-warning
                          fs-1
                          me-1
                        "></i>
              Kelas 1
            </li>
            <li class="list-inline-item">
              <i class="
                          ri-checkbox-blank-circle-fill
                        
                          fs-1
                          me-1
                        " style="color: #1EAEB7;"></i>Kelas 2
            </li>

            <li class="list-inline-item">
              <i class="
                          ri-checkbox-blank-circle-fill
                          text-warning
                          fs-1
                          me-1
                        " style="color: #15435A;"></i>Kelas 3
            </li>

            <li class="list-inline-item">
              <i class="
                          ri-checkbox-blank-circle-fill
                         
                          fs-1
                          me-1
                        " style="color: #FF79B1;"></i>VIP
            </li>



          </ul>
        </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 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-kelas-pasien" class="ps-3" style="height: 400px;"></div>
        </div>
      </div>
    </div>

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

        </div>
      </div>

      <!--item-->
      <div class="col-lg-3 match-row mt-2">
        <div class="card px-3">
          <div class="card-body text-center">
            <br>
            <h7 class="">Ruangan</h7>
            <h3 class="f-w-600 text-success"><a href="#!">Angrek</a></h3>
            <p style="margin-top: 0px;font-weight: bold;">Kelas 1</p>
            <span class="badge bg-light-primary text-primary">Kosong</span>
          </div>
          <div class="row border-top text-center mt-3">
            <div class="col-6 mt-3">
              <span>Total Bed</span>
              <div class="follow-num counter">
                <h4 class="card-title">30</h4>
              </div>
            </div>
            <div class="col-6 mt-3">
              <span>Tersedia</span>
              <div class="follow-num counter">
                <h4 class="card-title">23</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end item-->



      <!--item-->
      <div class="col-lg-3 match-row mt-2">
        <div class="card px-3">
          <div class="card-body text-center">
            <br>
            <h7 class="">Ruangan</h7>
            <h3 class="f-w-600 text-success"><a href="#!">Dahlia</a></h3>
            <p style="margin-top: 0px;font-weight: bold;">Kelas 1</p>
            <span class="badge bg-light-warning text-warning">Penuh</span>
          </div>
          <div class="row border-top text-center mt-3">
            <div class="col-6 mt-3">
              <span>Total Bed</span>
              <div class="follow-num counter">
                <h4 class="card-title">30</h4>
              </div>
            </div>
            <div class="col-6 mt-3">
              <span>Tersedia</span>
              <div class="follow-num counter">
                <h4 class="card-title">30</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end item-->



      <!--item-->
      <div class="col-lg-3 match-row mt-2">
        <div class="card px-3">
          <div class="card-body text-center">
            <br>
            <h7 class="">Ruangan</h7>
            <h3 class="f-w-600 text-success"><a href="#!">Mawar</a></h3>
            <p style="margin-top: 0px;font-weight: bold;">Kelas 1</p>
            <span class="badge bg-light-primary text-primary">Kosong</span>
          </div>
          <div class="row border-top text-center mt-3">
            <div class="col-6 mt-3">
              <span>Total Bed</span>
              <div class="follow-num counter">
                <h4 class="card-title">30</h4>
              </div>
            </div>
            <div class="col-6 mt-3">
              <span>Tersedia</span>
              <div class="follow-num counter">
                <h4 class="card-title">23</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end item-->


      <!--item-->
      <div class="col-lg-3 match-row mt-2">
        <div class="card px-3">
          <div class="card-body text-center">
            <br>
            <h7 class="">Ruangan</h7>
            <h3 class="f-w-600 text-success"><a href="#!">Tulip</a></h3>
            <p style="margin-top: 0px;font-weight: bold;">Kelas 1</p>
            <span class="badge bg-light-primary text-primary">Kosong</span>
          </div>
          <div class="row border-top text-center mt-3">
            <div class="col-6 mt-3">
              <span>Total Bed</span>
              <div class="follow-num counter">
                <h4 class="card-title">30</h4>
              </div>
            </div>
            <div class="col-6 mt-3">
              <span>Tersedia</span>
              <div class="follow-num counter">
                <h4 class="card-title">23</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end item-->
    </div>
    <!-- row -->

    <!-- Row -->
    <div class="row">
      <div class="col-lg-4 match-row">
        <div class="card">
          <div class="card-body analytics-info">
            <div class="d-flex align-items-center mb-3">
              <h4 class="mb-0">Poli Gigi dan Mulut</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>500</b>
              </div>
              <div class="ms-3 border-end pe-3">
                <h6 class="text-muted fw-normal">Pasien Baru</h6>
                <b>150</b>
              </div>
              <div class="ms-3">
                <h6 class="text-muted fw-normal">Pasien Lama</h6>
                <b>300</b>
              </div>
            </div>
          </div>
          <div id="sparkline8"></div>
        </div>
      </div>
      <div class="col-lg-4 match-row">
        <div class="card">
          <div class="card-body analytics-info">
            <h4>Poli Jantung</h4>
            <div class="d-flex align-items-center">
              <div class="border-end pe-3">
                <h6 class="text-muted fw-normal">Total Pasien</h6>
                <b>213</b>
              </div>
              <div class="ms-3 border-end pe-3">
                <h6 class="text-muted fw-normal">Pasien Baru</h6>
                <b>15</b>
              </div>
              <div class="ms-3">
                <h6 class="text-muted fw-normal">Pasien Lama</h6>
                <b>25</b>
              </div>
            </div>
          </div>
          <div id="sparkline9"></div>
        </div>
      </div>
      <div class="col-lg-4 match-row">
        <div class="card">
          <div class="card-body analytics-info">
            <h4>Poli Anak</h4>
            <div class="d-flex align-items-center">
              <div class="border-end pe-3">
                <h6 class="text-muted fw-normal">Total Pasien</h6>
                <b>85</b>
              </div>
              <div class="ms-3 border-end pe-3">
                <h6 class="text-muted fw-normal">Pasien Baru</h6>
                <b>20</b>
              </div>
              <div class="ms-3">
                <h6 class="text-muted fw-normal">Pasien Lama</h6>
                <b>45</b>
              </div>
            </div>
          </div>
          <div id="sparkline10"></div>
        </div>
      </div>
    </div>
    <!-- Row -->

    <!-- Row -->
    <div class="row">
      <div class="col-lg-4 d-flex align-items-stretch match-row">
        <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">5 Besar Penyakit di IGD</h3>
                <h6 class="card-subtitle mb-0">Pertahun</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">DBD</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">554 Kasus</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">Stroke</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">202 Kasus</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">Kecelakaan</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">396 Kasus</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">Jantung</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">900 Kasus</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">Darah Tinggi</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">100 Kasus</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 match-row">
        <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">5 Besar Penyakit di Rawan Jalan</h3>
                <h6 class="card-subtitle mb-0">Pertahun</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">DBD</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">554 Kasus</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">Stroke</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">202 Kasus</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">Kecelakaan</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">396 Kasus</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">Jantung</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">900 Kasus</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">Darah Tinggi</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">100 Kasus</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 match-row">
        <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">5 Besar Penyakit di Rawat Inap</h3>
                <h6 class="card-subtitle mb-0">Pertahun</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">DBD</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">554 Kasus</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">Stroke</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">202 Kasus</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">Kecelakaan</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">396 Kasus</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">Jantung</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">900 Kasus</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">Darah Tinggi</span>
                    </h6>
                  </div>
                  <div class="ms-auto">
                    <h6 class="mb-0 fw-bold">100 Kasus</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>

    <!-- Row end -->

    <!-- 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</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
                          </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 </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')}}/js/pages/widget/widget-charts.js"></script>
<script src="{{asset('back')}}/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="{{asset('back')}}/js/pages/widget/card-custom.js"></script>


<script>

  // start ikm pertahun
  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


  var option_sales_overview = {
    series: [{
        name: "Visitor",
        data: [355, 390, 300, 350, 390, 180, 129, 292, 400, 270, 190, 200],
      },

      {
        name: "Page View",
        data: [200, 200, 150, 500, 300, 380, 129, 292, 200, 370, 200, 300],
      },


    ],

    chart: {
      type: "bar",
      height: 260,
      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", "#a7e3f4"],
    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: 100,
      max: 400,
      tickAmount: 3,
    },
    stroke: {
      show: true,
      width: 5,
      lineCap: "butt",
      colors: ["transparent"],
    },
    tooltip: {
      theme: "dark",
    },
  };

  var chart_sales_overview = new ApexCharts(
    document.querySelector("#chartVisitor"),
    option_sales_overview
  );
  chart_sales_overview.render();
</script>


<script>
  var option_kunjungan_kelas_pasien = {
    series: [{
        name: "Kelas 3",
        data: [300, 300, 180, 320, 250, 300, 300, 300, 350, 300, 200, 230],
      },
      {
        name: "Kelas 2",
        data: [60, 90, 80, 60, 70, 100, 80, 100, 50, 100, 200, 100],
      },

      {
        name: "Kelas 3",
        data: [30, 20, 40, 30, 20, 40, 50, 50, 30, 20, 10, 70],
      },

      {
        name: "VIP",
        data: [20, 10, 10, 20, 30, 10, 40, 10, 20, 20, 20, 30],
      },


    ],

    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: 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,
      min: 100,
      max: 600,
      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 = {
    series: [{
        name: "BPJS",
        data: [300, 300, 180, 320, 250, 300, 300, 300, 350, 300, 200, 230],
      },
      {
        name: "Umum",
        data: [60, 90, 80, 60, 70, 100, 80, 100, 50, 100, 200, 100],
      },
    ],

    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,
      min: 100,
      max: 400,
      tickAmount: 3,
    },
    stroke: {
      show: true,
      curve: "smooth",
      width: 5,
      lineCap: "round",
      colors: ["white"],
    },
    tooltip: {
      theme: "dark",
    },
  };

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

<script>
  var option_unit_layanan = {
    series: [{
        name: "BPJS",
        data: [300, 300, 180, 320, 250, 300, 300, 300, 350, 300, 200, 230, 300, 300, 180, 320, 250, 300, 300, 200, 230, 300, 300],
      },
      {
        name: "Umum",
        data: [60, 90, 80, 60, 70, 100, 80, 100, 50, 100, 200, 100, 60, 90, 80, 60, 70, 100, 100, 50, 100, 200, 100],
      },
    ],

    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: ["IGD", "Lab", "Rawat inap", "Hemodialisa", "Poli THT", "Poli Mata", "Poli Umum", "Radiologi", "MCU", "ICU", "Poli Anak", "Bedah Sentral", "Farmasi", "poli paru", "poli bedah saraf", "Poli EEG", "poli fisiotherapi", "Poli Ortopedi", "Poli Getiatri", "Poli Thasemi", "Poli Penyakit dalam", "Poli Kulit Kelamin", "Poli Ekg"],
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
    },
    yaxis: {
      show: true,
      min: 100,
      max: 400,
      tickAmount: 3,
    },
    stroke: {
      show: true,
      curve: "smooth",
      width: 5,
      lineCap: "round",
      colors: ["white"],
    },
    tooltip: {
      theme: "dark",
    },
  };

  var chart_unit_layanan = new ApexCharts(
    document.querySelector("#unit-layanan"),
    option_unit_layanan
  );
  chart_unit_layanan.render();
</script>

<script>
  var option_gendre = {
    series: [65, 35],
    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_gendre = new ApexCharts(
    document.querySelector("#chartGendre"),
    option_gendre
  );
  chart_gendre.render();
</script>



<script>
  var option_status = {
    series: [55, 45],
    labels: ["PNS", "Non-PNS"],
    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 = new ApexCharts(
    document.querySelector("#chartStatus"),
    option_status
  );
  chart_status.render();
</script>


<script>
  var option_pendidikan = {
    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_pendidikan = new ApexCharts(
    document.querySelector("#chartPendidikan"),
    option_pendidikan
  );
  chart_pendidikan.render();
</script>


<script>
  // -----------------------------------------------------------------------
  // status pasien
  // -----------------------------------------------------------------------
  var option_kelas_pasien = {
    series: [60, 20, 15, 5],
    labels: ["Kelas 3", "Kelas 2", "kelas 1", "VIP"],
    chart: {
      height: 280,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    colors: ["#15435A", "#1EAEB7", "#fec90f", "#FF79B1"],
    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_kelas_pasien = new ApexCharts(
    document.querySelector("#kelas-pasien"),
    option_kelas_pasien
  );
  chart_kelas_pasien.render();
</script>




<script>
  // -----------------------------------------------------------------------
  // status pasien
  // -----------------------------------------------------------------------
  var option_status_pasien = {
    series: [75, 25],
    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";
        // ==============================================================
        // Total revenue chart
        // ==============================================================
        new Chartist.Line(
          ".total-revenue4", {
            labels: ["0", "4", "8", "12", "16", "20", "24", "30"],
            series: [
              [0, 2, 3.5, 0, 13, 1, 4, 1],
              [0, 4, 0, 4, 0, 4, 0, 4],
            ],
          }, {
            high: 15,
            low: 0,
            showArea: true,
            fullWidth: true,
            plugins: [Chartist.plugins.tooltip()], // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
            axisY: {
              onlyInteger: true,
              offset: 20,
              labelInterpolationFnc: function(value) {
                return value / 1 + "k";
              },
            },
          }
        );
      });
</script>

<script>
  var sparklineLogin = function() {
    $(".spark-count").sparkline([4, 5, 0, 10, 9, 12, 4, 9, 4, 5, 3, 10, 9], {
      type: "bar",
      width: "100%",
      height: "100",
      barWidth: "8",
      resize: true,
      barSpacing: "5",
      barColor: "rgba(255, 255, 255, 0.3)",
    });
    $("#spark1").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#26c6da",
      fillColor: "#26c6da",
      maxSpotColor: "#26c6da",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#26c6da",
    });
    $("#spark2").sparkline([0, 2, 8, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#009efb",
      fillColor: "#009efb",
      minSpotColor: "#009efb",
      maxSpotColor: "#009efb",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#009efb",
    });
    $("#spark3").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#15435A",
      fillColor: "#15435A",
      maxSpotColor: "#15435A",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#15435A",
    });
    $("#spark4").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#fff",
      fillColor: "#15435A",
      maxSpotColor: "#15435A",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#15435A",
    });
    $("#spark5").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#fff",
      fillColor: "#0bb2fb",
      maxSpotColor: "#0bb2fb",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#0bb2fb",
    });
    $("#spark6").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#fff",
      fillColor: "#39cb7f",
      maxSpotColor: "#39cb7f",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#39cb7f",
    });
    $("#spark7").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#fff",
      fillColor: "#fdc90f",
      maxSpotColor: "#fdc90f",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#fdc90f",
    });
    $("#spark8").sparkline([4, 5, 0, 10, 9, 12, 4, 9], {
      type: "bar",
      width: "100%",
      height: "70",
      barWidth: "8",
      resize: true,
      barSpacing: "5",
      barColor: "#26c6da",
    });
    $("#spark9").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: "bar",
      width: "100%",
      height: "70",
      barWidth: "8",
      resize: true,
      barSpacing: "5",
      barColor: "#15435A",
    });
    $("#spark10").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: "bar",
      width: "100%",
      height: "70",
      barWidth: "8",
      resize: true,
      barSpacing: "5",
      barColor: "#03a9f3",
    });
    $("#spark11").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: "bar",
      width: "100%",
      height: "70",
      barWidth: "8",
      resize: true,
      barSpacing: "5",
      barColor: "#f62d51",
    });
    $("#sparklinedash").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: "bar",
      height: "50",
      barWidth: "2",
      resize: true,
      barSpacing: "5",
      barColor: "#fdc90f",
    });
    $("#sparklinedash2").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: "bar",
      height: "50",
      barWidth: "2",
      resize: true,
      barSpacing: "5",
      barColor: "#f64e60",
    });
    $("#sparklinedash3").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: "bar",
      height: "50",
      barWidth: "2",
      resize: true,
      barSpacing: "5",
      barColor: "#6993ff",
    });
    $("#sparklinedash4").sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: "bar",
      height: "50",
      barWidth: "2",
      resize: true,
      barSpacing: "5",
      barColor: "#0bb2fb",
    });
    $("#sparkline8").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#6993ff",
      fillColor: "#6993ff",
      maxSpotColor: "#6993ff",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#6993ff",
    });
    $("#sparkline9").sparkline([0, 2, 8, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#1bc5bd",
      fillColor: "#1bc5bd",
      minSpotColor: "#1bc5bd",
      maxSpotColor: "#1bc5bd",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#1bc5bd",
    });
    $("#sparkline10").sparkline([2, 4, 4, 6, 8, 5, 6, 4, 8, 6, 6, 2], {
      type: "line",
      width: "100%",
      height: "50",
      lineColor: "#f64e60",
      fillColor: "#f64e60",
      maxSpotColor: "#f64e60",
      highlightLineColor: "rgba(0, 0, 0, 0.2)",
      highlightSpotColor: "#f64e60",
    });
  };
  var sparkResize;
  $(window).resize(function(e) {
    clearTimeout(sparkResize);
    sparkResize = setTimeout(sparklineLogin, 500);
  });
  sparklineLogin();
</script>


<script>



</script>

@endsection