var crud_section_view = '';
crud_section_view += '<div class="tab">';
crud_section_view += '<div id="createNewRecorddiv">';
crud_section_view += '<button id="createNewCommodity" class="upload_btn ui button btn btn-success" style="background: burlywood; color: white;" onclick="createStepperForm();">Add New</button>';
crud_section_view += '</div>';
crud_section_view += '</div>';
$(".crud_section_header").html(crud_section_view);



var userObj = JSON.parse(localStorage.getItem('userObj'));
loadData();

function loadData() {
    console.log("userObjuserObj", userObj);

    var html3 = "";
    html3 += '<div class="ui segment inspectionssection" style="height: 600px">';
    html3 += '<div class="ui active inverted dimmer">';
    html3 += '<div class="ui text loader">Loading</div>';
    html3 += '</div>';
    html3 += '<p></p>';
    html3 += '</div>';
    $(".crud_section").html(html3);
    var html = "";
    var url = serverURL + "resources/getFolders/0/1000";

    $.ajax({
        url: url,
        type: 'GET',
    
          dataType: "json",
          async: true,
        success: function (data, textStatus, xhr) {
            console.log("mytenders", data);
            html = html + ' <div class="ibox-head">';
            html = html + '<h3 class="ibox-title" style="color:black; font-weight:  800;padding-bottom:4px ">Resource</h3>';
            html = html + '</div>';

            html = html + '<div>';
            html = html + '<div id="mytenders">';
            html = html + ' </div>';
            html = html + ' </div>';
            var jsonData = data;


            var tableHTML = $(".crudsection");
            html = html + ' <div class="ibox-body">';
            html = html + "<table class='table table-striped table-bordered table-hover' id='tendertableview' cellspacing='0' width='100%'>";
            html = html + '  <thead>';
            html = html + '   <tr>';
            html = html + '     <th style="display:none"></th>';
            html = html + '     <th  style="display:none">#</th>';
            html = html + '      <th>Name</th>';
            html = html + '      <th>Description</th>';
            html = html + '      <th>Updtaed At</th>';
            html = html + '      <th>Created At</th>';
            html = html + '      <th style="width:10%; text-align:center">Actions</th>';

            html = html + '   </tr>';
            html = html + ' </thead>';
            html = html + "<tbody>";
            for (var i = 0; i < jsonData.length; i++) {
            
                html = html + ' <tr>';
                html = html + '  <td style="display:none">';
                html = html + '  <div class="ckbox ckbox-theme">';
                html = html + '      <input id="checkbox1" type="checkbox" checked="checked" class="mail-checkbox">';
                html = html + '    </div>';
                html = html + '  </td>';
                html = html + '  <td style="display:none">';
                html = html + '    <a href="#" class="star star-checked"><i></i></a>';
                html = html + '  </td>';


                html = html + '  <td>';
                html = html + '   <div class="media">';
                html = html + '       <div class="media-body">';
                html = html + "          <a href='javascript:controller.viewmytederdetailsbtn(" + JSON.stringify(jsonData[i]) + ")'><p>" + jsonData[i].name + " </p></a>";
                html = html + '         </div>';
                html = html + '     </div>';
                html = html + '  </td>';

                html = html + '  <td style="width:200px; text-align: left;">';
                html = html + '   <div class="media">';
                html = html + '       <div class="media-body">';
                html = html + '           <p>' + jsonData[i].description + ' </p>';
                html = html + '         </div>';
                html = html + '     </div>';
                html = html + '  </td>';

                html = html + '  <td style="width:300px; text-align: left;">';
                html = html + '   <div class="media">';
                html = html + '       <div class="media-body">';
                html = html + "<p  style='color:#black; '>" + jsonData[i].updated + " </p>";
                // html = html + '           <p>' + jsonData[i].tenderName + ' </p>';
                html = html + '         </div>';
                html = html + '     </div>';
                html = html + '  </td>';

                html = html + '  <td>';
                html = html + '   <div class="media">';
                html = html + '       <div class="media-body">';
                html = html + '           <p>' + jsonData[i].created + ' </p>';
                html = html + '         </div>';
                html = html + '     </div>';
                html = html + '  </td>';


                html += " <td class='time' style='width:15%; text-align:center'>";
                html += "<a href='javascript:controller.viewmytederdetailsbtn(" + JSON.stringify(jsonData[i]) + ")' style='color:#23b7e5; font-weight:800; font-size:16px; text-align:center; margin-right:10px;'>View</a>"
                html += "</td>";

                html = html + '</tr>';

            }
            html = html + "</tbody>";
            html = html + "</table>";
            html = html + ' </div>';

            tableHTML.html(html);
            $(".crud_section").html(html);
            $('#tendertableview').DataTable({
                dom: "Bfrltip",
                "bJQueryUI": true,
                "aLengthMenu": [
                    [2, 3, 5, 10, 20, 25, 50, 75, -1],
                    [2, 3, 5, 10, 20, 25, 50, 75, "All"]
                ],
                "iDisplayLength": 5,
                "scroller": {
                    loadingIndicator: true
                },
                "orderCellsTop": true,
                "fixedHeader": true,

                "bProcessing": true,
                "mark": true,
                "responsive": true,
                'autoWidth': true,

            });
        },
        fail: function (xhr, textStatus) { },
        error: function (xhr, textStatus) { }
    });

}



