{% extends 'badge/badge_layout.html' %}

 <title>{% block title %}Certificate Index{% endblock %}</title>

{% block content %}

			 


<div class="container mt-3">


	<div class="row" >
		<div class="col-lg-6 col-md-6 col-sm-12" style="background-color:white;">
			<h3 style="text-align:center;">CERTIFICATE FORM</h3>
		</div>
		<div class="col-lg-6 col-md-6 col-sm-12"style="background-color:skyblue;">
			<h3 style="text-align:center;">PREVIEW CERTIFICATE</h3>
		</div>

	</div>

	<div class="row">
		<div class="col-lg-6 col-md-6 col-sm-12"  style="background-color:white;">
			<form id="empty_list" action="{{url_for('cert.SaveCertificateIndex')}}" method="POST">   
			  

			<input type="hidden" name="html_data" id="html_data" value ="{{html_data}}">
            <input type="hidden" name="cerf_id" id="cerf_id" value="{{cerf_id }}">
				
					{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
						 <div class="alert alert-success text-align-center successMessage alert-dismissible" >
							 <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
							 <h6>{{ mesg|safe }}</h6>
						 </div>
				{% endfor %}

				 {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
						<div class="alert alert-danger text-align-center successMessage" id="successMessage">
							 <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
							 <h6>{{ mesg|safe }}</h6>  
						</div>
				 {% endfor %}
				 <div class="row">
						
						<!-- <div class="col-lg-8 col-md-8 col-sm-12 offset-lg-2 offset-md-2"> -->
							<div class="col-12">
							<label style="color:blue;">Certificate Type:</label><br>
							<input type="text" class="form-control"  name="cerf_typ" id="cerf_typ" value="Participation Certificate">
						</div>
						<div class="col-lg-2 col-md-2 col-sm-12"></div>
					</div><br>
					<div class="row">
						<!-- <div class="col-lg-2 col-md-2 col-sm-12"></div> -->
						<div class="col-12">
							<label style="color:blue";>Certificate Template:</label><br>
							<textarea class="form-control" rows="10" cols="30" name="cerf_div" id="cerf_div" required></textarea>
						</div>
						
					</div><br>
                    <div class="row">
                        <div class="col-12">
                    <label style="color:blue;" for="defalt_cerf_type">Default Certificate </label><br>
                    <input type="checkbox" id="is_active" name="is_active" value="1">
                        </div>
                    </div>
					<p>
                    <h3>Merge tag : </h3>
                    <ul style="padding-left: 20px; color:red">
                        <li>Delegate Name : &lcub;&lcub;data.full_name&rcub;&rcub;    </li>
                        <li>Delegate Role : &lcub;&lcub;data.role&rcub;&rcub;    </li>
                    </ul> 
                     </p>
					<div class="row">
						<div class="col-lg-2 col-md-0 col-sm-12"></div>
						<div class="col-lg-4 col-md-0 col-sm-12"></div>
						<div class="col-lg-2 col-md-6 col-sm-12">
							<input type="hidden" name="conf_id" id="conf_id" value={{conf_id}} >
                            <input type="hidden" name="conf_key" id="conf_key" value={{conf_key}} >
							<label for="save"></label><br>
							<input type="button" class="btn btn-success text-center" id="preview_btn" value="Preview">
						</div>
						<div class="col-lg-4 col-md-6 col-sm-12">
							<label for="save"></label><br>
							<button type="submit" class="btn btn-primary text-center" id="save_btn"> Save</button>
                            <input type="button" class=" btn btn-warning update_btn" style="display: none;" id="update_btn_1" value="Update">&nbsp;
                            <input type="reset" class="btn btn-danger clear_btn" style="display: none;" id="clear_btn_1" value="Clear">					
						</div>
					</div>
				
			<br>
			
			
			</form>
	 </div>
	 <div class="col-lg-6 col-md-6 col-sm-12" id="ShowTemplate" style="background-color:skyblue;text-align: center;" >
	 	 
	 </div>

	</div><br><br>
	<div class="row">
		<div class="col-sm-12" >
			<h3 style="text-align: center;" >CERTIFICATE TEMPLATE</h3>
  
      <table class="table table-striped " style="width:100%;">
            <thead class="table-dark">
               <tr>
                  <th scope="col">S.NO</th> 
                  <th scope="col">Certificate Type</th>
                  <th scope="col">Action</th>
               </tr>
            </thead>
            {% if data : %}
                   {% for row in data : %}
                     <tr>
                      <td data-label= "Role">{{loop.index}}</td>
                        <td data-label= "Role">{{row.cerf_typ or ''}}</td>
                        <td data-label = "">
                          
                           <button class="btn btn-link edit_btn" value={{row.cerf_id}}><span class="fa fa-edit" title="Edit"></button>
                        
                            <button class="btn btn-link delete_btn" id="delete_btn" value={{row.cerf_id}}><span class="fa fa-trash" style="color:red;" title="Delete" disabled></button> 
                        </td>
                      </tr>

                  {% endfor %}
            {% else :%}
		      <tr>
		        <td style="color:red;">Record not exist.</td>
		      </tr>

			{% endif %}
          
          
      </table>
		</div>
	</div>
	


</div>


{% endblock %}

{% block bottomscript %}


<script type="text/javascript">
        
       var BaseUrl = document.location.origin;

     $(document).ready( function (){

        var html_data = $("#html_data").val();
        $("#ShowTemplate").html(html_data);
        

        
        $("#preview_btn").click(function()
          {
              var cerf_div 	  = $("#cerf_div").val();
              var cerf_typ    = $("#cerf_typ").val();
               var conf_id    = $("#conf_id").val();
               var conf_key   = $("#conf_key").val();
               
            if(cerf_typ.length == 0)
               {
               	alert("Please type the cerf_typ");
                return false;
                
                 }

            else if(cerf_div.length == 0)
               {
                alert("Please type the template div");
                return false;
                 }
              
            else
                {
            $.ajax({

                      type: 'POST', // <-- get method of form
                      url: BaseUrl+"/preview_certificate_index", // <-- get action of form
                      data:  {
                      	
                        'cerf_div' :cerf_div,
                        'cerf_typ' :cerf_typ,
                        'conf_id'  : conf_id,
                        'conf_key' : conf_key
                        },
                      success: function(reposnse){
                         var data_1 = JSON.parse(reposnse);
                         var msg = data_1.msg;
                         var html_data = data_1.html_data;
                         
                        
                         if (msg == "success")
                         {
                            $("#ShowTemplate").empty();
                            $("#ShowTemplate").html(html_data);
                            

                           
                         }  
                         else
                         {
                            alert(msg);
                            return false;
                         }
                                       
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) { 
                          //location.reload();  
                        }                      
                    }); 
                    return false;   
                } 
        });

        
        

        



          $(document).on('click','.edit_btn',function(e)
          {
            
            e.preventDefault();
            var cerf_id = $(this).val();
           $.ajax({
                    type: 'GET', // <-- get method of form
                    url: BaseUrl+"/edit_certificate_index", // <-- get action of form
                    data:  {'cerf_id' : cerf_id},
                    success: function(reposnse){
                       var data_1    = JSON.parse(reposnse);
                       var msg       = data_1.msg;
                       var edit_data = data_1.cerf_data;
                       
                       if (msg == "success")
                       {
                        $("#cerf_div").val(edit_data.cerf_div);
                       $("#cerf_typ").val(edit_data.cerf_typ);
                       $("#cerf_id").val(edit_data.cerf_id);
                       var check_value = edit_data.is_active;
                       if (check_value == '1' ||  check_value == 1 )
                       {
                    
                        $("#is_active").prop('checked',true);

                       }
                       else
                        {
                        $("#is_active").removeAttr('checked');
                       }

                          
                                              
                       $("#save_btn").hide();
                       $(".update_btn").show();
                       $(".clear_btn").show();
                       }  
                       else
                       {
                          alert(msg);
                          return false;
                       }   
                         
                      },
                  });
          }); 

        // update btn start
         $(".update_btn").click(function()
          {

            var cerf_id = $("#cerf_id").val();
            var cerf_div = $("#cerf_div").val();
            var cerf_typ  = $("#cerf_typ").val();
            var is_active  = $('#is_active:checked').val();

               $.ajax({
                      type: 'POST', // <-- get method of form
                      url: BaseUrl+"/update_certificate_index", // <-- get action of form
                      data:  {
                        'cerf_id':cerf_id,
                        'cerf_div':cerf_div,
                        'is_active':is_active,
                        'cerf_typ':cerf_typ
                       },
                      success: function(reposnse){
                         var data_1 = JSON.parse(reposnse);
                         var msg = data_1.msg;
                         var html_data = data_1.html_data;
                         var status  = data_1.status;
                         if (status == 1)
                         {
                          alert("Successfully updated")
                            $("#ShowTemplate").empty();
                            $("#ShowTemplate").html(html_data);
                            
                         }  
                         else
                         {
                            alert(msg);
                            return false;
                         } 
                         $("#cerf_div").val('');
                         $("#cerf_typ").val('');
                         $("#cerf_id").val();
                         $("#is_active").removeAttr('checked');

                           
                         $("#save_btn").show();
                         $(".update_btn").hide();
                         $(".clear_btn").hide();
                                             
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) { 
                          //location.reload();  
                        }                      
                    });   
            return false;
        });


          $(document).on('click','.delete_btn',function(e)
          {
            e.preventDefault();
            if(confirm("Are you sure you want to delete this?"))
            {
            var cerf_id = $(this).val();
           $.ajax({
                    type: 'GET', // <-- get method of form
                    url: BaseUrl+"/delete_cerf_index", // <-- get action of form
                    data:  {
                        'cerf_id' : cerf_id,

                      },
                    success: function(reposnse){
                       var data_1    = JSON.parse(reposnse);
                       var msg       = data_1.msg;
                       
                       var html_data = data_1.html_data;                       
                       if (msg == "success")
                       {
                         $("#ShowTemplate").empty();
                         $("#ShowTemplate").html(html_data);  
                       }  
                       else
                       {
                          alert(msg);
                          return false;
                       }   
                         
                      },
                  });
             }
            else{
                return false;
            }


          }); 


          $(".clear_btn").click(function()
          {
            $("#cerf_div").val('');
            $("#cerf_typ").val('');
            $("#is_active").removeAttr('checked');

            
            $("#save_btn").show();
            $(".update_btn").hide();
            $(".clear_btn").hide();
          }); 



     });
</script>

{% endblock %}