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

{% block title %}Time Tracking{% endblock %}

{% block content %}
<div class="forms">
    <div class="section-header">
        <h2 class="page-title">Time Tracking Management</h2>
    </div>
    <div class="card">
        <div class="card__header">
            <ul class="breadcrumb breadcrumb__list">
                <li><a href="{{ path('dashboard') }}">Home</a></li>
                <li class="active">Time Tracking</li>
            </ul>
        </div>
        <div class="card__body">
            
            <!-- Quick Actions -->
            <div class="grid-4 space-bottom-4">
                <div class="stat-tile">
                    <i class="fa fa-clock-o stat-tile__icon" aria-hidden="true"></i>
                    <div>
                        <p class="stat-tile__value">{{ stats.today_attendance ?? 0 }}</p>
                        <p class="stat-tile__label">Today's Attendance</p>
                    </div>
                </div>
                <div class="stat-tile">
                    <i class="fa fa-users stat-tile__icon" aria-hidden="true"></i>
                    <div>
                        <p class="stat-tile__value">{{ stats.present_employees ?? 0 }}</p>
                        <p class="stat-tile__label">Present Employees</p>
                    </div>
                </div>
                <div class="stat-tile">
                    <i class="fa fa-exclamation-triangle stat-tile__icon" aria-hidden="true"></i>
                    <div>
                        <p class="stat-tile__value">{{ stats.late_employees ?? 0 }}</p>
                        <p class="stat-tile__label">Late Employees</p>
                    </div>
                </div>
                <div class="stat-tile">
                    <i class="fa fa-bar-chart stat-tile__icon" aria-hidden="true"></i>
                    <div>
                        <p class="stat-tile__value">{{ stats.overtime_today ?? 0 }}</p>
                        <p class="stat-tile__label">Overtime Hours</p>
                    </div>
                </div>
            </div>
            <hr>

            <!-- Action Buttons -->
            <div class="action-inline">
                <a href="{{ path('app_time_tracking_upload') }}" class="btn btn-primary">
                    <i class="fa fa-upload" aria-hidden="true"></i> Upload Attendance
                </a>
                <a href="{{ path('app_time_tracking_manual_clocking') }}" class="btn btn-primary">
                    <i class="fa fa-plus" aria-hidden="true"></i> Manual Clocking
                </a>
                <a href="{{ path('app_time_tracking_employee_attendance') }}" class="btn btn-secondary">
                    <i class="fa fa-list" aria-hidden="true"></i> Employee Attendance
                </a>
                <a href="{{ path('app_time_tracking_reporting') }}" class="btn btn-secondary">
                    <i class="fa fa-bar-chart" aria-hidden="true"></i> Reports
                </a>
                <a href="{{ path('app_time_tracking_overtime') }}" class="btn btn-danger">
                    <i class="fa fa-clock-o" aria-hidden="true"></i> Overtime Management
                </a>
            </div>
            <hr>

            <!-- Recent Attendance -->
            <div>
                <h4>Today's Recent Check-ins</h4>
                <table class="data-table">
                        <thead>
                            <tr>
                                <th>Employee</th>
                                <th>Check In</th>
                                <th>Check Out</th>
                                <th>Break Start</th>
                                <th>Break End</th>
                                <th>Total Hours</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if recent_clockings is defined %}
                                {% for clocking in recent_clockings %}
                                    <tr>
                                        <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.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">Not checked in</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.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>
                                            <a href="{{ path('app_employee_clocking_edit', {'id': clocking.id}) }}" class="btn btn-sm btn-primary">
                                                <i class="fa fa-edit" aria-hidden="true"></i>
                                            </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="8" class="align-center tone-muted">No attendance records for today</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
            </div>

        </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() {
            $('.table').DataTable({
                "pageLength": 10,
                "order": [[ 1, "desc" ]]
            });
        });
    </script>
{% endblock %}