{% extends 'badge/badge_layout.html' %}
{% block style %}
<link rel="stylesheet" type="text/css" href="/static/css/selectize.bootstrap3.css">
{% endblock %}
{% block content %}
  
   {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %} 
  <div class="row"> 
      <div class="col-sm-4"></div>
        <div class="col-sm-4">
    <div class=" text-center" id="successMsg" >
      <h6 class="alert alert-success  alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
    </div>
     <div class="col-sm-4"></div>
      </div>
    </div>
  {% endfor %} 
  {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %} 
     <div class="row"> 
      <div class="col-sm-4"></div>
        <div class="col-sm-4">
          <div class="text-center" id="successMsg" >
          <h6 class="alert alert-danger  alert-dismissible">
           <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{{ mesg }}</h6>
          </div>
          <div class="col-sm-4"></div>
      </div>
    </div>
  {% endfor %}     

<form id="delegate_list"  action="{{url_for('badge.DelegateListPirnt')}}" method="POST" >
<div class="container mt-3">
  <!-- <h5>Session Map</h5> -->
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
         
                  <div class="row">
                    <div class="col-sm-4">
                         <label >Badge Type:</label><br>
                         <div class="input-group ">
                            <select class = "form-control" id = "role" name = "role" >
                              <option value = "" id = "select" disabled selected>--SELECT--</option>
                                 {% if role_data %}
                                  {% for row in role_data %}
                                     <option value = "{{row.b_role}}"> {{row.b_role}} </option>
                                  {% endfor %}
                                {% endif %}
                            </select>
                          </div>
                        </div>
                        <div class="col-sm-4">
                         <label >Session Number:</label><br>
                         <div class="input-group ">
                            <input type="text" class="form-control" name="session_id" id="session_id" placeholder="Session ID">
                          </div>
                        </div>
                    </div>
                     
                    <div class="row">
                       <div class="col-lg-12 text-left">
                        <br/><br/><br/>
                        <input type="hidden" name="conf_id" id="conf_id" value="{{conf_id}}" >
                        <input type="hidden" name="conf_key" id="conf_key" value="{{conf_key}}" >
                         <button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-filter" title="Filter"></i>  Add to session</button>
                        <input type="button" class="btn btn-danger"  name="close" id="close" value="Close"  title="Close">
                        <br/><br/><br/>
                      </div>
                    </div>
               
      </div>
    </div>
  </div>
 </div>
</div>



</form>

{% endblock %}

{% block bottomscript %}
<script  type= "text/javascript" src="/static/js/selectize.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $('#panel-body').show();
    $('#toggle-menu').click(function(){
          $('#panel-body').show();
        });
    $('#close').click(function(){
          $('#panel-body').show();
        });

    $("#role").selectize({
      maxItems: 7,
       });

    $(document).on('click', 'div.selectize-input div.item', function(e) {
    var select = $('#role').selectize();
    var selectSizeControl = select[0].selectize;
    // 1. Get the value
    var selectedValue = $(this).attr("data-value");
    // 2. Remove the option 
    select[0].selectize.removeItem(selectedValue);

    select[0].selectize.refreshItems();
    select[0].selectize.refreshOptions();

});
    });
</script>

{% endblock %}