<style>
    .dark-blue-color {
        color: #1c77d4 !important;
        font-weight: bold !important;
    }
</style>

<div class="content-header mt-4">
    <div class="row align-items-center">
        <div class="content-header-left col-md-6 col-12 mb-md-0 mb-1">
            <h3 class="content-header-title"><?= $judul ?></h3>
            <div class="row breadcrumbs-top">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#"><?= $this->lang->line('menu_pengaturan'); ?></a>
                        </li>
                        <li class="breadcrumb-item active"><?= $judul ?>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row match-height">
    <div class="col-xl-12 col-lg-12">
        <div class="card card-rounded card-detail-karyawan">
            <div class="card-content">
                <div class="card-body p-custom">
                    <div class="nav-vertical row">
                        <!-- Navbar -->
                        <div class="col-md-2 border-kanan">
                            <ul class="tab_menu nav nav-tabs nav-left flex-column">
                                <li class="nav-item" onclick="select_tab_menu($(this).find('a'))">
                                    <a id="tab_approval_izin" class="nav-link" aria-expanded="false">
                                        <?= $this->lang->line('menu_approval_izin'); ?>
                                        &nbsp;
                                        <?php
                                            if ($this->paket_arr['cuti'] === false) {
                                                echo '<i class="fa fa-lock text-danger"></i>';
                                            }
                                        ?>
                                    </a>
                                </li>

                                <li class="nav-item" onclick="select_tab_menu($(this).find('a'))">
                                    <a id="tab_approval_lembur" class="nav-link" aria-expanded="false">
                                        <?= $this->lang->line('menu_approval_lembur'); ?>
                                        &nbsp;
                                        <?php
                                            if ($this->paket_arr['lembur'] === false) {
                                                echo '<i class="fa fa-lock text-danger"></i>';
                                            }
                                        ?>
                                    </a>
                                </li>

                                <li class="nav-item" onclick="select_tab_menu($(this).find('a'))">
                                    <a id="tab_approval_reimbursement" class="nav-link" aria-expanded="false">
                                        <?= $this->lang->line('menu_approval_reimbursement'); ?>
                                        &nbsp;
                                        <?php
                                            if ($this->paket_arr['reimburse'] === false) {
                                                echo '<i class="fa fa-lock text-danger"></i>';
                                            }
                                        ?>
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <!-- Isi Konten -->
                        <div class="col-md-10" style="padding: 20px;">
                            <div id="myTabContent" class="tab-content">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        loading('#myTabContent');

        if (localStorage.getItem("pengaturan-approval-menu") != null) {
            let thisTab = document.getElementById(localStorage.getItem("pengaturan-approval-menu"));
            if (!thisTab) {
                thisTab = document.querySelector('.tab_menu a');
            }
            thisTab.closest('li').click();
            thisTab.classList.add("active");
        } else {
            const thisTab = document.querySelector('.tab_menu a');
            thisTab.closest('li').click();
            thisTab.classList.add("active");
        }

        $('.tab_menu li a').click(function() {
            $('.tab_menu li a').removeClass("active");
            $(this).addClass("active");
        });
    });

    function loading(id) {
        $(id).html('<div class="modal-body"><div class="text-center"><div class="custom-lds-ring"><div></div><div></div><div></div></div></div></div>');
    }

    function select_tab_menu(e) {
        loading('#myTabContent');
        switch (e.attr("id")) {
            case "tab_approval_izin":
                $("#myTabContent").load("<?= route('pengaturan.izin.home') ?>");
                localStorage.setItem("pengaturan-approval-menu", "tab_approval_izin");
                break;

            case "tab_approval_lembur":
                $("#myTabContent").load("<?= route('pengaturan.lembur.home') ?>");
                localStorage.setItem("pengaturan-approval-menu", "tab_approval_lembur");
                break;

            case "tab_approval_reimbursement":
                $("#myTabContent").load("<?= route('pengaturan.reimbursement.home') ?>");
                localStorage.setItem("pengaturan-approval-menu", "tab_approval_reimbursement");
                break;

            default:
                $("#myTabContent").html("Data Tidak Ditemukan");
                localStorage.setItem("pengaturan-approval-menu", "tab_approval_izin");
                break;
        }
    }

</script>