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

    /* input close button */
    .input-close-btn {
        position: absolute;
        font-weight: bold;
        right: 16px;
        top: 50%;
        padding: 10px;
        transform: translateY(-50%);
        cursor: pointer;
        display: none;

        &:hover {
            color: #333;
        }
    }
</style>


<script type="text/javascript">
    $(function() {
        list_data_demografi_pelanggan();
        $(".tabs-demografi").css("color", "#4E5154 !important");
        $("#modal_form .modal-dialog").removeClass("modal-lg");

        modal_download_semua();
    });

    function modal_download_semua(){
        $("#modal_download_semua").click(function() {
            $('#tampil_form').load("<?= route("sales_activity.demografi.pelanggan.download.semua.modal") ?>", function() {
                $('#modal_form').modal('show');
                $(".title").text("Download Semua Demografi");
            });
        });
    }

    function list_data_demografi_pelanggan() {
        loading_demografi_pelanggan();
        var local_storage_demografi_pelanggan = localStorage.getItem('sales-activity-tab-demografi');
        if (local_storage_demografi_pelanggan == null) {
            var local_storage_demografi_pelanggan = "pelanggan";
        }

        $('#tab_content_demografi_pelanggan').load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/" ?>" + local_storage_demografi_pelanggan);
        $(".tabs-demografi").removeClass('dark-blue-color active');
        $("#btn_tabs_" + local_storage_demografi_pelanggan).addClass('dark-blue-color active');
    }

    function select_tab_demografi_pelanggan(e) {
        loading_demografi_pelanggan();
        $(".tabs-demografi").removeClass('dark-blue-color active');

        switch (e.attr("id")) {
            case "btn_tabs_pelanggan":
                $("#tab_content_demografi_pelanggan").load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/pelanggan" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi', 'pelanggan');
                break;

            case "btn_tabs_source":
                $("#tab_content_demografi_pelanggan").load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/source" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi', 'source');
                break;

            case "btn_tabs_wilayah":
                $("#tab_content_demografi_pelanggan").load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/wilayah" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi', 'wilayah');
                break;

            case "btn_tabs_jenis_pelanggan":
                $("#tab_content_demografi_pelanggan").load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/jenis_pelanggan" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi', 'jenis_pelanggan');
                break;

            case "btn_tabs_product":
                $("#tab_content_demografi_pelanggan").load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/product" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi', 'product');
                break;

            case "btn_tabs_group_product":
                $("#tab_content_demografi_pelanggan").load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/group_product" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi', 'group_product');
                break;

            default:
                $("#tab_content_demografi_pelanggan").load("<?= route('sales_activity.demografi.pelanggan.tabs') . "/pelanggan" ?>>");
                $("#btn_tabs_target_tahunan").addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi', 'pelanggan');
                break;
        }
    }

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

    // Function to toggle visibility of the close button
    function toggleCloseButton(e) {
        if (!e.val()) {
            $('.input-close-btn').css("display", "none");
        } else {
            $('.input-close-btn').css("display", "block");
        }
    }
</script>

<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="nav-tabs-boxed">
                <div class="position-relative pull-right pl-2">
                    <button id="modal_download_semua" type="button" class="btn btn-primary ladda-button" data-style="expand-left">
                        <i class="fa fa-download"></i> <?= $this->lang->line('button_unduh_all') ?>
                    </button>
                </div>

                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" onclick="select_tab_demografi_pelanggan($(this).find('a'))">
                        <a href="#" id="btn_tabs_pelanggan" class="nav-link px-2 tabs-demografi" data-toggle="tab" role="tab">
                            Pelanggan
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_demografi_pelanggan($(this).find('a'))">
                        <a href="#" id="btn_tabs_source" class="nav-link px-2 tabs-demografi" data-toggle="tab" role="tab">
                            Source
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_demografi_pelanggan($(this).find('a'))">
                        <a href="#" id="btn_tabs_wilayah" class="nav-link px-2 tabs-demografi" data-toggle="tab" role="tab">
                            Wilayah
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_demografi_pelanggan($(this).find('a'))">
                        <a href="#" id="btn_tabs_jenis_pelanggan" class="nav-link px-2 tabs-demografi" data-toggle="tab" role="tab">
                            Jenis Pelanggan
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_demografi_pelanggan($(this).find('a'))">
                        <a href="#" id="btn_tabs_group_product" class="nav-link px-2 tabs-demografi" data-toggle="tab" role="tab">
                            Grup Produk
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_demografi_pelanggan($(this).find('a'))">
                        <a href="#" id="btn_tabs_product" class="nav-link px-2 tabs-demografi" data-toggle="tab" role="tab">
                            Produk
                        </a>
                    </li>
                </ul>
            </div>
            <div class="row mt-2">
                <div id="tab_content_demografi_pelanggan" class="col-md-12"></div>
            </div>
        </div>
    </div>
</div>
