{% extends "base_page.html" %}

{% block title %}Working Hours Analysis{% endblock %}

{% block page_title %}Working Hours Analysis{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-12">
        <h3><i class="fas fa-clock me-2"></i>Working Hours Analysis</h3>
    </div>
</div>

<!-- Filter Card -->
<div class="card mb-4">
    <div class="card-header">
        <h5><i class="fas fa-filter me-2"></i>Filter Options</h5>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ url_for('employee_logs') }}">
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="person_key" class="form-label">Select Employee</label>
                    <select id="person_key" name="person_key" class="form-select">
                        <option value="">All Employees</option>
                        {% for employee in employees %}
                            <option value="{{ employee.key }}" 
                                    {% if employee.key == selected_person_key %}selected{% endif %}>
                                {{ employee.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-md-3">
                    <label for="employee_search" class="form-label">Search Employee</label>
                    <input type="text" id="employee_search" name="employee_search" 
                           placeholder="Type to search..." 
                           value="{{ request.args.get('employee_search') or '' }}" 
                           class="form-control">
                </div>

                <div class="col-md-2">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="date" id="start_date" name="start_date" 
                           value="{{ start_date or '' }}" class="form-control">
                </div>

                <div class="col-md-2">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="date" id="end_date" name="end_date" 
                           value="{{ end_date or '' }}" class="form-control">
                </div>

                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search me-1"></i>Filter
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Results Card -->
<div class="card">
    <div class="card-header">
        <h5>Working Hours for {{ selected_employee_name }}
            <span class="badge bg-primary ms-2">{{ total_logs }} records</span>
        </h5>
    </div>
    
    <div class="card-body">
        {% if logs %}
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Employee Name</th>
                            <th>First In</th>
                            <th>Last Out</th>
                            <th>Inside Time</th>
                            <th>Outside Time</th>
                            <th>Total Span</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in logs %}
                        <tr>
                            <td>{{ log.date }}</td>
                            <td>{{ log.name }} {{ log.last_name }}</td>
                            <td>{{ log.first_in }}</td>
                            <td>
                                {% if log.is_invalid_day %}
                                    N/A
                                {% elif log.is_currently_inside %}
                                    Still Inside
                                {% else %}
                                    {{ log.last_out }}
                                {% endif %}
                            </td>
                            <td>{{ log.inside_time }}</td>
                            <td>{{ log.outside_time }}</td>
                            <td>
                                {% if log.is_invalid_day %}
                                    N/A
                                {% elif log.total_span_seconds and log.total_span_seconds > 0 %}
                                    {% set hours = log.total_span_seconds // 3600 %}
                                    {% set minutes = (log.total_span_seconds % 3600) // 60 %}
                                    {% set seconds = log.total_span_seconds % 60 %}
                                    {{ "%02d:%02d:%02d"|format(hours, minutes, seconds) }}
                                {% else %}
                                    00:00:00
                                {% endif %}
                            </td>
                            <td>
                                <span style="color: {{ log.status_color }};">
                                    {{ log.status_display }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            {% if total_pages > 1 %}
            <div class="d-flex justify-content-between align-items-center mt-3">
                <span class="text-muted">Total: {{ total_logs }} records</span>
                <div class="btn-group">
                    {% if current_page > 1 %}
                        <a class="btn btn-outline-primary" 
                           href="{{ url_for('employee_logs', page=current_page-1, person_key=selected_person_key, start_date=start_date, end_date=end_date, employee_search=request.args.get('employee_search', '')) }}">
                            Previous
                        </a>
                    {% endif %}
                    
                    <span class="btn btn-outline-secondary disabled">
                        Page {{ current_page }} of {{ total_pages }}
                    </span>
                    
                    {% if current_page < total_pages %}
                        <a class="btn btn-outline-primary" 
                           href="{{ url_for('employee_logs', page=current_page+1, person_key=selected_person_key, start_date=start_date, end_date=end_date, employee_search=request.args.get('employee_search', '')) }}">
                            Next
                        </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Export -->
            <div class="mt-3 text-center">
                <a href="{{ url_for('export_employee_logs', person_key=selected_person_key, start_date=start_date, end_date=end_date, employee_search=request.args.get('employee_search', '')) }}" 
                   class="btn btn-success">
                    <i class="fas fa-download me-1"></i>Export CSV
                </a>
            </div>

        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-clock fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No Data Found</h5>
                <p class="text-muted">No working hours found for the selected criteria.</p>
            </div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Employee logs page loaded');
    const searchInput = document.getElementById('employee_search');
    if (searchInput) {
        searchInput.focus();
    }
});
</script>
{% endblock %}