{% extends 'base.html' %}
{% load vmo_tags %}

{% block midpart %}
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-success">
                <div class="box-header">
                    <div class="col-sm-6">
                        <h3 class="box-title"> <b>{{ title }}</b></h3>
                    </div>

                    <div class="col-sm-6">
                        <a href="/add_contractors/"><button class="btn btn-primary pull-right">Add Consultant</button></a>
                    </div>

                    <div class="col-sm-6" style="padding-top:10px;">
                        <div class="col-sm-6">
                            <input list="vendor_list" onchange="vendor_name();" class="form-control input-sm"
                                   id="vendor_list1" value="All">
                            <datalist id="vendor_list" >
    <!--                            <option disabled selected value> &#45;&#45; select vendor &#45;&#45; </option>-->
                                <option data-id=0 value="All">
                                {% for vendor in vendor_list %}
                                    <option data-id="{{ vendor.0 }}" value="{{vendor.1}}">
                                {% endfor %}
                            </datalist>
                        </div>
                        <div class="col-sm-3">
                            <select id="vendor_status" onchange="vendor_name();" class="form-control input-sm">
                                <option value="1" selected>Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </div>

                </div>
                <!-- /.box-header -->
                <div class="box-body" id="contractor_list">
                    <table id="id_table_contractor" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Contact Number</th>
                            <th>Vendor</th>
                            <th>Current Experience</th>
                            <th>Experience In WD</th>
                            <th>Experience Bucket</th>
                            <th>Billing Rate</th>
                            <th>PO Number</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody id="id_tbody_contractor">
                        {% for contractor in contractor_list %}
                            <tr id="{{contractor.0}}">
                                <td><a href="/edit_contractors/{{ contractor.0 }}/">{{ contractor.1 }}</a></td>
                                <td>{{ contractor.2 }}</td>
                                <td>{{ contractor.3 }}</td>
                                <td>{{ contractor.4 }}</td>
                                <td>{{ contractor.5 }}</td>
                                <td>{{ contractor.6 }}</td>
                                <td id="id_td_exp_slab_{{ contractor.0 }}">
                                    {{ contractor.9 }} Y
                                    {% if contractor.0|exp_slab_change_tag %}
                                        <span class="glyphicon glyphicon-pencil pull-right" style="cursor:pointer;"
                                              onclick="change_exp_slab({{ contractor.0 }});">

                                        </span>
                                    {% endif %}
                                </td>
                                <td>{{ contractor.10 }}</td>
                                <td>{{ contractor.7 }}</td>
                                <td style="width:10%;">
                                    <select id="id_select_status_{{ contractor.0 }}" class="form-control input-sm"
                                            onchange="show_model({{ contractor.0}} );">
                                        {% if contractor.8 == 1 %}
                                            <option value="1" selected>Active</option>
                                            <option value="0">Inactive</option>
                                        {% else %}
                                            <option value="0" selected>Inactive</option>
                                            <option value="1">Active</option>
                                        {% endif %}
                                    </select>
                                    <span id="in_active_date_{{ contractor.0 }}">
                                        {% if not contractor.8 %}
                                            LWD: {{ contractor.11|date:'d M Y' }}
                                        {% endif %}
                                    </span>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>


      <!-- Modal for status inactive-->
