{% extends 'layouts/base.twig' %}

{% block title %}{{ title }} — Бизнес.Точка{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">{{ title }}</h1>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <form action="{{ actionUrl }}" method="post" id="task-form">
                    {{ csrf_field()|raw }}
                    
                    <div class="mb-3">
                        <label for="title" class="form-label">Название *</label>
                        <input type="text" class="form-control" id="title" name="title" required
                               value="{{ task.title|default('') }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Описание</label>
                        <textarea class="form-control" id="description" name="description" rows="4">{{ task.description|default('') }}</textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="board_id" class="form-label">Доска</label>
                            <select class="form-select" id="board_id" name="board_id" required>
                                {% for board in boards %}
                                    <option value="{{ board.id }}" {{ (task.board_id|default(selectedBoard) == board.id) ? 'selected' : '' }}>
                                        {{ board.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="column_id" class="form-label">Статус</label>
                            <select class="form-select" id="column_id" name="column_id" required>
                                {# Заполняется через JS #}
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="priority" class="form-label">Приоритет</label>
                            <select class="form-select" id="priority" name="priority">
                                {% for value, label in priorities %}
                                    <option value="{{ value }}" {{ (task.priority|default('medium') == value) ? 'selected' : '' }}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="due_date" class="form-label">Срок выполнения</label>
                            <input type="date" class="form-control" id="due_date" name="due_date"
                                   value="{{ task.due_date|default('') }}">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Исполнители</label>
                        <select class="form-select" id="assignees" name="assignees[]" multiple>
                            {% for userId, userName in users %}
                                <option value="{{ userId }}" {% if task.assignees and userId in task.assignees|map(a => a.user_id) %}selected{% endif %}>
                                    {{ userName }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="form-text">Выберите нескольких исполнителей, удерживая Ctrl/Cmd</div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa-solid fa-check me-2"></i>Сохранить
                        </button>
                        <a href="{{ base_url('/tasks') }}" class="btn btn-outline-secondary">Отмена</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0">Информация</h5>
            </div>
            <div class="card-body">
                {% if task %}
                    <p class="mb-1"><strong>Создано:</strong> {{ task.created_at|date('d.m.Y H:i') }}</p>
                    <p class="mb-1"><strong>Автор:</strong> {{ task.created_by_name|default('—') }}</p>
                    {% if task.completed_at %}
                        <p class="mb-1 text-success"><strong>Завершено:</strong> {{ task.completed_at|date('d.m.Y H:i') }}</p>
                    {% endif %}
                {% else %}
                    <p class="text-muted mb-0">Заполните форму для создания новой задачи</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Загрузка колонок при изменении доски
    const boardSelect = document.getElementById('board_id');
    const columnSelect = document.getElementById('column_id');
    
    function loadColumns(boardId, selectedColumnId) {
        fetch(`/api/tasks/columns?board_id=${boardId}`)
            .then(response => response.json())
            .then(data => {
                columnSelect.innerHTML = '';
                data.columns.forEach(column => {
                    const option = document.createElement('option');
                    option.value = column.id;
                    option.textContent = column.name;
                    if (column.id == selectedColumnId) {
                        option.selected = true;
                    }
                    columnSelect.appendChild(option);
                });
            });
    }
    
    const currentColumnId = {{ task.column_id|default(0) }};
    loadColumns(boardSelect.value, currentColumnId || null);
    
    boardSelect.addEventListener('change', function() {
        loadColumns(this.value, null);
    });
});
</script>
{% endblock %}