{% extends "aa_kanban/base.html" %}
{% load i18n static %}

{% block page_title %}{% trans "Submit Ticket" %}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'aa_kanban/css/kanban.css' %}?v=3">
{% endblock %}

{% block aa_kanban_content %}
<div class="container py-4" style="max-width: 600px;">
    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-header bg-primary text-white py-3">
            <h3 class="mb-0"><i class="fas fa-ticket-alt me-2"></i>{% trans "Submit a Ticket" %}</h3>
        </div>
        <div class="card-body p-4">
            {% if error %}
                <div class="alert alert-danger">{{ error }}</div>
            {% endif %}

            {% if boards %}
                <form method="POST" action="{% url 'aa_kanban:create_ticket' %}">
                    {% csrf_token %}

                    <div class="mb-3">
                        <label for="title" class="form-label fw-bold">{% trans "Subject" %} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="title" name="title" required placeholder="{% trans 'Brief description of the issue...' %}" value="{{ title|default:"" }}">
                    </div>
                    <div class="mb-3">
                        <label for="label" class="form-label fw-bold">{% trans "Ticket Type (Label)" %}</label>
                        <select class="form-select" id="label" name="label">
                            <option value="">{% trans "-- Select Type --" %}</option>
                            {% for label in labels %}
                                <option value="{{ label.id }}" {% if label_id == label.id %}selected{% endif %}>{{ label.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="assigned_team" class="form-label fw-bold">{% trans "Assigned Team" %} <span class="text-danger">*</span></label>
                        <select class="form-select" id="assigned_team" name="assigned_team" required>
                            <option value="">{% trans "-- Select Team --" %}</option>
                            {% for team in teams %}
                                <option value="{{ team.id }}" {% if assigned_team_id == team.id %}selected{% endif %}>{{ team.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">{% trans "Select the specific department or team this issue should be routed to." %}</div>
                    </div>
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label for="description" class="form-label fw-bold mb-0">{% trans "Description" %}</label>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-secondary active py-0 px-2" id="ticket-tab-write" onclick="toggleTicketDescTab('write')">
                                    <i class="fas fa-pen me-1"></i>{% trans "Write" %}
                                </button>
                                <button type="button" class="btn btn-outline-secondary py-0 px-2" id="ticket-tab-preview" onclick="toggleTicketDescTab('preview')">
                                    <i class="fas fa-eye me-1"></i>{% trans "Preview" %}
                                </button>
                            </div>
                        </div>

                        <!-- Write Container -->
                        <div id="ticket-desc-write-container">
                            <div class="kanban-markdown-editor-wrapper" id="ticket-editor-dropzone">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <small class="text-muted"><i class="fab fa-markdown me-1"></i>{% trans "Markdown supported" %}</small>
                                    <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="btn-attach-ticket-img" title="{% trans 'Attach image (PNG, JPG, GIF, WebP)' %}">
                                        <i class="fas fa-image me-1"></i>{% trans "Attach Image" %}
                                    </button>
                                </div>
                                <textarea class="form-control kanban-markdown-textarea"
                                          id="description"
                                          name="description"
                                          rows="6"
                                          data-upload-url="{% url 'aa_kanban:upload_image' %}"
                                          placeholder="{% trans 'Provide more details... Paste (Ctrl+V) or drag & drop images.' %}">{{ description|default:"" }}</textarea>
                                <div class="d-flex justify-content-between align-items-center mt-1">
                                    <small class="text-muted" style="font-size: 0.72rem;">
                                        <i class="fas fa-info-circle me-1"></i>{% trans "Paste (Ctrl+V), drag & drop, or click Attach Image (PNG, JPG, GIF, WebP, max 5MB)." %}
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Preview Container -->
                        <div id="ticket-desc-preview-container" class="kanban-desc-box p-3 rounded d-none" style="min-height: 150px;">
                            <div id="ticket-desc-preview-rendered" class="kanban-desc-rendered-content text-break">
                                <em class="text-muted">{% trans "Nothing to preview." %}</em>
                            </div>
                        </div>
                    </div>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{% url 'aa_kanban:index' %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane me-1"></i>{% trans "Submit Ticket" %}</button>
                    </div>
                </form>
            {% else %}
                <p class="text-muted">{% trans "Ticket submission is currently disabled because no ticket board has been configured." %}</p>
                <div class="text-center mt-4">
                    <a href="{% url 'aa_kanban:index' %}" class="btn btn-primary">{% trans "Return to Dashboard" %}</a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script src="{% static 'aa_kanban/js/kanban.js' %}?v=3"></script>
<script>
function toggleTicketDescTab(mode) {
    const writeContainer = document.getElementById('ticket-desc-write-container');
    const previewContainer = document.getElementById('ticket-desc-preview-container');
    const tabWrite = document.getElementById('ticket-tab-write');
    const tabPreview = document.getElementById('ticket-tab-preview');
    const textarea = document.getElementById('description');
    const previewRendered = document.getElementById('ticket-desc-preview-rendered');

    if (mode === 'preview') {
        writeContainer.classList.add('d-none');
        previewContainer.classList.remove('d-none');
        tabWrite.classList.remove('active');
        tabPreview.classList.add('active');

        // Fetch rendered preview
        previewRendered.innerHTML = '<div class="text-center py-3"><span class="spinner-border spinner-border-sm text-primary"></span></div>';
        const formData = new FormData();
        formData.append('text', textarea.value);
        fetch("{% url 'aa_kanban:preview_markdown' %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': (document.querySelector('[name=csrfmiddlewaretoken]') || {}).value || '',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: formData,
        })
        .then(res => res.text())
        .then(html => {
            previewRendered.innerHTML = html;
        })
        .catch(err => {
            previewRendered.innerHTML = '<span class="text-danger">Failed to load preview.</span>';
        });
    } else {
        previewContainer.classList.add('d-none');
        writeContainer.classList.remove('d-none');
        tabPreview.classList.remove('active');
        tabWrite.classList.add('active');
        textarea.focus();
    }
}
</script>
{% endblock %}