{% extends base %}
{% block head_extra %}
<style>
#tbl_roles {
display: none;
}
</style>
{% endblock head_extra %}

{% block content %}
{% import "macros/action_icons_static.html" as icons with context %}
<span class="title" role="main"><h2>{% block title %}Roles{% endblock %}</h2></span>
<div class="content-container content">
<article>
<h3>Departments</h3>
<div><button type="button" id="btn_add_department" value="Add department">
{{ icons.add_svg(s_label="add department") }}
Add department
</button></div>
{% if departments %}
<div class="table-container">
<table id="tbl_departments" class="data-table">
<thead>
<tr>
<th>Department</th><th style="font-size: smaller;">Actions</th>
</tr>
</thead>
<tbody>
{% for department in departments %}
<tr>
<td>{{ department.v_department_name }}</td><td><a href="#{{ department.id }}" class="a_edit_department">{{ icons.edit_svg(bl_quotes=False, s_label="edit department") }}</a>&nbsp;<a href= "#{{ department.id }}" class="a_remove_department">{{ icons.delete_svg(bl_quotes=False, s_label="remove department") }}</a></td>
</tr>
{% endfor %}{# end of looping through qualification_types #}
</tbody>
</table><!-- end of tbl_departments -->
</div><!-- end of div.table-container -->
{% endif %}{# end of checking if departments populated #}
</article>
{% if departments %}
<article>
<h3>Roles</h3>
<div id="div_roles">
<div><button type="button" id="btn_add_role" vallue="Add Role">
{{ icons.add_svg(s_label="add Role") }}
Add Role
</button></div>
<div><select id="sel_department_filter">
<option value="0"{% if department_filter==0 %} selected {% endif %}>--all--</option>
{% for department in departments %}
<option value="{{ department.id }}"{% if department_filter==department.id %} selected {% endif %}>{{ department.v_department_name }}</option>
{% endfor %}{# end of looping through departments #}
</select>
<button type="button" id="btn_department_filter" value="Apply filter" style="background-color: rgb(39, 37, 92); color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
{{ icons.search_svg(s_label="apply filters") }}
Apply filter
</button>
</div>
<div class="table-container">
<table id="tbl_roles" class="data-table">
<thead>
<tr>
<th>Department</th><th>Role</th><th>Description</th><th style="font-size: smaller;">(actions)</th>
</tr>
</thead>
<tbody></tbody>
</table><!-- end of tbl_roles -->
</div><!-- end of div.table-container -->
</div><!-- end of div_roles -->
</article>
{% endif %}{# end of checking if departments populated #}
</div><!-- end of div.content -->
{% from "macros/dialog.html" import dlg_prep with context %}
{{ dlg_prep(["dlg_department", "dlg_role"]) }}
{# dlg divs below #}
<div id="dlg_department" aria-labeledby="spn_department">
<span id="spn_department">Department</span><br>
<form action="{{ url_for("main.roles") }}" method="post" id="frm_department">
{{ department_form.csrf_token }}
{{ department_form.hid_department_id }}
{{ department_form.txt_department_name.label}}{{ department_form.txt_department_name }}<br>
<input type="submit" name="btn_save_department" value="Save">
</form>
</div><!-- end of dlg_department -->
<div id="dlg_role" aria-labeledby="spn_role">
<span id="spn_role">Role details</span><br>
<form action="{{ url_for("main.roles") }}" method="post" id="frm_role">
{{ form.csrf_token }}
{{ form.hid_role_id }}
<ul>
<li>{{ form.sel_department.label }}{{ form.sel_department }}</li>
<li>{{ form.txt_role_name.label }}{{ form.txt_role_name }}</li>
<li>{{ form.txt_description.label }}<br>
{{ form.txt_description }}</li>
</ul>
<input type="submit" name="btn_save_role" value="Save">
</form>
</div><!-- end of dlg_role -->
<script type="text/javascript">
$(document).ready( function() {

try {

var s_dlg_department = $("#dlg_department").html();
var s_dlg_role = $("#dlg_role").html();

$("#btn_add_department").click( function(event) {
    event.preventDefault();
    $("#dlg_department").html(s_dlg_department);
    $("#dlg_department").redraw();
    $("#dlg_department").dialog("open");
});// end of btn_add_department click event

$(".a_edit_department").click( function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    var s_department = $($($($(this).parent()).parent()).children("td")[0]).text();
    $("#dlg_department").html(s_dlg_department);
    $("#dlg_department").redraw();
    $("#hid_department_id").val(s_id);
    $("#txt_department_name").val(s_department);
    $("#dlg_department").redraw();
    $("#dlg_department").dialog("open");
});// end of .a_edit_department click event

$(".a_remove_department").click( function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    var bl_confirm = confirm("Are you sure - this will also remove all positions|roles under this department?");
    if (bl_confirm) {
        $("#hid_remove_department_id").val(s_id);
        document.getElementById("frm_remove_department").submit();
    }// end of checking confirmation
});// end of .a_remove_department click event

var bl_initial = true;
function filter_roles(i_department_id) {
try {
    i_department_id = Number(i_department_id);
    if (isNaN(i_department_id)!=true) {
        s_department_id = String(i_department_id);
        var s_url = "{{ url_for("main.roles_list", i_department_id=99999) }}".replace("99999", s_department_id);
        $.get(s_url, function(o_data) {
        if (typeof(o_data)=="object") {
            var s_html = "";
            $("#tbl_roles tbody").empty();
            if (o_data.length>0) {
                $.each(o_data, function(ix, r) {
                    // v_department_name, v_role_name, v_description, id
                    s_html = s_html + "<tr><td>" + r.v_department_name + "</td><td>" + r.v_role_name + "</td><td>" + r.v_description + "</td>";
                    s_html = s_html + "<td><a href=\"#" + r.id + "\" class=\"a_edit_role\">{{ icons.edit_svg(bl_quotes=False, s_label="edit role") }}</a>&nbsp;<a href=\"#" + r.id + "\" class=\"a_remove_role\">{{ icons.delete_svg(bl_quotes=False, s_label="remove role") }}</a></td></tr>";
                });// end of .each loop through roles
                $("#tbl_roles tbody").append(s_html);
                $("#tbl_roles").show();
                if (bl_initial!=true) { do_alert("Roles matching this type loaded"); } else { bl_initial = false; }
            } else {
                $("#tbl_roles").hide();
                var s_extra = (i_department_id==0) ? "" : " matching this department";
                if (bl_initial!=true) { do_alert("No roles" + s_extra); } else { bl_initial = false; }
            }// end of length check against o_data
        }// end of typeof check
        });// end of .get
    }// end of making sure valid numeric value passed
} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch
}// end of filter_roles function

var s_department_filter = "0";
{% if department_filter>0 %}
s_department_filter = String("{{ department_filter }}");
{% endif %}
var bl_wait = true;
$($("#sel_department_filter").children("option[value='" + s_department_filter + "']")[0]).prop("selected", true);
filter_roles(Number(s_department_filter));

$("#btn_department_filter").click( function(event) {
    try {
    if (bl_wait!=true||true) {
        var i_department_id = $("#sel_department_filter").val();
        filter_roles(i_department_id);
    }// end of checking if should wait
    bl_wait = false;
} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch
});// end of btn_department_filter click|sel_department_filter change event

$("#btn_add_role").click( function(event) {
    event.preventDefault();
    $("#dlg_role").html(s_dlg_role);
    $("#dlg_role").redraw();
    $("#dlg_role").dialog("open");
});// end of btn_add_role click event

$("#tbl_roles").on("click", ".a_edit_role", function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    $("#dlg_role").html(s_dlg_role);
    $("#dlg_role").redraw();
    var s_url = "{{ url_for("main.role_details", i_role_id=99999) }}".replace("99999", s_id);
    $.get(s_url, function(o_data) {
        if (typeof(o_data)=="object") {
            $("#hid_role_id").val(s_id);
            $("#sel_role_department").val(o_data.i_department_id);
            $("#txt_role_name").val(o_data.v_role_name);
            $("#txt_description").val(o_data.v_description);
            $("#dlg_role").redraw();
            $("#dlg_role").dialog("open");
        }// end of typeof check
    });// end of .get
});// end of .a_edit_role inside tbl_roles click event

$("#tbl_roles").on("click", ".a_remove_role", function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    var bl_confirm = confirm("Are you sure?");
    if (bl_confirm) {
        $("#hid_remove_role_id").val(s_id);
        document.getElementById("frm_remove_role").submit();
    }// end of checking confirmation
});// end of .a_remove_role inside tbl_roles click event



} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch

});// end of secondary document ready
</script>
<form action="{{ url_for("main.roles") }}" method="post" id="frm_remove_department">
{{ remove_department_form.csrf_token }}
{{ remove_department_form.hid_remove_department_id }}
</form>
<form action="{{ url_for("main.roles") }}" method="post" id="frm_remove_role">
{{ remove_form.csrf_token }}
{{ remove_form.hid_remove_role_id }}
</form>
{% endblock %}