{% load rmtmgmt_tags %}
{% if tag == 1 %}
<div class="modal-dialog">
<!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="text-align:center;"><b>Allocate Requirements</b></h4>
            <div class="pull-right">
                <input type="checkbox" id="automatic_allocate" />
                <span style="color:blue;">Automatic Allocate</span>
            </div>
            <input type="checkbox" name="all" id="allta" />Select All</br>

        </div>
    <!--<div class="modal-header">-->
      <!--<input type="checkbox" name="all" id="allta" />Select All</br>-->
     <!--</div>-->
        <div class="modal-body" id="id_modal_body_ta">
         <table id="example2" class="table table-bordered table-striped">
          <thead>
            <tr>
                <th>Talent Acquisition</th>
                <th></th>
                <th>Skill Set</th>
            </tr>
          </thead>
          <tbody>
          {% for ta in ta_list %}
              <tr>
                {% with ta|get_ta_allocation_status:requirement as allocated %}
                  <td>
                      {% if allocated %}
                        <input style="margin-right: 20px" type="checkbox" checked class="class_ta" id="id_ta_{{ ta.id }}" name="ta"
                               value={{ta.id}} />{{ ta.get_full_name }}

                      {% else %}
                        <input style="margin-right: 20px" type="checkbox" class="class_ta" name="ta" value={{ta.id}} />{{ ta.get_full_name }}<br>
                      {% endif %}
                  </td>
                  <td>
                      {% if allocated %}
                      {% if allocated.req_status == 0 %}
                           <span>&#9203;</span>
                      {% elif allocated.req_status == 1 %}
                            <span>&#9989;</span>
                      {% else %}
                            <span>&#10060;</span>
                      {% endif %}
                      {% endif %}
                  </td>
                  <td>
                      {% if allocated %}
                      Python & Django
                      {% endif %}
                  </td>
                {% endwith %}
              </tr>
          {% endfor%}
          </tbody>
        </table>
        </div>
        <div class="modal-footer">
         <button style="height:45px; width:15%;" type="submit" name="submit_req"
                 class="btn btn-primary pull-right" onclick="allocate({{rid}}, 1);">Submit</button>
        <button style="height:45px; margin-right:10px; text-align:center; width:15%;" type="submit" name="submit_req" onclick="update_req_alloc({{rid}}, 2);"
                 class="btn btn-primary">External</button>
        </div>
    </div>
