{% extends 'badge/badge_layout.html' %}
{% block style %}
<style >
/*this added for two tables */

.table-container {
    display: flex;
  }

  .table {
    flex: 1;
    margin: 10px;
    border-collapse: collapse;
    border: 1px solid #ccc;
  }
  .table th,
  .table td {
    padding: 8px;
    border: 1px solid #ccc;
  }
</style>
{% endblock %}
{% block content %}

<input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}">
<input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}">
<input type="hidden" name="del_table_name" id="del_table_name" value="{{del_table_name}}">
<div class="table-container mobile-responsive">
		<table id="delegate_table" class="table">
				<thead style="background-color: #072645; border-color: #dee2e6; color: #fff;">
						<tr>
								<th colspan="4">
										<h4 class="text-center">Delegate Table Data</h4>
								</th>
						</tr>
						<tr>
								<th colspan="4">
										<input type="checkbox" id="del_select_all" title="select all" value="del_select_all" />
										<input type="hidden" id="del_nos" name="del_nos"  value=""/>
										<label for="del_select_all" style="color: yellow;padding-right: 50px;" title="select all">Select all</label>
										<button type="button" class="btn btn-secondary update_del_table_btn" title="Update in Delegate Table" style="border-radius: 50px;">Update in Delegate Table</button>
								</th>
						</tr>

						<tr>
								<th>Delegate No</th>
								<th>Name</th>
								<th>Email</th>
								<th>Role</th>
						</tr>
				</thead>

				<tbody>
						{% if delegates_data : %} {% for row in delegates_data %}
						<tr>
								<td data-label="Delegate NO"><input type="checkbox" id="del_checkbox" class="select"  value="{{row.delegate_no}}" />&nbsp;&nbsp;&nbsp;
									<input type="hidden" class="delegate_no" id="delegate_no" value="{{row.delegate_no}}">{{row.delegate_no or '-'}}</td>
								<td data-label="Name">{{row.prefix or ''}} {{row.full_name or '-'}}</td>
								<td data-label="Email">{{row.email or '-'}}</td>
								<td data-label="Role"><input type="hidden" class="role" id="role" value="{{row.role}}">{{row.role or '-'}}</td>
						</tr>
						{% endfor %} {% else : %}
						<tr>
								<td colspan="5" style="color: red; text-align: center;">Record not available</td>
						</tr>
						{% endif %}
				</tbody>
		</table>
		<table id="conf_delegate_table" class="table">
				<thead style="background-color: #072645; border-color: #dee2e6; color: #fff;">
						<tr>
								<th colspan="4">
										<h4 class="text-center">Conference Delegate Table Data</h4>
								</th>
						</tr>
						<tr>
								<th colspan="4">
										<input type="checkbox" id="conf_select_all" title="select-all" value="conf_select_all" />
										<input type="hidden" id="c_del_nos" name="c_del_nos"  value=""/>
										<label for="conf_select_all" style="color: yellow;padding-right: 50px;" title="select all" >Select all</label>
										<button type="button" class="btn btn-primary update_conf_del_table_btn" title="Update in Conference Delegate Table" >Update in Conference - Delegate Table</button>
								</th>
						</tr>
						<tr>
								<th>Delegate No</th>
								<th>Name</th>
								<th>Email</th>
								<th>Role</th>
						</tr>
				</thead>
				<tbody>
						{% if delegates_data : %} {% for row in delegates_data %}
						<tr>
								<td data-label="Delegate No"><input type="checkbox" id="conf_del_checkbox" class="select_conf" value="{{row.cd_delegate_no}}" />&nbsp;&nbsp;&nbsp;
									<input type="hidden" class="cd_delegate_no" id="cd_delegate_no" value="{{row.cd_delegate_no}}">{{row.cd_delegate_no or '-'}}</td>
								<td data-label="Name">{{row.cd_prefix or ''}} {{row.cd_full_name or '-'}}</td>
								<td data-label="Email">{{row.cd_email or '-'}}</td>
								<td data-label="Role"><input type="hidden" class="cd_role" id="cd_role" value="{{row.cd_role}}">{{row.cd_role or '-'}}</td>
						</tr>
						{% endfor %} {% else : %}
						<tr>
								<td colspan="4" style="color: red; text-align: center;">Record not available</td>
						</tr>
						{% endif %}
				</tbody>
		</table>
