{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_tickets' %}

{% set breadcrumbs = [
    {
        'link' : path('app_admin_dashboard'),
        'title': 'Home'
    },
	{
		'title':'Support Ticket Management'
	},
    {
        'link' : path('app_admin_tickets'),
        'title': 'Tickets'
    },
    {
        'title': 'Chat',
    }
]%}


{% block stylesheets %}

	<style>
		.chat {
			overflow-y: auto; /* Add vertical scrollbar */
			max-height: 350px; /* Define max height for scrolling */
			height: 350px;
		}
		.card-footer {
			height: 90px;
		}
		.read-tick {
			color: blue;
			font-size: 18px;
			margin-left: 2px;
			margin-top: -4px;
		}
		.unread-tick {
			color: gray;
			font-size: 18px;
			margin-left: 2px;
			margin-top: -4px;
		}
		.msg-datetime {
			font-size: 12px
		}
		.msg-info-name {
			justify-content: space-between;
			margin-right: 10px;
			font-weight: bold;
			font-size: 10px;
		}
		.ticket-status {
			float: right;
		}
		.ticket-status .badge {
			background-color: #f08080; /* Light coral color */
		}
		/* Adjust the position of the send button */
		#reply {
			border-radius: 25px; /* Rounded corners to match WhatsApp style */
		}
		.input-group {
			position: relative;
		}
		.input-group {
			display: flex;
			align-items: center;
		}
		#reply {
			flex: 1; /* Take up remaining space */
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			resize: none;
			overflow-y: auto; /* Enable vertical scrolling */
			max-height: 70px; /* Set a maximum height */
			transition: height 0.2s;
		}
		#replyBtn {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			margin-left: -1px; /* Adjust for the border between textarea and button */
		}

        .ph.ph-paper-plane-right:before {
            content: "\e396" !important;
            color: white !important;;
        }
	</style>
{% endblock %}

{% block content %}

	<div class="container">
		<div class="row justify-content-center">
			<div class="col-md-12" style="position: absolute;">
				<div class="card border-0">
					<div class="card-header m-0">
						<div class="" style="font-size:12px;">
							<div class="ticket-details" style="font-size: medium;">
								<div class="row">
									<div class="col-10">
										<b>Subject:</b>{{ ticket.subject }}
									</div>
									<div class="col-2">
										<button class="btn btn-indigo badge before-close" style="cursor: pointer; font-size: 13px; padding: 6px;"  onclick="setMessageAndSend('{{ ticket.user.firstname }} {{ ticket.user.lastname }}', '{{whiteLabelClient}}')">Send Review Message</button>
									</div>
								</div>
								<div class="form-group">
									<b>Category:</b>
									<span id="ticket-category">{{ ticket.category.name }}</span>
								</div>
								<div class="form-group">
									<b>Ticket created:</b>
									<span>{{ ticket.createdat|date('F d, Y') }}</span>
								</div>
								<div class="form-group">
									<b>Description:</b>
									<span>{{ ticket.description }}</span>
								</div>
								<div class="form-group">
									<b>Status:</b>
									<span class="badge	{{ticket.status == 'open' ? 'bg-success' : 'bg-danger' }}">{{ticket.status|upper}}</span>
								</div>
							</div>
						</div>
					</div>


					<div class="card-body chat">
						<div id="chat-content">
							{{ include('common/message.html.twig') }}
						</div>
					</div>


					<div class="card-footer" >
						{% if ticket.getAcceptedBy is defined and ticket.getAcceptedBy is not empty and app.user == ticket.getAcceptedBy and ticket.status == "open" %}
							<form action="#" id="form" style="display: {{ticket.status == 'close' ? 'none' : 'block'}}">
								<div class="input-group mb-3">
									<textarea class="form-control" id="reply" rows="1" placeholder="Message"></textarea>
									<button class="btn p-1 btn-block" id="replyBtn" data-ticket-id="{{ticket.id}}">
										<i class="ph ph-paper-plane-right"></i>
									</button>
								</div>
							</form>
						{% endif %}
						<p style="display: {{ticket.status == 'close' ? 'block' : 'none'}}; text-align:center; color:gray;">Ticket Conversation has been closed</p>
					</div>

				</div>
			</div>
		</div>
	</div>

{% endblock %}
{% block javascripts %}
	{% include 'common/ticket_conversation.js.twig' %}
{% endblock %}