var rAModal = $('#modal_report_activity > .modal-dialog > .modal-content');
var rAmaterialModal = $('#modal_report_activity_material > .modal-dialog > .modal-content');
var assignMaterialId;
var materialName;
var materialId;
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("");
    $("#select_ra_hr_material").empty().trigger('change');
    $('#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()
        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 valStart = $('#ra_date_start_activity').val()
        let valEnd = moment($(this).val());
        if (moment(valEnd).format('YYYY') >= moment(valStart).format('YYYY')) {
            if (moment(valEnd).isBefore(moment(valStart))) {
                gantt.alert("End Activity Date cannot be lower than Start Activity Date");
                $('#ra_date_end_activity').val()
            }
        }
    });

    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);
        }
    }).on('draw.dt', function () {
        // This event handler will be called after the table is redrawn (after AJAX call)
        // Now you can hide the button here based on the statusReport
        const statusReport = tableRa.row(0).data()?.status_activity;

        if (statusReport === 'done') {
            $('.btn-lihat-actual').hide();
        } else {
            $('.btn-lihat-actual').show();
        }
    }).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 "Overhead"
                    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.materialId = materialId;
                d.type = 'actual';
            },
            "error": function (xhr, error, code) {
            }
        },
        "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: 'qty_planning', 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}`)
        $('#report_activity_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>`);
        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);
        }


    });
    $('#ra_date_material').datepicker({
        format: 'dd-mm-yyyy', // Set the desired format
        autoclose: true     // Close the datepicker when a date is selected
    });
    $("#form_report_activity_material").on("submit", function (e) {
        e.preventDefault();
        var formData = new FormData(this);
        let formattedDate = moment(formData.get("report_date"), "DD-MM-YYYY").format("YYYY-MM-DD");
        formData.set('report_date', formattedDate);
        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) {
        let activityId = formData.get("activity_id");
        let statusActivity = formData.get("status_activity");
        let task = gantt.getTask(activityId);
        if (statusActivity != "done") {
            task.actual_start = null;
            task.actual_end = null;
        }
        const result = await axiosInstance
            .post(`${base_url}report-activity-material/update-status`, formData)
            .then(res => res)
            .catch((error) => error.response);

        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);

        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);

        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, force) {
        try {
            if (force) {
                formData.append("force", force);
            }
            const qty_actual = $("#volume_pekerjaan_material").val();
            formData.set('qty', qty_actual);
            const result = await axiosInstance
                .post(`${base_url}report-activity-material/add`, formData);

            const reportId = result.data.data.report_id;
            try {
                const image = formData.get("files");
                const imageFormData = new FormData();
                imageFormData.append("ref_id", reportId);
                imageFormData.append("category", "report_activity");
                imageFormData.append("files", image, image.name);
                imageFormData.append("company_name", company_name);

                if (image.name && image.size) {
                    await axiosInstanceMultipart.post(`${base_url}image/upload`, imageFormData);
                }

                if (result.status === 200) {
                    gantt.alert("Add report activity material Success!");
                    resetFormAddRaMaterial();
                    tableRaMaterialActual.draw();
                } else {
                    $('#btn_add_ra_material').html('Add');
                    $('#btn_add_ra_material').prop("disabled", false);
                    throw new Error("Add report activity material failed.");
                }
            } catch (error) {
                $('#btn_add_ra_material').html('Add');
                $('#btn_add_ra_material').prop("disabled", false);
                throw new Error("Image upload failed.");
            }
        } catch (error) {
            $("body").removeClass("loading");
            if (error.response.status == 400) {
                gantt.confirm({
                    text: error.response.data.message,
                    ok: "Add",
                    cancel: "Cancel",
                    callback: function (result) {
                        if (result) {
                            submitRaMaterial(formData, true);
                        }
                    }
                });
            } else {
                $('#btn_add_ra_material').html('Add');
                $('#btn_add_ra_material').prop("disabled", false);
                gantt.alert("Add report activity material failed.");
            }
        }
    }

    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);

        if (result && result.status == 200) {
            resetFormAddRaMaterial();
            gantt.alert("Edit report activity Success!");
            tableRaMaterialActual.draw();
        } else {
            resetFormAddRaMaterial();
            $('#btn_add_ra_material').html('Add');
            $('#btn_add_ra_material').prop("disabled", false);
            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');
        gantt.confirm({
            text: "Report activity material will be deleted from activity material, continue?",
            ok: "Delete",
            cancel: "Cancel",
            callback: function (result) {
                if (result) {
                    deleteRaMaterial(id);
                }
            }
        });
    });

    $("#table_activity_material_actual").on("click", ".btn-ram-image", function () {
        let id = $(this).data('id');
        $.ajax({
            url: `${base_url}image/${id}/report_activity`,
            type: "GET",
            success: function (result) {
                let data = result.data;
                if (!data) {
                    gantt.alert({ type: "error", text: "Failed to get report image" });
                    return false;
                }
                if (data && data.image) {
                    $("#report-image").html(`<img src="${base_url_image}${moment(data.created_at).format('YYYY-MM')}/image/${data.image}" class="img-responsive" style="height: 75vh;" />`);
                    $('#modal-report-image').modal('show');
                }
                // kalo gambarnya banyak belum di handle...
            },
            error: function (data) {
                gantt.alert({ type: "error", text: "Image not found !" });
            }
        });
    });

    $("#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');
        materialId = $(this).data('material-id');

        var attributeString = this.outerHTML;
        if (attributeString.includes('"=""')) {
            materialName = materialName + '"';
        }
        $("#report_activity_material_title").html(`Report Activity Actual ${materialName}`);
        $('#report_activity_material_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>`);
        $("#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');
        materialId = $(this).data('material-id');
        var attributeString = this.outerHTML;
        if (attributeString.includes('"=""')) {
            materialName = materialName + '"';
        }
        $("#report_activity_material_title").html(`Report Activity Plan ${materialName}`);
        $('#report_activity_material_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>`);
        $("#modal_report_activity").hide();
        // $("#show_form_ra_material").hide();
        $("#form_report_activity_material").hide();
        $("#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();
    });

    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) {
        searchReport(assignMaterialId, false);
        $.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);
        $.ajax({
            url: `${base_url}report-activity/edit/${id}`,
            type: "get",
            success: function (data) {
                if (data && data.code == 200) {
                    let dataRes = data.data
                    $('#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");
                    $("#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!");
                }
            },
            error: function (data) {
                resetFormAddRa();
                gantt.alert("Edit Report Activity Failed, try again later!");
            }
        });
    });
});