var hrModal = $('#modal-hr > .modal-dialog > .modal-content');

function resetFormAssign() {
    $('#select-role-hr').val(null).trigger("change");
    $('#select-role-hr').find('option').remove();
    $('#select-role-hr').val("");
    $('#select-hr').val(null).trigger("change");
    $('#select-hr').find('option').remove();
    $('#select-hr').val("");
    $("#hr-start-date").val("");
    $("#hr-end-date").val("");
    $("#hr_role").val("");
    // $("#hide-form-hr").hide();
    // $("#show-form-hr").show();
    // $("#form-assign-hr").hide();
    $('#form-assign-hr').trigger("reset");
    $('#btn-assign-hr').html('Assign');
    $('#btn-assign-hr').prop("disabled", false);
};

$(document).ready(function () {
    var tableHr = $("#table-hr").DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": `${base_url}user-to-activity/datatables`,
            "data": function (d) {
                d.idact = activityId;
            }
        },
        "columns": [
            { data: 'user_name', name: 'user_name' },
            { data: 'role_name', name: 'role_name' },
            { data: 'start_date', name: 'start_date', render: function (data, type) {
                return data ? formatDate(data) : '-'
                } 
            },
            { data: 'end_date', name: 'end_date', render: function (data, type) {
                return data ? formatDate(data) : '-'
                } 
            },
            {
                data: 'action',
                name: 'action',
                orderable: true,
                searchable: true
            },
        ]
    });

    function deleteHrAssign(id) {
        $.ajax({
            url: `${base_url}user-to-activity/delete/${id}`,
            type: "DELETE",
            success: function (data) {
                actionHappen = true;
                gantt.alert("Delete Human Resource Assign Success!");
                tableHr.draw();
            },
            error: function (data) {
                gantt.alert("Delete Human Resource Assign Failed, try again later!");
            }
        });
    }

    $("#modal-hr").on("click", "#show-form-hr", function () {
        $(this).hide();
        $("#hide-form-hr").show();
        $("#form-assign-hr").show();
    });

    $("#modal-hr").on("click", "#hide-form-hr", function () {
        $(this).hide();
        resetFormAssign()
        $("#show-form-hr").show();
    });

    $('#modal-hr').on('show.bs.modal', function (event) {
        tableHr.draw();
    });

    $('#modal-hr').on('hide.bs.modal', function (event) {
        $("#hide-form-hr").hide();
        $("#show-form-hr").show();
        if (actionHappen) {
            console.log("there's action change");
            updateActivity(activityId);
        }
        resetFormAssign();
    });

    $('#select-role-hr').select2({
        dropdownParent: hrModal,
        placeholder: 'Pilih human resource role',
        allowClear: true,
        ajax: {
            url: `${base_url}project-role/select`,
            dataType: 'json',
            data: function (params) {
                var query = {
                    search: params.term,
                    type: 'public',
                }
                return query;
            },
            processResults: function (result) {
                return {
                    results: $.map(result, function (item) {
                        // console.log("cek item", item)
                        return {
                            text: item.name,
                            id: item.id
                        }
                    })
                };
            },
            cache: false
        }
    });
    $('#select-hr').select2({
        dropdownParent: hrModal,
        placeholder: 'Pilih human resource',
        allowClear: true,
        ajax: {
            url: `${base_url}human-resource/select`,
            dataType: 'json',
            data: function (params) {
                var query = {
                    search: params.term,
                    type: 'public',
                    idact: activityId,
                    idProyek: proyekId
                }
                return query;
            },
            processResults: function (result) {
                return {
                    results: $.map(result, function (item) {
                        // console.log("cek item", item)
                        return {
                            text: item.name,
                            id: item.id + "|" + item.proyek_role,
                            proyek_role: item.proyek_role
                        }
                    })
                };
            },
            cache: false
        }
    });

    $('#select-hr').on('select2:select', function (e) {
        console.log('select event', e.params.data);
        let param_data = e.params.data;
        if (param_data && param_data.proyek_role) {
            let proyek_role = param_data.proyek_role
            $("#hr_role").val(proyek_role);
        }

    });

    $("#hr-start-date").on('change', (e) => {
        let start_date = new Date($("#hr-start-date").val());
        if (start_date < activityEarlyStart || start_date > activityEarlyFinish) {
            gantt.alert("Start date should be inside activity date range !");
            $("#hr-start-date").val("");
        }
    })

    $("#hr-end-date").on('change', (e) => {
        let end_date = new Date($("#hr-end-date").val());
        if (end_date < activityEarlyStart || end_date > activityEarlyFinish) {
            gantt.alert("End date should be inside activity date range !");
            $("#hr-end-date").val("");
        }
    })

    $("#form-assign-hr").on('submit', function (e) {
        e.preventDefault();

        $('#btn-assign-hr').html('Assign...');
        $('#btn-assign-hr').prop("disabled", true);

        // var formData = new FormData(this);
        let users = $("#select-hr").val();
        let start_date = $("#hr-start-date").val();
        let end_date = $("#hr-end-date").val();
        let user_id = [];
        let user_role = [];
        users.map((item)=>{
          let text = item.split('|');
          user_id.push(text[0]);
          user_role.push(text[1]);
        })
        if (!users || users < 0) {
            gantt.alert("Please choose user to assign!");
            $('#btn-assign-hr').html('Assign');
            $('#btn-assign-hr').prop("disabled", false);
            return false
        }


        let payload = {
            user_id: user_id,
            start_date: start_date,
            end_date: end_date,
            role_proyek_id: user_role,
            version_gantt_id: ganttId,
            proyek_id: proyekId,
            activity_id: activityId
        }
        $.ajax({
            data: JSON.stringify(payload),
            url: `${base_url}user-to-activity/add-multiple`,
            type: "POST",
            processData: false,
            contentType: false,
            success: function (data) {
                actionHappen = true;
                resetFormAssign();
                tableHr.draw();
                gantt.alert("Human Resource Assign Success!");
            },
            error: function (data) {
                resetFormAssign();
                gantt.alert("Human Resource Assign Failed, try again later!");
            }
        });
    });

    $("#table-hr").on("click", ".btn-hr-delete", function () {
        let id = $(this).data('id');
        var box = gantt.confirm({
            text: "Human resource will be deleted from activity, continue?",
            ok: "Delete",
            cancel: "Cancel",
            callback: function (result) {
                if (result) {
                    deleteHrAssign(id);
                }
            }
        });
    });
});