{% extends 'base.html' %}
{% block content %}
<div class="container">
    <h3>🛠️ Manual Attendance Update</h3>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <form method="POST">
        <div class="mb-3">
            <label for="dates">Select Dates</label>
            <input type="text" name="dates" id="dates" class="form-control" placeholder="Select multiple dates" required>
            <small class="form-text text-muted">Hold Ctrl / Cmd to select multiple dates</small>
        </div>

        <div class="mb-3">
            <label for="employee_ids">Select Employees</label>
            <select name="employee_ids" class="form-select" multiple required>
                <option value="all">-- All Employees --</option>
                {% for emp in employees %}
                <option value="{{ emp.id }}">{{ emp.full_name }} ({{ emp.employee_code }})</option>
                {% endfor %}
            </select>
            <small class="form-text text-muted">Hold Ctrl / Cmd to select multiple employees</small>
        </div>

        <div class="mb-3">
            <label>Status</label>
            <select name="status" class="form-select" required>
                <option value="present">Present (Full Day)</option>
                <option value="half">Half Day</option>
                <option value="absent">Absent (LWP)</option>
            </select>
        </div>

        <div class="mb-3">
            <label>Check-in Time (optional)</label>
            <input type="time" name="check_in" class="form-control">
        </div>

        <div class="mb-3">
            <label>Check-out Time (optional)</label>
            <input type="time" name="check_out" class="form-control">
        </div>

        <button type="submit" class="btn btn-primary">Update Attendance</button>
    </form>


    <script>
        flatpickr("#dates", {
        mode: "multiple",
        dateFormat: "Y-m-d"
        });
</script>
</div>
{% endblock %}