<!DOCTYPE html>
<!--
Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: https://1.envato.market/EA4JP
Renew Support: https://1.envato.market/EA4JP
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">
<!--begin::Head-->

<head>
    <base href="">
    <meta charset="utf-8" />
    <title>Metronic | Dashboard</title>
    <meta name="description" content="Updates and statistics" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!--begin::Fonts-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" />
    <!--end::Fonts-->

    <!--begin::Page Vendors Styles(used by this page)-->
    <link href="../assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
    <!--end::Page Vendors Styles-->


    <!--begin::Global Theme Styles(used by all pages)-->
    <link href="../assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
    <link href="../assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
    <!--end::Global Theme Styles-->

    <!--begin::Layout Themes(used by all pages)-->

    <link href="../assets/css/themes/layout/header/base/light.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/themes/layout/header/menu/light.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/themes/layout/brand/dark.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/themes/layout/aside/dark.css" rel="stylesheet" type="text/css" />
    <!--end::Layout Themes-->

    <link rel="shortcut icon" href="../assets/media/logos/favicon.ico" />

    <style>
        body{
            background-color: white;
        }

        .title {
            color: #181C32;
            font-family: Poppins;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
        }

        .breadcrumb{
            background-color: white;
            padding: 0px 0px !important;
            padding-left: 0 !important;
        }

        .breadcrumb-item a{
            color: #3F4254;
            font-family: Poppins;
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
        }

        .breadcrumb-item.active {
            color: #B5B5C3;
            font-family: Poppins;
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            line-height: 21px;
        }

        .nav-tabs {
            border-bottom: 0px solid #000000 !important;
        }

        .nav-link{
            color: #637381;
            font-family: Public Sans;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 22px;
            text-align: center;
        }

        .nav-link.active {
            color: #212B36 !important;
            border-bottom: 2px solid #0C518C !important;
            font-family: Public Sans;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 22px;
            text-align: center;
        }

        .title-tab {
            color: #181C32;
            font-family: Poppins;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
        }

        .title-table-thead{
            color: #637381;
            font-family: Roboto;
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            letter-spacing: 0.36px;
        }

        .title-table-tbody {
            color: #181C32;
            font-family: Roboto;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 30px; /* 166.667% */
            letter-spacing: -0.36px;
        }

        .content-saran{
            color: #637381;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 25px
        }

        /* Media query untuk tablet */
        @media (max-width: 768px) {
            /* .title, 
            .title-tab {
                font-size: 15px; 
            }

            .title-table-tbody{
                font-size: 14px; 
            }

            .breadcrumb-item a,
            .breadcrumb-item.active,
            .nav-link,
            .nav-link.active {
                font-size: 10px;
            } */
        }
    </style>
</head>
<!--end::Head-->

<!--begin::Body-->

