{% extends 'memberapp_users/layout.html' %}
{% block head %}
  
{% endblock %}
{% block title %}EXPERIENCE{% endblock %} 
{% block content %} 

{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}        
<div class="alert alert-success text-center alert-dismissible" id="successMessage" >
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg|safe }}</h4>
</div>
{% endfor %}

{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
<div class="alert alert-danger text-center alert-dismissible" id="successMessage" >
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <h4><img src="/static/images/wrong_img.png" alt="wrong"height="21" width="21">{{ mesg }}</h4>
</div>
{% endfor %}
    <form method="POST" id="userwork_form" action="{{url_for('member.postStep',user_id=encrypt_user_id,society_id=society_id,society_key=society_key)}}">
        <div class="row ">
            <div class="col-md-12 text-center">
                <label><h3 class="font-weight-bold">EXPERIENCE</h3></label>
            </div>
        </div>
        {% if society_id|int == 2 :%}
        <div class="row ">
            <div class="col-md-12 text-center">
                <label><h4 class="font-weight-bold text-danger">[This data is not mandatory]</label>
            </div>
        </div>
        {% endif %}
        <input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
        <input type="hidden" name="work_id" id="work_id" value="{{work_id or 0}}">
        <input type="hidden" id="cur_step" name="cur_step" value="{{cur_step}}">
        <input type="hidden" id="pre_step" name="pre_step" value="{{pre_step}}">
        <input type="hidden" id="nxt_step" name="nxt_step" value="{{nxt_step}}">
        <div class="row">
            <div class=" col-md-4 form-group">
                <label>Institution/Hospital type:</label>
                <select class="form-control"id="work_type_id"name="work_type_id"  >
                    <option value = "" id = "select">Select Institution/Hospital type</option>
                    {% if work_types %}
                    {% for work_type in work_types %}
                        <option value = "{{work_type.work_type_id}}"> {{work_type.work_type}} </option>
                    {% endfor %}
                    {% endif %}
                </select>
            </div>
            {% if society_id|int == 3 %}
            {% if position_types %}
            <div class=" col-md-4 form-group">
                <label>Position:</label>
                <select class="form-control"id="position_type_id"name="position_type_id"  >
                    <option value = "" id = "select">Select Position Type</option>
                    {% if position_types %}
                    {% for position_type in position_types %}
                        <option value = "{{position_type.position_type_id}}"> {{position_type.position_type}} </option>
                    {% endfor %}
                    {% endif %}
                </select>
            </div>
            {% endif %}
            {% endif %}
            <div class=" col-md-4 form-group">
                <label>Status:</label>
                <div class="dropdown" >
                    <select class="form-control"id="work_status"name="work_status" onchange="onchange_status()">
                        <option value ="" id = "select">Select Status</option>
                        <option value="Current">Current</option>
                        <option value="Past" >Past</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class=" col-md-3 form-group">
                <label>Work Since:</label>
                <select class="form-control"id="work_since"name="work_since"  >
                    <option id = "select" value="">Year</option>     
                </select>
            </div>
            <div class=" col-md-3 form-group " id="div_work_until" style="display: none;">
                <label>Work Until:</label>
                    <select class="form-control"id="work_until"name="work_until"  >
                        <option id = "select" value="">Year</option>     
                    </select>
                </div>
            <div class=" col-md-6 form-group">
                <label>Institution / Hospital Name:</label>
                <input type="text" class="form-control trim" name="work_place"  id="work_place" autofocus/>
            </div> 
        </div>
        <div class="row text-center">
            <div class="col-md-12">
                <input type="button" value="Add" name="add_submit" id="add_submit" class="btn btn-primary  form-input mr-4">
                <input type="button" value="Clear" name="clear_submit" id="clear_submit" class="btn btn-danger form-input">
            </div>    
        </div>
        <br>
        <div class="row text-center">
            <div class=" col-md-12 form-group">
                <label><h3 class="font-weight-bold"><b>Your Experience</b></h3></label>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" id="showtable"></div>
        </div>
    </form>
    <div class="row">
        <div class="col-md-12">
            <a  href="{{url_for('member.getStep',user_id=encrypt_user_id,step_no=pre_step,society_id=society_id,society_key=society_key) }}" class="btn btn-lg btn-secondary">Previous</a>
            <input type="button" value="Next" name="submit_update" id="submit" class="btn btn-primary btn-lg float-right form-input">
        </div>
    </div>
   
{% endblock %}
{% block script %}
<script type="text/javascript">
    
var BaseUrl = document.location.origin     
var user_id=$("#user_id").val();
var society_id = "{{society_id}}"
var society_key = "{{society_key}}"
$(document).ready( function ()
{
    userwork()  
    $("#submit").click(function()
    {
        $("form").validate().cancelSubmit = true;
        $("form").submit()
    })
    $("#add_submit").click(function()
    {   
        validate_userwork_form()
        if(!$("#userwork_form").valid())
        {
            return false  
        }
        var user_id           = $("#user_id").val();
        var work_id           = $("#work_id").val();
        var work_type_id      = $("#work_type_id").val();
        var work_status       = $("#work_status").val();
        var work_since        = $("#work_since").val();
        var position_type_id  = $("#position_type_id").val();
        // var work_until        = $("#work_until").val();
        var work_place        = $("#work_place").val();
        $("#work_id").val(work_id)
        if($("#work_until").val().length === 0){
            var work_until = 0;
        }
        else{
            var work_until = $("#work_until").val();
        }
        $.ajax({
            type: 'POST', 
            url: BaseUrl+"/insert_work/"+society_id+"/"+society_key, 
            data: {
                'user_id'         : user_id,
                'work_id'         : work_id || 0,
                'work_type_id'    : work_type_id,
                'position_type_id': position_type_id,
                'work_status'     : work_status,
                'work_since'      : work_since,
                'work_until'      : work_until,
                'work_place'      : work_place,
            },
            dataType: 'html',
            success: function(data)
                {
                    $("#showtable").html(data)
                    clearall()              
                },
            error: function(XMLHttpRequest, textStatus, errorThrown) 
                {

                } 
        });
        return false;              
    })
    
    $("#clear_submit").click(function() {
        clearall()
    })  
});

$(document).ready(function()
{
    var Years = $("#work_since");
    var currentYear = (new Date()).getFullYear();
    for (var i =currentYear ; i >=1950 ; i--) {
        var option = $("<option />");
        option.html(i);
        option.val(i);
        Years.append(option);
    }
});

$(document).ready(function()
{
    var Years = $("#work_until");
    var currentYear = (new Date()).getFullYear();
    for (var i =currentYear ; i >=1950 ; i--) {
        var option = $("<option />");
        option.html(i);
        option.val(i);
        Years.append(option);
    }
});
function userwork() 
{
    $.ajax({
        type: 'GET', 
        url: BaseUrl+"/get_work_by_user/"+society_id+"/"+society_key,  
        data:{'user_id':user_id}, 
        dataType: 'html',
        success: function(data){
          $("#showtable").html(data)
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {} 
                                            
    });                  
}  
function validate_userwork_form()
{
    errorclass : 'error',
    $("#userwork_form").validate({
        rules : {
                work_type_id    : "required",
                position_type_id    : "required",
                work_status     : "required",
                work_since      : "required",
                work_until      : {
                                    required    : true,
                                    greaterThan : "#work_since" 
                                  },
                work_place      : "required",
        },
        messages : {
                work_type_id     : "Please select your institution/hospital type",
                position_type_id : "Please select your position type",
                work_status      : "Please select your status",
                work_since       : "Please select your since year",
                work_until       : {
                                    required:"Please select your until year",
                                    greaterThan:"Until year must be greater than since year"
                                    },
                work_place      : "Please enter your institution/hospital"
                 
        },
             highlight: function(element) {
                 $(element).parent().addClass('error')
             },
         
             unhighlight: function(element) {
                 $(element).parent().removeClass('error')
             },
     
             //submitHandler: function(form) {
               //  form.submit();
             //},
             invalidHandler: function(form, validator) {

                if (!validator.numberOfInvalids())
                    return;

                $('html, body').animate({
                scrollTop: $(validator.errorList[0].element).offset().top
                }, 300);
                StopProgress();

            }
    })
            
}

function clearall() 
{
    $("#work_id").val(0);
    $("input[type=text]").val('');
    $("select").val('');
    onchange_status();
}

function onchange_status()
{
    var status=$("#work_status").val()
    if(status=='Past')
    {
        $("#div_work_until").show()
    }
    else
    {
        $("#div_work_until").hide()
        $("#work_until").val("")
    }
}

//validation for greater than since year   
jQuery.validator.addMethod("greaterThan", 
function(value, element, params) {

    if (!/Invalid|NaN/.test(new Date(value))) {
        return new Date(value) >= new Date($(params).val());
    }

    return isNaN(value) && isNaN($(params).val()) 
        || (Number(value) >= Number($(params).val())); 
},'Must be greater than {0}.');                  
</script>
    
{% endblock %}