<script>
    function invokeFunc(row = null) {
        addEventListener('keydown', function (evt) {
            var whichKey = evt.which;
            if (whichKey == 13) {
                //console.log('successful');
                //evt.preventDefault();
                document.getElementById('task_' + row).focus();
            }
        });
    }

    window.addEventListener("keydown", checkKeyPress, false);

    function checkKeyPress(key) {
        if (key.keyCode == "191") { //FORWARD SLASH
            console.log(key.keyCode);
            addRow();
        }
        if (key.keyCode == "188") {
            console.log(key.keyCode);
            var c = $('#todo_table tr').last().attr('id');
            c = c.substring(4);
            remove_row(c);
            console.log(c)
        }
    }

    function addRow() {
        var count = $("#row_count").val();
        var new_count = parseFloat(count) + 1;
        var invoke_key = parseFloat(new_count) + 1;
        var html = '';
        html += '<tr id="row_' + new_count + '"><td>';
        html += '<input type="text"  id="task_' + new_count + '" name="task[]" onkeydown="invokeFunc(' + invoke_key + ')" class="form-control" required>';
        html += '</td><td><button type="button" class="btn btn-sm btn-danger" onClick="remove_row(' + new_count + ')">';
        html += '&times;</button></td></tr>';
        $("#todo_table").append(html);
        $("#row_count").val(new_count);
    }

    function remove_row(row) {
        document.getElementById("row_" + row).remove();
    }

    var todo_table = $("#cities_table").DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('todo_index') }}",
        columns: [
            {
                name: "DT_RowIndex",
                data: "DT_RowIndex"
            },
            {
                name: "date",
                data: "date"
            },
            {
                name: "task",
                data: "task"
            },
            {
                name: "action",
                data: "action",
                orderable: false,
            },
        ]
    });
    $("#add_todo_form").on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('todo_store') }}",
            type: "POST",
            contentType: false,
            processData: false,
            data: new FormData(this),
            beforeSend: function () {
                $(".error").text('');
                $("#submit_btn").text('Processing....');
                $("#submit_btn").prop('disabled', true);
            },
            success: function (data) {
                $("#submit_btn").text('محفوظ');
                $("#submit_btn").prop('disabled', false);
                if (data.success) {
                    $("#add_todo_form")[0].reset();
                    todo_table.ajax.reload();
                    alertify.success("Todo Tasks Stored Successfully!");
                    window.location.reload();
                } else {
                    alertify.error("Something Went Wrong!");
                }
            },
            error: function (error) {
                $("#submit_btn").text('محفوظ');
                $("#submit_btn").prop('disabled', false);
                if ('errors' in error.responseJSON) {
                    $(".error").text('');
                    $.each(error.responseJSON.errors, (index, value) => {
                        $("#" + index + "_error").text(value[0]);
                    });
                }
            }
        });
    });
    $("#filter_task_form").on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('todo_filter') }}",
            type: "POST",
            contentType: false,
            processData: false,
            data: new FormData(this),
            beforeSend: function () {
                $(".error").text('');
                $("#filter_btn").text('Processing....');
                $("#filter_btn").prop('disabled', true);
            },
            success: function (data) {
                $("#filter_btn").text('فلٹر');
                $("#filter_btn").prop('disabled', false);
                if (data.success) {
                    $("#todo_table_body").html(data.view);
                    $("#cities_table").DataTable();
                    alertify.success("Todo Tasks Filtered Successfully!");

                } else {
                    alertify.error("Something Went Wrong!");
                }
            },
            error: function (error) {
                $("#filter_btn").text('فلٹر');
                $("#filter_btn").prop('disabled', false);
                if ('errors' in error.responseJSON) {
                    $(".error").text('');
                    $.each(error.responseJSON.errors, (index, value) => {
                        $("#" + index + "_error").text(value[0]);
                    });
                }
            }
        });
    });
</script>