function createStepperForm() {
    isEdit = false;
    var htmlsection = "";
    htmlsection += '<div class="ui grid">';
    htmlsection += '<div class="twelve wide column form-wrapper" style="width: 100% ! important">';
   
    htmlsection += '<div class="ui mini steps" style="overflow:hidden;width:100%;font-family: \'Monda\', sans-serif;">';
    htmlsection += '<div class="active step step_zero"><span class="fa fa-folder-open-o"></span> <div class="content"> <div class="title">Menu Details</div><div class="description"></div> </div></div>';
    htmlsection += '</div>';
    htmlsection += '<div id="error-msg" class="ui error message"> <p><strong>Note: </strong> All Fields are Mandatory</p></div>';
    htmlsection += '<div class="ui tall stacked segment">';
    htmlsection += '<div id="step_zero">';

    htmlsection += '<form class="ui form" id="main_submit_form">';
    htmlsection += '   <h4>Role Details</h4>';


    htmlsection += '    <div class="two fields">';
    htmlsection += '      <div class="field">';
    htmlsection += '        <label>Role<span class="asteric">*</span></label>';
    htmlsection += '  <input type="text" maxlength="60" id="roleName" name="roleName" placeholder="Name">';
    htmlsection += '      </div>';

    htmlsection += '      <div class="field">';
    htmlsection += '        <label>Menus<span class="asteric">*</span></label>';
    htmlsection += '  <input type="text" maxlength="60" id="roleDescription" name="roleDescription" placeholder="Description">';
    htmlsection += '      </div>';
    htmlsection += '    </div>';
    htmlsection += '</form>';

    htmlsection += '<div class="btns" style="display: flex; margin: 2px">';
    htmlsection += '<button id="nexttostepone" onclick="processStepzero()" type="button" class="ui green right labeled icon button"><i class="fa fa-angle-double-right"></i>Save & Exit</button>';
    // htmlsection += '<button id="backtostepzero" onclick="processStepZeroUpdate()" type="button" class="ui green right labeled icon button" style="display: none;">Update & Proceed<i class="fa fa-angle-double-right"></i> </button>';
    // htmlsection += '<a href="javascript:void(0);" onclick="loadData()"  data_task="return" class="btn btn-warning xcrud-action return">Return</a>';
    htmlsection += '<button id="createNewCommodity"  onclick="loadData()" class="upload_btn ui button btn btn-success" style="background: burlywood; color: white;" >Return</button>';

    htmlsection += '</div>';
    htmlsection += '</div>';

    // end of step one
    htmlsection += '<div id="step_one">';
    htmlsection += '<div  id="createCommityChecklistDiv"> <a href="javascript:createNewVarietyRecord();"><input type="button" id="createCommityChecklist" class="upload_btn ui button btn btn-success" style="background: burlywood; " value="Add New"></a></div>';
    htmlsection += '    <div id="crud_section_step_one" class="crud_section_step_one"> </div>';
    htmlsection += '    <button onclick="backToStepzero()" type="button" class="ui green right labeled icon button"> <i class="fa fa-angle-double-left"></i> Previous</button>';
    htmlsection += '<a href="javascript:void(0);" onclick="loadData()"  data_task="return" class="btn btn-warning xcrud-action return">Return</a>';
    htmlsection += '</div>';
    htmlsection += '';
    htmlsection += '<div id="step_two">';
    htmlsection += '</div>';
    htmlsection += '<div id="step_three">';
    htmlsection += '</div>';
    htmlsection += '</div>';
    $(".crud_section").html(htmlsection);

    $('.ui.dropdown').dropdown({
        fullTextSearch: true
    });


    var option2 = ""
    var url = serverURL + "roles/roleList?pageNo=0&pageSize=1000";
    controller.requestWithToken(url, function(data, status) {
        if (data.length > 0) {
            option2 += "<option selected value=''>-Select Option-</option>";
            option2 += controller.loadSelect(data, 'role_id', 'name', '');
            $('#role_id').html(option2);
        } else {
            option2 += "<option value=''>-Select Option-</option>";
            $('#role_id').html(option2);
        }
    });



    var option = ""
    var url = serverURL + "menu/menuList";
    controller.requestWithToken(url, function(data, status) {
        if (data.length > 0) {
            option += controller.loadSelect(data, 'menu_id', 'name', '');
            $('#menus').html(option);
        } else {
            option += "<option value=''>-Select Option-</option>";
            $('#menus').html(option);
        }
    });
}








