{% extends 'tasks/base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center flex-wrap">
                    <h4 class="mb-0"><i class="bi bi-list-check"></i> My Tasks</h4>
                    <div class="mt-2 mt-md-0">
                        <button id="darkModeToggle" class="btn btn-light btn-sm me-2">
                            <i class="bi bi-moon"></i> Dark Mode
                        </button>
                        <span class="badge bg-light text-dark me-2">Welcome, {{ request.user.username }}!</span>
                        <a href="{% url 'logout' %}" class="btn btn-danger btn-sm">
                            <i class="bi bi-box-arrow-right"></i> Logout
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card bg-primary text-white text-center">
                        <div class="card-body">
                            <h5 class="card-title">Total Tasks</h5>
                            <h2 class="mb-0">{{ total_tasks }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card bg-success text-white text-center">
                        <div class="card-body">
                            <h5 class="card-title">Completed</h5>
                            <h2 class="mb-0">{{ completed_tasks }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card bg-warning text-white text-center">
                        <div class="card-body">
                            <h5 class="card-title">Pending</h5>
                            <h2 class="mb-0">{{ pending_tasks }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card bg-info text-white text-center">
                        <div class="card-body">
                            <h5 class="card-title">Progress</h5>
                            <h2 class="mb-0">{{ completion_percentage }}%</h2>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Progress Bar -->
            <div class="card mb-4">
                <div class="card-body">
                    <h6>Overall Progress</h6>
                    <div class="progress" style="height: 30px;">
                        <div class="progress-bar bg-success" 
                             style="width: {{ completion_percentage }}%">
                            {{ completion_percentage }}% Complete
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Search and Filter Section -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                            <label class="form-label"><i class="bi bi-search"></i> Search Tasks</label>
                            <input type="text" id="searchInput" class="form-control" placeholder="Search by title or description...">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label"><i class="bi bi-funnel"></i> Filter by Category</label>
                            <div>
                                <button class="btn btn-outline-primary btn-sm filter-btn active" data-category="all">All</button>
                                <button class="btn btn-outline-primary btn-sm filter-btn" data-category="work">Work</button>
                                <button class="btn btn-outline-primary btn-sm filter-btn" data-category="personal">Personal</button>
                                <button class="btn btn-outline-primary btn-sm filter-btn" data-category="study">Study</button>
                            </div>
                            <small id="visibleCount" class="text-muted mt-2 d-block"></small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Add Task Button -->
            <div class="mb-3">
                <a href="{% url 'add_task' %}" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Add New Task
                </a>
            </div>
            
            <!-- Tasks Container -->
            <div id="tasksContainer">
                {% if tasks %}
                    {% for task in tasks %}
                    <div class="card mb-3 shadow-sm task-card {% if task.is_completed %}bg-light{% endif %}"
                         data-category="{{ task.category }}"
                         data-due-date="{{ task.due_date|date:'Y-m-d' }}"
                         data-completed="{{ task.is_completed|lower }}">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-7">
                                    <div class="d-flex align-items-start">
                                        {% if task.is_completed %}
                                            <i class="bi bi-check-circle-fill text-success me-2" style="font-size: 24px;"></i>
                                        {% else %}
                                            <i class="bi bi-circle text-secondary me-2" style="font-size: 24px;"></i>
                                        {% endif %}
                                        <div class="flex-grow-1">
                                            <h5 class="mb-1 {% if task.is_completed %}text-decoration-line-through text-muted{% endif %}">
                                                {{ task.title }}
                                            </h5>
                                            <p class="mb-1 text-muted small task-description">{{ task.description|truncatechars:100 }}</p>
                                            <div class="mt-1 badge-container">
                                                <!-- Category Badge -->
                                                {% if task.category == 'work' %}
                                                    <span class="badge bg-primary">💼 Work</span>
                                                {% elif task.category == 'personal' %}
                                                    <span class="badge bg-info">👤 Personal</span>
                                                {% else %}
                                                    <span class="badge bg-success">📚 Study</span>
                                                {% endif %}
                                                
                                                <!-- Priority Badge -->
                                                {% if task.priority == 'high' %}
                                                    <span class="badge bg-danger">🔴 High Priority</span>
                                                {% elif task.priority == 'medium' %}
                                                    <span class="badge bg-warning">🟡 Medium Priority</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">🟢 Low Priority</span>
                                                {% endif %}
                                                
                                                <small class="text-muted ms-2">
                                                    <i class="bi bi-calendar"></i> Due: {{ task.due_date }}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5 text-md-end mt-3 mt-md-0">
                                    <a href="{% url 'toggle_task' task.id %}" class="btn btn-sm btn-success complete-task">
                                        {% if task.is_completed %}
                                            <i class="bi bi-arrow-counterclockwise"></i> Undo
                                        {% else %}
                                            <i class="bi bi-check-lg"></i> Complete
                                        {% endif %}
                                    </a>
                                    <a href="{% url 'edit_task' task.id %}" class="btn btn-sm btn-warning">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    <a href="{% url 'delete_task' task.id %}" class="btn btn-sm btn-danger delete-task">
                                        <i class="bi bi-trash"></i> Delete
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="alert alert-info text-center">
                        <i class="bi bi-info-circle" style="font-size: 48px;"></i>
                        <h5>No tasks yet!</h5>
                        <p>Click the "Add New Task" button to create your first task.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}