$(function () {
    var socket = io.connect("http://localhost:4004");
    socket.on('logs', function (data) {
        var date = new Date(data.time * 1000);
        var day = "0" + date.getDate();
        var month = "0" + (date.getMonth() + 1);
        var year = date.getFullYear();
        var formattedDay = day + "/" + month + "/" + year;
        if ($("input[name='currentDay']").val() !== formattedDay) {
            window.location.reload(true);
        }
        renderNewLogs(data);
    });
});

function openForm(e, field) {
    var html = `<input type="text" class="form-control" value="` + $(e).data("text") + `" data-id="` + $(e).data("id") + `" data-field="` + field + `" onchange="_save(this);" autofocus>`;
    $(e).closest("td").html(html);
}

function _save(e) {
    $.ajax({
        url: $("input[name='saveUrl']").val(),
        type: 'POST',
        data: {
            id: $(e).data("id"),
            field: $(e).data("field"),
            value: $(e).val()
        },
        success: function (data) {
            $(e).closest("td").html(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            common.modalBlock(false);
            common.ajaxError();
        }
    });
}

function formatTime(unix_timestamp) {
    var date = new Date(unix_timestamp * 1000);
    var hours = date.getHours();
    var minutes = "0" + date.getMinutes();
    var seconds = "0" + date.getSeconds();

    var day = "0" + date.getDate();
    var month = "0" + (date.getMonth() + 1);
    var year = date.getFullYear();

    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    var formattedDay = day + "/" + month + "/" + year;
    return formattedTime + " " + formattedDay;
}

function renderNewLogs(data) {
    var imageIn = "";
    var timeIn = "";
    var imageOut = "";
    var timeOut = "";
    if (data.type == "in") {
        imageIn = `<img src="/AIParking_Intops_Server/web/data/uploads/` + data.image + `" class="img-thumbnail" style="width:100%;">`;
        timeIn = formatTime(data.time);
        $("#totals-in").html(parseInt($("#totals-in").html()) + 1);
    }
    if (data.type == "out") {
        if (data.logs) {
            imageIn = `<img src="/AIParking_Intops_Server/web/data/uploads/` + data.logs.plate_image_in + `" class="img-thumbnail" style="width:100%;">`;
            timeIn = formatTime(data.logs.time_in);
        } else {
            imageIn = "";
            timeIn = "";
        }
        imageOut = `<img src="/AIParking_Intops_Server/web/data/uploads/` + data.image + `" class="img-thumbnail" style="width:100%;">`;
        timeOut = formatTime(data.time);
        $("#totals-out").html(parseInt($("#totals-out").html()) + 1);
    }
    var driver = data.vehicleInfo.driver.split("/");
    var telephone = data.vehicleInfo.telephone.split("/");
    var cmt = data.vehicleInfo.indentity_card.split("/");
    var html = `<tr id="logs-` + data.id + `">
                    <td>` + data.vehicleInfo.type + `</td>
                    <td>` + data.vehicleInfo.company + `</td>
                    <td>` + driver.join("<br>") + `</td>                    
                    <td>` + telephone.join("<br>") + `</td>
                    <td>` + cmt.join("<br>") + `</td>
                    <td>
                        <div style='cursor:pointer;' onclick='openForm(this, "factory");' data-id='` + data.id + `' data-text=''>
                            <i class='text-red'>không có</i>
                        </div>                        
                    </td>
                    <td>
                        <div style='cursor:pointer;' onclick='openForm(this, "seal_no");' data-id='` + data.id + `' data-text=''>
                            <i class='text-red'>không có</i>
                        </div>                        
                    </td>
                    <td>` + data.vehicleInfo.plate + `</td>
                    <td class="text-center">` + imageIn + `</td>
                    <td class="text-center">` + timeIn + `</td>
                    <td class="text-center">` + imageOut + `</td>
                    <td class="text-center">` + timeOut + `</td>
                    <td>
                        <div style='cursor:pointer;' onclick='openForm(this, "note");' data-id='` + data.id + `' data-text=''>
                            <i class='text-red'>không có</i>
                        </div>                        
                    </td>
                </tr>`;
    $("#logs-" + data.id).remove();
    $("#logs-lists").prepend(html);
}