{# Daily Assignment Panel - Task position assignment management view (Spec 039, Phase 8) #}
{# Accessible from workbook page. Allows managers to view/reassign all task groups for a date. #}
{# Requires workbook_manage_tasks permission and BuyerKiosk native scheduling. #}

<div class="daily-assignment-panel" id="dailyAssignmentPanel">
    {# Panel Header with Date Navigation #}
    <div class="da-panel-header">
        <div class="da-title-row">
            <div class="da-title">
                <i class="fa fa-users-gear"></i>
                <span>Task Assignments</span>
            </div>
            <div class="da-date-nav">
                <button class="btn btn-sm btn-outline-secondary da-nav-btn" id="daPrevDay" title="Previous day">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <span class="da-current-date" id="daCurrentDate"></span>
                <button class="btn btn-sm btn-outline-secondary da-nav-btn" id="daNextDay" title="Next day">
                    <i class="fa fa-chevron-right"></i>
                </button>
                <button class="btn btn-sm btn-outline-secondary da-today-btn" id="daToday" title="Go to today">
                    Today
                </button>
            </div>
        </div>
        {# Read-only indicator for past dates #}
        <div class="da-readonly-banner" id="daReadonlyBanner" style="display: none;">
            <i class="fa fa-lock"></i> Past date &mdash; assignments are read-only
        </div>
    </div>

    {# Content Area #}
    <div class="da-content" id="daContent">
        {# Loading State #}
        <div class="da-loading" id="daLoadingState">
            <i class="fa fa-spinner fa-spin"></i> Loading assignments...
        </div>

        {# Empty State #}
        <div class="da-empty" id="daEmptyState" style="display: none;">
            <i class="fa fa-clipboard-list"></i>
            <p>No task groups configured</p>
            <small>Create task groups in the Task Lists settings</small>
        </div>

        {# Error State #}
        <div class="da-error" id="daErrorState" style="display: none;">
            <i class="fa fa-triangle-exclamation"></i>
            <p>Failed to load assignments</p>
            <button class="btn btn-sm btn-outline-primary" id="daRetryBtn">
                <i class="fa fa-refresh"></i> Retry
            </button>
        </div>

        {# Group Cards Container #}
        <div class="da-groups" id="daGroupsContainer" style="display: none;"></div>
    </div>
</div>

{# ========== HANDLEBARS TEMPLATES ========== #}
{% raw %}
<script id="da-group-card-template" type="text/x-handlebars-template">
    <div class="da-group-card" data-group-id="{{groupId}}">
        <div class="da-group-header" data-bs-toggle="collapse" data-bs-target="#daGroupTasks-{{groupId}}">
            <div class="da-group-info">
                <span class="da-group-name">{{groupName}}</span>
                <span class="da-task-count">{{completionProgress.completed}}/{{completionProgress.total}} tasks</span>
            </div>
            <div class="da-group-assignment">
                {{#if effectiveAssignment}}
                    {{#ifEqual effectiveAssignment.assignmentType "person"}}
                        <span class="da-badge da-badge-person" title="Assigned to {{effectiveAssignment.userName}} for today">
                            <i class="fa fa-user"></i> {{effectiveAssignment.userName}}
                        </span>
                    {{else}}
                        {{#each effectiveAssignment.positions}}
                            <span class="da-badge da-badge-position" style="background-color: {{safeColor this.color}};" title="{{this.name}}">
                                {{this.name}}
                            </span>
                        {{/each}}
                    {{/ifEqual}}
                    {{#if dayOverride}}
                        <span class="da-override-indicator" title="Day override active">
                            <i class="fa fa-calendar-day"></i>
                        </span>
                    {{/if}}
                {{else}}
                    <span class="da-badge da-badge-unassigned">Unassigned</span>
                {{/if}}
            </div>
            <div class="da-group-progress">
                <div class="da-progress-bar">
                    <div class="da-progress-fill" style="width: {{completionProgress.percentage}}%;"></div>
                </div>
            </div>
            <div class="da-group-actions">
                {{#unless isReadOnly}}
                    <button class="btn btn-sm btn-outline-primary da-reassign-group-btn"
                            data-group-id="{{groupId}}"
                            data-group-name="{{groupName}}"
                            title="Reassign group"
                            onclick="event.stopPropagation();">
                        <i class="fa fa-user-pen"></i>
                    </button>
                    {{#if dayOverride}}
                        <button class="btn btn-sm btn-outline-secondary da-clear-override-btn"
                                data-target-type="group"
                                data-target-id="{{groupId}}"
                                title="Clear day override"
                                onclick="event.stopPropagation();">
                            <i class="fa fa-xmark"></i>
                        </button>
                    {{/if}}
                {{/unless}}
                <i class="fa fa-chevron-down da-expand-icon"></i>
            </div>
        </div>
        <div class="collapse" id="daGroupTasks-{{groupId}}">
            <div class="da-task-list">
                {{#each tasks}}
                    <div class="da-task-item {{#if (isCompleted this.completion)}}da-task-completed{{/if}} {{#if this.hasIndividualOverride}}da-task-overridden{{/if}}"
                         data-task-id="{{this.taskId}}">
                        <div class="da-task-info">
                            {{#if (isCompleted this.completion)}}
                                <i class="fa fa-check-circle da-task-done-icon"></i>
                            {{else}}
                                <i class="fa fa-circle da-task-pending-icon"></i>
                            {{/if}}
                            <span class="da-task-name">{{this.taskName}}</span>
                        </div>
                        <div class="da-task-assignment">
                            {{#if this.effectiveAssignment}}
                                {{#ifEqual this.effectiveAssignment.assignmentType "person"}}
                                    <span class="da-badge da-badge-person da-badge-sm">
                                        <i class="fa fa-user"></i> {{this.effectiveAssignment.userName}}
                                    </span>
                                {{else}}
                                    {{#each this.effectiveAssignment.positions}}
                                        <span class="da-badge da-badge-position da-badge-sm" style="background-color: {{safeColor this.color}};">
                                            {{this.name}}
                                        </span>
                                    {{/each}}
                                {{/ifEqual}}
                                {{#if this.effectiveAssignment.isInherited}}
                                    <span class="da-inherited-label" title="Inherited from group">
                                        <i class="fa fa-arrow-turn-down"></i>
                                    </span>
                                {{/if}}
                            {{else}}
                                <span class="da-badge da-badge-unassigned da-badge-sm">Unassigned</span>
                            {{/if}}
                        </div>
                        <div class="da-task-actions">
                            {{#unless ../isReadOnly}}
                                {{#unless (isCompleted this.completion)}}
                                    <button class="btn btn-xs btn-outline-primary da-reassign-task-btn"
                                            data-task-id="{{this.taskId}}"
                                            data-task-name="{{this.taskName}}"
                                            data-group-id="{{../groupId}}"
                                            title="Override this task's assignment"
                                            onclick="event.stopPropagation();">
                                        <i class="fa fa-user-pen"></i>
                                    </button>
                                {{/unless}}
                            {{/unless}}
                        </div>
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
</script>
{% endraw %}

{# ========== REASSIGNMENT MODAL ========== #}
<div class="modal fade" id="daReassignModal" tabindex="-1" aria-labelledby="daReassignModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header da-modal-header">
                <h5 class="modal-title" id="daReassignModalLabel">
                    <i class="fa fa-user-pen"></i> Reassign
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="da-reassign-target" id="daReassignTarget"></p>

                {# Assignment Type Tabs #}
                <ul class="nav nav-tabs da-assign-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="daTabPosition" data-bs-toggle="tab"
                                data-bs-target="#daPositionPane" type="button" role="tab">
                            <i class="fa fa-id-badge"></i> Position
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="daTabPerson" data-bs-toggle="tab"
                                data-bs-target="#daPersonPane" type="button" role="tab">
                            <i class="fa fa-user"></i> Person
                        </button>
                    </li>
                </ul>

                <div class="tab-content da-tab-content">
                    {# Position Assignment Pane #}
                    <div class="tab-pane fade show active" id="daPositionPane" role="tabpanel">
                        <div class="da-position-list" id="daPositionList">
                            <div class="da-loading-inline">
                                <i class="fa fa-spinner fa-spin"></i> Loading positions...
                            </div>
                        </div>
                    </div>

                    {# Person Assignment Pane #}
                    <div class="tab-pane fade" id="daPersonPane" role="tabpanel">
                        <div class="da-person-search">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text"><i class="fa fa-search"></i></span>
                                <input type="text" class="form-control" id="daPersonSearch"
                                       placeholder="Search employees..." autocomplete="off">
                            </div>
                        </div>
                        <div class="da-person-list" id="daPersonList">
                            <div class="da-loading-inline">
                                <i class="fa fa-spinner fa-spin"></i> Loading employees...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm btn-outline-danger" id="daClearOverrideModalBtn" style="display: none;">
                    <i class="fa fa-xmark"></i> Clear Override
                </button>
            </div>
        </div>
    </div>
</div>

{# ========== STYLES ========== #}
<style>
/* =====================================================
   DAILY ASSIGNMENT PANEL STYLES (Spec 039, Phase 8)
   ===================================================== */

.daily-assignment-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Panel Header */
.da-panel-header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid #e7eaec;
}

.da-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.da-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.da-title i {
    color: #7c3aed;
}

.da-date-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.da-nav-btn {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.4;
}

.da-current-date {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    min-width: 110px;
    text-align: center;
    white-space: nowrap;
}

.da-today-btn {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
}

.da-readonly-banner {
    margin-top: 6px;
    padding: 4px 10px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 11px;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Content Area */
.da-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.da-loading, .da-empty, .da-error {
    padding: 40px 20px;
    text-align: center;
    color: #999;
}

.da-loading i, .da-empty i, .da-error i {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.da-empty i { color: #ccc; }
.da-error i { color: #dc3545; }
.da-error p { color: #666; }

/* Group Cards */
.da-groups {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.da-group-card {
    border: 1px solid #e7eaec;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s;
}

.da-group-card:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.da-group-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    gap: 10px;
    transition: background 0.1s;
}

.da-group-header:hover {
    background: #f8f9fa;
}

.da-group-info {
    flex: 1;
    min-width: 0;
}

.da-group-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.da-task-count {
    font-size: 11px;
    color: #999;
}

.da-group-assignment {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 200px;
}

.da-group-progress {
    width: 60px;
    flex-shrink: 0;
}

.da-progress-bar {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
}

.da-progress-fill {
    height: 100%;
    background: #28a745;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.da-group-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.da-expand-icon {
    font-size: 11px;
    color: #999;
    transition: transform 0.2s;
}

.da-group-header[aria-expanded="true"] .da-expand-icon {
    transform: rotate(180deg);
}

/* Badges */
.da-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.da-badge-position {
    color: #fff;
}

.da-badge-person {
    background: #e8f4fd;
    color: #0d6efd;
    border: 1px solid #b6d4fe;
}

.da-badge-person i {
    font-size: 10px;
}

.da-badge-unassigned {
    background: #f0f0f0;
    color: #999;
    font-style: italic;
    font-weight: 400;
}

.da-badge-sm {
    font-size: 10px;
    padding: 1px 6px;
}

.da-override-indicator {
    color: #f59e0b;
    font-size: 11px;
    flex-shrink: 0;
}

.da-inherited-label {
    color: #999;
    font-size: 10px;
    flex-shrink: 0;
}

/* Task List (inside expanded group) */
.da-task-list {
    border-top: 1px solid #eee;
}

.da-task-item {
    display: flex;
    align-items: center;
    padding: 6px 12px 6px 24px;
    gap: 8px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 12px;
    transition: background 0.1s;
}

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

.da-task-item:hover {
    background: #fafafa;
}

.da-task-completed {
    opacity: 0.55;
}

.da-task-completed .da-task-name {
    text-decoration: line-through;
}

.da-task-done-icon {
    color: #28a745;
    font-size: 12px;
}

.da-task-pending-icon {
    color: #dee2e6;
    font-size: 12px;
}

.da-task-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.da-task-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.da-task-assignment {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
}

.da-task-overridden {
    background: #fffbeb;
}

.da-task-actions {
    flex-shrink: 0;
}

.da-task-actions .btn-xs {
    padding: 1px 5px;
    font-size: 10px;
    line-height: 1.4;
}

/* Reassignment Modal */
.da-modal-header {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    padding: 12px 16px;
}

.da-modal-header .modal-title {
    font-size: 15px;
    font-weight: 600;
}

.da-reassign-target {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.da-assign-tabs {
    font-size: 13px;
}

.da-assign-tabs .nav-link {
    padding: 6px 12px;
    font-size: 12px;
}

.da-tab-content {
    padding-top: 12px;
    min-height: 200px;
}

/* Position List in Modal */
.da-position-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.da-position-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.da-position-option:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.da-position-option .da-pos-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.da-position-option .da-pos-name {
    font-size: 13px;
    color: #333;
    flex: 1;
}

/* Person List in Modal */
.da-person-search {
    margin-bottom: 10px;
}

.da-person-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.da-person-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.da-person-option:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.da-person-option .da-person-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.da-person-option .da-person-name {
    font-size: 13px;
    color: #333;
    flex: 1;
}

.da-person-option .da-person-status {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.da-person-status.clocked-in {
    background: #d1fae5;
    color: #065f46;
}

.da-person-status.not-clocked-in {
    background: #f3f4f6;
    color: #6b7280;
}

.da-loading-inline {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 12px;
}

.da-no-results {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 12px;
}
</style>