{# Completed Tasks Modal - View and edit today's completed tasks #}
<div class="modal fade" id="completedTasksModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-check-circle text-success"></i> Completed Tasks Today
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {# Loading state #}
                <div class="text-center" id="completedTasksLoading">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                    <p>Loading completed tasks...</p>
                </div>

                {# Empty state #}
                <div class="text-center" id="completedTasksEmpty" style="display: none; padding: 40px;">
                    <i class="fa fa-inbox fa-3x text-muted" style="margin-bottom: 15px;"></i>
                    <p class="text-muted">No tasks have been completed today yet.</p>
                </div>

                {# Completed tasks list #}
                <div id="completedTasksList" style="display: none;">
                    {# Tasks rendered here by JavaScript #}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{# Edit Task Completion Modal #}
<div class="modal fade" id="editTaskCompletionModal" tabindex="-1" role="dialog" data-bs-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-edit"></i> Edit Task Completion
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editTaskId" value="">

                {# Task Name (read only) #}
                <div class="mb-3">
                    <label>Task</label>
                    <p class="form-control-static" id="editTaskName" style="font-weight: 600;"></p>
                </div>

                {# Completed By #}
                <div class="mb-3">
                    <label for="editCompletedBy">Completed By</label>
                    <select class="form-control" id="editCompletedBy">
                        <option value="">-- Select Employee --</option>
                        {# Options populated by JavaScript #}
                    </select>
                </div>

                {# Completed At #}
                <div class="mb-3">
                    <label for="editCompletedAt">Completed At</label>
                    <input type="datetime-local" class="form-control" id="editCompletedAt">
                </div>

                {# Notes #}
                <div class="mb-3">
                    <label for="editCompletionNotes">Notes</label>
                    <textarea class="form-control" id="editCompletionNotes" rows="3"
                              placeholder="Add a note about this completion..." maxlength="500"></textarea>
                </div>

                {# Status toggle #}
                <div class="mb-3">
                    <label>Status</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="editTaskStatus" id="editStatusCompleted" value="2" checked>
                            <label class="form-check-label" for="editStatusCompleted">Completed</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" name="editTaskStatus" id="editStatusIncomplete" value="0">
                            <label class="form-check-label" for="editStatusIncomplete">Mark Incomplete</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveTaskCompletionEdit">
                    <i class="fa fa-save"></i> Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Completed Tasks List */
.completed-task-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s ease;
}

.completed-task-item:last-child {
    border-bottom: none;
}

.completed-task-item:hover {
    background-color: #f9f9f9;
}

.completed-task-info {
    flex: 1;
    min-width: 0;
}

.completed-task-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.completed-task-meta {
    font-size: 12px;
    color: #888;
}

.completed-task-meta i {
    margin-right: 4px;
}

.completed-task-meta .meta-item {
    margin-right: 15px;
}

.completed-task-notes {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 3px;
}

.completed-task-notes i {
    margin-right: 4px;
}

.completed-task-actions {
    flex: 0 0 auto;
    margin-left: 15px;
}

.completed-task-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
}

/* List name badge */
.completed-task-list-badge {
    display: inline-block;
    background: #e7eaec;
    color: #666;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}
</style>