Sindbad~EG File Manager

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

<style type="text/css">

</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 class="row">
            <div class="col-sm-8">
                <input type="text"  class="form-control ids" name="ids" id="ids" value="" />
            </div>
            <div class="col-sm-4">
                <button class="btn btn-primary btn-sm" style="float:right;" data-toggle="modal" data-target="#exampleModal" id="unsign_all_btn" onclick="unsign_all_btn()">Unsignup All</button> 
            </div>
        </div>
        
        
        </div>
        <div class="row mobile-responsive"  >
            <div class="col-lg-12 col-md-12 col-sm-12">
                <table class="table mt-2 " id="myTable" style="width: 100% !important;">
                    <input type="hidden" name="conf_id" id="conf_id" value="{{conf.conf_id}}" />
                    <input type="hidden" name="conf_key" id="conf_key" value="{{conf.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<br><input type="checkbox" class="select_all mr-3" name="select_all" id="select_all" /><label for="select_all" style="color: #ffffff;">Select All</label></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="btn close popup_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  popup_close" 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: 100,
    });
    // $("#myTable").DataTable();


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

        if (total_check_boxes == total_checked_boxes) {
            $(".select_all").prop("checked", true);
        } else {
            $(".select_all").prop("checked", false);
        }
        $('#ids').val(test.join(","));
        $("#unsign_all_btn").show();

    });

    $(".select_all").on("change", function() {
        if ($(this).prop('checked') == true) {
            //do something
            var test = new Array();
            $(".select").prop("checked", true);
            $(".select:checked").each(function(e) {
                test.push($(this).val());
                
            });
            $('#ids').val(test.join(","));
            $("#unsign_all_btn").show();
        } else {
            $(".select").prop("checked", false);
            $('#ids').val('');
            $("#unsign_all_btn").hide();
        }

    });

    $(document).on("click", ".popup_close", function (e) {
        e.preventDefault();
        $("#exampleModal").modal("hide");
    });

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

        if (reason.length > 1 || reason.length ==0) 
        {
            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);
    $("#exampleModal").modal("show");

}



function unsign_all_btn() {
    var delegate_nos = $("#ids").val();
    var delegate_no = $("#delegate_no").val(delegate_nos);
    $("#exampleModal").modal("show");

}
    

</script>

{% endblock %}