{% load vmo_tags %}

<div class="modal-header">
    <div class="col-sm-6">
        <h4 class="modal-title">
            {% if approval_status == 1 %}
                Approved Timesheets for {{ month_abbr }} {{ year }}
            {% else %}
                Pending Approvals for {{ month_abbr }} {{ year }}
            {% endif %}
        </h4>
    </div>
    <div class="col-sm-3">
        {% if approval_status == 1 %}
            <select name="timesheet_status" class="form-control input-sm"
                    onchange="show_timesheet_status({{ month }}, {{ year }}, 0);">
                <option value="0">Pending Approvals</option>
                <option value="1" selected>Approved</option>
            </select>
        {% else %}
            <select name="timesheet_status" class="form-control input-sm"
                    onchange="show_timesheet_status({{ month }}, {{ year }}, 1);">
                <option value="0" selected>Pending Approvals</option>
                <option value="1">Approved</option>
            </select>
        {% endif %}
    </div>
    <div class="col-sm-3">
        <div class="col-sm-12" style="padding:1%;">
            <div class="col-sm-6">
                <a onclick="show_timesheet_status({{ previous_month }}, {{ previous_year }}, {{ approval_status }});"
                   style="cursor:pointer;">
                    <i class="fa fa-angle-left" style="font-size:15px"></i>
                    <span style="padding:5%; font-size:14px;">Prev</span>
                </a>
            </div>
            <div class="col-sm-6">
                <a onclick="show_timesheet_status({{ next_month }}, {{ next_year }}, {{ approval_status }});"
                   style="cursor:pointer;">
                    <span style="padding:5%;font-size:14px;">Next</span>
                    <i class="fa fa-angle-right" style="font-size:15px"></i>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="modal-body">
        <table id="id_table_timesheet_status" class="table table-bordered table-striped" style="width:100%;">
            <thead>
                <tr>
                    <th>Consultant Name</th>
                    <th>Vendor Name</th>
                    <th>Hiring Manager</th>
                    <th>Timesheet</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for timesheet in timesheet_obj %}
                    <tr id="id_timesheet_{{ timesheet.contractor.id }}">
                        <td>{{ timesheet.contractor.name }}</td>
                        <td>{{ timesheet.contractor.vendor.name }}</td>
                        <td>{{ timesheet.contractor.hiring_manager}}</td>
                        <td>
                            <a style="cursor:pointer;" onclick="fte_details({{timesheet.contractor.id}}, {{ month }}, {{ year }})">
                                {{ timesheet.total_time|get_hours }}
                            </a>
                        </td>
                        <td>
                            {% if approval_status == 1 %}
                                <a onclick="approve_timesheet({{ timesheet.contractor.id }}, {{ month }}, {{ year }}, 0)"
                                                   style="cursor:pointer;">
                                    <span style="font-size:30px;color:red;">&#128078;</span>
                                </a>
                            {% else %}
                                {% if timesheet.contractor.id|timesheet_grace_tag:filter_month_year %}
                                    <a onclick="approve_timesheet({{ timesheet.contractor.id }}, {{ month }}, {{ year }}, 1)"
                                       style="cursor:pointer;">
                                        <span style="font-size:30px;color:green;">&#128077;</span>
                                    </a>
                                {% else %}
                                    <a onclick="approve_timesheet_confirmation({{ timesheet.contractor.id }}, {{ month }}, {{ year }}, 1)"
                                       style="cursor:pointer;">
                                        <span style="font-size:30px;color:green;">&#128077;</span>
                                    </a>
                                {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
</div>
<div class="modal-footer">
    {% if request.user_role.id == admin_role_id %}
        <div class="col-sm-2">
            <button type="button" class="btn btn-primary" onclick="show_timesheet_esc_modal();">
                Send Approve Request
            </button>
        </div>
    {% endif %}

    <div class="pull-right col-sm-2 col-sm-offset-2">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>