function editRecord_section_2(data, formName) {
    // if (allFormObj['region']) {
    //     allFormObj['regionCounty']['crudCustomEdit_2'] = true;
    //     // allFormObj['regionCounty']['crudDeleteRecord'] = true;
    // }
    if (formName == "menuRoles") {
        localStorage.setItem("menuRoles_id", data.menuRoles_id);
        isEdit = true;
        var htmlsection = "";
        htmlsection += '<div class="ui grid">';
        htmlsection += '<div class="twelve wide column form-wrapper" style="width: 100% ! important">';
       
        htmlsection += '<div class="ui mini steps" style="overflow:hidden;width:100%;font-family: \'Monda\', sans-serif;">';
        htmlsection += '<div class="active step step_zero"><span class="fa fa-folder-open-o"></span> <div class="content"> <div class="title">Menu Details</div><div class="description"></div> </div></div>';
        // htmlsection += '<div class="disabled step step_one"> <span class="fa fa-folder-open-o"></span> <div class="content"> <div class="title">Form Province</div> <div class="description"></div> </div></div>';
        // htmlsection += '            <div class="disabled step step_two">  <div class="content"><div class="title"></div> <div class="description"></div></div></div>';
        // htmlsection += '            <div class="disabled step step_three"><span class="fa fa-folder-open-o"></span> <div class="content"><div class="title"></div> <div class="description"></div> </div>  </div>';
        htmlsection += '</div>';
        htmlsection += '<div id="error-msg" class="ui error message"> <p><strong>Note: </strong> All Fields are Mandatory</p></div>';
        htmlsection += '<div class="ui tall stacked segment">';
        htmlsection += '<div id="step_zero">';

        htmlsection += '<form class="ui form" id="main_submit_form">';
        htmlsection += '   <h4>Role Details</h4>';


        htmlsection += '    <div class="two fields">';
        htmlsection += '      <div class="field">';
        htmlsection += '        <label>Role<span class="asteric">*</span></label>';
        htmlsection += '  <input type="text" maxlength="60" id="roleName" name="roleName" placeholder="Name">';
        htmlsection += '      </div>';

        htmlsection += '      <div class="field">';
        htmlsection += '        <label>Menus<span class="asteric">*</span></label>';
        htmlsection += '  <input type="text" maxlength="60" id="roleDescription" name="roleDescription" placeholder="Description">';
        htmlsection += '      </div>';
        htmlsection += '    </div>';
        htmlsection += '</form>';

        htmlsection += '<div class="btns" style="display: flex; margin: 2px">';
        htmlsection += '<button id="backtostepzero" onclick="processStepZeroUpdate(' + data.menuRoles_id + ')" type="button" class="ui green right labeled icon button">Update & Exit<i class="fa fa-angle-double-right"></i> </button>';
        htmlsection += '<a href="javascript:void(0);" onclick="loadData()"  data_task="return" class="btn btn-warning xcrud-action return">Return</a>';
        htmlsection += '</div>';
        htmlsection += '</div>';

        // end of step one
        htmlsection += '<div id="step_one">';
        htmlsection += '<div  id="createCommityChecklistDiv"> <a href="javascript:createNewVarietyRecord();"><input type="button" id="createCommityChecklist" class="upload_btn ui button btn btn-success" style="background: burlywood; " value="Add New"></a></div>';
        htmlsection += '    <div id="crud_section_step_one" class="crud_section_step_one"> </div>';
        htmlsection += '    <button onclick="backToStepzero()" type="button" class="ui green right labeled icon button"> <i class="fa fa-angle-double-left"></i> Previous</button>';
        htmlsection += '<a href="javascript:void(0);" onclick="loadData()"  data_task="return" class="btn btn-warning xcrud-action return">Return</a>';
        // htmlsection += '    <button id="saveandproceed" onclick="processStepOne()" type="button" class="ui green right labeled icon button">Proceed <i class="fa fa-angle-double-right"></i></button>';
        htmlsection += '</div>';
        htmlsection += '';
        htmlsection += '<div id="step_two">';
        // htmlsection += '    <div class="section_payments" id="section_payments"></div>';
        // htmlsection += '    <button onclick="backToStepOne()" type="button" class="ui green right labeled icon button"><i class="fa fa-angle-double-left"></i>Previous </button>';
        // htmlsection += '    <button onclick="processStepTwo()" type="button" class="ui green right labeled icon button">Proceed<i class="fa fa-angle-double-right"></i> </button>';
        htmlsection += '</div>';
        htmlsection += '<div id="step_three">';
        // htmlsection += '    <div class="section_inspections" id="section_payments"></div>';
        // htmlsection += '    <button onclick="backToStepTwo()" type="button" class="ui green right labeled icon button"> <i class="fa fa-angle-double-left"></i>Previous</button>';
        // htmlsection += '    <button onclick="processlastStep()" type="button" id="printdocumentOnetime" class="ui green right labeled icon button">Print <i class="icon-arrow-right"></i></button>';
        // htmlsection += '</div>';
        htmlsection += '</div>';
        htmlsection += '</div>';
        $(".crud_section").html(htmlsection);

        $('.ui.dropdown').dropdown({
            fullTextSearch: true
        });


        // var option2 = "";
        // if (data.menu.length > 0) {
        //     for (let i = 0; i < data.menu.length; i++) {
        //         option2 += '<option selected value=' + data.menu[i].menu_id + '>' + data.menu[i].name + '</option>';
        //         $('#menus').html(option2);
        //     }
        // } else {
        //     option2 += "<option selected value=''>-Select Option-</option>";
        //     $('#menus').html(option2);
        // }


        var option2 = "";
        option2 += '<option selected value=' + data.role.role_id + '>' + data.role.name + '</option>';
        $('#role_id').html(option2);
        var url = serverURL + "roles/roleList?pageNo=0&pageSize=1000";
        controller.requestWithToken(url, function(data, status) {
            if (data.length > 0) {
                option2 += controller.loadSelect(data, 'role_id', 'name', '');
                $('#role_id').html(option2);
            } else {
                option2 += "<option value=''>-Select Option-</option>";
                $('#role_id').html(option2);
            }
        });

        var option = "";
        option += '<option selected value=' + data.menu.menu_id + '>' + data.menu.name + '</option>';
        $('#menus').html(option);

        var url = serverURL + "menu/menuList";
        controller.requestWithToken(url, function(data, status) {
            if (data.length > 0) {
                option += controller.loadSelect(data, 'menu_id', 'name', '');
                $('#menus').html(option);
            } else {
                option += "<option value=''>-Select Option-</option>";
                $('#menus').html(option);
            }
        });


    }
}





