var rAModal = $('#modal_report_activity > .modal-dialog > .modal-content');
var rAmaterialModal = $('#modal_report_activity_material > .modal-dialog > .modal-content');
var assignMaterialId;
var materialName;
var idStatus;

function resetFormAddRa() {
    $("#show_form_ra").show();
    $("#hide_form_ra").hide();
    $("#id_ra").val("");
    $("#form_report_activity").hide();
    $('#form_report_activity').trigger("reset");
    $('#btn_add_ra').html('Add');
    $('#btn_add_ra').prop("disabled", false);
}

function resetFormAddRaMaterial() {
    $("#id_ra_material").val("");
    $('#form_report_activity_material').trigger("reset");
    $('#btn_add_ra_material').html('Add');
    $('#btn_add_ra_material').prop("disabled", false);
}

var qtyActual = document.getElementById('volume_pekerjaan_material');
        qtyActual.addEventListener('keyup', function (e) {
        qtyActual.value = formatRibuanInput(this.value);
    });

$(document).ready(function () {

    $("#table_report tbody").on("click", ".btn-update-status", function () {
        idStatus = $(this).data('id');
        var dataRow = tableRa.row($(this).parents('tr')).data();

        let nameMaterial = $(this).data('material-name');
        let start = moment(dataRow.start_activity).format("YYYY-MM-DD");
        let end = moment(dataRow.finish_activity).format("YYYY-MM-DD");
        $("#ra_date_start_activity").val(start)
        $("#ra_date_end_activity").val(end)
        $("#ra_select_status").val(dataRow.status_activity)

        if (dataRow.status_activity == 'done') {
            $('#ra_date_end_activity').prop('disabled', false);
        } else {
            $('#ra_date_end_activity').prop('disabled', true);
        }

        $(".text-update-status").html(`Update Status Report Activity Material ${nameMaterial}`)
        $("#form_report_activity").show();
    });

    $("#btn-cancel-status").on("click", function () {
        resetFormAddRa()
    });
    $("#ra_select_status").on("change", function () {
        let val = $(this).val()
        console.log(val)
        if (val == 'done') {
            $('#ra_date_end_activity').prop('disabled', false);
        } else {
            $('#ra_date_end_activity').prop('disabled', true);
        }
    });

    $("#ra_date_end_activity").on("change", function () {
        let valEnd = $(this).val()
        let valStart = $('#ra_date_start_activity').val()

        const compDate = moment(valEnd).isBefore(moment(valStart))
        if (compDate) {
            gantt.alert("End Activity Date cannot be lower than Start Activity Date");
        }
    });

	var tableRa = $("#table_report").on('xhr.dt', function(e, settings, json, xhr){
		$('#report-activity-information-status').attr("class", "");
		if(json?.data?.length > 0) {
			let firstData = json.data[0];
			const statusReport = firstData.status_activity;
			let reportStartDate = firstData.start_activity ?? "-";
			reportStartDate = reportStartDate.split(" ")[0];
			let reportFinishDate = firstData.finish_activity ?? "-";
			reportFinishDate = reportFinishDate.split(" ")[0];


			if(statusReport == 'on-progress') {
				$('#report-activity-information-status').attr("class", "badge badge-warning");
			} else if(statusReport == 'done') {
				$('#report-activity-information-status').attr("class", "badge badge-success");
			} else if(statusReport == 'open') {
				$('#report-activity-information-status').attr("class", "badge badge-primary");
			}

			if(moment(reportStartDate, "YYYY-MM-DD",true).isValid()){
				reportStartDate = moment(reportStartDate, "YYYY-MM-DD").format("DD-MM-YYYY");
			}

			if(moment(reportFinishDate, "YYYY-MM-DD",true).isValid()){
				reportFinishDate = moment(reportFinishDate, "YYYY-MM-DD").format("DD-MM-YYYY");
			}

			$("#report-activity-information-status").text(statusReport ?? "-");
			$("#report-activity-information-start").text(reportStartDate);
			$("#report-activity-information-end").text(reportFinishDate);
		}
	}).DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": `${base_url}assign-material/datatablesForReportActivity`,
            "data": function (d) {
                d.idact = activityId;
            }
        },
        "columns": [
            { data: 'material_name', name: 'material_name' },
			{ data: 'type', name: 'type', render: function(data, type){
				if(data == 'expense')
					return "Lainnya"
				return "Material"
			}},
            {
                data: 'qty_planning', render: function (data, type) {
                    return data ? formatRupiah(data) : '-'
                }
            },
            {
                data: 'qty_sum', render: function (data, type) {
                    if(data == "-"){
                        return data
                    }
                    return data ? formatRupiah(data) : '-'
                }
            },
            { data: 'uom', name: 'uom' },
            {
                data: 'action',
                name: 'action',
                orderable: true,
                searchable: true
            },
        ]
    });


    var tableRaMaterialActual = $("#table_activity_material_actual").DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": `${base_url}report-activity-material/datatables`,
            "data": function (d) {
                d.idAmi = assignMaterialId;
                d.idAct = activityId;
                d.materialName = materialName;
                d.type  = 'actual';
            }
        },
        "columns": [
            { data: 'human_resource', name: 'human_resource' },
            {
                data: 'report_date', render: function (data, type) {
                    return data ? formatDate(data) : '-'
                }
            },
            {
                data: 'qty', render: function (data, type) {
                    return data ? formatRupiah(data) : '-'
                }
            },
            { data: 'description', name: 'description' },
            {
                data: 'action',
                name: 'action',
                orderable: true,
                searchable: true
            },
        ],
        "order": [[1, 'asc']],
    });

    var tableRaMaterialPlan = $("#table_activity_material_plan").DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": `${base_url}report-activity-material/datatables`,
            "data": function (d) {
                d.idAmi = assignMaterialId;
                d.idAct = activityId;
                d.type  = 'plan';
            }
        },
        "columns": [
            { data: 'material_name', name: 'material_name'},
            {
                data: 'qty_planning', render: function (data, type) {
                    return data ? formatRupiah(parseInt(data)) : '-'
                }
            },
            { data: 'uom', name: 'uom' },
            {
                data: 'plan_date', render: function (data, type) {
                    return data ? formatDate(data) : '-'
                }
            },
        ]
    });


    $('#select_ra_hr').select2({
        dropdownParent: rAModal,
        placeholder: 'Pilih human resource',
        allowClear: true,
        ajax: {
            url: `${base_url}user-to-proyek/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.name,
                            id: item.id,
                        }
                    })
                };
            },
            cache: false
        }
    });

    $('#select_ra_hr_material').select2({
        dropdownParent: rAmaterialModal,
        placeholder: 'Pilih human resource',
        allowClear: true,
        ajax: {
            url: `${base_url}user-to-proyek/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.name,
                            id: item.id,
                        }
                    })
                };
            },
            cache: false
        }
    });

    $('#modal_report_activity').on('show.bs.modal', function (event) {
        $("#report_activity_title").html(`Report Activity ${activityName}`)
        tableRa.draw();
    });

    $('#modal_report_activity_material').on('show.bs.modal', function (event) {
        tableRaMaterialActual.draw();
    });

    $('#modal_report_activity').on('hide.bs.modal', function (event) {
        if (actionHappen) {
            updateActivity(activityId);
        }
        resetFormAddRa();
    });

    $("#modal_report_activity").on("click", "#show_form_ra", function () {
        $(this).hide();
        $("#hide_form_ra").show();
        $("#form_report_activity").show();
    });

    $("#modal_report_activity").on("click", "#hide_form_ra", function () {
        $(this).hide();
        resetFormAddRa()
        $("#show_form_ra").show();
    });

    $("#modal_report_activity_material").on("click", "#show_form_ra_material", function () {
        $(this).hide();
        $("#form_report_activity_material").show();
    });

    $("#modal_report_activity_material").on("click", "#hide_form_ra_material", function () {
        $(this).hide();
        resetFormAddRaMaterial()
    });

    $("#form_report_activity").on("submit", function (e) {
        e.preventDefault();

        let valEnd = $('#ra_date_end_activity').val()
        let valStart = $('#ra_date_start_activity').val()
        let valStatus = $('#ra_select_status').val()

        const compDate = moment(valEnd).isBefore(moment(valStart))

        if (valStatus == 'done' && compDate) {
            gantt.alert("End Activity Date cannot be lower than Start Activity Date");

        } else {
            var formData = new FormData(this);
            formData.append("activity_id", activityId);
            actionHappen = true;

            $('#btn_add_ra').html('Updating..');
            $('#btn_add_ra').prop("disabled", true);
            submitStatus(formData);
        }


    });

    $("#form_report_activity_material").on("submit", function (e) {
        e.preventDefault();
        var formData = new FormData(this);
        formData.append("activity_id", activityId);
        formData.append("assign_material_id", assignMaterialId);
        let idRa = $("#id_ra_material").val();
        actionHappen = true;
        if (idRa && idRa != "") {
            $('#btn_add_ra_material').html('Updating..');
            $('#btn_add_ra_material').prop("disabled", true);
            formData.append("_method", "PUT");
            updateRaMaterial(formData, idRa);
        } else {
            $('#btn_add_ra_material').html('Adding..');
            $('#btn_add_ra_material').prop("disabled", true);
            submitRaMaterial(formData);
        }
    });

    async function submitStatus(formData) {
        const result = await axiosInstance
            .post(`${base_url}report-activity-material/update-status`, formData)
            .then(res => res)
            .catch((error) => error.response);

        // console.log("cek result", result);

        if (result && result.data.code == 200) {
            gantt.alert("Update Status report activity Success!");
            resetFormAddRa();
            $(".text-update-status").hide()
            tableRa.draw();
        } else {
            resetFormAddRa();
            $(".text-update-status").hide()
            gantt.alert("Update Status activity failed, try again later!");
        }
    }

    async function submitRa(formData) {
        const result = await axiosInstance
            .post(`${base_url}report-activity/add`, formData)
            .then(res => res)
            .catch((error) => error.response);

        // console.log("cek result", result);

        if (result && result.status == 200) {
            gantt.alert("Add report activity Success!");
            resetFormAddRa();
            tableRa.draw();
        } else {
            resetFormAddRa();
            gantt.alert("Add report activity failed, try again later!");
        }
    }

    async function updateRa(formData, id) {
        const result = await axiosInstance
            .post(`${base_url}report-activity/update/${id}`, formData)
            .then(res => res)
            .catch((error) => error.response);

        // console.log("cek result", result);

        if (result && result.status == 200) {
            gantt.alert("Edit report activity Success!");
            resetFormAddRa();
            tableRa.draw();
        } else {
            resetFormAddRa();
            gantt.alert("Edit report activity failed, try again later!");
        }
    }

    async function submitRaMaterial(formData, id) {
        let qty_actual = $("#volume_pekerjaan_material").val();
        formData.set('qty', qty_actual);
        const result = await axiosInstance
            .post(`${base_url}report-activity-material/add`, formData)
            .then(res => res)
            .catch((error) => error.response);

        // console.log("cek result", result);

        if (result && result.status == 200) {
            gantt.alert("Add report activity material Success!");
            resetFormAddRaMaterial();
            tableRaMaterialActual.draw();
        } else {
            resetFormAddRaMaterial();
            gantt.alert("Add report activity material failed, try again later!");
        }
    }

    async function updateRaMaterial(formData, id) {
        const result = await axiosInstance
            .post(`${base_url}report-activity-material/update/${id}`, formData)
            .then(res => res)
            .catch((error) => error.response);

        // console.log("cek result", result);

        if (result && result.status == 200) {
            gantt.alert("Edit report activity Success!");
            resetFormAddRaMaterial();
            tableRaMaterialActual.draw();
        } else {
            resetFormAddRaMaterial();
            gantt.alert("Edit report activity failed, try again later!");
        }
    }

    $("#table_report").on("click", ".btn_report_delete", function () {
        let id = $(this).data('id');
        var box = gantt.confirm({
            text: "Report activity will be deleted from activity, continue?",
            ok: "Delete",
            cancel: "Cancel",
            callback: function (result) {
                if (result) {
                    deleteRa(id);
                }
            }
        });
    });

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

    $("#btn-close-material").on("click", function () {

        // setTimeout(() => {
        $(".modal-backdrop").remove();
        $("#modal_report_activity_material").hide();
        $("#modal_report_activity_material").css("opacity", "0");
    });

    $("#btn-back-material").on("click", function () {

        // setTimeout(() => {
        // $(".modal-backdrop").remove();
        $("#modal_report_activity_material").hide();
        $("#modal_report_activity_material").css("opacity", "0");
        $("#modal_report_activity").show();
        tableRa.draw();
    });

    $("#table_report").on("click", ".btn-lihat-actual", function () {
        assignMaterialId = $(this).data('id');
        materialName = $(this).data('material-name');

        // console.log(" okeee ",{ assignMaterialId, activityId, materialName });
        $("#report_activity_material_title").html(`Report Activity Actual ${materialName}`)
        $("#modal_report_activity").hide();

        $("#form_report_activity_material").show();
        $("#activity_material_plan").hide();
        $("#activity_material_actual").show();
        $("#table_activity_material_plan").hide();
        $("#table_activity_material_actual").show();

        // setTimeout(() => {
        $("#modal_report_activity_material").show();
        $("#modal_report_activity_material").css({
            'opacity': '1',
            'margin-top': '40px',
        });
        tableRaMaterialActual.draw();

        // $(".modal-dialog .modal-lg").css({
        //     // 'opacity': '3',
        //     'padding-top': '20px',
        // });

        // }, 1000);

        // tableInputProgress.draw();
    });

    $("#table_report").on("click", ".btn-lihat-plan", function () {
        assignMaterialId = $(this).data('id');
        materialName = $(this).data('material-name');
        // console.log(" okeee ",{ assignMaterialId, activityId, materialName });
        $("#report_activity_material_title").html(`Report Activity Plan ${materialName}`)
        $("#modal_report_activity").hide();
        // $("#show_form_ra_material").hide();
        $("#activity_material_plan").show();
        $("#activity_material_actual").hide();
        $("#table_activity_material_plan").show();
        $("#table_activity_material_actual").hide();

        // setTimeout(() => {
        $("#modal_report_activity_material").show();
        $("#modal_report_activity_material").css({
            'opacity': '1',
            'margin-top': '40px',
        });
        tableRaMaterialPlan.draw();
    });

    function deleteRa(id) {
        $.ajax({
            url: `${base_url}report-activity/delete/${id}`,
            type: "DELETE",
            success: function (data) {
                actionHappen = true;
                gantt.alert("Delete Report Activity Success!");
                tableRa.draw();
            },
            error: function (data) {
                gantt.alert("Delete Report Activity Failed, try again later!");
            }
        });
    }

    function deleteRaMaterial(id) {
        $.ajax({
            url: `${base_url}report-activity-material/delete/${id}`,
            type: "DELETE",
            success: function (data) {
                actionHappen = true;
                gantt.alert("Delete Report Activity Material Success!");
                tableRaMaterialActual.draw();
            },
            error: function (data) {
                gantt.alert("Delete Report Activity Material Failed, try again later!");
            }
        });
    }

    $("#table_report").on("click", ".btn_report_edit", function () {
        let id = $(this).data('id');
        $("#id_ra").val(id);
        // console.log("cek edit id", id);
        $.ajax({
            url: `${base_url}report-activity/edit/${id}`,
            type: "get",
            success: function (data) {
                console.log("data", data);
                if (data && data.code == 200) {
                    let dataRes = data.data
                    // console.log("dataRes", dataRes);
                    $('#btn_add_ra').html('Edit');
                    var newOption = new Option(dataRes.user_name, dataRes.user_id, true, true);
                    $('#select_ra_hr').append(newOption).trigger('change');
                    let reportDate = moment(dataRes.report_date).format("YYYY-MM-DD");
                    // console.log("reportDate", reportDate);
                    $("#ra_date").val(reportDate);
                    $("#volume_pekerjaan").val(dataRes.job_count_report);
                    $("#ra_description").val(dataRes.description);
                    $("#show_form_ra").hide();
                    $("#hide_form_ra").show();
                    $("#form_report_activity").show();
                } else {
                    resetFormAddRa();
                    gantt.alert("Edit Report Activity Failed, try again later!");
                }
                // actionHappen = true;
                // gantt.alert("Delete Report Activity Success!");
                // tableRa.draw();
            },
            error: function (data) {
                resetFormAddRa();
                gantt.alert("Edit Report Activity Failed, try again later!");
            }
        });
    });
});