{% extends 'base.html' %}
{% block midpart %}
<style>
    .required:after { content:" *"; }
</style>
    <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">
                        <button class="btn btn-primary pull-right" onclick="show_apply_leave_modal();">Apply Leave</button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" id="id_leaves_box_body">
                    <table id="id_table_leaves" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Approved Status</th>
                            <th>Comments</th>
                        </tr>
                        </thead>
                        <tbody id="id_tbody_leaves">
                        {% for leave in leaves_list %}
                            <tr>
                                <td>{{ leave.contractor.name }}</td>
                                <td>{{ leave.start_date|date:'d-M-Y' }}</td>
                                <td>{{ leave.end_date|date:'d-M-Y' }}</td>
                                {% if approve_status_edit_tag %}
                                    <td>
                                        <select name="select_leaves_status_box" id="id_select_status_box_{{ leave.id }}"
                                                class="form-control input-sm" style="width:60%;"
                                                onchange="check_leave_status({{ leave.id }});">
                                            {% if leave.approve_status == 1 %}
                                                <option value="1" selected>Pending</option>
                                                <option value="2">Approved</option>
                                                <option value="3"> Not Approved</option>
                                            {% elif leave.approve_status == 2 %}
                                                <option value="1">Pending</option>
                                                <option value="2" selected>Approved</option>
                                                <option value="3"> Not Approved</option>
                                            {% else %}
                                                <option value="1">Pending</option>
                                                <option value="2">Approved</option>
                                                <option value="3" selected> Not Approved</option>
                                            {% endif %}
                                        </select>
                                    </td>
                                {% else %}
                                    <td>
                                        {% if leave.approve_status == 1 %}
                                            Pending
                                        {% elif leave.approve_status == 2 %}
                                            Approved
                                        {% else %}
                                            Not Approved
                                        {% endif %}
                                    </td>
                                {% endif %}
                                <td>{{ leave.comments }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

<!-- modals code start -->

<div class="modal fade" id="id_leave_apply_modal" role="dialog">
    <div class="modal-dialog" style="width:30%;">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" onclick="getee();">&times;</button>
          <h4 class="modal-title">Apply Leave</h4>
        </div>
        <div class="modal-body" id="id_modal_body_apply_leave" style="height:210px;">
            <div class="error" id="id_leave_apply_error"></div>
            <div style="height:40px;">
                <div class="col-sm-4 required">
                    <label class="control-label" for="start_date">Start Date:</label>
                </div>
                <div class="col-sm-8">
                    <input type="text" name="start_date" id="id_start_date" class="form-control input-sm" autofocus/>
                </div>
            </div>
            <div style="height:40px;">
                <div class="col-sm-4 required">
                    <label class="control-label" for="end_date">End Date:</label>
                </div>
                <div class="col-sm-8">
                    <input type="text" name="end_date" id="id_end_date" class="form-control input-sm" />
                </div>
            </div>
            <div style="height:100px;">
                <div class="col-sm-4 required">
                    <label class="control-label" for="comments">Comments:</label>
                </div>
                <div class="col-sm-8">
                    <textarea name="comments" id="id_comments" class="form-control input-sm" rows="4"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="apply_leave();">Submit</button>
        </div>
      </div>

    </div>
  </div>

<div class="modal fade" id="id_modal_leave_status" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Leave Status</h4>
            </div>
            <!-- Modal content-->
            <div class="modal-content" id="id_modal_content_leave_status" style="text-align:center;">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="id_show_leave_rejected_modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Leave Rejection</h4>
            </div>
            <!-- Modal content-->
            <div class="modal-body" style="text-align:center; height:80px;">
                <div style="height:80px;">
                    <div class="col-sm-3">
                        <label class="control-label" for="start_date">Comments:</label>
                    </div>
                    <div class="col-sm-8">
                        <textarea name="reject_comments" id="id_reject_comments" class="form-control input-sm" autofocus></textarea>
                    </div>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="id_submit_leave_reject">Submit</button>
            </div>
        </div>
    </div>
</div>

<!-- modals code end -->
    {% include "js.html" %}

    <!-- page script -->

<script>

    $( function() {

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

            $( "#id_start_date" ).datepicker({
                dateFormat: 'yy-mm-dd',
                onClose: function(dateText, inst)
                {
                    $("#id_end_date").focus();
                    $("#id_end_date").datepicker("setDate", $("#id_start_date").datepicker( 'getDate' ));
                }
             }).datepicker("setDate", new Date());
             $('.ui-datepicker').css("display","none");
        })

        $( "#id_start_date" ).datepicker({
            dateFormat: 'yy-mm-dd',
            onClose: function(dateText, inst)
            {

                $("#id_end_date").focus();
                $("#id_end_date").datepicker("setDate", $("#id_start_date").datepicker( 'getDate' ));
            },
            beforeShow: function (input, inst) {
                setTimeout(function () {
                    inst.dpDiv.css({
                        top: $("#id_start_date").offset().top + 113,
                        left: $("#id_start_date").offset().left
                    });
                }, 0);
            }
         }).datepicker("setDate", new Date());

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

    });

    function show_apply_leave_modal()
    {
        $("#id_leave_apply_error").html("");
        $("#id_end_date").val('');
        $("#id_start_date").val('');
        $("#id_leave_apply_modal").modal("show");
    }

    function apply_leave()
    {
        var start_date = $("#id_start_date").val();
        var end_date = $("#id_end_date").val();
        var comments = $("#id_comments").val();
        if ( start_date && end_date && comments )
        {
            $.ajax({
                    url : "/apply_leave/",
                    type : "POST",
                    dataType : "json",
                    async: false,
                    data : {
                        start_date: start_date,
                        end_date : end_date,
                        comments : comments,
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                success : function(data)
                {
                    if ( data.error_tag == 1)
                    {
                        $("#id_leave_apply_error").html(data.response);
                    }
                    else
                    {
                        $("#id_leaves_box_body").html(data.response);
                        $("#id_leave_apply_modal").modal('hide');
                    }
                },

            });
        }
        else
        {
            $("#id_leave_apply_error").html("Please Fill Mandatory details");
        }
    }

    function check_leave_status(id)
    {
        status = $("#id_select_status_box_" + id).val();
        if ( status == 3 )
        {
            $("#id_show_leave_rejected_modal").modal("show");
            $("#id_submit_leave_reject").attr("onclick", "change_leave_status("+id+")");
        }
        else
        {
            change_leave_status(id);
        }
    }

    function change_leave_status(id)
    {
        status = $("#id_select_status_box_" + id).val();
        comments = $("#id_reject_comments").val();
        $.ajax({
                url : "/change_leave_status/",
                type : "POST",
                dataType : "json",
                async: false,
                data : {
                    id: id,
                    status : status,
                    comments: comments,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
            success : function(data)
		    {
			    $("#id_modal_content_leave_status").html(data.response);
			    $("#id_show_leave_rejected_modal").modal("hide");
			    $("#id_modal_leave_status").modal('show');
		    },
        });
    }
</script>
{% endblock midpart %}