var viewRowData = function(data, formName) {
    if (formName == "menuRoles") {
        var crud_section_view = '';
        crud_section_view += '<div class="form_section">' +
            '<div class="col-md-12">' +
            '<h4>Menu Roles Details</h4>' +
            '<div form_identifier="crudsectionbg" class="form parsley-form ">' +
            '<div class="form-group col-md-6 ">' +
            '<label class="control-label col-sm-5">Role Name</label>' +
            '<div class="col-md-7">' +
            '<div class="control-label-plain">' + data.role.name + '</div>' +
            '</div>' +
            '</div>' +
            '<div class="form-group col-md-6">' +
            '<label class="control-label col-sm-5">Menu</label>' +
            '<div class="col-md-7">' +
            '<div class="control-label-plain">' + data.menu.name + '</div>' +
            '</div>' +
            '</div>' +




            '<div class="crud_section_step_one" id="crud_section_step_one">' +
            '</div>' +

            ' <a href="javascript:void(0);" onclick="loadData()" form-name="allReprints" data_task="return" class="btn btn-warning xcrud-action return">Return</a>' +

            '</div>';
        $(".crud_section").html(crud_section_view);
    }
}



// Navigations
function processStepzero() {
    var formJson = $("#main_submit_form").serializeObject();

    if (formJson.roleName == "") {
        controller.showToastMsg("Name Required", "#ff6666");
    } else if (formJson.roleDescription == "") {
        controller.showToastMsg("Description Required", "#ff6666");
    }else {
          setTimeout(function() {
            $('#nexttostepone').html("Saving & Exit");
            $("#nexttostepone").attr("disabled", false);
            }, 1000);
        
        $('#nexttostepone').html("Saving... Please Wait!");
        $("#nexttostepone").attr("disabled", true);
        var url = serverURL + "role/createRole";
        controller.allPostRequest(url, formJson, '', function(data, status) {
            if (data) {
                $('#nexttostepone').html("Save & Proceed");
                $("#nexttostepone").attr("disabled", false);
                isEdit = false;
                loadData();
            }
        });
    }

}




function processStepZeroUpdate(recordID) {
    var formJson = $("#main_submit_form").serializeObject();
    var recordID = localStorage.getItem("menuRoles_id");
    $('#backtostepzero').html("Updating... Please Wait!");
    $("#backtostepzero").attr("disabled", true);

    if (formJson.roleName == "") {
        controller.showToastMsg("Name Required", "#ff6666");
    } else if (formJson.roleDescription == "") {
        controller.showToastMsg("Description Required", "#ff6666");
    }else{
        setTimeout(function() {
            $('#nexttostepone').html("Saving & Exit");
            $("#nexttostepone").attr("disabled", false);
            }, 1000);


            formJson.id = recordID;
            var url = serverURL + "menuRoles/updateMenuRoles";
            controller.allPostRequest(url, formJson, '', function(data, status) {
                isEdit = false;
                $('#backtostepzero').html("Save & Exit");
                $("#backtostepzerok").attr("disabled", false);
                loadData();
            });
    }

      
       
    
}


function refresh() {
    window.location.reload();
}