{% extends 'memberapp_users/layout.html' %}
{% block head %}
  
{% endblock %}
{% block title %}TRAINING{% 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="usertraining_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><h2 class="font-weight-bold ">Training in endoscopic surgery/procedures</h2></label>
            </div>
        </div>
        <input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
        <input type="hidden" name="ut_id" id="ut_id" value="{{ut_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-6 form-group">
                <label>Institution:</label>
                <input type="text" class="form-control" name="training_place"  id="training_place" />
            </div>
            <div class="col-md-6 form-group">
                <label>From(Date):</label>
                <input type="text" class="form-control"  name="from_date"  id="from_date" placeholder="DD-MM-YYYY" />
            </div>
            <div class="col-md-6 form-group">
                <label>Duration</label>
                <input type="text" class="form-control" name="duration" id="duration">
            </div>
            <div class="col-md-6 form-group">
                <label>Teacher</label>
                <input type="text" class="form-control" name="teacher" id="teacher">
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-12">
                <input type="button" value="Add" name="add_submit" id="add_submit_t" class="btn btn-primary  form-input mr-4">
                <input type="button" value="Clear" name="clear_submit" id="clear_submit_t" class="btn btn-danger form-input">
            </div>    
        </div>
        <br>
        <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_train" class="btn btn-primary btn-lg float-right form-input">
        </div>
    </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.1/moment.min.js"></script>  
{% endblock %}
{% block script %}
<script type="text/javascript">
    
var BaseUrl = document.location.origin     
var user_id=$("#user_id").val();
$('#from_date').mask('00-00-0000');
var society_id = "{{society_id}}";
var society_key = "{{society_key}}";

$(document).ready( function ()
{
    usertraining()  
    $("#submit_train").click(function()
    {
        $("form").validate().cancelSubmit = true;
        $("form").submit()
    })
    $("#add_submit_t").click(function()
    {   
        validate_usertraining_form()
        if(!$("#usertraining_form").valid())
        {
            return false  
        }
        var user_id     = $("#user_id").val();
        var ut_id       = $("#ut_id").val();
        var institution = $("#training_place").val();
        var from_date   = $("#from_date").val();
        var duration    = $("#duration").val();
        var teacher     = $("#teacher").val();

        $("#ut_id").val(ut_id)


        $.ajax({
            type: 'POST', 
            url: BaseUrl+"/insert_training/"+society_id+"/"+society_key, 
            data: {
                'user_id'     : user_id,
                'ut_id'       : ut_id || 0,
                'institution' : institution,
                'from_date'   : from_date,
                'duration'    : duration,
                'teacher'     : teacher
            },
            dataType: 'html',
            success: function(data)
                {
                    $("#showtable").html(data)
                    clearall()              
                },
            error: function(XMLHttpRequest, textStatus, errorThrown) 
                {

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


function usertraining() 
{
    $.ajax({
        type: 'GET', 
        url: BaseUrl+"/get_training_by_user/"+society_id+"/"+society_key,  
        data:{'user_id':user_id}, 
        dataType: 'html',
        success: function(data){
          $("#showtable").html(data)
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {} 
                                            
    });                  
}

jQuery.validator.addMethod("validDate", function(value, element) {
    var check   = moment(value,"DD-MM-YYYY");    
    var isvalid =  this.optional(element) || check.isValid();
    if (isvalid == true)
    {   
        var year  = check.format('YYYY');
        if (year == "0000" )
        {
            isvalid = false; 
        }
    }
    return isvalid
    }, "Please enter a valid date in the format DD-MM-YYYY");

function validate_usertraining_form()
{
    errorclass : 'error',
    $("#usertraining_form").validate({
        rules : {
                training_place    : "required",
                from_date         : {
                    required : true,
                    validDate : true
                },
                duration          : "required",
                teacher           : "required" 
                                
        },
        messages : {
                training_place     : "Please enter your Training place",
                from_date          : {
                    required : "Please enter your from date"
                },
                duration           : "Please enter your Training duration",
                teacher            : "Please enter your teacher name"
                 
        },
             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() 
{
    $("#ut_id").val(0);
    $("input[type=text]").val('');
}

                
</script>
    
{% endblock %}