</div>
{% else %}
<div class="modal-dialog" style="width:85%">
<!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title" style="text-align:center;"><b>Allocate Requirements</b></h4>

            <div class="pull-right">
                <input type="checkbox" id="automaticallocate" />
                <span style="color:blue;">Automatic Allocate</span>
            </div>
        </div>
       <div class="col-sm-12">
           <div class="col-sm-6" style="border-right:5px solid black;">
               <div class="modal-header">
                  <h4 class="modal-title" style="text-align:center;"><b>Placement Consultants</b></h4>
                  <input type="checkbox" name="all" id="allpc" />Select All</br>
               </div>
               <div class="modal-body" id="id_modal_body_pc">
                 <table id="example3" class="table table-bordered table-striped">
                  <thead>
                    <tr>
                        <th>Placement Consultants</th>
                        <th></th>
                        <th>Skill Set</th>
                    </tr>
                  </thead>
                  <tbody>
                  {% for name in pc_list %}
                        <tr>
                            {% with name.id|get_pc_allocation_status:requirement as allocated %}
                          <td>
                            {% if allocated %}
                              <input style="margin-right: 20px" type="checkbox" checked class="class_pc" id="id_pc_{{name.id}}" name="pc"
                                     value={{name.id}} />{{ name }}

                            {% else %}
                              <input style="margin-right: 20px" type="checkbox" class="class_pc" name="pc" value={{name.id}} />{{ name }}<br>
                            {% endif %}
                          </td>
                            <td>
                              {% if allocated %}
                              {% if allocated.req_status == 0 %}
                                   <span>&#9203;</span>
                              {% elif allocated.req_status == 1 %}
                                    <span>&#9989;</span>
                              {% else %}
                                    <span>&#10060;</span>
                              {% endif %}
                              {% endif %}
                          </td>
                            <td>
                                {% if allocated %}
                                 Java
                                {% endif %}
                            </td>
                            {% endwith %}
                        </tr>
                  {% endfor%}
                  </tbody>
                 </table>
                </div>
               <div class="modal-footer">
               </div>
           </div>
           <div class="col-sm-6">
                <div class="modal-header">
                  <h4 class="modal-title" style="text-align:center;"><b>Freelancers</b></h4>
                  <input type="checkbox" name="all" id="allfl" />Select All</br>
                </div>
                <div class="modal-body" id="id_modal_body_fl">
                     <table id="example4" class="table table-bordered table-striped">
                          <thead>
                                <tr>
                                    <th>Freelancers</th>
                                    <th></th>
                                    <th>Skill Set</th>
                                </tr>
                          </thead>
                         <tbody>
                              {% for name in fl_list %}
                                 <tr>
                                     {% with name.id|get_fl_allocation_status:requirement as allocated %}
                                      <td>
                                        {% if allocated %}
                                           <input style="margin-right: 20px" type="checkbox" checked class="class_fl" id="id_fl_{{name.id}}" name="fl"
                                                  value={{name.id}} />{{ name }}
                                        {% else %}
                                           <input style="margin-right: 20px" type="checkbox" class="class_fl" name="fl" value={{name.id}} />{{ name }}<br>
                                        {% endif %}
                                      </td>
                                     <td>
                                              {% if allocated %}
                                              {% if allocated.req_status == 0 %}
                                                   <span>&#9203;</span>
                                              {% elif allocated.req_status == 1 %}
                                                    <span>&#9989;</span>
                                              {% else %}
                                                    <span>&#10060;</span>
                                              {% endif %}
                                              {% endif %}
                                      </td>
                                     <td>
                                         {% if allocated %}
                                          Embedded C
                                          {% endif %}
                                     </td>
                                     {% endwith %}
                                 </tr>
                              {% endfor%}
                         </tbody>
                     </table>
                </div>
                <div class="modal-footer">
                </div>
            </div>
       </div>
    <div class="modal-footer">
         <button style="height:45px; width:15%;" type="submit" name="submit_req" onclick="update_req_alloc({{rid}}, 1);"
             class="btn btn-primary">Internal</button>
         <button style="height:45px; width:15%;" type="submit" name="submit_req"
                 class="btn btn-primary pull-right" onclick="allocate({{rid}}, 2);">Submit</button>
    </div>
    </div>
</div>
{% endif %}

<script>
$(function ()
{
    var table = $('#example2').DataTable({"bSort" : false});
    $('.dataTables_filter').parent().addClass('pull-left');
    $('.dataTables_length').parent().addClass('pull-right');
    $('.dataTables_length').addClass('pull-right');
    $('.dataTables_filter').addClass('pull-left');
    $('#allta').change(function ()
    {
        var cells = table.cells({page:'current'}).nodes();
        $( cells ).find(':checkbox').prop('checked',this.checked);
    });
    $('.class_ta').change(function ()
    {
        if ($('.class_ta:checked').length == $('.class_ta').length)
        {
            $('#allta').prop('checked',true);
        }
        else
        {
            $('#allta').prop('checked',false);
        }
    });
});
</script>

<script>
    $(function ()
{
    var table = $('#example3').DataTable({"bSort" : false});
    $('.dataTables_filter').parent().addClass('pull-left');
    $('.dataTables_length').parent().addClass('pull-right');
    $('.dataTables_length').addClass('pull-right');
    $('.dataTables_filter').addClass('pull-left');
    $('#allpc').change(function ()
    {
        var cells = table.cells({page:'current'}).nodes();
        $( cells ).find(':checkbox').prop('checked',this.checked);
    });
    $('.class_pc').change(function ()
    {
        if ($('.class_ta:checked').length == $('.class_pc').length)
        {
            $('#allpc').prop('checked',true);
        }
        else
        {
            $('#allpc').prop('checked',false);
        }
    });
});
</script>

<script>
$(function ()
{
    var table = $('#example4').DataTable({"bSort" : false});
    $('.dataTables_filter').parent().addClass('pull-left');
    $('.dataTables_length').parent().addClass('pull-right');
    $('.dataTables_length').addClass('pull-right');
    $('.dataTables_filter').addClass('pull-left');
    $('#allfl').change(function ()
    {
        var cells = table.cells({page:'current'}).nodes();
        $( cells ).find(':checkbox').prop('checked',this.checked);
    });
    $('.class_fl').change(function ()
    {
        if ($('.class_ta:checked').length == $('.class_fl').length)
        {
            $('#allfl').prop('checked',true);
        }
        else
        {
            $('#allfl').prop('checked',false);
        }
    });
});
</script>