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


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

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

    function list_data_report() {
        loading_report();
        var local_storage_report = localStorage.getItem('sales-activity-tab-report');
        if (local_storage_report == null) {
            var local_storage_report = "data_sales";
        }

        $('#tab_content_report').load("<?= route('sales_activity.report.tabs') . "/" ?>" + local_storage_report);
        $(".tabs-report").removeClass('dark-blue-color active');
        $("#btn_tabs_" + local_storage_report).addClass('dark-blue-color active');
    }

    function select_tab_report(e) {
        loading_report();
        $(".tabs-report").removeClass('dark-blue-color active');

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

            case "btn_tabs_realisasi_nominal":
                $("#tab_content_report").load("<?= route('sales_activity.report.tabs') . "/realisasi_nominal" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-report', 'realisasi_nominal');
                break;

            case "btn_tabs_realisasi_won":
                $("#tab_content_report").load("<?= route('sales_activity.report.tabs') . "/realisasi_won" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-report', 'realisasi_won');
                break;

            case "btn_tabs_realisasi_poin":
                $("#tab_content_report").load("<?= route('sales_activity.report.tabs') . "/realisasi_poin" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-report', 'realisasi_poin');
                break;

            case "btn_tabs_aktivitas":
                $("#tab_content_report").load("<?= route('sales_activity.report.tabs') . "/aktivitas" ?>");
                e.addClass('dark-blue-color active');
                localStorage.setItem('sales-activity-tab-report', 'aktivitas');
                break;

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

    function loading_report() {
        $('#tab_content_report').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 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_report($(this).find('a'))">
                        <a href="#" id="btn_tabs_data_sales" class="nav-link px-2 tabs-report" data-toggle="tab" role="tab">
                            <?= $this->lang->line('pipeline') ?>
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_report($(this).find('a'))">
                        <a href="#" id="btn_tabs_realisasi_nominal" class="nav-link px-2 tabs-report" data-toggle="tab" role="tab">
                            <?= $this->lang->line('realisasi_nominal') ?>
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_report($(this).find('a'))">
                        <a href="#" id="btn_tabs_realisasi_won" class="nav-link px-2 tabs-report" data-toggle="tab" role="tab">
                            <?= $this->lang->line('realisasi_won') ?>
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_report($(this).find('a'))">
                        <a href="#" id="btn_tabs_realisasi_poin" class="nav-link px-2 tabs-report" data-toggle="tab" role="tab">
                            <?= $this->lang->line('realisasi_poin') ?>
                        </a>
                    </li>
                    <li class="nav-item" onclick="select_tab_report($(this).find('a'))">
                        <a href="#" id="btn_tabs_aktivitas" class="nav-link px-2 tabs-report" data-toggle="tab" role="tab">
                            <?= $this->lang->line('aktivitas') ?>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="row mt-2">
                <div id="tab_content_report" class="col-md-12"></div>
            </div>
        </div>
    </div>
</div>
