{% extends 'base.html.twig' %}
{% import "_modules/bsmacros.html.twig" as bs %}

{% block title %}
	{{ parent() }}
	- Ticket #{{ ticket.id }}
{% endblock %}

{% block content %}
	{% for label, messages in app.flashes %}
		{% for message in messages %}
			{{ bs.alert(message, label) }}
		{% endfor %}
	{% endfor %}

	<div class="card shadow-sm mb-4">
		<div class="card-header d-flex justify-content-between align-items-center">
			<h2 class="card-title h4 mb-0">{{ ticket.subject }}</h2>

			<div class="d-flex gap-2">
				{% if app.user.isAdmin() %}
					<div class="dropdown">
						<button class="btn btn-outline-primary dropdown-toggle" type="button" id="statusDropdown" data-bs-toggle="dropdown" aria-expanded="false">
							Status:
							{% set status_class = {
                  'open': 'primary',
                  'in_progress': 'info',
                  'resolved': 'success',
                  'closed': 'secondary'
              } %}
							{{ bs.badge(ticket.status|capitalize, status_class[ticket.status]) }}
						</button>
						<ul class="dropdown-menu" aria-labelledby="statusDropdown">
							<li>
								<a class="dropdown-item" href="{{ path('app.tickets.status', {'id': ticket.id, 'status': 'open'}) }}">Open</a>
							</li>
							<li>
								<a class="dropdown-item" href="{{ path('app.tickets.status', {'id': ticket.id, 'status': 'in_progress'}) }}">In Progress</a>
							</li>
							<li>
								<a class="dropdown-item" href="{{ path('app.tickets.status', {'id': ticket.id, 'status': 'resolved'}) }}">Resolved</a>
							</li>
							<li>
								<a class="dropdown-item" href="{{ path('app.tickets.status', {'id': ticket.id, 'status': 'closed'}) }}">Closed</a>
							</li>
						</ul>
					</div>
				{% endif %}

				{% if app.user.isAdmin() or app.user == ticket.createdBy %}
					<a href="{{ path('app.tickets.edit', {'id': ticket.id}) }}" class="btn btn-outline-secondary">
						<i class="fas fa-pencil"></i>
						Edit
					</a>
					{% if ticket.status != 'closed' %}
						<a href="{{ path('app.tickets.close', {'id': ticket.id}) }}" class="btn btn-outline-danger" onclick="return confirm('Are you sure you want to close this ticket?');">
							<i class="fas fa-x-circle"></i>
							Close
						</a>
					{% endif %}
				{% endif %}
			</div>
		</div>
		<div class="card-body">
			<div class="row mb-4">
				<div class="col-md-6">
					<dl class="row mb-0">
						<dt class="col-sm-4">Created by:</dt>
						<dd class="col-sm-8">{{ ticket.createdBy.username }}</dd>

						<dt class="col-sm-4">Created on:</dt>
						<dd class="col-sm-8">{{ ticket.createdAt|date('Y-m-d H:i') }}</dd>

            <dt class="col-sm-4">Status:</dt>
            <dd class="col-sm-8">
              {% set status_class = {
                  'open': 'primary',
                  'in_progress': 'info',
                  'resolved': 'success',
                  'closed': 'secondary'
              } %}
              {{ bs.badge(ticket.status|capitalize, status_class[ticket.status]) }}
            </dd>

						{% if ticket.updatedAt %}
							<dt class="col-sm-4">Last updated:</dt>
							<dd class="col-sm-8">{{ ticket.updatedAt|date('Y-m-d H:i') }}</dd>
						{% endif %}
					</dl>
				</div>
				<div class="col-md-6">
					<dl class="row mb-0">
						<dt class="col-sm-4">Priority:</dt>
						<dd class="col-sm-8">
							{% set priority_class = {
                                'low': 'success',
                                'medium': 'info',
                                'high': 'warning',
                                'critical': 'danger'
                            } %}
							{{ bs.badge(ticket.priority|capitalize, priority_class[ticket.priority]) }}
						</dd>

						<dt class="col-sm-4">Assigned to:</dt>
						<dd class="col-sm-8">
							{% if ticket.assignedTo %}
								{{ ticket.assignedTo.username }}
							{% else %}
								<span class="text-muted">Unassigned</span>
							{% endif %}
						</dd>
					</dl>
				</div>
			</div>

			<div class="card mb-4">
				<div class="card-body">
					<h5 class="card-title">Description</h5>
					<p class="card-text">{{ ticket.description|nl2br }}</p>
				</div>
			</div>

			{% if ticket.comments|length > 0 %}
				<h5>Comments ({{ ticket.comments|length }})</h5>
				<div class="comment-thread mb-4">
					{% for comment in ticket.comments %}
						<div class="card mb-3 {% if comment.author.isAdmin() %}border-danger{% endif %}">
							<div class="card-header d-flex justify-content-between align-items-center {% if comment.author.isAdmin() %}border-danger{% endif %}">
								<div class="d-flex align-items-center">
                  <div>
                    <img src="{{ ticket.createdBy.avatar }}" class="border rounded me-2">
                  </div>
                  <div>
                    <strong>{{ comment.author.username }}</strong>
                    {% if comment.author.isAdmin() %}
                      {{ bs.badge('Admin', 'danger') }}
                    {% endif %}
                    {% if comment.author == ticket.assignedTo %}
                      {{ bs.badge('Assigned', 'primary') }}
                    {% endif %}
                  </div>
								</div>
								<small class="text-muted">{{ comment.createdAt|date('M d Y g:i A') }}</small>
							</div>
							<div class="card-body">
								<p class="card-text">{{ comment.content|nl2br }}</p>
							</div>
						</div>
					{% endfor %}
				</div>
			{% endif %}

			{% if ticket.status != 'closed' %}
				<div class="card">
					<div class="card-header">
						<h5 class="card-title mb-0">Add Comment</h5>
					</div>
					<div class="card-body">
						{{ form_start(comment_form) }}
						{{ bs.form_row(comment_form.content) }}
						<button type="submit" class="btn btn-primary">
							<i class="fas fa-chat"></i>
							Submit Comment
						</button>
						{{ form_end(comment_form) }}
					</div>
				</div>
			{% endif %}
		</div>
	</div>
{% endblock %}

{% block scripts %}
	{{ parent() }}
	<script src="{{ asset('js/ticket.js') }}"></script>
{% endblock %}