{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_tickets' %}
{% set breadcrumbs = [
    {
         'link': path('app_front_dashboard'), 'title': 'Home'
    }
    ,
	{
        'title': 'Support Tickets'
    },
	{
        'link': path('app_front_tickets'),
        'title': 'Tickets'
    },
	{
 		'title': 'Chat'
	}
]%}

{% block stylesheets %}

	<style>
		.chat {
			overflow-y: auto; /* Add vertical scrollbar */
			max-height: 300px; /* Define max height for scrolling */
			height: 300px;
		}
		.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;">
								<b>Subject:</b>
								{{ ticket.subject }}
								<div class="form-group">
									<b>Category:</b>
									<span id="ticket-category">{{ ticket.category.name }}</span>
								</div>
								{%if product is defined and product is not empty %}
									<div class="form-group">
										<b>Product Name:</b>
										<span id="product-name">{{ product }}</span>
									</div>
								{% endif %}
								<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">
						<form action="#" id="form" style="display: {{ticket.status == 'closed' ? 'none' : 'block'}}">
							<div class="input-group mb-3">
								<textarea class="form-control" id="reply" rows="1" placeholder="Message" {% if ticket.acceptedBy is null %}  readonly {% endif %}></textarea>
								<button class="btn p-1 btn-block {% if ticket.acceptedBy is null %} disabled border-0 {% endif %}" id="replyBtn" data-ticket-id="{{ticket.id}}" >
									<i class="ph ph-paper-plane-right"></i>
								</button>
							</div>
						</form>

						<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 %}