var icon = "";
var realtimediv = "";
var starttime_view = false;
var startbreaktime_view = false;
var isbreak = false;
var breaktime = 0;

function loadTMIcon(){
    var iconBaseUrl = OC.generateUrl('/svg/core/actions/user-admin');
    icon = $('<a id="timeicon" href="#" class="header-menu" style="margin-right: 20px; margin-top: 2px; display: none;"><img src="'+iconBaseUrl+'"></a>');
    $('.header-right').prepend(icon);
}

function parseDate(input) {
    var today = new Date();
    newdate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), parseInt(input.split(":")[0]), parseInt(input.split(":")[1]));
    return newdate;
}

function addTMDiv(){
    //Realtime-DIV
    realtimediv = $("<div style='position: fixed; z-index: 2000;top: 50px;right: 0;box-sizing: border-box;margin: 0;border-radius: 0 0 var(--border-radius) var(--border-radius);background-color: var(--color-main-background);filter: drop-shadow(0 1px 5px var(--color-box-shadow));'></div>");
    realtimediv.html(html_content);
    realtimediv.css("width", "300px");
    realtimediv.css("height", "125px");
    realtimediv.css("right", "50px");
    realtimediv.css("position", "fixed");
    realtimediv.css("overflow", "hidden");
    realtimediv.css("display", "none");
    realtimediv.css("text-align", "center");
    $('.header-right').append(realtimediv);

    // Adding Listener
    // Start WorkDay
    $("#startWorkDay").click(function(){
        startWorkDay();
        $("#activeDay").show();
        $("#start_workday").hide();
    })

    // End WorkDay
    $("#end_workday").click(function(){
        endWorkDay();
    })

    // Start Break
    $("#start_break").click(function(){
        startBreak();
    })

     // Start Break
     $("#end_break").click(function(){
        endBreak();
    })

    // ACTUAL TIME INFO
    // Load Time
    $.ajax({
        url: "/apps/da_agency/loadtime",
        type: 'GET',
    }).success(function (response) {
        $("#td_content").show();
        $("#loader").hide();
        responsedata = JSON.parse(response);
        console.log(responsedata['usetime']);
        $("#actualTime").html(responsedata['actualtime']);
        // No workday found
        // User does not use time
        if(responsedata['usetime'] == false ){
            $("#timeicon").hide();
        }
        else{
            $("#timeicon").show();
        }
        
        if(responsedata['workdaydata_workday'] == 0){
            starttime_view = false;
            startbreaktime_view = false;
            isbreak = false;
            breaktime = 0;
            $("#breaksum").html("00:00:00");
            $("#activeDay").hide();
        }
        // Workday found
        else{
            realtimediv.css("height", "250px");
            $("#breaksum").html(convertMS(responsedata['breaksum']));
		    var breaktime = responsedata['breaksum'];
            // Break found
            if(responsedata['breakstatus']){
                isbreak = true;			
                startbreaktime_view = responsedata['breaktimer'];			
                starttime_view = Date.parse(responsedata['workdaydata_workday']);
                $("#start_workday").hide();
                $("#activeDay").show();
                $("#worktime").hide();
                $("#breaktimeclock").show();
                $("#end_break").show();
                $("#start_break").hide();
                $("#starttime").html(responsedata['workdaydata_starttime']);
            }
            // NO BREAK - Day is active
            else{
                isbreak = false;				
                start = responsedata['workdaydata_workday'];	
                startbreaktime_view = 0;
                starttime_view = parseDate(responsedata['workdaydata_workday']);			
                $("#start_workday").hide();
                $("#activeDay").show();
                $("#starttime").html(responsedata['workdaydata_starttime']);
            }
        }
    });

    // ICON CLICK
    icon.click(function(){
        if(realtimediv.css("display") == "none"){
            realtimediv.css("display", "block");
        }
        else {
            realtimediv.css("display", "none");
        }
    })
}



window.setInterval(function(){
    if(starttime_view != false && isbreak == false){
        realTimeClock();
    }	  
    else if(isbreak == true){
        realTimeBreakClock();
    }
}, 1000);

function convertMS(ms) {
    var d, h, m, s;
    s = Math.floor(ms / 1000);
    m = Math.floor(s / 60);
    s = s % 60;
    h = Math.floor(m / 60);
    m = m % 60;
    d = Math.floor(h / 24);
    h = h % 24;
    h += d * 24;

    if(s < 10){
        s = "0" + s;
    }
    if(m < 10){
        m = "0" + m;
    }
    if(h < 10){
        h = "0" + h;
    }

    return h + ':' + m + ':' + s;
}

start = false;

function realTimeClock()
{
    if(start != false){			
        startDate = Date.parse(start);			
        starttime_view = startDate;
        start = false;
        realTimeClock();			
    }
    else{
        now = new Date();
        viewtime = now - starttime_view - breaktime;
        $("#realtimeclock").html(convertMS(viewtime));
    }
}

