{% extends 'dashboards/base_dashboard.html' %}

{% block stats %}
<!-- Stats Cards -->
<div class="col-xl-4 col-md-6 mb-4">
    <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
            <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                        Section</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ section.name }}</div>
                </div>
                <div class="col-auto">
                    <i class="fas fa-sitemap fa-2x text-gray-300"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-4 col-md-6 mb-4">
    <div class="card border-left-warning shadow h-100 py-2">
        <div class="card-body">
            <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                        Pending Tasks</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ pending_tasks }}</div>
                </div>
                <div class="col-auto">
                    <i class="fas fa-tasks fa-2x text-gray-300"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-4 col-md-6 mb-4">
    <div class="card border-left-info shadow h-100 py-2">
        <div class="card-body">
            <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                        Total Tasks</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_tasks }}</div>
                </div>
                <div class="col-auto">
                    <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block left_column %}
<!-- Task Management Section -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Task Management</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createTaskModal">
            <i class="fas fa-plus me-1"></i> Create Task
        </button>
    </div>
    
    <!-- Task Filters -->
    <div class="card-body border-bottom">
        <form class="row g-3" id="taskFilterForm">
            <div class="col-md-4">
                <label for="statusFilter" class="form-label">Status</label>
                <select class="form-select form-select-sm" id="statusFilter">
                    <option value="">All Statuses</option>
                    <option value="pending">Pending</option>
                    <option value="in_progress">In Progress</option>
                    <option value="completed">Completed</option>
                    <option value="delayed">Delayed</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="assignedToFilter" class="form-label">Assigned To</label>
                <select class="form-select form-select-sm" id="assignedToFilter">
                    <option value="">All Team Members</option>
                    {% for member in section.user_set.all %}
                    <option value="{{ member.id }}">{{ member.get_full_name|default:member.email }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="submit" class="btn btn-primary btn-sm me-2">
                    <i class="fas fa-filter me-1"></i> Filter
                </button>
                <button type="reset" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-undo me-1"></i> Reset
                </button>
            </div>
        </form>
    </div>
    
    <!-- Tasks List -->
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="tasksTable" width="100%" cellspacing="0">
                <thead class="table-light">
                    <tr>
                        <th>Title</th>
                        <th>Assigned To</th>
                        <th>Status</th>
                        <th>Due Date</th>
                        <th>Priority</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in recent_tasks %}
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                {% if task.priority == 'high' %}
                                    <span class="badge bg-danger me-2">High</span>
                                {% elif task.priority == 'medium' %}
                                    <span class="badge bg-warning me-2">Medium</span>
                                {% else %}
                                    <span class="badge bg-secondary me-2">Low</span>
                                {% endif %}
                                {{ task.title }}
                                {% if task.attachments.exists %}
                                    <i class="fas fa-paperclip ms-2 text-muted"></i>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar-sm me-2">
                                    <span class="avatar-text rounded-circle bg-primary text-white">
                                        {{ task.assigned_to.get_full_name|slice:":1"|default:task.assigned_to.email|slice:":1"|upper }}
                                    </span>
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ task.assigned_to.get_full_name|default:task.assigned_to.email }}</div>
                                    <small class="text-muted">{{ task.assigned_to.position|default:"Team Member" }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge {% if task.status == 'completed' %}bg-success
                                {% elif task.status == 'in_progress' %}bg-info
                                {% elif task.due_date < time_now and task.status != 'completed' %}bg-danger
                                {% else %}bg-warning{% endif %} p-2">
                                {{ task.get_status_display }}
                            </span>
                        </td>
                        <td>
                            <div class="d-flex flex-column">
                                <span>{{ task.due_date|date:"M d, Y" }}</span>
                                <small class="text-muted">Due in {{ task.due_date|timeuntil }}</small>
                            </div>
                        </td>
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" 
                                        id="taskActions{{ task.id }}" data-bs-toggle="dropdown" 
                                        aria-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="taskActions{{ task.id }}">
                                    <li>
                                        <a class="dropdown-item" href="{% url 'tasks:task-detail' task.id %}">
                                            <i class="fas fa-eye me-2"></i>View Details
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" 
                                           data-bs-toggle="modal" data-bs-target="#editTaskModal" 
                                           data-task-id="{{ task.id }}">
                                            <i class="fas fa-edit me-2"></i>Edit Task
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <a class="dropdown-item text-danger" href="#" 
                                           data-bs-toggle="modal" data-bs-target="#deleteTaskModal"
                                           data-task-id="{{ task.id }}">
                                            <i class="fas fa-trash-alt me-2"></i>Delete
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <i class="fas fa-tasks fa-3x text-muted mb-3"></i>
                            <p class="mb-0">No tasks found in your section</p>
                            <a href="#" class="btn btn-sm btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#createTaskModal">
                                <i class="fas fa-plus me-1"></i> Create Your First Task
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block right_column %}
<!-- Quick Actions -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
    </div>
    <div class="card-body">
        <div class="d-grid gap-2">
            <button class="btn btn-primary btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#createTaskModal">
                <i class="fas fa-plus me-1"></i> Create New Task
            </button>
            <button class="btn btn-outline-primary btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#assignTaskModal">
                <i class="fas fa-user-plus me-1"></i> Assign Task
            </button>
            <button class="btn btn-outline-primary btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#generateReportModal">
                <i class="fas fa-chart-bar me-1"></i> Generate Report
            </button>
            <button class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#submitReportModal">
                <i class="fas fa-paper-plane me-1"></i> Submit Report to DG
            </button>
        </div>
    </div>