<!--<form method="post" enctype="multipart/form-data" action="/consultant_status/">{% csrf_token %}-->
  <div class="modal fade" id="id_modal_status_details" role="dialog">
    <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">Consultant Status</h4><br>
        </div>
        <div class="modal-body" id="id_modal_body_status_details" style="height:300px;">
            <div class="error" id="id_status_consultant_error"></div>
            <div class="col-sm-12">
                <div class="col-sm-3">
                    <label class="control-label" for="date_time">Effective From *</label>
                </div>
                <div class="col-sm-9">
                    <input class="form-control input-sm" type="text" id="id_date" name="date" autofocus>
                    <br>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="col-sm-3">
                    <label class="control-label" for="Comments">Comments *</label>
                </div>
                <div class="col-sm-9">
                    <textarea class="form-control input-sm" style="height:147px;" id="id_status_comment" name="status_comment"></textarea>
                    <br>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="col-sm-3">
                    <input type="file" class="form-control-file" id="id_status_file"><br>
                </div>
            </div>
            <input type="hidden" name="contractor_hidden_status" value="" id="id_hidden_status">
            <input type="hidden" name="contractor_hidden_id" value="" id="contractor_hidden_id">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="consultant_status();">Submit</button>
        </div>
      </div>

    </div>
  </div>


    {% include "js.html" %}

    <!-- page script -->

    <script>

        $( function() {

            $('#id_modal_status_details').on('hidden.bs.modal', function (e) {
                $( "#id_date" ).datepicker( "destroy" );

                $( "#id_date" ).datepicker({
                dateFormat: 'yy-mm-dd',
                onClose: function(dateText, inst)
                {
                    $("#id_status_comment").focus();
                },

             }).datepicker("setDate", new Date());;
            })

            $( "#id_date" ).datepicker({
                dateFormat: 'yy-mm-dd',
                onClose: function(dateText, inst)
                {
                    $("#id_status_comment").focus();
                },
                beforeShow: function (input, inst) {
                    setTimeout(function () {
                        inst.dpDiv.css({
                            top: $("#id_date").offset().top + 140,
                            left: $("#id_date").offset().left
                        });
                    }, 0);
                }
             }).datepicker("setDate", new Date());

        });

        function show_model(contractor_id){
            var status = $("#id_select_status_" + contractor_id).val();
            $("#id_hidden_status").val(status);
            $("#contractor_hidden_id").val(contractor_id);
            $("#id_modal_status_details").modal('show');
        }

        function consultant_status()
        {
            var status = $("#id_hidden_status").val();
            var contractor_id = $("#contractor_hidden_id").val();
            var status_date =  $("#id_date").val();
            var status_comment = $("#id_status_comment").val();
            var status_attachment = $("#id_status_file").val();
            if ( status_date && status_comment )
            {
                $("#id_status_consultant_error").html("");
                $.ajax({
                    url : "/consultant_status/",
                    type : "POST",
                    dataType : "json",
                    //async : "false",
                    data:
                    {
                        contractor_id: contractor_id,
                        status: status,
                        status_comment: status_comment,
                        status_date: status_date,
                        status_attachment: status_attachment,
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success : function(data)
                    {
                        $("#id_modal_status_details").modal('hide');
                        if( status == 1)
                        {
                            $//("#" + contractor_id).remove();
                            $("#in_active_date_" + contractor_id).html('');
                        }
                        else
                        {
                            $("#in_active_date_" + contractor_id).html(data.date);
                        }
                    },
                });
            }
            else
            {
                $("#id_status_consultant_error").html("Please Fill all Mandatory details");
             }
        }

        function vendor_name()
        {
            var status = $("#vendor_status").val();
            var vendor_id = $("#vendor_list option[value='" + $('#vendor_list1').val() + "']").attr('data-id');
            $.ajax({
                url : "/vendor_consultant_status/",
                type : "POST",
                dataType : "json",
                async : "False",
                data:
                {
                    vendor_id: vendor_id,
                    status: status,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success : function(data)
                {
                    $("#contractor_list").html(data.response);
                }

            });
        }

        function change_exp_slab(contractor_id)
        {
            $.ajax({
                url : "/change_exp_slab/",
                type : "POST",
                dataType : "json",
                async : "False",
                data:
                {
                    contractor_id: contractor_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success : function(data)
                {
                    if (data.error_tag == 1 )
                    {
                        alert(data.message);
                    }
                    else
                    {
                        $("#id_td_exp_slab_"+contractor_id).html(data.response);
                        alert(data.message);
                    }
                }

            });
        }

    </script>

{% endblock midpart %}