</div>
{% endblock %}
{% block bottomscript %} 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var BaseUrl = document.location.origin;
	$(document).ready(function() {
		$(".update_conf_del_table_btn").hide();
		$(".update_del_table_btn").hide();

// delegate table checkbox start

		$("input[class='select']").on("change", function () {
			 var total_check_boxes = $("input[class='select']").length;
       var total_checked_boxes = $("input[class='select']:checked").length;
       var test = new Array();
       $("input[class='select']:checked").each(function() {
          test.push($(this).val());
       });

       $('#del_nos').val(test.join(","));
		
		if($(".select").prop('checked') == true){			
			$(".update_del_table_btn").show();
       if (total_check_boxes === total_checked_boxes) {
          $("#del_select_all").prop("checked", true);
       }
       else {
          $("#del_select_all").prop("checked", false);
       }
     }

     else{
     		if (total_check_boxes === total_checked_boxes) {
          $("#del_select_all").prop("checked", true);
          $(".update_del_table_btn").hide();
       }
       else if (total_checked_boxes === 0){
       		$(".update_del_table_btn").hide();
				}
       else {
       		$(".update_del_table_btn").show();
          $("#del_select_all").prop("checked", false);
       }
     }
    });

		$("#del_select_all").change(function() {
			if($("#del_select_all").prop('checked') == true){
				$(".update_del_table_btn").show();
   			$("input[class='select']").prop('checked', $(this).prop("checked"));
				var test = new Array();
      	$("input[class='select']:checked").each(function() {
        	test.push($(this).val());
       		$('#del_nos').val(test.join(","));

				});
			}
			else{
				$('#del_nos').val('');
				$(".select").prop("checked", false);
				$(".update_del_table_btn").hide();
			}
    });
	// end

// conference delegate table start
	$("input[class='select_conf']").on("change", function () {
			 var total_check_boxes = $("input[class='select_conf']").length;
       var total_checked_boxes = $("input[class='select_conf']:checked").length;
       var test = new Array();
       $("input[class='select_conf']:checked").each(function() {
          test.push($(this).val());
       });

       $('#c_del_nos').val(test.join(","));
		
		if($(".select_conf").prop('checked') == true){			
			$(".update_conf_del_table_btn").show();
       if (total_check_boxes === total_checked_boxes) {
          $("#conf_select_all").prop("checked", true);
       }
       else {
          $("#conf_select_all").prop("checked", false);
       }
     }

     else{
     		if (total_check_boxes === total_checked_boxes) {
          $("#conf_select_all").prop("checked", true);
          $(".update_conf_del_table_btn").hide();
       }
       else if (total_checked_boxes === 0){
       		$(".update_conf_del_table_btn").hide();
				}
       else {
       		$(".update_conf_del_table_btn").show();
          $("#conf_select_all").prop("checked", false);
       }
     }
    });

		$("#conf_select_all").change(function() {
			if($("#conf_select_all").prop('checked') == true){
				$(".update_conf_del_table_btn").show();
   			$("input[class='select_conf']").prop('checked', $(this).prop("checked"));
				var test = new Array();
      	$("input[class='select_conf']:checked").each(function() {
        	test.push($(this).val());
       		$('#c_del_nos').val(test.join(","));

				});
			}
			else{
				$('#c_del_nos').val('');
				$(".select_conf").prop("checked", false);
				$(".update_conf_del_table_btn").hide();
			}
    });
// end
});


	$(document).on("click", ".update_conf_del_table_btn", function (e) {
		 e.preventDefault();
		if(confirm("Are you sure you want to update this record?"))
        {    
            var delegate_no     = $("#c_del_nos").val();
            var conf_id         = $("#conf_id").val();
            var conf_key        = $("#conf_key").val();
            var  del_table_name = $("#del_table_name").val();
            
            $.ajax({
                type: "POST", // <-- get method of form
                url: BaseUrl +"/"+conf_id+"/"+conf_key+"/role_update_in_conf_del_table",
                data: {
                    'delegate_no' : delegate_no,
                    'del_table_name' : del_table_name
                },
                success: function (reposnse) {
                    var data_1 = JSON.parse(reposnse);
                    var status = data_1.status;
                    var msg = data_1.msg;
                    if (data_1.status== 1) {
                        alert("Updated Sucessfully..");
                        window.location.reload();
                    } else {
                    	alert(msg);
                        return false;
                    }
                    
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {},
            });
	    }        
	});

	$(document).on("click", ".update_del_table_btn", function (e) {
		 e.preventDefault();

		if(confirm("Are you sure you want to update this record?"))
        {
            var delegate_no     = $("#del_nos").val();
            var conf_id         = $("#conf_id").val();
            var conf_key        = $("#conf_key").val();
       
            var  del_table_name = $("#del_table_name").val();

            $.ajax({
                type: "POST", // <-- get method of form
                url: BaseUrl +"/"+conf_id+"/"+conf_key+"/role_update_in_del_table",
                data: {
                    'delegate_no' : delegate_no,
                    'del_table_name' : del_table_name
                },
                success: function (reposnse) {
                    var data_1 = JSON.parse(reposnse);
                    var status = data_1.status;
                    var msg = data_1.msg;
                    if (data_1.status== 1) {
                        alert("Updated Sucessfully..");
                        window.location.reload();
                    } else {
                    	alert(msg);
                        return false;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {},
            });
        }
    });
</script>
{% endblock %}