{% extends '_include/base.html.twig' %}

{% block title %}Employee Attendance{% endblock %}

{% block content %}
<div class="forms">
    <div class="card">
        <div class="card__header">
            <div class="section-header">
                <ul class="breadcrumb breadcrumb__list">
                <li><a href="{{ path('dashboard') }}">Home</a></li>
                <li><a href="{{ path('app_time_tracking_index') }}">Time Tracking</a></li>
                <li class="active">Employee Attendance</li>
                </ul>
                <div class="action-inline">
                    <a href="{{ path('app_time_tracking_index') }}" class="btn btn-primary">
                        <i class="fa fa-reply" aria-hidden="true"></i> Back to Time Tracking
                    </a>
                    <a href="{{ path('app_time_tracking_manual_clocking') }}" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i> Add Manual Record
                    </a>
                </div>
            </div>
        </div>
        <div class="card__body" data-example-id="simple-form-inline">
            
            <!-- Filters -->
            <div class="row">
                <div class="col-md-12">
                    <form method="GET" class="form-inline">
                        <div class="form-field">
                            <label for="start_date">From:</label>
                            <input type="date" id="start_date" name="start_date" class="input-control" 
                                   value="{{ app.request.query.get('start_date', 'now'|date('Y-m-d')) }}">
                        </div>
                        <div class="form-field">
                            <label for="end_date">To:</label>
                            <input type="date" id="end_date" name="end_date" class="input-control" 
                                   value="{{ app.request.query.get('end_date', 'now'|date('Y-m-d')) }}">
                        </div>
                        <div class="form-field">
                            <label for="employee">Employee:</label>
                            <select id="employee" name="employee" class="input-control">
                                <option value="">All Employees</option>
                                {% if employees is defined %}
                                    {% for employee in employees %}
                                        <option value="{{ employee.id }}" 
                                                {{ app.request.query.get('employee') == employee.id ? 'selected' : '' }}>
                                            {{ employee.registrationNbr }} - {{ employee.firstName }} {{ employee.lastName }}
                                        </option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                        <div class="action-inline">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search" aria-hidden="true"></i> Filter
                            </button>
                            <a href="{{ path('app_time_tracking_employee_attendance') }}" class="btn btn-secondary">
                                <i class="fa fa-refresh" aria-hidden="true"></i> Clear
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <hr>

            <!-- Summary Statistics -->
            {% if summary is defined %}
                <div class="grid-4 space-bottom-4">
                    <div class="stat-tile">
                        <i class="fa fa-calendar stat-tile__icon" aria-hidden="true"></i>
                        <div>
                            <p class="stat-tile__value">{{ summary.total_days }}</p>
                            <p class="stat-tile__label">Total Days</p>
                        </div>
                    </div>
                    <div class="stat-tile">
                        <i class="fa fa-clock-o stat-tile__icon" aria-hidden="true"></i>
                        <div>
                            <p class="stat-tile__value">{{ summary.total_hours|number_format(1) }}h</p>
                            <p class="stat-tile__label">Total Hours</p>
                        </div>
                    </div>
                    <div class="stat-tile">
                        <i class="fa fa-hourglass-half stat-tile__icon" aria-hidden="true"></i>
                        <div>
                            <p class="stat-tile__value">{{ summary.total_overtime|number_format(1) }}h</p>
                            <p class="stat-tile__label">Overtime</p>
                        </div>
                    </div>
                    <div class="stat-tile">
                        <i class="fa fa-percentage stat-tile__icon" aria-hidden="true"></i>
                        <div>
                            <p class="stat-tile__value">{{ summary.attendance_rate|default(0)|number_format(1) }}%</p>
                            <p class="stat-tile__label">Attendance Rate</p>
                        </div>
                    </div>
                </div>
                <hr>
            {% endif %}

            <!-- Attendance Records Table -->
            <table id="attendance-table" class="data-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Employee</th>
                        <th>Check In</th>
                        <th>Check Out</th>
                        <th>Break Start</th>
                        <th>Break End</th>
                        <th>Total Hours</th>
                        <th>Overtime</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if clockings is defined %}
                        {% for clocking in clockings %}
                            <tr>
                                <td>{{ clocking.date|date('Y-m-d') }}</td>
                                <td>
                                    {% if clocking.employee.photo %}
                                        <img src="{{ asset(HR_photo~'/'~clocking.employee.photo) }}" alt="{{ clocking.employee.firstName }}" class="avatar-sm" loading="lazy">
                                    {% else %}
                                        <i class="fa fa-user" aria-hidden="true"></i>
                                    {% endif %}
                                    {{ clocking.employee.registrationNbr }} - {{ clocking.employee.firstName }} {{ clocking.employee.lastName }}
                                </td>
                                <td>
                                    {% if clocking.checkInTime %}
                                        {{ clocking.checkInTime|date('H:i') }}
                                        {% if clocking.isLate %}
                                            <span class="status-pill" data-status="warning">Late</span>
                                        {% endif %}
                                    {% else %}
                                        <span class="tone-muted">--:--</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if clocking.checkOutTime %}
                                        {{ clocking.checkOutTime|date('H:i') }}
                                    {% else %}
                                        <span class="tone-muted">--:--</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if clocking.breakStartTime %}
                                        {{ clocking.breakStartTime|date('H:i') }}
                                    {% else %}
                                        <span class="tone-muted">--:--</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if clocking.breakEndTime %}
                                        {{ clocking.breakEndTime|date('H:i') }}
                                    {% else %}
                                        <span class="tone-muted">--:--</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if clocking.totalWorkedHours %}
                                        {{ clocking.totalWorkedHours|number_format(2) }}h
                                    {% else %}
                                        <span class="tone-muted">--</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if clocking.overtimeHours and clocking.overtimeHours > 0 %}
                                        <span class="status-pill" data-status="info">{{ clocking.overtimeHours|number_format(2) }}h</span>
                                    {% else %}
                                        <span class="tone-muted">--</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if clocking.checkOutTime %}
                                        <span class="status-pill" data-status="success">Complete</span>
                                    {% elseif clocking.checkInTime %}
                                        <span class="status-pill" data-status="info">Working</span>
                                    {% else %}
                                        <span class="status-pill" data-status="danger">Absent</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="user-area dropdown float-center">
                                        <a href="{{ path('app_employee_clocking_edit', {'id': clocking.id}) }}" title="Edit">
                                            <i class="fa fa-edit" aria-hidden="true"></i>
                                        </a>
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fa fa-cogs" aria-hidden="true"></i>
                                        </a>
                                        <div class="user-menu dropdown-menu">
                                            <a class="btn btn-secondary btn-sm" href="{{ path('app_employee_clocking_edit', {'id': clocking.id}) }}">
                                                <i class="fa fa-edit" aria-hidden="true"></i> Edit Record
                                            </a>
                                            {% if not clocking.checkOutTime %}
                                                <a class="btn btn-secondary btn-sm" href="#" onclick="completeClocking({{ clocking.id }})">
                                                    <i class="fa fa-check" aria-hidden="true"></i> Complete Check-out
                                                </a>
                                            {% endif %}
                                            <a class="btn btn-secondary btn-sm" href="#" onclick="deleteClocking({{ clocking.id }})">
                                                <i class="fa fa-trash" aria-hidden="true"></i> Delete Record
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="10" class="align-center tone-muted">No attendance records found</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>

        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <link href="{{ asset('assets/lib/DataTables/datatables.min.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/lib/DataTables/datatables.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#attendance-table').DataTable({
                "pageLength": 25,
                "order": [[ 0, "desc" ]],
                "columnDefs": [
                    { "orderable": false, "targets": [9] }
                ]
            });
        });

        function completeClocking(clockingId) {
            if (confirm('Are you sure you want to complete this clocking record with current time?')) {
                fetch(`{{ path('app_time_tracking_api_complete_clocking', {'id': 'CLOCKING_ID'}) }}`.replace('CLOCKING_ID', clockingId), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Error completing clocking: ' + (data.message || 'Unknown error'));
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error completing clocking');
                });
            }
        }

        function deleteClocking(clockingId) {
            if (confirm('Are you sure you want to delete this attendance record?')) {
                fetch(`{{ path('app_time_tracking_api_delete_clocking', {'id': 'CLOCKING_ID'}) }}`.replace('CLOCKING_ID', clockingId), {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('Error deleting record: ' + (data.message || 'Unknown error'));
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error deleting record');
                });
            }
        }
    </script>
{% endblock %}