$(document).ready(function(){
    loadTMIcon();
    addTMDiv();
})
function startWorkDay(){
    realtimediv.css("height", "250px");
    $("#td_content").hide();
    $("#loader").show();

    $.ajax({
        url: "/apps/da_agency/startday",
        type: 'GET',
    }).success(function (response) {
        $("#td_content").show();
        $("#loader").hide();
        responsedata = JSON.parse(response);
        
        if(responsedata["success"]){
            $("#starttime").html(responsedata["wd_starttime"])
            $("#endtime").html("00:00:00");
            $("#breaksum").html("00:00:00");
        }
        start = responsedata["wd_starttime_complete"];
        realTimeClock();
    });
}

function endWorkDay(){
    $("#td_content").hide();
    $("#loader").show();
    $.ajax({
        url: "/apps/da_agency/endday",
        type: 'GET',
    }).success(function (response) {
        realtimediv.css("height", "125px");
        $("#td_content").show();
        $("#loader").hide();
        responsedata = JSON.parse(response);
        if(responsedata["success"]){
            $("#breaktimeclock").hide();
            $("#realtimeclock").show();
            $("#end_break").hide();
            $("#start_break").show();
            $("#worktime").show();

            $("#endtime").html(responsedata["wd_endtime"]);
            $("#activeDay").hide();
            $("#start_workday").show();
            $("#breaksum").html(convertMS(responsedata["actualbreaktime"]));
            starttime_view = false;
            isbreak = false;
            start = false;
            breaktime = 0;
        }
        realTimeClock();
    });

}

function startBreak(){
    $("#td_content").hide();
    $("#loader").show();

    $.ajax({
        url: "/apps/da_agency/startbreak",
        type: 'GET',
    }).success(function (response) {
        responsedata = JSON.parse(response);
        isbreak = true;
        $("#td_content").show();
        $("#loader").hide();
		//$("#timemanagement_clock").click(function(e){
		//   e.stopPropagation();
		//})
		$("#breaktimeclock").show();
		$("#realtimeclock").hide();
		$("#end_break").show();
		$("#start_break").hide();
		$("#worktime").hide();
		startbreaktime_view = -1000;
        realTimeBreakClock();
    });
}

function endBreak(){
    $("#td_content").hide();
    $("#loader").show();
    $.ajax({
        url: "/apps/da_agency/endbreak",
        type: 'GET',
    }).success(function (response) {
        $("#td_content").show();
        $("#loader").hide();
        responsedata = JSON.parse(response);
        
        isbreak = false;
		
        $("#breaktimeclock").hide();
		$("#realtimeclock").show();
		$("#end_break").hide();
		$("#start_break").show();
		$("#worktime").show();
		
        breaktime = responsedata["actualbreaktime"];
        startbreaktime_view = responsedata["actualbreaktime"];	
        starttime_view = Date.parse(responsedata["wdtime"]);
        $("#breaksum").html(convertMS(responsedata["actualbreaktime"]));
        
    });
}

function realTimeBreakClock(){
    breaktime = startbreaktime_view + 1000;
    startbreaktime_view = startbreaktime_view + 1000;		
    $("#realtimeclock_break").html(convertMS(startbreaktime_view));
}

var html_content = '<style>.arrow-up {position: absolute; left:150px; top: -10px; width: 0; display: none;  height: 0; border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid red;}</style><div class="arrow-up"></div><div id="td_content" style="display: none";><style>hr.hr_style { border: 1px solid #dadada; margin: 10px;  }</style><div id="activeDay" style="display: none;"><span id="worktime"><h3>Heutiger Arbeitstag</h3><h2 id="realtimeclock">00:00</h2><hr class="hr_style"></span><span id="breaktimeclock" style="display: none"><h3>Aktuelle Pause</h3><h2 id="realtimeclock_break">00:00</h2><hr class="hr_style"></span><span><button type="button" id="end_break" class="btn btn-success" style="display: none;">Pause Ende</i></button><button type="button" id="start_break" class="btn btn-primary">Pause</button><button type="button" id="end_workday" class="btn btn-secondary">Arbeitstag beenden</button></span><hr class="hr_style">Arbeitsbeginn: <span id="starttime">00:00:00</span><br />	Arbeitsende: <span id="endtime">00:00:00</span><br />Pausenzeit: <span id="breaksum">00:00:00</span></div><div id="start_workday"><hr class="hr_style"><button type="button" id="startWorkDay" class="btn btn-success">Arbeitstag starten</button><hr class="hr_style">Gleitzeitkonto: <b><span id="actualTime">00:00</span>&nbsp;Stunden</b></div></div><style> .loader {border: 3px solid #f3f3f3; /* Light grey */border-top: 3px solid grey; border-radius: 50%;width: 30px;height: 30px;animation: spin 1s linear infinite;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style><div id="loader"  class="loader" style="margin: auto; margin-top: 18%; "></div>';