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

$(document).ready(function () {

    var tableRa = $("#table_report").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: '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: 'start_activity', render: function (data, type) {
                    console.log("start", data)
                    return data ? formatDate(data) : '-'
                }
            },
            {
                data: 'finish_activity', render: function (data, type) {
                    console.log("finish", data)
                    return data ? formatDate(data) : '-'
                }
            },
            {
                data: 'status_activity', render: function (data, type) {
                    console.log("status", data)
                    const val = !data ? '-' :
                        data == "done" ? `<span class="badge badge-success">${data}</span>` :
                            data == "open" ? `<span class="badge badge-primary">${data}</span>` :
                                `<span class="badge badge-warning">${data}</span>`
                    return val
                }
            },
            {
                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.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' },
    //     ],
    //     "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) : '-'
    //             }
    //         },
    //     ]
    // });

    $('#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) {
        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()
    });

    $("#btn-close-material").on("click", function () {
        $(".modal-backdrop").remove();
        $("#modal_report_activity_material").hide();
        $("#modal_report_activity_material").css("opacity", "0");
    });

    $("#btn-back-material").on("click", function () {
        $("#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');

        $("#report_activity_material_title").html(`Report Activity Actual Material ${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();

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

    $("#table_report").on("click", ".btn-lihat-plan", function () {
        assignMaterialId = $(this).data('id');
        materialName = $(this).data('material-name');
        $("#report_activity_material_title").html(`Report Activity Plan Material ${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();
        $("#activity_material_plan").show();
        $("#activity_material_actual").hide();
        $("#table_activity_material_plan").show();
        $("#table_activity_material_actual").hide();
        $("#modal_report_activity_material").show();
        $("#modal_report_activity_material").css({
            'opacity': '1',
            'margin-top': '40px',
        });
        tableRaMaterialPlan.draw();
    });

});