{% extends base %}

{% block content %}
{% import "macros/action_icons_static.html" as icons %}
<span class="title"><h2>{% block title %}Add/edit record{% endblock %}</h2></span>
<div class="content">
{% if record_id>0 %}<div><a href="{{ url_for("main.uploads", i_record=record_id) }}">Record Uploads</a></div>{% endif %}
<form action="{{ url_for("main.capture_record", i_record=record_id) }}" method="post" id="frm_capture">
{{ form.csrf_token }}
{{ form.hid_record_id }}
<table class="multirow">
<tr>
<th><label>Position | Role</label></th><td><label for="sel_department_id">Department</label>&nbsp;<select id="sel_department_id" name="sel_department_id">
{% for department in departments %}
<option value="{{ department.id }}"{% if department_id==department.id %} selected{% endif %}>{{ department.v_department_name }}</option>
{% endfor %}
</select><br>
<label for = "sel_role_id">Role</label>&nbsp;<select id="sel_role_id" name="sel_role_id">
{% for role in roles %}
<option value="{{ role.id }}"{% if role_id==role.id %} selected{% endif %}>{{ role.v_role_name }}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<th><label for="{{ form.txt_name_1.id }}">{{ form.txt_name_1.label }}</label></th>
<td>{{ form.txt_name_1 }}</td>
</tr>
<tr>
<th><label for="{{ form.txt_name_2.id }}">{{ form.txt_name_2.label }}</label></th>
<td>{{ form.txt_name_2 }}</td>
</tr>
<tr>
<th><label for="{{ form.txt_name_3.id }}">{{ form.txt_name_3.label }}</label></th>
<td>{{ form.txt_name_3 }}</td>
</tr>
<tr>
<th><label for="{{ form.txt_surname.id }}">{{ form.txt_surname.label }}</label></th>
<td>{{ form.txt_surname }}</td>
</tr>
<tr>
<th><label for="{{ form.txt_id_number.id }}">{{ form.txt_id_number.label }}</label></th>
<td>{{ form.txt_id_number }}</td>
</tr>
<tr>
<th><label for="{{ form.sel_gender.id }}">{{ form.sel_gender.label }}</label></th>
<td>{{ form.sel_gender }}</td>
</tr>
<tr>
<th><label for="{{ form.txt_years_experience.id }}">{{ form.txt_years_experience.label }}</label></th>
<td>{{ form.txt_years_experience }}</td>
</tr>
<tr>
<th><label for="{{ form.sel_sap_k_level.id }}">{{ form.sel_sap_k_level.label }}</label></th>
<td>{{ form.sel_sap_k_level }}</td>
</tr>
<tr>
<th><label for="{{ form.txt_contact_number.id }}">{{ form.txt_contact_number.label }}</label></th>
<td>{{ form.txt_contact_number }}</td>
</tr>
<tr>
<th><label for="{{ form.txt_email.id }}">{{ form.txt_email.label }}</label></th>
<td>{{ form.txt_email }}</td>
</tr>
<tr>
<th>Languages</th>
<td id="td_languages">
<a href="#" id="a_add_language">{{ icons.add_svg(s_label="add language") }}</a><br>
<ol id="ol_languages">
{% if languages %}
{% for lang in languages %}
<li><input type="hidden" name="hid_langs" value="{{ lang.v_language_abbreviation }}"><input type="hidden" name="hid_lang_levels" value="{{ lang.si_level }}">{{ lang.v_language_abbreviation }} - {{ lang.v_language_name }} ({% if lang.si_level==0 %}basic{% elif lang.si_level==1 %}intermediate{% else %}proficient{% endif %})&nbsp;<a href="#" class="a_move_up" aria-label="move up">&uarr;</a>-<a href="#" class="a_move_down" aria-label="move down">&darr;</a>-<a href="#" class="a_remove_language">{{ icons.delete_svg(bl_quotes=False, s_label="remove language") }}</a></li>
{% endfor %}
{% endif %}
</ol>
</td>
</tr>
</table>
<input type="submit" name="btn_save" value="Save">
</form>
{% if record_id>0 %}
<div><a href="#" id="a_add_qualification">Add qualification</a></div>
{% if record_qualifications %}
<ul>
{% for qualification in record_qualifications %}
<li>{{ qualification.v_qualification_name }}&nbsp;<a href="#{{ qualification.id }}" class="a_remove_qualification">{{ icons.delete_svg(bl_quotes=False, s_label="remove qualification") }}</a></li>
{% endfor %}
</ul>
{% endif %}{# end of checking for existing qualification records #}
{% endif %}{# end of checking if existing record to then  render qualifications #}
</div><!-- end of div.content -->
{% from "macros/dialog.html" import dlg_prep with context %}
{{ dlg_prep(["dlg_language", "dlg_qualification"]) }}
{# dlg divs below #}
<div id="dlg_language" aria-labeledby="spn_language">
<span id="spn_language">Select language</span><br>
<form action="#" method="post" id="frm_language">
<label for="sel_language">Language</label>&nbsp;<select name="sel_language" id="sel_language">
{% set ns = namespace(selected=" selected") %}
{% for lang in all_languages %}
<option value="{{ lang.v_language_abbreviation }}"{{ ns.selected }}>{{ lang.v_language_name }}</option>
{% set ns.selected = "" %}
{% endfor %}
</select><br>
<label for="sel_level">Level</label><select id="sel_level" name="sel_level">
<option value="0" selected>basic</option>
<option value="1">intermediate</option>
<option value="2">proficient</option> 
</select><br>
</form>
<input type="button" id="btn_add_language" value="Add">
</div><!-- end of dlg_language -->
<div id="dlg_qualification" aria-labeledby="spn_qualification">
<span id="spn_qualification">Qualification</span><br>
<form action="{{ url_for("main.capture_record", i_record=record_id) }}" method="post" id="frm_qualification">
{{ qualification_form.csrf_token }}
{{ qualification_form.hid_record_qualification_id }}
{% set ns = namespace(selected=" selected") %}
<label for="sel_qualification_type">Type</label>&nbsp;<select name="sel_qualification_type" id="sel_qualification_type">
{% for qualification_type in qualification_types %}
<option value="{{ qualification_type.id }}"{{ ns.selected }}>{{ qualification_type.v_qualification_type }}</option>
{% set ns.selected = "" %}
{% endfor %}
</select><br>
{{ qualification_form.sel_qualification.label }}&nbsp;{{ qualification_form.sel_qualification }}<br>
{{ qualification_form.d_acquired.label }}&nbsp;{{ qualification_form.d_acquired }}<br>
<input type="submit" name="btn_save_qualification" value="Save">
</form>
</div><!-- end of dlg_qualification -->
<script type="text/javascript">
$(document).ready( function() {

try {

var s_dlg_client = $("#dlg_client").html();
var s_dlg_qualification = $("#dlg_qualification").html();

$("#frm_language").submit( function(event) {
    event.preventDefault();
});// end of frm_language submit event

$("#a_add_language").click( function(event) {
    event.preventDefault();
    $("#dlg_language").dialog("open");
});// end of a_add_language click event

$("#dlg_language").on("click", "#btn_add_language", function(event) {
    event.preventDefault();
    try {
    let s_abbreviation = $("#sel_language").val(), s_language = $($("#sel_language").children("option:selected")[0]).text(), s_level = $("#sel_level").val(), s_level_show = $($("#sel_level").children("option:selected")[0]).text();
    var s_html = "<li><input type=\"hidden\" name=\"hid_langs\" value=\"" + s_abbreviation + "\"><input type=\"hidden\" name=\"hid_lang_levels\" value=\"" + s_level + "\">" + s_language + " (" + s_level_show + ")&nbsp;<a href=\"#\" class=\"a_move_up\" aria-label=\"move up\">&uarr;</a>-<a href=\"#\" class=\"a_move_down\" aria-label=\"move down\">&darr;</a>-<a href=\"#\" class=\"a_remove_language\">{{ icons.delete_svg(bl_quotes=False, s_label="remove language") }}</a></li>";
    $("#ol_languages").append(s_html);
    $("#dlg_language").dialog("close");
    $("#dlg_language").redraw();
    do_alert("language added");
    } 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_add_language click event

$("#td_languages").on("click", ".a_remove_language", function(event) {
        event.preventDefault();
        $($(this).parent()).remove();
        do_alert("language removed");
});// end of .a_remove_language click event

$("#td_languages").on("click", ".a_move_up,.a_move_down", function(event) {
    event.preventDefault();
    var s_which = String($(this).attr("class")).split("_")[2];
    var i_count = $("#ol_languages").children("li").length;
    var i_index = $($(this).parent()).index();
    var i_position = i_index + 1;
    var o_li = $(this).parent();
    if (s_which=="up"&&i_position>1) {
        o_li = $(o_li).detach();
        $($("#ol_languages").children("li")[i_index-1]).before(o_li);
    } else if (s_which=="down"&&i_position<i_count) {
        o_li = $(o_li).detach();
        $($("#ol_languages").children("li")[i_index]).after(o_li);
    }
    $("#ol_languages").redraw();
});// end of .a_move_up or .a_move_down click event

$("#dlg_qualification").on("change", "#sel_qualification_type", function(event) {
    var s_type_id = $(this).val();
    var i_type_id = Number(s_type_id);
    if (isNaN(i_type_id)!=true) {
    s_type_id = String(i_type_id);
        $("#sel_qualification").empty();
        var s_url = "{{ url_for("main.qualifications_list", i_type_id=99999) }}".replace("99999", s_type_id);
        $.get(s_url, function(o_data) {
        if (typeof(o_data)=="object") {
            if (o_data.length>0) {
                var s_html = "";
                var s_selected = " selected";
                $.each(o_data, function(ix, q) {
                    // id, v_qualification_type, v_qualification_name, v_description
                    s_html = s_html + "<option value=\"" + String(q.id) + "\"" + s_selected + ">" + q.v_qualification_name + "</option>";
                    s_selected = "";
                });// end of .each loop through qualifications
                $("#dlg_qualification #sel_qualification").append(s_html);
            }// end of length check against o_data
        }// end of typeof check
        });// end of .get
    }// end of making sure valid numeric value passed
});// end of sel_qualification_type change event

$("#a_add_qualification").click( function(event) {
    event.preventDefault();
    $("#dlg_qualification").html(s_dlg_qualification);
    $("#dlg_qualification").redraw();
    $("#dlg_qualification").dialog("open");
});// end of a_add_qualification click event

function select_department_role(i_department_id, i_role_id) {
try {
    i_department_id = (isNaN(i_department_id)) ? 0 : Number(i_department_id);
    i_role_id = (isNaN(i_role_id)) ? 0 : Number(i_role_id);
    s_department_id = String(i_department_id); s_role_id = String(i_role_id);
    if ($("#sel_department_id").children("option[value='" + s_department_id + "']").length>0) {
        $("#sel_department_id").val(s_department_id);
        if ($("#sel_department_id").prop("selectedIndex")>=0) {
            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") {
                    $("#sel_role_id").empty();
                    var s_html = "";
                    $.each(o_data, function(ix, rol) {
                        s_html = s_html + "<option value=\"" + String(rol.id) + "\"";
                        if (i_role_id==rol.id) { s_html = s_html + " selected"; }
                        s_html = s_html + ">" + String(rol.v_role_name) + "</option>";
                    });// end of .get to populate role options
                    $("#sel_role_id").append(s_html);
                    $("#sel_role_id").redraw();
                }// end of typeof check against o_data
});// end of .get for pulling roles listing
        }// end of checking selectedIndex
    }//end of maing sure department can be selected
} 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 select_department_role function

$("#sel_department_id").change( function(event) {
try {
    var s_department_id = String($("#sel_department_id").val());
    select_department_role(Number(s_department_id), 0);
} 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 sel_department_id change event

$(".a_remove_qualification").click( function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    var bl_confirm = confirm("Are you sure - will not clear uploads?");
    if (bl_confirm) {
        $("#hid_remove_qualification_id").val(s_id);
        document.getElementById("frm_remove_qualification").submit();
    }// end of confirmation check
});// end of .a_remove_qualification 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 additional document ready
</script>
<form action="{{ url_for("main.capture_record", i_record=record_id) }}" method="post" id="frm_remove_qualification">
{{ remove_qualification_form.csrf_token }}
{{remove_qualification_form.hid_remove_qualification_id }}
</form>
{% endblock %}