timelapsStorage = localStorage;
if (typeof timelapsStorage.current_kart_id === "undefined") {
    timelapsStorage.setItem('current_kart_id', null);
}
if (typeof timelapsStorage.params_max_relay_time === "undefined") {
    timelapsStorage.setItem('params_max_relay_time', null);
}
if (typeof timelapsStorage.params_min_stand_time === "undefined") {
    timelapsStorage.setItem('params_min_stand_time', null);
}
if (typeof timelapsStorage.params_max_fuel_autonomy === "undefined") {
    timelapsStorage.setItem('params_max_fuel_autonomy', null);
}

function getKartsMenu() {
    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'karts/',
        dataType: 'json',
        success: function (data, status) {
            actual_kart = timelapsStorage.current_kart_id;
            $.each(data.reverse(), function (index, value) {
                btn_class = 'btn-light';
                if (actual_kart == value.id) {
                    btn_class = 'btn-primary';
                }
                $('#link_all').after("" +
                    "&nbsp;<a id=\"link_" + value.id + "\" href=\"#\" onclick=\"showKartDashboard(" + value.id + ")\"  class=\"btn " + btn_class + " btn-icon-split btn-sm\">\n \n" +
                    "                    <span class=\"icon text-gray-600\">\n" +
                    "                    <i class=\"fas fa-car\"></i>\n" +
                    "</span>\n" +
                    "   <span class=\"text\">" + value.name + "</span>" +
                    " </a>");
            });
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function getParams() {

    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'params/1/',
        dataType: 'json',
        success: function (data, status) {
            $('#id').val(data.id);
            $('#autonomy').val(data.autonomy);
            $('#stand_minimum_time').val(data.stand_minimum_time);
            $('#default_relay').val(data.default_relay);
            $('#comment').val(data.comment);
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function editParams(data) {
    $.ajax({
        type: 'PUT',
        crossDomain: true,
        url: api_url + 'params/1/',
        dataType: 'json',
        data: data,
        success: function (data, status) {
            $.notify("Update done!", "success");
            getParams();
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

/***
 * Get one kart data by Id
 * @param id
 */
function getKarts(id) {
    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'karts/' + id + '/',
        dataType: 'json',
        success: function (data, status) {
            console.log(data);
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function listKarts() {
    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'karts/',
        dataType: 'json',
        success: function (data, status) {
            if ($.fn.DataTable.isDataTable("#dataTable_kart_list")) {
                $('#dataTable_kart_list').DataTable().destroy();
            }
            $('#dataTable_kart_list').DataTable({
                data: data,
                columns: [
                    {
                        data: "id",
                        render: function (data, type, row, meta) {
                            return '<a href="#" onclick="modalEditKarts(' + data + ')" class="btn btn-primary btn-circle">' +
                                '<i class="fas fa-edit"></i>' +
                                '</a>' +
                                '&nbsp;' +
                                '<a href="#" onclick="if ( confirm( \'Do you want to delete the kart\' ) ) {deleteKarts(' + data + ',' + meta.row + ')}" class="btn btn-danger btn-circle">' +
                                '<i class="fas fa-trash"></i>' +
                                '</a>';
                        }
                    },
                    {
                        data: "name"
                    },
                    {
                        data: "autonomy"
                    }
                ]
            });
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function deleteKarts(id, index) {
    $.ajax({
        type: 'DELETE',
        crossDomain: true,
        url: api_url + 'karts/' + id + '/',
        dataType: 'json',
        success: function (data, status) {
            $.notify("Delete done!", "success");
            tableListKart.row(index).remove().draw();
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function addKarts(data) {
    $.ajax({
        type: 'POST',
        crossDomain: true,
        url: api_url + 'karts/',
        dataType: 'json',
        data: data,
        success: function (data, status) {
            $.notify("Update done!", "success");
            $('#modal_newkart').modal('hide');
            $("#saveKartChanges").prop('disabled', false);
            $("#saveKartChanges").closest('form').find("input, textarea").val("");
            listKarts()
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
            $("#saveKartChanges").prop('disabled', false);
        },
    });
}

function modalEditKarts(id) {
    $('#modal_newkart').modal('show');
    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'karts/' + id + '/',
        dataType: 'json',
        success: function (data, status) {
            $('#id').val(data.id);
            $('#name').val(data.name);
            $('#autonomy').val(data.autonomy);
            $('#comment').val(data.comment);
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function editKarts(id, data) {
    $.ajax({
        type: 'PUT',
        crossDomain: true,
        url: api_url + 'karts/' + id + '/',
        dataType: 'json',
        data: data,
        success: function (data, status) {
            $.notify("Update done!", "success");
            $('#modal_newkart').modal('hide');
            $("#saveKartChanges").prop('disabled', false);
            $("#saveKartChanges").closest('form').find("input, textarea").val("");
            listKarts()
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
            $("#saveKartChanges").prop('disabled', false);
        },
    });
}

function modalEditDriver(id) {
    $('#modal_new_driver').modal('show');
    $('#modal_new_driver').val(kart_id);
    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'drivers/' + id + '/',
        dataType: 'json',
        success: function (data, status) {
            $('#id').val(data.id);
            $('#short_name').val(data.short_name);
            $('#first_name').val(data.first_name);
            $('#last_name').val(data.last_name);
            $('#order').val(data.order);
            $('#ref_time').val(data.ref_time);
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function modalAddDriver(kart_id) {
    $('#modal_new_driver').modal('show');
    $('#kart_id').val(kart_id);
}

function getDriversByKart() {
    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'karts/',
        dataType: 'json',
        success: function (data, status) {
            $.each(data, function (index, value) {
                if ($.fn.DataTable.isDataTable("#dataTable_drivers" + value.id)) {
                    $('#dataTable_drivers' + value.id).DataTable().destroy();
                } else {
                    $('.container-fluid').append("" +
                        "<div class=\"card shadow mb-4\">\n" +
                        "                    <div class=\"card-header py-3\">\n" +
                        "                        <h6 class=\"m-0 font-weight-bold text-primary\">\n" +
                        "                            " + value.name + " &nbsp; \n" +
                        "                            <a href=\"#\" onclick='modalAddDriver(" + value.id + ")' class=\"btn btn-primary btn-circle\" title='Add driver to " + value.name + "'>\n" +
                        "                                <i class=\"fas fa-plus\"></i>\n" +
                        "                            </a>\n" +
                        "                        </h6>\n" +
                        "                    </div>\n" +
                        "                    <div class=\"card-body\">\n" +
                        "                        <div class=\"table-responsive\">\n" +
                        "                            <table class=\"table table-bordered\" id=\"dataTable_drivers" + value.id + "\" width=\"100%\" cellspacing=\"0\">\n" +
                        "                                <thead>\n" +
                        "                                <tr>\n" +
                        "                                    <th></th>\n" +
                        "                                    <th>Order</th>\n" +
                        "                                    <th>Short Name</th>\n" +
                        "                                    <th>First Name</th>\n" +
                        "                                    <th>Last Name</th>\n" +
                        "                                    <th>Ref time (Sec)</th>\n" +
                        "                                </tr>\n" +
                        "                                </thead>\n" +
                        "                                <tbody>\n" +
                        "                                </tbody>\n" +
                        "                            </table>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "                </div>" +
                        "");
                }

                $('#dataTable_drivers' + value.id).DataTable({
                    data: value.drivers,
                    columns: [
                        {
                            data: "id",
                            render: function (data, type, row, meta) {
                                return '<a href="#" onclick=\'modalEditDriver(' + data + ')\'  class="btn btn-primary btn-circle"><i class="fas fa-edit"></i></a>&nbsp;<a href="#" onclick=\'deleteDriver(' + data + ',' + value.id + ',' + meta.row + ')\'  class="btn btn-danger btn-circle"><i class="fas fa-trash"></i>';
                            }
                        },
                        {
                            data: "order"
                        },
                        {
                            data: "short_name"
                        },
                        {
                            data: "first_name"
                        },
                        {
                            data: "last_name"
                        },
                        {
                            data: "ref_time"
                        }
                    ]
                });

            });
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function getDriver(id) {

    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'drivers/' + id + '/',
        dataType: 'json',
        success: function (data, status) {
            $('#id').val(data.id);
            $('#autonomy').val(data.autonomy);
            $('#stand_minimum_time').val(data.stand_minimum_time);
            $('#default_relay').val(data.default_relay);
            $('#comment').val(data.comment);
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function addDriver(data) {
    $.ajax({
        type: 'POST',
        crossDomain: true,
        url: api_url + 'drivers/',
        dataType: 'json',
        data: data,
        success: function (data, status) {
            $.notify("Insert done!", "success");
            getDriversByKart();
            $("#saveDriverChanges").prop('disabled', false);
            $('#modal_new_driver').modal('hide');
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
            $("#saveDriverChanges").prop('disabled', false);
        },
    });
}

function editDriver(id, data) {
    $.ajax({
        type: 'PUT',
        crossDomain: true,
        url: api_url + 'drivers/' + id + '/',
        dataType: 'json',
        data: data,
        success: function (data, status) {
            $.notify("Update done!", "success");
            getDriversByKart();
            $("#saveDriverChanges").prop('disabled', false);
            $('#modal_new_driver').modal('hide');
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
            $("#saveDriverChanges").prop('disabled', false);
        },
    });
}

function deleteDriver(id, kart_id, row_index) {
    $.ajax({
        type: 'DELETE',
        crossDomain: true,
        url: api_url + 'drivers/' + id + '/',
        dataType: 'json',
        success: function (data, status) {
            $.notify("Delete done!", "success");
            $('#dataTable_drivers' + kart_id).DataTable().row(row_index).remove().draw();
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });
}

function startRace() {

}

function getDashboardKartInfo() {

    $.ajax({
        type: 'GET',
        crossDomain: true,
        url: api_url + 'relaysbykart/' + timelapsStorage.current_kart_id + '/',
        dataType: 'json',
        success: function (data, status) {
            console.log(data);
            $.each(data.reverse(), function (index, value) {
                console.log(value);
                if(value.relay_end == null){
                    $('#current_driver_name').text(value.driver.first_name);
                    $('#refTime_current_driver').val(value.driver.ref_time);
                }else{
                    $('#next_driver_list').append("" +
                        "<div class=\"col-xl-2 col-lg-4 col-md-6\">\n" +
                        "                                <div class=\"card\" style=\"width: auto;\">\n" +
                        "                                    <a class=\"card-img-top\">\n" +
                        "                                        <img class=\"card-img-top \" src=\"img/"+value.driver.id+".png\" alt=\"Card image cap\">\n" +
                        "                                    </a>\n" +
                        "                                    <div class=\"card-body\">\n" +
                        "                                        <h5 class=\"card-title\">"+value.driver.first_name+"</h5>\n" +
                        "                                        <p class=\"card-text\">Total : 03:39:36<br>\n" +
                        "                                            Tps de repos : 14:05:26<br>\n" +
                        "                                            <label for=\"refTime\">Temps de ref. :</label>\n" +
                        "                                        </p>\n" +
                        "\n" +
                        "                                        <div class=\"input-group\">\n" +
                        "                                            <span class=\"input-group-btn\">\n" +
                        "                                                <button type=\"button\" class=\"btn btn-danger btn-number\" onclick=\"\">\n" +
                        "                                                    <i class=\"fas fa-plus\"></i>\n" +
                        "                                                </button>\n" +
                        "                                            </span>\n" +
                        "                                            <input type=\"text\" id=\"refTime\" class=\"form-control\" value=\""+value.driver.ref_time+"\">\n" +
                        "                                            <span class=\"input-group-btn\">\n" +
                        "                                                <button type=\"button\" class=\"btn btn-success btn-number\" onclick=\"\">\n" +
                        "                                                    <i class=\"fas fa-minus\"></i>\n" +
                        "                                                </button>\n" +
                        "                                            </span>\n" +
                        "                                        </div>\n" +
                        "                                    </div>\n" +
                        "                                </div>\n" +
                        "                            </div>" +
                        "");
                }

            });
        },
        error: function (xhr) {
            $.notify("APIs unreachable!", "error");
            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
        },
    });

}

function showKartDashboard(kart_id) {
    timelapsStorage.setItem('current_kart_id', kart_id);
    if (kart_id != null) {
        window.location.href = 'index_kart.html';
    } else {
        window.location.href = 'index.html';
    }
}

$(document).ready(function () {

    if (timelapsStorage.current_kart_id == "null" || typeof timelapsStorage.current_kart_id === "undefined") {
        $('#link_all').removeClass('btn-light').addClass('btn-primary');
    }

});