</div>

<!-- Team Members -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">Team Members</h6>
        <span class="badge bg-primary rounded-pill">{{ section.user_set.count }}</span>
    </div>
    <div class="card-body p-0">
        <div class="list-group list-group-flush">
            {% for member in section.user_set.all %}
            <div class="list-group-item list-group-item-action">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-sm me-3">
                        <span class="avatar-text rounded-circle bg-primary text-white">
                            {{ member.get_full_name|slice:":1"|default:member.email|slice:":1"|upper }}
                        </span>
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">{{ member.get_full_name|default:member.email }}</h6>
                            <span class="badge bg-{{ member.is_active|yesno:'success,secondary' }} rounded-pill">
                                {{ member.is_active|yesno:'Active,Inactive' }}
                            </span>
                        </div>
                        <small class="text-muted">{{ member.position|default:"Team Member" }}</small>
                        <div class="mt-1">
                            <span class="badge bg-light text-dark me-1">
                                <i class="fas fa-tasks me-1"></i> {{ member.task_set.count }} Tasks
                            </span>
                            <span class="badge bg-light text-dark">
                                <i class="fas fa-inbox me-1"></i> {{ member.assigned_tasks.count }} Assigned
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="text-center py-4">
                <i class="fas fa-users fa-2x text-muted mb-2"></i>
                <p class="mb-0">No team members found</p>
                <small class="text-muted">Add team members to your section</small>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Task Status Overview -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Task Status Overview</h6>
    </div>
    <div class="card-body">
        <div class="mb-3">
            <div class="d-flex justify-content-between mb-1">
                <span>In Progress</span>
                <span>{{ tasks_in_progress }}%</span>
            </div>
            <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-info" role="progressbar" style="width: {{ tasks_in_progress }}%" 
                     aria-valuenow="{{ tasks_in_progress }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="mb-3">
            <div class="d-flex justify-content-between mb-1">
                <span>Completed</span>
                <span>{{ tasks_completed }}%</span>
            </div>
            <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-success" role="progressbar" style="width: {{ tasks_completed }}%" 
                     aria-valuenow="{{ tasks_completed }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="mb-3">
            <div class="d-flex justify-content-between mb-1">
                <span>Pending</span>
                <span>{{ tasks_pending }}%</span>
            </div>
            <div class="progress" style="height: 10px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: {{ tasks_pending }}%" 
                     aria-valuenow="{{ tasks_pending }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="text-center mt-3">
            <a href="{% url 'tasks:task-list' %}" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-list me-1"></i> View All Tasks
            </a>
        </div>
    </div>
</div>
{% endblock %}
