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

function loadTMIcon(){
    var baseUrl = OC.generateUrl('/svg/core/actions/user-admin');
    icon = $('<a href="#" class="header-menu"><img src="'+baseUrl+'"></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", "250px");
    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
    $("#startWorkDay").click(function(){
        startWorkDay();
        $("#activeDay").show();
        $("#start_workday").hide();
    })

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

    // ACTUAL TIME INFO
    // Load Time
    $.ajax({
        url: "/apps/da_agency/loadtime",
        type: 'GET',
    }).success(function (response) {
        responsedata = JSON.parse(response);
        $("#actualTime").html(responsedata['actualtime']);
        // No workday found
        if(responsedata['workdaydata_workday'] == 0){
            starttime_view = false;
            startbreaktime_view = false;
            isbreak = false;
            breaktime = 0;
            $("#breaksum").html("00:00:00");
        }
        // Workday found
        else{
            isbreak = false;				
            start = responsedata['workdaydata_workday'];	
			startbreaktime_view = 0;
            starttime_view = parseDate(responsedata['workdaydata_workday']);			
            console.log(starttime_view);
			$("#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(){
    $.ajax({
        url: "/apps/da_agency/startday",
        type: 'GET',
    }).success(function (response) {
        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(){
    $.ajax({
        url: "/apps/da_agency/endday",
        type: 'GET',
    }).success(function (response) {
        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();
    });

}

var html_content = '<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 onclick="javascript:endBreak()"  type="button" id="end_break" class="btn btn-success" style="display: none;"><i class="fas fa-play"></i></button><button onclick="javascript:startBreak()"  type="button" id="start_break" class="btn btn-primary">Pause</button><button type="button" id="end_workday" class="btn btn-secondary">Beenden</button></span><hr class="hr_style"></div><div>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">Lade...</span>&nbsp;Stunden</b></div>';