<script type="text/javascript">
    $(function() {
        list_data_demografi_wilayah();
        $(".tabs_demografi_wilayah").css("color", "#4E5154 !important");
    });

    function list_data_demografi_wilayah() {
        loading_demografi_wilayah();
        var local_storage_demografi_wilayah = localStorage.getItem('sales-activity-tab-demografi-wilayah');
        if (local_storage_demografi_wilayah == null) {
            var local_storage_demografi_wilayah = "provinsi";
        }

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

    function select_tab_demografi_wilayah(e) {
        loading_demografi_wilayah();
        $(".tabs_demografi_wilayah").removeClass('dark-blue-color active');
        switch (e.attr("id")) {
            case "btn_tabs_provinsi":
                $("#tab_content_demografi_wilayah").load("<?= route('sales_activity.demografi.pelanggan.wilayah.tabs') . "/provinsi" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-demografi-wilayah', 'provinsi');
                break;

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

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

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

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

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

<div class="card-body pl-0 pt-0">
    <div class="nav-tabs-boxed">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" onclick="select_tab_demografi_wilayah($(this).find('a'))">
                <a href="#" id="btn_tabs_provinsi" class="nav-link px-2 tabs_demografi_wilayah" data-toggle="tab" role="tab">
                    Provinsi
                </a>
            </li>
            <li class="nav-item" onclick="select_tab_demografi_wilayah($(this).find('a'))">
                <a href="#" id="btn_tabs_kota" class="nav-link px-2 tabs_demografi_wilayah" data-toggle="tab" role="tab">
                    Kota
                </a>
            </li>
            <li class="nav-item" onclick="select_tab_demografi_wilayah($(this).find('a'))">
                <a href="#" id="btn_tabs_kecamatan" class="nav-link px-2 tabs_demografi_wilayah" data-toggle="tab" role="tab">
                    Kecamatan
                </a>
            </li>
            <li class="nav-item" onclick="select_tab_demografi_wilayah($(this).find('a'))">
                <a href="#" id="btn_tabs_kelurahan" class="nav-link px-2 tabs_demografi_wilayah" data-toggle="tab" role="tab">
                    Kelurahan
                </a>
            </li>
        </ul>
    </div>
    <div class="row mt-2">
        <div id="tab_content_demografi_wilayah" class="col-md-12"></div>
    </div>
</div>
