{% extends 'badge/badge_layout.html' %}
{% block style %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />

<style type="text/css">
.dataTable no-footer{
    width:100% !important;
}
  @media screen and (max-width: 600px) {

  .mobile-responsive table {
    border: 0;
    border-collapse: collapse;
  }

 .mobile-responsive table thead {
    display:none;
  }
  .mobile-responsive table th {
    display:none;
  }
  
  
 .mobile-responsive table tr {
    margin-bottom: 20px;
    display: block;
    border-bottom: 2px thin #faf5f5;
    box-shadow: 2px 2px 1px #dadada;
    border-collapse: collapse;

  }

 .mobile-responsive table td {
    display: block;
    text-align: right;
    font-size: 15px;
    border-collapse: collapse;
    padding: 25px;

  }

 .mobile-responsive table td:last-child {
    border-bottom: 0;
  }

 .mobile-responsive table td::before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    
  }

  /* .mobile-responsive tbody{
    line-height:0!important;
  } */
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  /*div.content {margin-left: 0;}*/
  .sidebar a {
    text-align: center;
    float: none;
  }
}
</style>
{% endblock %}
{% block content %}
<div class="container mt-2" >
    <div class="card">
        <div class="card-header text-center" style="font-size: 25px;">Signed Delegate Details</div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 mobile-responsive">
                <table class="table mt-2 " id="myTable" style="width: 100% !important;">
                    <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="html_data" id="html_data" value="{{html_data}}" />
                    <thead style="background-color: #072645; border-color: #dee2e6; color: #fff;">
                        <tr>
                            <th>Delegate No</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Mobile</th>
                            <th>Unsign</th>
                        </tr>
                    </thead>
                    <tbody id="unsign_table_body"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Remove signup record.</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" class="form-control" name="delegate_no" id="delegate_no" value="">
        <label>Reason</label><input type="text" class="form-control" name="reason" id="reason">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="save_btn" >Save Reason</button>
      </div>
    </div>
  </div>
</div>



{% endblock %}

{% block bottomscript %}
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script type="text/javascript">
   var BaseUrl = document.location.origin;
$(document).ready(function () {
    var html_data = $("#html_data").val();
    $("#unsign_table_body").html(html_data);

    $("#myTable").dataTable({
        iDisplayLength: 10,
    });
    // $("#myTable").DataTable();

    $(document).on("click","#save_btn",function (e) {
        e.preventDefault();
        var reason = $("#reason").val();

        if (reason.length > 1) 
        {
            var delegate_no = $("#delegate_no").val();
            var conf_id = $("#conf_id").val();
            var conf_key = $("#conf_key").val();
            $.ajax({
                type: "GET", // <-- get method of form
                url: BaseUrl + "/" + conf_id + "/" + conf_key + "/remove_signup", // <-- get action of form
                data: { 'delegate_no': delegate_no, 'reason': reason },

                success: function (data) {
                    var data_1    = JSON.parse(data);
                    var status    = data_1.status;
                    var msg       = data_1.msg;
                    var html_data = data_1.html_data;
                    if (status == 1)
                         {
                            $("#unsign_table_body").empty();
                            $("#unsign_table_body").html(html_data);
                            alert(msg);
                            $("#delegate_no").val(0);
                            $("#exampleModal").modal("hide");
                            $("#reason").val("");

                            return true;
                        } 
                        else 
                        {
                           alert(msg);
                           return false;
                        }
                },
            });
        }
         else 
         {
            alert("Please type the Reason ....");
            return false;
         }
    });
});


function unsign_btn(delegate_no) {
    var delegate_no = $("#delegate_no").val(delegate_no);
}

    

</script>

{% endblock %}