{% extends "base.html" %}

{% block content %}

<div class="actions">
    <button type="button" class="btn-add-toggle" onclick="toggleAddTask()">
        ➕ Add New Task
    </button>
    <a href="{{ url_for('export_csv') }}">
        <button type="button" class="btn-export">
            📥 Export to CSV
        </button>
    </a>
</div>

<!-- Add Task Form (Hidden by Default) -->
<div id="add-task-form" class="add-task-form" style="display: none;">
    <h3>Add New Task</h3>
    <form action="{{ url_for('add_task') }}" method="post">
        <input type="text" name="title" placeholder="Title" required>

        <label>Description</label>
        <textarea name="description" placeholder="Task details..."></textarea>

        <label>PIC</label>
        <input type="text" name="pic" placeholder="Person in Charge" required>

        <label>Mitra</label>
        <input type="text" name="mitra" placeholder="Partner/Client">

        <label>Date Open</label>
        <input type="datetime-local" name="date_open" id="date_open" required>

        <label>Date Closed</label>
        <input type="datetime-local" name="date_closed" id="date_closed">

        <label>Last Update</label>
        <textarea name="lastupdate" placeholder="Latest progress..."></textarea>

        <label>Status</label>
        <select name="status" onchange="toggleDateClosed(this)">
            <option value="Open">Open</option>
            <option value="In Progress">In Progress</option>
            <option value="Pending">Pending</option>
            <option value="Complete">Complete</option>
        </select>

        <div class="form-buttons">
            <button type="submit">Add Task</button>
            <button type="button" onclick="toggleAddTask()">Cancel</button>
        </div>
    </form>
</div>

<!-- Kanban Board -->
<div class="kanban-board">
    {% for status, tasks in columns.items() %}
    <div class="column" data-status="{{ status }}">
        <h3>{{ status }} <span class="task-count">({{ tasks|length }})</span></h3>
        <div class="task-list" id="{{ status.replace(' ', '-') }}">
            {% for task in tasks %}
            <div class="task" draggable="true" data-id="{{ task.id }}">
                <strong>{{ task.title }}</strong>

                <!-- Show Description -->
                {% if task.description %}
                <small class="desc-line" title="{{ task.description }}">{{ task.description }}</small>
                {% endif %}

                <small>PIC: {{ task.pic or '–' }}</small>
                <small>Mitra: {{ task.mitra or '–' }}</small>
                <small>Open: {{ task.date_open[:10] if task.date_open else '–' }}</small>
                {% if task.date_closed %}
                <small>Closed: {{ task.date_closed[:10] }}</small>
                {% endif %}
                {% if task.lastupdate %}
                <small class="update-line"><strong>Update:</strong> {{ task.lastupdate }}</small>
                {% endif %}

                <div class="task-actions">
                    <a href="{{ url_for('edit_task', id=task.id) }}">Edit</a> |
                    <a href="{{ url_for('delete_task', id=task.id) }}" onclick="return confirm('Delete task?')">Delete</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

<script>
function toggleAddTask() {
    const form = document.getElementById('add-task-form');
    const isHidden = form.style.display === 'none';
    form.style.display = isHidden ? 'block' : 'none';

    if (isHidden) {
        const now = new Date().toISOString().slice(0, 16);
        const dateOpen = document.getElementById('date_open');
        if (!dateOpen.value) dateOpen.value = now;
    }
}

function toggleDateClosed(select) {
    const dateClosed = document.getElementById('date_closed');
    const now = new Date().toISOString().slice(0, 16);
    if (select.value === 'Complete' && !dateClosed.value) {
        dateClosed.value = now;
    } else if (select.value !== 'Complete') {
        dateClosed.value = '';
    }
}
</script>

<script src="{{ url_for('static', filename='js/drag.js') }}"></script>

{% endblock %}