<body id="kt_body"
    class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading">
    
    <!-- breadcrumb & icon tanya START -->
    <div class="row" style="margin-bottom: 28px;">
        <div class="col-lg-11 col-md-11">
            <h1 class="title" style="margin-bottom: 0;">PT. Sadhana Abiyasa Sampoerna</h1>
            <nav aria-label="breadcrumb" id="breadcrumb_top"
                    hx-post="/tpl_corp/mcu/be_breadcrumb_kesimpulan_saran.php"
                    hx-trigger="load"
                    hx-indicator="#spinnerloadbreadcrumb"
                    hx-ext="breadcrumb_json"
                    hx-target-error="#any-errors"
                >

                <div id="htmx-alert" hidden class="alert alert-warning sticky-top"></div>

                <!-- spiner loading saran START -->
                <div class="position-absolute w-100 h-100 d-flex justify-content-center align-items-center bg-white"
                    style="z-index: 9999; margin-top: 10px;"
                    >
                    <div id="spinnerloadbreadcrumb" class="spinner-border text-primary htmx-indicator" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <!-- spiner loading saran END -->
            
            <!-- <nav aria-label="breadcrumb" id="breadcrumb_top"> -->
                <!-- <ol class="breadcrumb" style="margin-bottom: 0;">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="#">Employee Health Medical Analytic</a></li>
                    <li class="breadcrumb-item"><a href="#">PT. Sadhana Abiyasa Sampoerna</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Mcu Karyawan</li>
                </ol> -->
            </nav>
        </div>

        <div class="col-1 align-content-center">
            <!-- align-content-center -->
            <div class="d-flex justify-content-end">
                <a href="#">
                <i class="fas fa-info-circle text-primary"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- breadcrumb & icon tanya END -->

    <!-- tab START -->
    <ul class="nav nav-tabs nav-tabs-line" style="margin-bottom: 40px;">
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#kt_tab_pane_1">Peserta</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Kelainan Global</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#kt_tab_pane_3">Kelainan Lab</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4">Kelainan Non Lab</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5">Kelainan Fisik</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_6">Kesimpulan & Saran</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
        </li>
    </ul>
    <div class="tab-content mt-5" id="myTabContent">
        <div class="tab-pane fade show active" id="kt_tab_pane_6" role="tabpanel" aria-labelledby="kt_tab_pane_6">

            <!-- title tab START -->
            <div class="row justify-content-center" style="margin-bottom: 24px;">
                <div class="col-lg-12 col-md-12 text-center">
                    <h3 class="title-tab">Kesimpulan</h3>
                </div>
            </div>
            <!-- title tab END -->

            <!-- title pemeriksaan lab START -->
            <div class="row">
                <div class="col-lg-12 col-md-12 text-left" 
                    id="judul_pemeriksaan_lab"
                    hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=judul_pemeriksaan_lab" 
                    hx-trigger="load"
                    hx-indicator="#spinnerload"
                    >
                    <!-- <ul>
                        <li style="padding:0px !important;"><h3 class="title-tab">3 Kelainan Pemeriksaan Lab terbesar :</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- title pemeriksaan lab END -->

            <!-- table pemeriksaan lab START -->
            <div class="row" style="padding-left:30px;">
                <div class="col-lg-12 col-md-12">
                    <div class="table-responsive" id="tabel_pemeriksaan_lab" 
                        hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=pemeriksaanLab" 
                        hx-trigger="load"
                        hx-indicator="#spinnerload"
                    >
                    <!-- spiner loading START -->
                    <div class="position-absolute w-100 h-100 d-flex justify-content-center align-items-center bg-white"
                        style="z-index: 9999;"
                        >
                        <div id="spinnerload" class="spinner-border text-primary htmx-indicator" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                    <!-- spiner loading END -->

                    <!-- <div class="table-responsive" id="tabel_pemeriksaan_lab" 
                    > -->
                        <!-- <table class="table table-borderless">
                            <colgroup>
                                <col style="width: 10%">
                                <col style="width: 70%">
                                <col style="width: 20%">
                            </colgroup>
                            <thead class="title-table-thead">
                                <tr>
                                    <th scope="col">No</th>
                                    <th scope="col">Pemeriksaan</th>
                                    <th scope="col">Persentase</th>
                                </tr>
                            </thead>
                            <tbody class="title-table-tbody">
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Hipercholesterolemia</td>
                                    <td>44.5</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Hiperuricemia</td>
                                    <td>22.7</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Peningkatan SGPT</td>
                                    <td>15.8</td>
                                </tr>
                            </tbody>
                        </table> -->
                    </div>
                </div>
            </div>
            <!-- table pemeriksaan lab END -->

            <!-- title pemeriksaan non lab START -->
            <div class="row">
                <div class="col-lg-12 col-md-12 text-left"
                    id="judul_pemeriksaan_non_lab"
                    hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=judul_pemeriksaan_non_lab" 
                    hx-trigger="load"
                    hx-indicator="#spinnerload"
                    >
                    <!-- <ul>
                        <li style="padding:0px !important;"><h3 class="title-tab">3 Kelainan Pemeriksaan Non Lab terbesar :</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- title pemeriksaan non lab END -->

            <!-- table pemeriksaan non lab START -->
            <div class="row" style="padding-left:30px;">
                <div class="col-lg-12 col-md-12">
                     <div class="table-responsive" id="tabel_pemeriksaan_non_lab" 
                        hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=pemeriksaanNonLab" 
                        hx-trigger="load"
                        hx-indicator="#spinnerload"
                    >

                    <!-- <div class="table-responsive" id="tabel_pemeriksaan_non_lab"
                    > -->
                        <!-- <table class="table table-borderless">
                            <colgroup>
                                <col style="width: 10%">
                                <col style="width: 70%">
                                <col style="width: 20%">
                            </colgroup>
                            <thead class="title-table-thead">
                                <tr>
                                    <th scope="col">No</th>
                                    <th scope="col">Pemeriksaan</th>
                                    <th scope="col">Persentase</th>
                                </tr>
                            </thead>
                            <tbody class="title-table-tbody">
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Retriksi Ringan</td>
                                    <td>22.0</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Gangguan Konduksi Ringan</td>
                                    <td>15.0</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Obstruksi Sedang</td>
                                    <td>13.0</td>
                                </tr>
                            </tbody>
                        </table> -->
                    </div>
                </div>
            </div>
            <!-- table pemeriksaan non lab END -->

            <!-- title pemeriksaan fisik START -->
            <div class="row">
                <div class="col-lg-12 col-md-12 text-left"
                    id="judul_pemeriksaan_fisik"
                    hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=judul_pemeriksaan_fisik" 
                    hx-trigger="load"
                    hx-indicator="#spinnerload"
                >
                    <!-- <ul>
                        <li style="padding:0px !important;"><h3 class="title-tab">3 Kelainan Pemeriksaan Fisik terbesar :</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- title pemeriksaan fisik END -->

            <!-- table pemeriksaan fisik START -->
            <div class="row" style="padding-left:30px;">
                <div class="col-lg-12 col-md-12">
                    <!-- <div class="table-responsive"> -->
                    <div class="table-responsive" 
                        id="tabel_pemeriksaan_fisik" 
                        hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=pemeriksaanFisik" 
                        hx-trigger="load"
                        hx-indicator="#spinnerload"
                        >
                        <!-- <table class="table table-borderless">
                            <colgroup>
                                <col style="width: 10%">
                                <col style="width: 70%">
                                <col style="width: 20%">
                            </colgroup>
                            <thead class="title-table-thead">
                                <tr>
                                    <th scope="col">No</th>
                                    <th scope="col">Pemeriksaan</th>
                                    <th scope="col">Persentase</th>
                                </tr>
                            </thead>
                            <tbody class="title-table-tbody">
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Obesitas Stage 1</td>
                                    <td>41.7</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Pre Hipertensi</td>
                                    <td>39.0</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Kelainan Refraksi</td>
                                    <td>35.2</td>
                                </tr>
                            </tbody>
                        </table> -->
                    </div>
                </div>
            </div>
            <!-- table pemeriksaan fisik END -->

            <!-- title tab saran START -->
            <div class="row justify-content-center" style="margin-top: 40px;">
                <div class="col-lg-12 col-md-12 text-center">
                    <h3 class="title-tab">Saran</h3>
                </div>
            </div>
            <!-- title tab saran END -->

            <!-- overweight START -->
            <div class="row" style="margin-bottom: 12px;padding-left:30px;">
                <div 
                    class="col-lg-12 col-md-12 text-left"
                    id="saran_overweight" 
                    hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=saran_overweight" 
                    hx-trigger="load"
                    hx-indicator="#spinnerloadsaran"
                    >

                    <!-- spiner loading saran START -->
                    <div class="position-absolute w-100 h-100 d-flex justify-content-center align-items-center bg-white"
                        style="z-index: 9999; margin-top: 10px;"
                        >
                        <div id="spinnerloadsaran" class="spinner-border text-primary htmx-indicator" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                    <!-- spiner loading saran END -->

                    <!-- <h3 class="title-tab">Overweight/Obese</h3>    
                    <ul>
                        <li style="padding:0px !important;"><h3 class="content-saran">Olah raga teratur</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Penurunan berat badan</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- overweight END -->

            <!-- kelainan refraksi START -->
            <div class="row" style="margin-top: 24px;padding-left:30px;">
                <div class="col-lg-12 col-md-12 text-left"
                        id="saran_kelainan_refraksi" 
                        hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=saran_kelainan_refraksi" 
                        hx-trigger="load"
                          hx-indicator="#spinnerloadsaran"
                    >
                    <!-- <h3 class="title-tab">Kelainan Refraksi</h3>
                    <h3 class="content-saran">1. Kelainan refraksi dengan kacamata</h3>
                    <ul>
                        <li style="padding:0px !important;"><h3 class="content-saran">Konsul dokter Scpesialis Mata untuk pemakaian kacamata/ lensa kontak</h3></li>
                    </ul>
                    <h3 class="content-saran">2. Kelainan refraksi tanpa kacamata</h3>
                    <ul>
                        <li style="padding:0px !important;"><h3 class="content-saran">Pemakaian kacamata/ lensa kontak</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- kelainan refraksi END -->

            <!-- tekanan darah START -->
            <div class="row" style="margin-top: 24px;padding-left:30px;">
                <div class="col-lg-12 col-md-12 text-left"
                        id="saran_tekanan_darah" 
                        hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=saran_tekanan_darah" 
                        hx-trigger="load"
                          hx-indicator="#spinnerloadsaran"
                    >
                    <!-- <h3 class="title-tab">Tekanan Darah</h3>
                    <h3 class="content-saran">1. Pre Hipertensi </h3>
                    <ul>
                        <li style="padding:0px !important;"><h3 class="content-saran">Olah raga teratur</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Cukup istirahat</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Pemeriksaan tekanan darah secara teratur.</h3></li>
                    </ul>
                    <h3 class="content-saran">2. Hipertensi stage 1 dan 2</h3>
                    <ul>
                        <li style="padding:0px !important;"><h3 class="content-saran">Olah raga teratur</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Cukup istirahat</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Batasi konsumsi garam</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Pemeriksaan tekanan darah secara teratur</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Pengobatan/ minum obat secara teratur (bila ybs sudah minum obat, hipertensi tetapi  kadang-kadang atau tidak rutin)</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Bila minum obat rutin tetapi tekanan darah tetap tinggi, Konsul dokter Spesialis Penyakit Dalam untuk evaluai obat.</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- tekanan darah END -->

            <!-- profil lemak START -->
            <div class="row" style="margin-top: 24px;padding-left:30px;">
                <div class="col-lg-12 col-md-12 text-left"
                        id="saran_profile_lemak" 
                        hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=saran_profile_lemak" 
                        hx-trigger="load"
                        hx-indicator="#spinnerloadsaran"
                    >
                    <!-- <h3 class="title-tab">Peningkatan Profil lemak dan Hiperglikemia</h3>
                    <h3 class="content-saran">1. Pre Hipertensi </h3>
                    <ul>
                        <li style="padding:0px !important;"><h3 class="content-saran">Diet rendah lemak, karbohidrat dan gula.</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Olahraga secara teratur.</h3></li>
                        <li style="padding:0px !important;"><h3 class="content-saran">Program promosi kesehatan terutama untuk mencegah terjadinya dampak serius peningkatan lemak darah.</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- profil lemak END -->

            <!-- Hiperuricemia START -->
            <div class="row" style="margin-top: 24px;padding-left:30px;">
                <div class="col-lg-12 col-md-12 text-left"
                        id="saran_hiperuricemia" 
                        hx-get="/tpl_corp/mcu/be_kesimpulan_saran.php?id=saran_hiperuricemia" 
                        hx-trigger="load"
                        hx-indicator="#spinnerloadsaran"
                    >
                    <!-- <h3 class="title-tab">Hiperuricemia</h3>
                    <ul>
                        <li style="padding:0px !important;"><h3 class="content-saran">Mengurangi asupan makanan/sayuran yang mengandung purin (melinjo, kangkung, jeroan, emping, dll).</h3></li>
                    </ul> -->
                </div>
            </div>
            <!-- Hiperuricemia END -->

        </div>
        <div class="tab-pane fade" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_1">Tab content 1</div>
        <div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">Tab content 2</div>
        <div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3">Tab content 3</div>
        <div class="tab-pane fade" id="kt_tab_pane_4" role="tabpanel" aria-labelledby="kt_tab_pane_4">Tab content 4</div>
        <div class="tab-pane fade" id="kt_tab_pane_5" role="tabpanel" aria-labelledby="kt_tab_pane_5">Tab content 5</div>
        <div class="tab-pane fade" id="kt_tab_pane_7" role="tabpanel" aria-labelledby="kt_tab_pane_7">Tab content 7</div>
    </div>
    <!-- tab END -->

    <script>var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";</script>
    <!--begin::Global Config(global config for global JS scripts)-->
    <script>
        var KTAppSettings = {
            "breakpoints": {
                "sm": 576,
                "md": 768,
                "lg": 992,
                "xl": 1200,
                "xxl": 1400
            },
            "colors": {
                "theme": {
                    "base": {
                        "white": "#ffffff",
                        "primary": "#3699FF",
                        "secondary": "#E5EAEE",
                        "success": "#1BC5BD",
                        "info": "#8950FC",
                        "warning": "#FFA800",
                        "danger": "#F64E60",
                        "light": "#E4E6EF",
                        "dark": "#181C32"
                    },
                    "light": {
                        "white": "#ffffff",
                        "primary": "#E1F0FF",
                        "secondary": "#EBEDF3",
                        "success": "#C9F7F5",
                        "info": "#EEE5FF",
                        "warning": "#FFF4DE",
                        "danger": "#FFE2E5",
                        "light": "#F3F6F9",
                        "dark": "#D6D6E0"
                    },
                    "inverse": {
                        "white": "#ffffff",
                        "primary": "#ffffff",
                        "secondary": "#3F4254",
                        "success": "#ffffff",
                        "info": "#ffffff",
                        "warning": "#ffffff",
                        "danger": "#ffffff",
                        "light": "#464E5F",
                        "dark": "#ffffff"
                    }
                },
                "gray": {
                    "gray-100": "#F3F6F9",
                    "gray-200": "#EBEDF3",
                    "gray-300": "#E4E6EF",
                    "gray-400": "#D1D3E0",
                    "gray-500": "#B5B5C3",
                    "gray-600": "#7E8299",
                    "gray-700": "#5E6278",
                    "gray-800": "#3F4254",
                    "gray-900": "#181C32"
                }
            },
            "font-family": "Poppins"
        };
    </script>
    <!--end::Global Config-->

    <!--begin::Global Theme Bundle(used by all pages)-->
    <script src="../assets/plugins/global/plugins.bundle.js"></script>
    <script src="../assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
    <script src="../assets/js/scripts.bundle.js"></script>
    <!--end::Global Theme Bundle-->

    <!--begin::Page Vendors(used by this page)-->
    <script src="../assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
    <!--end::Page Vendors-->

    <!--begin::Page Scripts(used by this page)-->
    <script src="../assets/js/pages/widgets.js"></script>
    <!--end::Page Scripts-->

    <!-- echartjs.min.js -->
    <script src="../assets/js/echarts-js/echart.min.js"></script>

    <!-- helper htmx -->
    <script src="../assets/js/helper-htmx/helper.js"></script>
    
    <!-- iconify -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"
      integrity="sha512-lYMiwcB608+RcqJmP93CMe7b4i9G9QK1RbixsNu4PzMRJMsqr/bUrkXUuFzCNsRUo3IXNUr5hz98lINURv5CNA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- htmx -->
    <script src="https://unpkg.com/htmx.org@1.9.11/dist/htmx.js" integrity="sha384-l9bYT9SL4CAW0Hl7pAOpfRc18mys1b0wK4U8UtGnWOxPVbVMgrOdB+jyz/WY8Jue" crossorigin="anonymous"></script>

    <!-- SCRIPT -->
    <script type="text/javascript" async>

        let arrayBreadcrumb = [
            {"title":"Dashboard"},
            {"title":"Employee Health Medical Analytic"},
            {"title":"PT. Sadhana Abiyasa Sampoerna"},
            {"title":"Mcu Karyawan"}
        ];

        htmx.defineExtension('breadcrumb_json', {
            onEvent: function (name, evt) {},
            encodeParameters: function(xhr, parameters, elt) {
                xhr.overrideMimeType('text/json') // override default mime type
                return JSON.stringify({ arrayParam: arrayBreadcrumb })
            }
        });

        document.body.addEventListener('htmx:afterRequest', function (evt) {
            const errorTarget = document.getElementById("htmx-alert")
            if (evt.detail.successful) {
                // Successful request, clear out alert
                errorTarget.setAttribute("hidden", "true")
                errorTarget.innerText = "";
            } else if (evt.detail.failed && evt.detail.xhr) {
                // Server error with response contents, equivalent to htmx:responseError
                console.warn("Server error", evt.detail)
                const xhr = evt.detail.xhr;
                errorTarget.innerText = `Unexpected server error: ${xhr.status} - ${xhr.statusText}`;
                errorTarget.removeAttribute("hidden");
            } else {
                // Unspecified failure, usually caused by network error
                console.error("Unexpected htmx error", evt.detail)
                errorTarget.innerText = "Unexpected error, check your connection and try to refresh the page.";
                errorTarget.removeAttribute("hidden");
            }
        });

        // pake htmx.ajax
        // function loadDataOnPageLoad()
        // {
        //     let arrayBreadcrumb = [
        //         {"title":"Dashboard"},
        //         {"title":"Employee Health Medical Analytic"},
        //         {"title":"PT. Sadhana Abiyasa Sampoerna"}, 
        //         {"title":"Mcu Karyawan"}
        //     ];

        //     $.ajax({
        //         url: "/tpl_corp/mcu/be_breadcrumb_kesimpulan_saran.php",
        //         method: "POST",
        //         data: JSON.stringify({ arrayParam: arrayBreadcrumb }),
        //         contentType: "application/json",
        //         success: function(data) {
        //             console.log(data);
        //         },
        //         error: function(xhr, status, error) {
        //             // Tindakan yang akan dilakukan jika permintaan gagal
        //             console.error("Request failed: ", status, error);
        //         }
        //     })
        // }

        // loadDataOnPageLoad();

        // window.addEventListener('load', loadDataOnPageLoad);
    </script>
    <!-- SCRIPT -->
</body>
<!--end::Body-->

</html>