{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
    <h3 class="mb-3">Process Desktime Logs</h3>

    <form method="post" action="{{ url_for('desktime_logs.desktime_logs') }}">
        <div class="row mb-3">
            <div class="col-md-4">
                <label for="employee_ids" class="form-label">Select Employees</label>
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle w-100" type="button" id="employeeDropdown"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Choose Employees
                    </button>
                    <ul class="dropdown-menu w-100 p-3" style="max-height: 300px; overflow-y: auto;">
                        <li class="mb-2">
                            <input type="text" class="form-control form-control-sm" placeholder="Search employees..." id="employeeSearch">
                        </li>
                        <li class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="selectAllEmployees">
                                <label class="form-check-label" for="selectAllEmployees">Select All</label>
                            </div>
                        </li>
                        {% for emp in employees %}
                        <li>
                            <div class="form-check employee-option">
                                <input class="form-check-input employee-checkbox" type="checkbox" name="employee_ids" value="{{ emp.id }}"
                                    id="emp_{{ emp.id }}">
                                <label class="form-check-label" for="emp_{{ emp.id }}">
                                    {{ emp.full_name }} ({{ emp.employee_code }})
                                </label>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <div class="col-md-4">
                <label for="specific_date" class="form-label">Specific Date</label>
                <input type="date" name="specific_date" id="specific_date" class="form-control">
            </div>

            <div class="col-md-4">
                <label for="month" class="form-label">Or Month</label>
                <input type="month" name="month" id="month" class="form-control">
            </div>
        </div>

        <button type="submit" class="btn btn-success">Process Logs</button>
    </form>

    {% if summary %}
        <hr>
        <h5 class="mt-4">Summary</h5>
        <p><strong>Total Records Updated:</strong> {{ summary.total_updated }}</p>

        {% if summary.errors %}
            <div class="alert alert-danger">
                <strong>Errors:</strong>
                <ul>
                    {% for error in summary.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

        {% if logs %}
            <div class="mt-4">
                <h6>Updated Attendance Records</h6>
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Date</th>
                            <th>Working Hours</th>
                            <th>Remarks</th>
                            <th>Source</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in logs %}
                        <tr>
                            <td>{{ log.employee.full_name }} ({{ log.employee.employee_code }})</td>
                            <td>{{ log.date.strftime('%Y-%m-%d') }}</td>
                            <td>{{ log.working_hours }}</td>
                            <td>{{ log.remarks }}</td>
                            <td>{{ log.source }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    {% endif %}
</div>


{% endblock %}