{% extends "::base.html.twig" %}

{% block title "List Of My Leave Requests" %}
    
{% block content %}    
    <div class="col-md-12">
        <h4 style="font-weight: 300;">My Leave Requests</h4>
    
        <a style="margin-bottom: 10px;" class="btn btn-sm btn-primary" href="{{ path('leave_req_req') }}">Add Request</a>
    
        <div style="margin-top: 10px;" class="panel panel-default">
            <div class="panel-body">
                <table class="table table-bordered" style="margin: 2px 0;">
                    <thead>
                        <tr><th>Type</th><th>Days Taken</th><th>Days Allowed</th></tr>
                    </thead>
                    <tbody>
                        {% for type, data in report %}
                        <tr>
                            <td>{{ type }}</td>
                            <td>{{ data.daysTaken }}</td>
                            <td>
                                {% if data.maxDays == 0 %}
                                {{ '0 - Unlimited' }}
                                {% else %}{{ data.maxDays }}{% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Type</th><th>From</th><th>To</th><th>Days</th>
                            <th>Approvers</th><th>Notes</th><th>Status</th><th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for request in requests %}
                            {% set id = request.id %}
                            <tr>
                                <td>{{ request.type.getTypeLabel() }}</td>
                                <td>{{ request.from|date(date_format) }}</td>
                                <td>{{ request.to|date(date_format) }}</td>
                                <td>{{ request.numOfDays }}</td>
                                <td>
                                    {{ request.manager.fullname }}<br/>
                                    {{ request.getManagerApprovalStatusLabel() }}<br/>
                                    {{ request.employer.fullname }}<br/>
                                    {{ request.getEmployerApprovalStatusLabel() }}
                                </td>
                                <td>{{ request.notes }}</td>
                                <td>{{ request.getStatusLabel() }}</td>
                                <td>
                                    {% if not request.isApproved() and not request.isRejected() %}
                                    <a class="{{ tbl_link }}" href="{{ path('leave_req_req', {'id': id}) }}">Edit</a>
                                    <a class="{{ tbl_link }}" id="file{{ id }}">File</a>
                                    <a class="{{ tbl_link }}" id="del{{ id }}">Delete</a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="7">No requests have been created under this profile yet..</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %} 

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        
        {% for request in requests %}
            {% set id = request.id %}
            {% if not request.isApproved() and not request.isRejected() %}
                $('#file{{ id }}').on('click', function(e) {
                    BootstrapDialog.show({
                        type: BootstrapDialog.TYPE_SUCCESS,
                        title: 'File Request', 
                        message: 'The leave request will be filed. Click File to proceed.', 
                        buttons: [
                            {
                                label: 'Close', 
                                action: function(dialogRef) {
                                    dialogRef.close();
                                }
                            }, {
                                label: 'File', 
                                icon: 'glyphicon glyphicon-envelope', 
                                cssClass: 'btn-success', 
                                autospin: true, 
                                data: {'id': {{ id }}}, 
                                action: function() {
                                    window.location.href = '{{ path('leave_req_file', {'id': id}) }}';
                                }
                            }
                        ]
                    });
                }); 
                $('#del{{ id }}').on('click', function(e) {
                    BootstrapDialog.show({
                        type: BootstrapDialog.TYPE_DANGER,
                        title: 'Confirm Delete', 
                        message: 'The leave request will be deleted. Click Delete to proceed.', 
                        buttons: [
                            {
                                label: 'Close', 
                                action: function(dialogRef) {
                                    dialogRef.close();
                                }
                            }, {
                                label: 'Delete', 
                                icon: 'glyphicon glyphicon-trash', 
                                cssClass: 'btn-danger', 
                                autospin: true, 
                                data: {'id': {{ id }}}, 
                                action: function() {
                                    window.location.href = '{{ path('leave_req_del', {'id': id}) }}';
                                }
                            }
                        ]
                    });
                }); 
            {% endif %}   
        {% endfor %}
    });
</script>
{% endblock %}