{% extends "base.html" %}

{% block content %}
<div class="columns">
    <div class="column is-8">
        <div class="box">
            <h1 class="title">{{ ticket.title }}</h1>
            <div class="tags">
                <span class="tag is-{{ 'success' if ticket.status == 'CLOSED' else 'warning' }}">{{ ticket.status
                    }}</span>
                <span class="tag is-info">Created by {{ ticket.creator.username }}</span>
                <span class="tag is-dark">{{ ticket.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>

            <div class="content">
                <p>{{ ticket.description }}</p>
            </div>

            {% if ticket.status == 'CLOSED' %}
            <div class="notification is-warning is-light">
                <strong>Closed by {{ ticket.closed_by.username }}</strong><br>
                Reason: {{ ticket.closing_reason }}
            </div>
            {% endif %}
        </div>

        <h2 class="subtitle">Comments</h2>
        {% for comment in ticket.comments %}
        {% if not comment.is_hidden or is_admin %}
        <div class="box {% if comment.is_hidden %}is-hidden-comment{% endif %}"
            style="{% if comment.is_hidden %}background-color: #3a1a1a; border-color: #5a2a2a;{% endif %}">
            <article class="media">
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong>{{ comment.user.username }}</strong> <small>{{ comment.created_at.strftime('%Y-%m-%d
                                %H:%M') }}</small>
                            {% if comment.is_hidden %}
                            <span class="tag is-danger is-light ml-2">Hidden</span>
                            {% endif %}
                            <br>
                            {{ comment.content }}
                        </p>
                    </div>
                </div>
                {% if is_admin %}
                <div class="media-right">
                    <form method="POST" style="display: inline;">
                        <input type="hidden" name="action" value="toggle_hidden">
                        <input type="hidden" name="comment_id" value="{{ comment.id }}">
                        <button
                            class="button is-small is-{{ 'success' if comment.is_hidden else 'warning' }} is-outlined">
                            {{ 'Unhide' if comment.is_hidden else 'Hide' }}
                        </button>
                    </form>
                </div>
                {% endif %}
            </article>
        </div>
        {% endif %}
        {% else %}
        <p>No comments yet.</p>
        {% endfor %}

        {% if ticket.status != 'CLOSED' %}
        <div class="box">
            <form method="POST">
                <input type="hidden" name="action" value="comment">
                <div class="field">
                    <label class="label">Add Comment</label>
                    <div class="control">
                        <textarea class="textarea" name="content" placeholder="Type your comment here..."
                            required></textarea>
                    </div>
                </div>

                {% if is_admin %}
                <div class="field">
                    <div class="control">
                        <label class="checkbox">
                            <input type="checkbox" name="is_hidden">
                            Admin Comment (Hidden)
                        </label>
                    </div>
                </div>
                {% endif %}

                <div class="control">
                    <button class="button is-link">Submit Comment</button>
                </div>
            </form>
        </div>
        {% endif %}
    </div>

    <div class="column is-4">
        <div class="box">
            <h2 class="subtitle">Actions</h2>
            {% if ticket.status != 'CLOSED' %}
            {% if is_admin or is_creator %}
            <button class="button is-danger is-fullwidth" id="close-btn">Close Ticket</button>
            {% else %}
            <p>Only admins or the creator can close this ticket.</p>
            {% endif %}
            {% else %}
            <p>This ticket is closed.</p>
            {% endif %}

            <hr>
            <a href="{{ url_for('main.tickets') }}" class="button is-light is-fullwidth">Back to List</a>
        </div>
    </div>
</div>

<!-- Close Modal -->
<div class="modal" id="close-modal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">Close Ticket</p>
            <button class="delete" aria-label="close" id="modal-close-x"></button>
        </header>
        <section class="modal-card-body">
            <form method="POST" id="close-form">
                <input type="hidden" name="action" value="close">
                <div class="field">
                    <label class="label">Reason for closing</label>
                    <div class="control">
                        <textarea class="textarea" name="reason" placeholder="Resolved, duplicate, etc."
                            required></textarea>
                    </div>
                </div>
            </form>
        </section>
        <footer class="modal-card-foot">
            <button class="button is-danger" onclick="document.getElementById('close-form').submit()">Confirm
                Close</button>
            <button class="button" id="modal-cancel">Cancel</button>
        </footer>
    </div>
</div>

<script>
    const modal = document.getElementById('close-modal');
    const closeBtn = document.getElementById('close-btn');
    const modalCloseX = document.getElementById('modal-close-x');
    const modalCancel = document.getElementById('modal-cancel');
    const modalBg = document.querySelector('.modal-background');

    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            modal.classList.add('is-active');
        });
    }

    const closeModal = () => {
        modal.classList.remove('is-active');
    };

    if (modalCloseX) modalCloseX.addEventListener('click', closeModal);
    if (modalCancel) modalCancel.addEventListener('click', closeModal);
    if (modalBg) modalBg.addEventListener('click', closeModal);
</script>
{% endblock %}