var expenseModal = $('#modal-expense > .modal-dialog > .modal-content');

function resetFormAssignexpense() {
    $('#select-expense').val(null).trigger("change");
    $('#select-expense').find('option').remove();
    $('#select-expense').val("");
    $('#uom-req-expense').val(null).trigger('change');
    $('#form-assign-expense').trigger("reset");
    $('#btn-assign-expense').html('Assign');
    $('#btn-assign-expense').prop("disabled", false);
};


var rupiahExpense = document.getElementById('price-req-expense');
rupiahExpense.addEventListener('keyup', function (e) {
    rupiahExpense.value = formatRibuanInput(this.value);
});

var qtyExpense = document.getElementById('qty-req-expense');
qtyExpense.addEventListener('keyup', function (e) {
    qtyExpense.value = formatRibuanInput(this.value);
});

$(document).ready(function () {
    var tableexpense = $("#table-expense").DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": `${base_url}assign-material/datatables`,
            "data": function (d) {
                d.idact = activityId;
                d.type = "expense";
            }
        },
        "columns": [
            { data: 'material_name', name: 'material_name' },
            {
                data: 'qty_planning', render: function (data, type) {
                    return data ? formatRupiah(data) : '-'
                }
            },
            { data: 'uom', name: 'uom' },
            {
                data: 'budget', render: function (data, type) {
                    return data ? "Rp. " + formatRupiah(data) : '-'
                }
            },
            {
                data: 'plan_date', render: function (data, type) {
                    return data ? formatDate(data) : '-'
                }
            },
            {
                data: 'action',
                name: 'action',
                orderable: true,
                searchable: true
            },
        ]
    });

    function deleteexpenseAssign(id) {
        searchReport(id);
        $.ajax({
            url: `${base_url}assign-material/delete/${id}`,
            type: "DELETE",
            success: function (data) {
                actionHappen = true;
                gantt.alert("Overhead deleted!");
                tableexpense.draw();
            },
            error: function (data) {
                gantt.alert("Failed to delete the data.");
            }
        });
    }

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

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

    $('#modal-expense').on('show.bs.modal', function (event) {
        $("#desc-expense").val(activityName);
        $('#modal-expense-title').html("Overhead " + activityName);
        $('#modal-expense-sub-title').html(`<p style="font-size: 12px; color: #747474">Plan Date: ${moment(activityEarlyStart).format('DD MMMM YYYY')} - ${moment(activityEarlyFinish).format('DD MMMM YYYY')}</p>`);
        tableexpense.draw();
    });

    $('#modal-expense').on('hide.bs.modal', function (event) {
        $("#show-form-expense").show();
        if (actionHappen) {
            updateActivity(activityId);
        }
        resetFormAssignexpense();
    });

    $('#select-expense').select2({
        dropdownParent: expenseModal,
        placeholder: 'Pilih expense resource',
        allowClear: true,
        ajax: {
            url: `${base_url}expense-resource/select`,
            dataType: 'json',
            data: function (params) {
                var query = {
                    search: params.term,
                    type: 'public',
                    idProyek: proyekId,
                    idact: activityId
                }
                return query;
            },
            processResults: function (result) {
                return {
                    results: $.map(result, function (item) {
                        return {
                            text: item.description,
                            id: item.id
                        }
                    })
                };
            },
            cache: false
        }
    });
    // $('#required-date-req-expense').datepicker({
    //   format: 'dd-mm-yyyy', // Set the desired format
    //   autoclose: true     // Close the datepicker when a date is selected
    // });
    //
    // $('#required-date-plan-expense').datepicker({
    //   format: 'dd-mm-yyyy', // Set the desired format
    //   autoclose: true     // Close the datepicker when a date is selected
    // });
    $("#form-assign-expense").on('submit', function (e) {
        e.preventDefault();

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

        // /request-expense/add
        let desc_req_expense = $("#desc-expense").val();
        let required_date = $("#required-date-req-expense").val();
        let plan_date = $("#required-date-plan-expense").val();
        let uom = $("#uom-req-expense").val();
        let price = $("#price-req-expense").val();
        let qty_planning = $("#qty-req-expense").val();
        let expense_id = null;

        let payload = {
            description: desc_req_expense.trim(),
            type: "expense",
            fom_date: required_date,
            required_date: required_date,
            proyek_id: proyekId,
            uom: uom,
            qty: formatReplaceTitikRibuan(qty_planning),
            price: formatReplaceTitikRibuan(price)
        }
        $.ajax({
            data: JSON.stringify(payload),
            url: `${base_url}request-material/add`,
            type: "POST",
            processData: false,
            contentType: false,
            success: function (data) {
                if (data && data.code === 200) {
                    material_id = data.data.id;
                    resetFormAssignexpense();

                    let payloadAssign = {
                        proyek_id: proyekId,
                        activity_id: activityId,
                        material_id: material_id,
                        qty_planning: qty_planning,
                        plan_date: plan_date,
                        type: "expense",
                    }
                    $.ajax({
                        data: JSON.stringify(payloadAssign),
                        url: `${base_url}assign-material/add`,
                        type: "POST",
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            if (data && data.code === 200) {
                                actionHappen = true;
                                gantt.alert("Data added!");
                                tableexpense.draw();
                                resetFormAssignexpense();
                            }
                            else {
                                gantt.alert({ type: "error", text: data.message });
                                $('#btn-assign-expense').html('Assign');
                                $('#btn-assign-expense').prop("disabled", false);
                            }
                        },
                        error: function (data) {
                            gantt.alert("Assign Failed, try again later!");
                            resetFormAssignexpense();
                        }
                    });
                }
                else {
                    gantt.alert({ type: "error", text: data.message });
                    $('#btn-assign-expense').html('Assign');
                    $('#btn-assign-expense').prop("disabled", false);
                }
            },
            error: function (data) {
                gantt.alert("Overhead request Failed, try again later!");
                resetFormAssignexpense();
            }
        });

    });

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