<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="utf-8">
        <title>
            <?= $this->renderSection('title') ?>
        </title>
        <meta name="description" content="Page Title">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
        <!-- Call App Mode on ios devices -->
        <meta name="apple-mobile-web-app-title" content="Page Title">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <!-- Mobile proof your site -->
        <link rel="manifest" href="<?= base_url('smart/dist/media/data/manifest.json') ?>">
        <!-- Remove phone, date, address and email as default links -->
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="date=no">
        <meta name="format-detection" content="address=no">
        <meta name="format-detection" content="email=no">
        <meta name="theme-color" content="#37393e">
        <!-- iDevice splash screens -->
        
        <!-- Remove Tap Highlight on Windows Phone IE -->
        <meta name="msapplication-tap-highlight" content="no">
        <!-- base css -->
        <link id="vendorsbundle" rel="stylesheet" media="screen, print" href="<?= base_url('smart/dist/css/vendors.bundle.css') ?>">
        <link id="appbundle" rel="stylesheet" media="screen, print" href="<?= base_url('smart/dist/css/app.bundle.css') ?>">
        <link id="mytheme" rel="stylesheet" media="screen, print" href="#">
        <link id="myskin" rel="stylesheet" media="screen, print" href="<?= base_url('smart/dist/css/skins/skin-master.css') ?>">
        
        <!-- You can add your own stylesheet here to override any styles that comes before it
		<link rel="stylesheet" media="screen, print" href="css/your_styles.css">-->
        <!-- Font Awesome -->
        <link rel="stylesheet" href="<?= base_url('smart/dist/adlte/font-awesome/css/font-awesome.min.css') ?>">
        <link rel="stylesheet" media="screen, print" href="<?= base_url('smart/dist/css/formplugins/bootstrap-datepicker/bootstrap-datepicker.css') ?>">

        <link rel="stylesheet" type="text/css" href="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/themes/bootstrap/easyui.css') ?>">

        <link rel="stylesheet" type="text/css" href="<?= base_url('smart/dist/adlte/jquery-easyui-1.10.17/themes/icon.css') ?>">
        <link rel="stylesheet" media="screen, print" href="<?= base_url('smart/dist/css/formplugins/select2/select2.bundle.css') ?>">
        <link rel="stylesheet" media="screen, print" href="<?= base_url('smart/dist/css/notifications/toastr/toastr.css') ?>">
        <style type="text/css">
            .select2-dropdown.increasezindex {
                z-index:99999;
            }

            .hidden {
                display: none;
            }

            .width100 {
                width: 100% !important;
            }

            /* Fix mobile sidebar toggle for EasyUI pages */
            @media (max-width: 991px) {
                .page-header .header-btn {
                    position: relative;
                    z-index: 9999 !important;
                }
                
                .page-content .easyui-datagrid {
                    z-index: 1 !important;
                }
            }

            /* Fix EasyUI datagrid height for mobile view */
            @media (max-width: 991px) {
                .easyui-panel .panel-body {
                    min-height: 400px !important;
                }
                
                .easyui-datagrid .datagrid-view {
                    min-height: 350px !important;
                }
                
                .easyui-datagrid .datagrid-body {
                    min-height: 300px !important;
                }
                
                /* Override untuk panel yang menggunakan fit */
                div[id*="panelfit"] .panel-body {
                    min-height: 400px !important;
                }
            }

            .metro-input {
                border: none; /* Menghilangkan border semua sisi */
                border-bottom: 2px solid #007bff; /* Menambahkan border bawah */
                border-radius: 0; /* Menghilangkan sudut melengkung */
                box-shadow: none; /* Menghilangkan shadow default */
                padding: 10px 0; /* Padding vertikal */
            }

            .metro-input:focus {
                border-bottom: 2px solid #0056b3; /* Warna border bawah saat fokus */
                outline: none; /* Menghilangkan outline default */
            }

            .google-data-studio {
                position: relative;
                width: 100%;
                padding-top: 56.25%; /* 16:9 Aspect Ratio */
                overflow: hidden;
            }

            .google-data-studio iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 0;
            }

            .table_morecondensed>thead>tr>th, 
            .table_morecondensed>tbody>tr>th, 
            .table_morecondensed>tfoot>tr>th, 
            .table_morecondensed>thead>tr>td, 
            .table_morecondensed>tbody>tr>td, 
            .table_morecondensed>tfoot>tr>td{ padding: 5px; }
        </style>

    </head>

    <body class="mod-bg-1 header-function-fixed nav-function-fixed mod-nav-link">
        <script>

            'use strict';

            var htmlRoot = document.getElementsByTagName('HTML')[0],
                classHolder = document.getElementsByTagName('BODY')[0],
                head = document.getElementsByTagName('HEAD')[0],
                themeID = document.getElementById('mytheme'),
                filterClass = function(t, e)
                {
                    return String(t).split(/[^\w-]+/).filter(function(t)
                    {
                        return e.test(t)
                    }).join(' ')
                },
                /** 
                 * Load theme options
                 **/
                loadSettings = function()
                {
                    var t = localStorage.getItem('themeSettings') || '',
                        e = t ? JSON.parse(t) :
                        {};
                    return Object.assign(
                    {
                        htmlRoot: '',
                        classHolder: '',
                        themeURL: ''
                    }, e)
                },
                /** 
                 * Save to localstorage 
                 **/
                saveSettings = function()
                {
                    themeSettings.htmlRoot = filterClass(htmlRoot.className, /^(root)-/i),
                    themeSettings.classHolder = filterClass(classHolder.className, /^(nav|header|footer|mod|display)-/i),
                    themeSettings.themeURL = themeID.getAttribute("href") ? themeID.getAttribute("href") : "",
                    localStorage.setItem("themeSettings", JSON.stringify(themeSettings))
                },
                /** 
                 * Reset settings
                 **/
                resetSettings = function()
                {
                    localStorage.setItem("themeSettings", "")
                },
                themeSettings = loadSettings();

            	themeID || ((themeID = document.createElement('link')).id = 'mytheme',
                    themeID.rel = 'stylesheet',
                    themeID.href = '',
                    head.appendChild(themeID),
                    themeID = document.getElementById('mytheme')),
                themeSettings.htmlRoot && (htmlRoot.className = themeSettings.htmlRoot),
                themeSettings.classHolder && (classHolder.className = themeSettings.classHolder),
                themeSettings.themeURL && themeID.setAttribute("href", themeSettings.themeURL);

        </script>

        <!-- BEGIN Page Wrapper -->
        <div class="page-wrapper">
            <div class="page-inner">
            	<!-- BEGIN Left Aside -->
            	<?= $this->include('template/sidebar') ?>
            	<!-- END Left Aside -->
            	<div class="page-content-wrapper">
            		<!-- BEGIN Page Header -->
            		<?= $this->include('template/header') ?>
            		<!-- END Page Header -->

            		<!-- BEGIN Page Content -->
                    <!-- the #js-page-content id is needed for some plugins to initialize -->
                    <main id="js-page-content" role="main" class="page-content">
                    	<?= $this->renderSection('main') ?>
                    </main>

                    <!-- this overlay is activated only when mobile menu is triggered -->
                    <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
                    <!-- BEGIN Page Footer -->
                    <footer class="page-footer" role="contentinfo">
                        <div class="d-flex align-items-center flex-1 text-muted">
                            <span class="hidden-md-down fw-700"><?= date('Y') ?> G-Round © Pegadaian</span>
                        </div>
                        <div>
                            <ul class="list-table m-0">
                                <li class="pl-3"><a href="#" target="blank" class="text-secondary fw-700">Versi Prototype 1.0</a></li>
                                <li class="pl-3 fs-xl"></li>
                            </ul>
                        </div>
                    </footer>
                    <!-- END Page Footer -->

                    <!-- BEGIN Color profile -->
                    <!-- this area is hidden and will not be seen on screens or screen readers -->
                    <!-- we use this only for CSS color refernce for JS stuff -->
                    <p id="js-color-profile" class="d-none">
                        <span class="color-primary-50"></span>
                        <span class="color-primary-100"></span>
                        <span class="color-primary-200"></span>
                        <span class="color-primary-300"></span>
                        <span class="color-primary-400"></span>
                        <span class="color-primary-500"></span>
                        <span class="color-primary-600"></span>
                        <span class="color-primary-700"></span>
                        <span class="color-primary-800"></span>
                        <span class="color-primary-900"></span>
                        <span class="color-info-50"></span>
                        <span class="color-info-100"></span>
                        <span class="color-info-200"></span>
                        <span class="color-info-300"></span>
                        <span class="color-info-400"></span>
                        <span class="color-info-500"></span>
                        <span class="color-info-600"></span>
                        <span class="color-info-700"></span>
                        <span class="color-info-800"></span>
                        <span class="color-info-900"></span>
                        <span class="color-danger-50"></span>
                        <span class="color-danger-100"></span>
                        <span class="color-danger-200"></span>
                        <span class="color-danger-300"></span>
                        <span class="color-danger-400"></span>
                        <span class="color-danger-500"></span>
                        <span class="color-danger-600"></span>
                        <span class="color-danger-700"></span>
                        <span class="color-danger-800"></span>
                        <span class="color-danger-900"></span>
                        <span class="color-warning-50"></span>
                        <span class="color-warning-100"></span>
                        <span class="color-warning-200"></span>
                        <span class="color-warning-300"></span>
                        <span class="color-warning-400"></span>
                        <span class="color-warning-500"></span>
                        <span class="color-warning-600"></span>
                        <span class="color-warning-700"></span>
                        <span class="color-warning-800"></span>
                        <span class="color-warning-900"></span>
                        <span class="color-success-50"></span>
                        <span class="color-success-100"></span>
                        <span class="color-success-200"></span>
                        <span class="color-success-300"></span>
                        <span class="color-success-400"></span>
                        <span class="color-success-500"></span>
                        <span class="color-success-600"></span>
                        <span class="color-success-700"></span>
                        <span class="color-success-800"></span>
                        <span class="color-success-900"></span>
                        <span class="color-fusion-50"></span>
                        <span class="color-fusion-100"></span>
                        <span class="color-fusion-200"></span>
                        <span class="color-fusion-300"></span>
                        <span class="color-fusion-400"></span>
                        <span class="color-fusion-500"></span>
                        <span class="color-fusion-600"></span>
                        <span class="color-fusion-700"></span>
                        <span class="color-fusion-800"></span>
                        <span class="color-fusion-900"></span>
                    </p>
                    <!-- END Color profile -->
                </div>
			</div>
        </div>
        <!-- END Page Wrapper -->

        <!-- BEGIN Quick Menu -->
        <!-- to add more items, please make sure to change the variable '$menu-items: number;' in your _page-components-shortcut.scss -->
        <nav class="shortcut-menu d-none d-sm-block">
            <input type="checkbox" class="menu-open" name="menu-open" id="menu_open" />
            <label for="menu_open" class="menu-open-button ">
                <span class="app-shortcut-icon d-block"></span>
            </label>
            <a href="#" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Scroll Top">
                <i class="fal fa-arrow-up"></i>
            </a>
            <a href="<?= base_url('logout') ?>" class="menu-item btn" data-toggle="tooltip" data-placement="left" title="Logout">
                <i class="fal fa-sign-out"></i>
            </a>
            <a href="#" class="menu-item btn" data-action="app-fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen">
                <i class="fal fa-expand"></i>
            </a>
            <a href="#" class="menu-item btn" data-action="app-print" data-toggle="tooltip" data-placement="left" title="Print page">
                <i class="fal fa-print"></i>
            </a>
        </nav>
        <!-- END Quick Menu -->

        <!-- BEGIN Page Settings -->
        <div class="modal fade js-modal-settings modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-right modal-md">
                <div class="modal-content">
                    <div class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center w-100">
                        <h4 class="m-0 text-center color-white">
                            Layout Settings
                            <small class="mb-0 opacity-80">User Interface Settings</small>
                        </h4>
                        <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fal fa-times"></i></span>
                        </button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="settings-panel">
                            <div class="mt-4 d-table w-100 px-5">
                                <div class="d-table-cell align-middle">
                                    <h5 class="p-0">
                                        App Layout
                                    </h5>
                                </div>
                            </div>
                            <div class="list" id="fh">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="header-function-fixed"></a>
                                <span class="onoffswitch-title">Fixed Header</span>
                                <span class="onoffswitch-title-desc">header is in a fixed at all times</span>
                            </div>
                            <div class="list" id="nff">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-fixed"></a>
                                <span class="onoffswitch-title">Fixed Navigation</span>
                                <span class="onoffswitch-title-desc">left panel is fixed</span>
                            </div>
                            <div class="list" id="nfm">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-minify"></a>
                                <span class="onoffswitch-title">Minify Navigation</span>
                                <span class="onoffswitch-title-desc">Skew nav to maximize space</span>
                            </div>
                            <div class="list" id="nfh">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-hidden"></a>
                                <span class="onoffswitch-title">Hide Navigation</span>
                                <span class="onoffswitch-title-desc">roll mouse on edge to reveal</span>
                            </div>
                            <div class="list" id="nft">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-top"></a>
                                <span class="onoffswitch-title">Top Navigation</span>
                                <span class="onoffswitch-title-desc">Relocate left pane to top</span>
                            </div>
                            <div class="list" id="fff">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="footer-function-fixed"></a>
                                <span class="onoffswitch-title">Fixed Footer</span>
                                <span class="onoffswitch-title-desc">page footer is fixed</span>
                            </div>
                            
                            <div class="expanded">
                                <ul class="mb-3 mt-1">
                                    <li>
                                        <div class="bg-fusion-50" data-action="toggle" data-class="mod-bg-1"></div>
                                    </li>
                                    <li>
                                        <div class="bg-warning-200" data-action="toggle" data-class="mod-bg-2"></div>
                                    </li>
                                    <li>
                                        <div class="bg-primary-200" data-action="toggle" data-class="mod-bg-3"></div>
                                    </li>
                                    <li>
                                        <div class="bg-success-300" data-action="toggle" data-class="mod-bg-4"></div>
                                    </li>
                                    <li>
                                        <div class="bg-white border" data-action="toggle" data-class="mod-bg-none"></div>
                                    </li>
                                </ul>
                                <div class="list" id="mbgf">
                                    <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-fixed-bg"></a>
                                    <span class="onoffswitch-title">Fixed Background</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 d-table w-100 px-5">
                                <div class="d-table-cell align-middle">
                                    <h5 class="p-0">
                                        Accessibility
                                    </h5>
                                </div>
                            </div>
                            <div class="list" id="mbf">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-bigger-font"></a>
                                <span class="onoffswitch-title">Bigger Content Font</span>
                                <span class="onoffswitch-title-desc">content fonts are bigger for readability</span>
                            </div>
                            <div class="list" id="mhc">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-high-contrast"></a>
                                <span class="onoffswitch-title">High Contrast Text (WCAG 2 AA)</span>
                                <span class="onoffswitch-title-desc">4.5:1 text contrast ratio</span>
                            </div>
                            <div class="list" id="mcb">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-color-blind"></a>
                                <span class="onoffswitch-title">Daltonism <sup>(beta)</sup> </span>
                                <span class="onoffswitch-title-desc">color vision deficiency</span>
                            </div>
                            <div class="list" id="mnl">
                                <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-link"></a>
                                <span class="onoffswitch-title">Hierarchical Navigation</span>
                                <span class="onoffswitch-title-desc">Clear breakdown of nav links</span>
                            </div>
                            
                            <hr class="mb-0 mt-4">
                            <div class="mt-4 d-table w-100 pl-5 pr-3">
                                <div class="d-table-cell align-middle">
                                    <h5 class="p-0">
                                        Global Font Size
                                    </h5>
                                </div>
                            </div>
                            <div class="list mt-1">
                                <div class="btn-group btn-group-sm btn-group-toggle my-2" data-toggle="buttons">
                                    <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-sm" data-target="html">
                                        <input type="radio" name="changeFrontSize"> SM
                                    </label>
                                    <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text" data-target="html">
                                        <input type="radio" name="changeFrontSize" checked=""> MD
                                    </label>
                                    <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-lg" data-target="html">
                                        <input type="radio" name="changeFrontSize"> LG
                                    </label>
                                    <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-xl" data-target="html">
                                        <input type="radio" name="changeFrontSize"> XL
                                    </label>
                                </div>
                                <span class="onoffswitch-title-desc d-block mb-0">Change <strong>root</strong> font size to effect rem
                                    values (resets on page refresh)</span>
                            </div>
                            <hr class="mb-0 mt-4">
                            <div class="mt-4 d-table w-100 pl-5 pr-3">
                                <div class="d-table-cell align-middle">
                                    <h5 class="p-0 pr-2 d-flex">
                                        Theme colors
                                        <a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening." data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>" data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i class="fal fa-info-circle mr-1"></i> more info</a>
                                    </h5>
                                </div>
                            </div>
                            <div class="expanded theme-colors pl-5 pr-3">
                                <ul class="m-0">
                                    <li>
                                        <a href="#" id="myapp-0" data-action="theme-update" data-themesave data-theme="" data-toggle="tooltip" data-placement="top" title="Wisteria (base css)" data-original-title="Wisteria (base css)"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-1" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-1.css') ?>" data-toggle="tooltip" data-placement="top" title="Tapestry" data-original-title="Tapestry"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-2" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-2.css') ?>" data-toggle="tooltip" data-placement="top" title="Atlantis" data-original-title="Atlantis"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-3" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-3.css') ?>" data-toggle="tooltip" data-placement="top" title="Indigo" data-original-title="Indigo"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-4" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-4.css') ?>" data-toggle="tooltip" data-placement="top" title="Dodger Blue" data-original-title="Dodger Blue"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-5" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-5.css') ?>" data-toggle="tooltip" data-placement="top" title="Tradewind" data-original-title="Tradewind"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-6" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-6.css') ?>" data-toggle="tooltip" data-placement="top" title="Cranberry" data-original-title="Cranberry"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-7" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-7.css') ?>" data-toggle="tooltip" data-placement="top" title="Oslo Gray" data-original-title="Oslo Gray"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-8" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-8.css') ?>" data-toggle="tooltip" data-placement="top" title="Chetwode Blue" data-original-title="Chetwode Blue"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-9" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-9.css') ?>" data-toggle="tooltip" data-placement="top" title="Apricot" data-original-title="Apricot"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-10" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-10.css') ?>" data-toggle="tooltip" data-placement="top" title="Blue Smoke" data-original-title="Blue Smoke"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-11" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-11.css') ?>" data-toggle="tooltip" data-placement="top" title="Green Smoke" data-original-title="Green Smoke"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-12" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-12.css') ?>" data-toggle="tooltip" data-placement="top" title="Wild Blue Yonder" data-original-title="Wild Blue Yonder"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-13" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-13.css') ?>" data-toggle="tooltip" data-placement="top" title="Emerald" data-original-title="Emerald"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-14" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-14.css') ?>" data-toggle="tooltip" data-placement="top" title="Supernova" data-original-title="Supernova"></a>
                                    </li>
                                    <li>
                                        <a href="#" id="myapp-15" data-action="theme-update" data-themesave data-theme="<?= base_url('smart/dist/css/themes/cust-theme-15.css') ?>" data-toggle="tooltip" data-placement="top" title="Hoki" data-original-title="Hoki"></a>
                                    </li>
                                </ul>
                            </div>
                            <hr class="mb-0 mt-4">
                            <div class="mt-4 d-table w-100 pl-5 pr-3">
                                <div class="d-table-cell align-middle">
                                    <h5 class="p-0 pr-2 d-flex">
                                        Theme Modes (beta)
                                        <a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta" data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>" data-template="<div class=&quot;popover bg-white border-white&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-header bg-transparent&quot;></h3><div class=&quot;popover-body fs-xs&quot;></div></div>"><i class="fal fa-question-circle mr-1"></i> why beta?</a>
                                    </h5>
                                </div>
                            </div>
                            <div class="pl-5 pr-3 py-3">
                                <div class="ie-only alert alert-warning d-none">
                                    <h6>Internet Explorer Issue</h6>
                                    This particular component may not work as expected in Internet Explorer. Please use with caution.
                                </div>
                                <div class="row no-gutters">
                                    <div class="col-4 pr-2 text-center">
                                        <div id="skin-default" data-action="toggle-replace" data-replaceclass="mod-skin-light mod-skin-dark" data-class="" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on" data-original-title="Default Mode" style="height: 80px">
                                            <div class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary"></div>
                                            <div class="d-flex flex-column flex-1">
                                                <div class="bg-white border-bottom border-primary py-1"></div>
                                                <div class="bg-faded flex-1 pt-3 pb-3 px-2">
                                                	<?php $link_demo = base_url('smart/dist/img/demo/s-1.png') ?>
                                                    <div class="py-3" style="background:url('<?= $link_demo ?>') top left no-repeat;background-size: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        Default
                                    </div>
                                    <div class="col-4 px-1 text-center">
                                        <div id="skin-light" data-action="toggle-replace" data-replaceclass="mod-skin-dark" data-class="mod-skin-light" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on" data-original-title="Light Mode" style="height: 80px">
                                            <div class="bg-white px-2 pt-0 border-right border-"></div>
                                            <div class="d-flex flex-column flex-1">
                                                <div class="bg-white border-bottom border- py-1"></div>
                                                <div class="bg-white flex-1 pt-3 pb-3 px-2">
                                                    <div class="py-3" style="background:url('<?= $link_demo ?>') top left no-repeat;background-size: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        Light
                                    </div>
                                    <div class="col-4 pl-2 text-center">
                                        <div id="skin-dark" data-action="toggle-replace" data-replaceclass="mod-skin-light" data-class="mod-skin-dark" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on" data-original-title="Dark Mode" style="height: 80px">
                                            <div class="bg-fusion-500 px-2 pt-0 border-right"></div>
                                            <div class="d-flex flex-column flex-1">
                                                <div class="bg-fusion-600 border-bottom py-1"></div>
                                                <div class="bg-fusion-300 flex-1 pt-3 pb-3 px-2">
                                                    <div class="py-3 opacity-30" style="background:url('<?= $link_demo ?>') top left no-repeat;background-size: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        Dark
                                    </div>
                                </div>
                            </div>
                            <hr class="mb-0 mt-4">
                            <div class="pl-5 pr-3 py-3 bg-faded">
                                <div class="row no-gutters">
                                    <div class="col-6 pr-1">
                                        <a href="#" class="btn btn-outline-danger fw-500 btn-block" data-action="app-reset">Reset Settings</a>
                                    </div>
                                    <div class="col-6 pl-1">
                                        <a href="#" class="btn btn-danger fw-500 btn-block" data-action="factory-reset">Factory Reset</a>
                                    </div>
                                </div>
                            </div>
                        </div> <span id="saving"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- END Page Settings -->
        <script src="<?= base_url('smart/dist/js/vendors.bundle.js') ?>"></script>
        <script src="<?= base_url('smart/dist/js/app.bundle.js') ?>"></script>
        
        <!-- Preserve SmartAdmin functionality before EasyUI loads -->
        <script>
        var SmartAdminPreservation = {
            // Store original SmartAdmin methods
            originalMethods: {},
            
            preserve: function() {
                // Store critical jQuery methods that might be overridden
                if (typeof $.fn.panel !== 'undefined') {
                    this.originalMethods.panel = $.fn.panel;
                }
                if (typeof $.fn.messager !== 'undefined') {
                    this.originalMethods.messager = $.fn.messager;
                }
                // Store app functions
                if (typeof window.app !== 'undefined') {
                    this.originalMethods.app = window.app;
                }
            },
            
            restore: function() {
                // Restore SmartAdmin methods after EasyUI loads
                for (var method in this.originalMethods) {
                    if (method === 'app') {
                        window.app = this.originalMethods[method];
                    } else {
                        $.fn[method] = this.originalMethods[method];
                    }
                }
            }
        };
        
        // Preserve before DOM ready
        SmartAdminPreservation.preserve();
        
        // Global restoration and toggle fix for all EasyUI pages
        $(window).on('load', function() {
            // Simple check: if EasyUI js loaded, apply fix
            if (typeof $.fn.datagrid !== 'undefined') {
                setTimeout(function() {
                    // Restore SmartAdmin methods
                    SmartAdminPreservation.restore();
                    
                    // Fix sidebar toggles globally
                    initGlobalSidebarToggles();
                }, 500);
            }
        });
        
        function initGlobalSidebarToggles() {
            // Remove any existing handlers
            $('[data-action="toggle"]').off('click.sidebar');
            
            // Mobile nav toggle
            $('.hidden-lg-up .header-btn[data-action="toggle"][data-class="mobile-nav-on"]').on('click.sidebar', function(e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                $('body').toggleClass('mobile-nav-on');
                return false;
            });
            
            // Desktop nav toggles
            $('.hidden-md-down .header-btn[data-action="toggle"]').on('click.sidebar', function(e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                
                var targetClass = $(this).data('class');
                if (targetClass) {
                    $('body').toggleClass(targetClass);
                }
                return false;
            });
            
            // Sidebar overlay click to close mobile nav
            $('.page-content-overlay[data-action="toggle"][data-class="mobile-nav-on"]').on('click.sidebar', function(e) {
                e.preventDefault();
                $('body').removeClass('mobile-nav-on');
                return false;
            });
            
            // Fix datagrid height for mobile
            adjustDatagridHeightForMobile();
        }
        
        function adjustDatagridHeightForMobile() {
            // Override adjustpanelfit functions for better mobile support
            if ($(window).width() <= 991) {
                // Find and fix all panel fit elements
                $('div[id*="panelfit"]').each(function() {
                    var $panel = $(this);
                    var minHeight = 400;
                    
                    $panel.panel({
                        height: minHeight,
                        onResize: function() {
                            // Ensure datagrid resizes properly
                            setTimeout(function() {
                                $panel.find('.easyui-datagrid').datagrid('resize');
                            }, 100);
                        }
                    });
                });
                
                // Also resize existing datagrids
                $('.easyui-datagrid').each(function() {
                    $(this).datagrid('resize');
                });
            }
        }
        </script>
        
        <!-- datepicker -->
        <script src="<?= base_url('smart/dist/js/formplugins/bootstrap-datepicker/bootstrap-datepicker.js') ?>"></script>
        <!-- Select 2 -->
        <script src="<?= base_url('smart/dist/js/formplugins/select2/select2.bundle.js') ?>"></script>
        <script src="<?= base_url('smart/dist/js/notifications/toastr/toastr.js') ?>"></script>
        <script src="<?= base_url('smart/dist/js/jquery.inputmask.min.js') ?>"></script>
        <script src="<?= base_url('smart/dist/js/jquery.numeric.js') ?>"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script type="text/javascript">
            function BtnLoading(elem) {
                $(elem).attr("data-original-text", $(elem).html());
                $(elem).prop("disabled", true);
                $(elem).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...<span class="sr-only"></span>');
            }
            
            function BtnReset(elem) {
                $(elem).prop("disabled", false);
                $(elem).html($(elem).attr("data-original-text"));
            }

            $(document).ready(function() {
                $('.ginput').inputmask({
                    regex: "^[a-zA-Z0-9\\s.,@-]*$"
                });

                $('.ginput_link').inputmask({
                    regex: "[a-zA-Z0-9\\s.,@\\-/%?:&=]*"
                });

                $('.angka').numeric();
            });
        </script>
        
        <?= $this->renderSection('pageScripts') ?>
    </body>
    <!-- END Body -->
</html>