<?php
$class = "";
if (@$data->status && $data->status === "ok") {
    $class = "icon-ok";
} else if (@$data->status && $data->status === "error") {
    $class = "icon-remove";
}
echo "<span id='callProtection_datetime'>" . $this->renderUserImportDateTime(@$data->datetime) . "</span> ";
echo "<span id='callProtection_status' class='" . $class . "' ></span>";
echo " <img id='syncScoreListEntries' style='display:none' src='img/loading.gif'> ";

$this->widget("bootstrap.widgets.TbButton", array(
    'htmlOptions' => array(
        'id' => 'callProtectImportBtn',
        'rel' => 'tooltip',
        'data-original-title' => __('CALL_PROTECTION_IMPORT_NOW_BTN')
    ),
    'icon' => 'refresh',
    "type" => "primary",
    "buttonType" => "ajaxButton",
    "url" => $url,
    'loadingText' => "<i class='icon-refresh'></i>",
    "ajaxOptions" => array(
        'dataType' => 'json',
        'type' => 'POST',
        'beforeSend' => 'function()
        {
            if ($("#callProtectImportBtn").hasClass("disabled")) {    
                return false;
            }
            
            $("#callProtection_status").hide();
            $("#syncScoreListEntries").show();
            $("#callProtectImportBtn").button("loading");
            
            var loadingTitle = "' . __("CALL_PROTECTION_IMPORT_RUNNING_TEXT") . '";

            //change text of currently displayed tooltip
            if ($("#callProtectImportBtn").next().find(".tooltip-inner").text() === "' . __("CALL_PROTECTION_IMPORT_NOW_BTN") . '") {
                $("#callProtectImportBtn").next().find(".tooltip-inner").text(loadingTitle);
            }

            setTimeout(function() {
                $("#callProtectImportBtn").prop("disabled", false).attr("data-original-title", loadingTitle);
            }, 500);
        }',
        'success' => 'function(data) {

                var tooltipText = "' . __("CALL_PROTECTION_IMPORT_NOW_BTN") . '";

                $("#callProtectImportBtn").attr("data-original-title", tooltipText);
                //change text of currently displayed tooltip
                if ($("#callProtectImportBtn").next().find(".tooltip-inner").text() === "' . __("CALL_PROTECTION_IMPORT_RUNNING_TEXT") . '") {
                    $("#callProtectImportBtn").next().find(".tooltip-inner").text(tooltipText);
                }

                $("#callProtection_datetime").text(data.datetime);
                $("#syncScoreListEntries").hide();
                if (data.status  === "ok") {
                    $("#callProtection_status").removeClass("icon-remove").addClass("icon-ok").show();
                } else {
                    $("#callProtection_status").addClass("icon-remove").removeClass("icon-ok").show();
                }
                $("#callProtectImportBtn").button("reset");
            }',
        'error' => 'function(xhr, status, error) {
                console.log("status : " + status );
                console.log(error);
            }',
    ),
));
?>
<script>
    $(function () {
        $("#callProtectImportBtn").tooltip();
    });

    triggerImportButton();

    function triggerImportButton() {
        var status = "<?php echo @$data->status; ?>";
        if (status === 'runs') {
            $("#syncScoreListEntries").show();
            $("#callProtectImportBtn").button("loading");
            $("#callProtection_datetime").text("<?php echo __("CALL_PROTECTION_IMPORT_RUNNING_TEXT"); ?>");
        } else {
            var datetime = "<?php echo $this->renderUserImportDateTime(@$data->datetime); ?>";
            var tooltipText = "<? echo __("CALL_PROTECTION_IMPORT_NOW_BTN"); ?>";
            $("#callProtectImportBtn").attr("data-original-title", tooltipText);

            if ($("#callProtectImportBtn").next().find(".tooltip-inner").text() === "<?php echo __("CALL_PROTECTION_IMPORT_RUNNING_TEXT"); ?>") {
                $("#callProtectImportBtn").next().find(".tooltip-inner").text(tooltipText);
            }

            $("#callProtection_datetime").text(datetime);
            $("#syncScoreListEntries").hide();

            if (status === "ok") {
                $("#callProtection_status").removeClass("icon-remove").addClass("icon-ok").show();
            } else if (status === "error") {
                $("#callProtection_status").addClass("icon-remove").removeClass("icon-ok").show();
            }
            $("#callProtectImportBtn").button("reset");
        }
    }

</script>