{% extends 'base.html' %}

{% block body %}

<div id="wrapper">
	{% include 'navbar.html' %}

	<div id="page-wrapper" class="gray-bg">
		{% include 'header.html' %}
		<div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2 class="my-1">Attendance</h2>
            </div>
            <div class="col-lg-2">
                {% if user.user_type.user_permission.hr_department_attendance_add == 1 %}
                    <button type="button" class="btn btn-w-s btn-primary my-1" id="add_attendance">Add</button>
                {% endif %}
            </div>
        </div>

        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">
                        
                        <div class="ibox-content">
                            <form id="attendance_form" action="/demo/hr-department/attendance" method="GET" style="width:100%;" class="my-2">
                                <div class="flex-row justify-content-end w-100 d-flex align-items-end">
                                    <div class="form-group mx-2 mb-0 d-flex flex-column">
                                        <label>Year</label> 
                                        <select data-placeholder="" id="year" data-value="{{year}}" name="year" class="select2 form-control"  tabindex="-1">
                                            <option value=""></option>
                                            {% for  year in years %}
                                                <option value="{{year}}">{{year}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                
                                    <div class="form-group mx-2 mb-0 d-flex flex-column">
                                        <label>Month *</label> 
                                        <select data-placeholder="" id="month" data-value="{{month}}" name="month" class="select2 form-control"  tabindex="-1">
                                            <option value=""></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                        </select>
                                    </div>
                                
                                    <button type="submit" class="btn btn-w-s btn-primary ml-2">Apply</button>
                                </div>
                            </form>   
                            <div style="overflow-x: auto;">   
                                <table class="footable table table-bordered table-stripped" data-page-size="10" data-filter=#filter>
                                    <thead>
                                        <tr>
                                            <th style="max-width: fit-content; white-space:nowrap;">S No.</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Employee ID</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Name</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Email</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Phone</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Present</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Leave</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Absent</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Holiday</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Working Hours</th>
                                            <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Files</th>
                                            {% if user.user_type.user_permission.hr_department_attendance_delete == 1 %}
                                                <th class="text-center" style="max-width: fit-content; white-space:nowrap;">Actions</th>
                                            {% endif %}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for member in attendance %}
                                            <tr>
                                                <td>{{forloop.counter}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.employee_id}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.name}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.email}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.mobile}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.present}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.leave}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.absent}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.holiday}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">{{member.total_hours}}</td>
                                                <td class="text-center" style="max-width: fit-content; white-space:nowrap;">
                                                    <a href="{{member.file}}" target="_blank"><button class="btn btn-success" type="button"><i class="fa fa-download"></i></button> </a>
                                                </td>
                                                {% if user.user_type.user_permission.hr_department_attendance_delete == 1 %}
                                                    <td>
                                                        <button class="btn btn-danger delete_button" data-id="{{member.id}}" type="button"><i class="fa fa-trash"></i> </button>
                                                    </td>
                                                {% endif %}
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="py-4 px-5 justify-content-end d-flex align-items-end" style="width : 100%;">
                                <ul class="pagination float-center"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>


<div class="modal inmodal" id="add_attendance_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title">Add Attendance</h2>
            </div>
            <form method="POST" action="/demo/hr-department/attendance" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Member *</label> 
                                <select data-placeholder="" id="member" name="member_id" class="select2 form-control"  tabindex="-1">
                                    <option value="" pan=""></option>
                                    {% for member in members %}
                                        <option value="{{member.id}}">{{member.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Year *</label> 
                                <input type="number" name="year" class="form-control" placeholder="" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Month *</label> 
                                <input type="number" name="month" class="form-control" placeholder="" required>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>File *</label> 
                                <input type="file" name="file" class="form-control" placeholder="" required>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
            
        </div>
    </div>
</div>


<div class="modal inmodal" id="delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Delete Team</h4>
            </div>
            <form method="POST" id="delete_form" action="/demo/hr-department/attendance/delete">
                {% csrf_token%}
                <div class="modal-body">
                    <input type="hidden" name="id"  value="" id="delete_id">
                    <p><strong>Are you sure you want to delete this ?</strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes</button>
                </div>
            </form>
            
        </div>
    </div>
</div>

<script>
    $('.table').footable({
		"paging": {
			"enabled": true
		}
	});


    $(document).on('click', '#add_attendance', function(){
        $('#add_attendance_modal').modal('show');
    });


    $(document).ready(function(){
        var year = $('#year').attr('data-value')
        var month = $('#month').attr('data-value');
        $('#year').select2().val(year.toString()).trigger('change');
        $('#month').select2().val(month.toString()).trigger('change');
    });

     $(document).on('click', '.delete_button', function() {
        var id = $(this).attr("data-id");
        $('#delete_id').val(id);
        $('#delete_modal').modal('show');
    });

</script>

{% for message in messages %}
	<script>
		showNotification('{{message}}', '{{message.tags}}')
	</script>
{% endfor %}

{% endblock %}