{% include 'header.twig' %}



          <!-- Main variables *content* -->
		      <main>
         <div class="container-fluid mt-4">
			<div class="row">
				<div class="col-lg-7">
					<div class="card card-bg userCard h-100">
						<div class="row">
							<div class="ud-card" style="max-width: 550px">
								<h5>Welcome to the <span class="primary-color">support</span> section!</h5> 
								<p>Please be sure to check the <a href="/faq">Frequently asked questions</a> section before opening a support ticket. You will find many answers you are looking for in this section.</p>
                              
							</div>
							<img src="https://cdn.mypanel.link/a3vltc/jpoo0ueikyy6975o.png" class="ud-img">
						</div>
					</div>
				</div>
				
				<div class="col-lg-5 d-none d-md-block">
					<div class="card card-bg rankCard h-100" style="overflow: hidden">
						<div class="row">
							<div class="rc-card">
                              <h5 class="mb-4"><strong>Support Hours:</strong> 09.00 - 23.59</h5>
                            
                              <p class="pb-3">Support requests can take <strong>0-2 hours</strong> to respond.</p>
                              
                                {% if ticketCount %}  <span class="alert alert-success">You have <strong>{{ ticketCount }}</strong> support requests.</span>{% endif %}
							</div>
							<img src="https://cdn.mypanel.link/a3vltc/j7sdqm0ssogw5he5.png" class="rc-img-2">
                          
						</div>
					</div>
				</div>
			</div>
           
			 <div class="row">
				<div class="col-lg-7">
					 <div class="page overflow-hidden">
						<div class="page-body pb-4 pb-xl-6 mt-4">
						   <div class="card mb-2">
							  <div class="card-head d-flex align-items-center justify-content-between">
									<div class="card-head-title">
										<div class="row align-items-center">
											<div class="col-auto">
											  <div class="card-head-icon">
												<i class="ri-chat-1-line"></i>
											  </div>
											</div>
											<div class="col">
											  <h4>#{{ ticket['ticket_id'] }} - &nbsp;{{ messageList['ticket']['subject'] }}</h4>
											</div>
										</div>
									</div>
							  </div>
							  <div class="card-body pt-3 pb-3">
								  <div class="schat-body">
									<div class="schat-chat-body">
									  <div class="schat-body-content">
										<ul class="chat">
														
														 {% if messageList %}
                {% for message in messageList %}
                {% if message["support"] == 1 %}
																		  										                                            <li class="user">
												<div class="l">
													<div class="answer">
													{{ message["message"] }}<br>
                                                      	<small class="pt-2">{{ user["username"] }} &nbsp; {{ message["time"] }}</small>
													</div>
													
												</div>
												<div class="r">
													<span class="avatar">u</span>
												</div>
											</li>
											
													 {% elseif message["subject"] %}
                                                    {% else %}
                                                    							  																					<li class="web">
												<div class="r">
													<span class="avatar">s</span>
													<small>Support</small>
												</div>
												<div class="l">
													<div class="answer">{{ message["message"] }}<div class="mobiledetail d-none"><br /><br /><small>support</small></div>
													</div>
													<small>{{ message["time"] }}</small>
												</div>
											</li>
											  {% endif %}

                {% endfor %}
              {% endif %}
              								  									                                        </ul>

									  </div>
									  

									</div>
											<div class="schat-input">
											{% if messageList['ticket']['canmessage'] == 2 %}							    
								  <form id="ticketsend"  method="post" action="tickets/{{ messageList['ticket']['ticket_id'] }}">
								      
								        {% if error %}
        <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          {{ errorText }}
        </div>
      {% endif %}
      {% if success %}
        <div class="alert alert-dismissible alert-success">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          {{ successText }}
        </div>
      {% endif %}
								      
																		  <div class="schat-msg-input">
										<input type="text" id="message" rows="5" class="form-control" name="message">
									{{ data["message"] }}
										<button class="btn btn-primary btn-sm btn-round sd-send-btn me-2" type="submit">
										  <span class="d-none d-md-inline-block">Submit</span>
										  <i class="ri-send-plane-fill fw-400 ms-md-2"></i>
										</button>
									  </div>
									 </form>
									</div>
               					 	{% endif %}							  </div>

							  </div>
						   </div>
						</div>
					 </div>
				</div>
				<div class="col-lg-5">
					 <div class="page overflow-hidden">
						<div class="page-body pb-4 pb-xl-6 mt-4">
						   <div class="card mb-2">
							  <div class="card-body">
                                   <div class="scd-item">
                                      <div class="title">Priority</div>
                                      <div class="text">Normal</div>
                                    </div>

                                    <div class="scd-item">
                                      <div class="title">Response Time</div>
                                      <div class="text">1-3 Hour</div>
                                    </div>

                                    <div class="scd-item">
                                      <div class="title">Department</div>
                                      <div class="text">Customer Support</div>
                                    </div>
                                <a href="/tickets" class="btn btn-primary btn-100 mt-4">Back to Support page</a>
							  </div>
						   </div>
						</div>
					 </div>
				</div>
			 </div>
         </div>
      </main>

		


      
      <div class="mobile-navbar">
        <div class="mobile-navbar-content">
            <a href="/" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="far fa-box-heart"></i>
                </div>
                <div class="mnc-item-text">New order</div>
            </a>
            <a href="/addfunds" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-exchange-dollar-line"></i>
                </div>
                <div class="mnc-item-text">Add funds</div>
            </a>
            <a href="/tickets" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-customer-service-2-line"></i>
                </div>
                <div class="mnc-item-text">Tickets</div>
            </a>
            <a href="/services" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-list-check-2"></i>
                </div>
                <div class="mnc-item-text">Services</div>
            </a>
        </div>
    </div>
  
       <div class="bs-toast">
         <div class="bs-toast-content">
            <div class="toast-text">Copy to clipboard</div>
         </div>
      </div>

      <div class="overlay"></div>


{% include 'footer.twig' %}
