{% include 'header.twig' %}

<main class="main_content">
                <div class="container-fluid">
  <div class="row">
      <div class="col-lg-12 col-12">
          <div class="mb-3">
              <div class="alert alert-warning fs-16">
                  Please make sure to read our Terms before opening a ticket! Check out our general, service, and
                  refund policy here: Terms and Service
              </div>
          </div>
							        {% if error %}
        <div class="alert alert-dismissible alert-danger {% if site['rtl'] %} rtl-alert {% endif %}">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ errorText }}
        </div>
      {% elseif success %}
        <div class="alert alert-dismissible alert-success {% if site['rtl'] %} rtl-alert {% endif %}">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ successText }}
        </div>
      {% endif %}
      
      
      
                <div class="card card_type_3">
              <div class="card-header">
                  <ul class="nav nav-pills" id="pills-tab" role="tablist">
                      <li class="nav-item" role="presentation">
                          <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                              data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                              aria-selected="true">
                              <span class="text">
                                  Tickets
                              </span>
                          </button>
                      </li>
                      <li class="nav-item" role="presentation">
                          <button class="nav-link" id="pills-profile-tab" data-bs-toggle="modal"
                              data-bs-target="#staticBackdrop">
                              <span class="text">
                                  New Tickets
                              </span>
                          </button>
                      </li>
                  </ul>
              </div>
              <div class="card-body p-0">
                  <div class="tab-content" id="pills-tabContent">
                      <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                          aria-labelledby="pills-home-tab" tabindex="0">
                          <table class="table ">
                              <thead>
                                  <tr>
                                      <th>ID</th>
                                      <th>Subject</th>
                                      <th>Status</th>
                                      <th class="nowrap">Last update</th>
                                  </tr>
                              </thead>
                              <tbody>
                                                {% for ticket in ticketList %}
                <tr>
                  <td>{{ ticket['ticket_id'] }}</td>
                  {% if ticket["support_new"] == 2 %}
                    <td><a href="tickets/{{ ticket['ticket_id'] }}"><strong>{{ ticket['subject'] }}</strong></a></td>
                  {% else %}
                    <td><a href="tickets/{{ ticket['ticket_id'] }}">{{ ticket['subject'] }}</a></td>
                  {% endif %}
                  <td>
                      
                      
                      
                      
                      {% if ticket['status'] == lang['tickets.status.answered'] %}
								<div class="ordStatus align-items-center" style="background: #28a745; color:#000; border-radius: 15px; padding: 5px 15px; font-size: 12px; text-align: center;">
								   <i class="ri-checkbox-line"></i>
								   <span style="color:#ffffff">{{ticket['status']}}</span>
								</div>
								{% endif %}
								
              {% if ticket['status'] == lang['tickets.status.all'] %}
								<div class="ordStatus align-items-center" style="background: #ff870b; color:#000; border-radius: 15px; padding: 5px 15px; font-size: 12px; text-align: center;">
								   <i class="ri-loader-2-line"></i>
								   <span style="color:#ffffff">{{ticket['status']}}</span>
								</div>
								{% endif %}
                
                {% if ticket['status'] == lang['tickets.status.pending'] %}
								<div class="ordStatus align-items-center" style="background: #0000ff; color:#000; border-radius: 15px; padding: 5px 15px; font-size: 12px; text-align: center;">
								   <i class="ri-file-damage-line"></i>
								   <span style="color:#ffffff">{{ticket['status']}}</span>
								</div>
								{% endif %}
								
								{% if ticket['status'] == lang['tickets.status.expired'] %}
								<div class="ordStatus align-items-center" style="background: #11698e; color:#000; border-radius: 15px; padding: 5px 15px; font-size: 12px; text-align: center;">
								   <i class="ri-star-half-line"></i>
								   <span style="color:#ffffff">{{ticket['status']}}</span>
								</div>
								{% endif %}
								
									{% if ticket['status'] == lang['tickets.status.paused'] %}
								<div class="ordStatus align-items-center" style="background: #61c0bf; color:#000; border-radius: 15px; padding: 5px 15px; font-size: 12px; text-align: center;">
								   <i class="ri-remote-control-line"></i>
								   <span style="color:#000">{{ticket['status']}}</span>
								</div>
								{% endif %}
								
								
									{% if ticket['status'] == lang['tickets.status.closed'] %}
								<div class="ordStatus align-items-center" style="background: #ec4646; color:#000; border-radius: 15px; padding: 5px 15px; font-size: 12px; text-align: center;">
								   <i class="ri-qr-scan-line"></i>
								   <span style="color:#ffffff">{{ticket['status']}}</span>
								</div>
								{% endif %}
                      
                      
                      
                      
                      
                    </td>
                  <td><span class="nowrap">{{ ticket['lastupdate_time'] }}</span></td>
                </tr>
              {% endfor %}
                                                                    <tr>
                                      </td>
                                                                </tbody>
                          </table>
                      </div>
                  </div>

              </div>

          </div>
      </div>
  </div>
</div>
      
      
      <!-- Ticket Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
  aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog  modal-dialog-centered">
      <div class="modal-content">
          <div class="modal-header">
              <h1 class="modal-title fs-5" id="staticBackdropLabel">New Ticket</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
                    <div class="modal-body">
              <form  method="post" action="tickets" id="ticketsend" onsubmit="createTicket();">
                  <div class="alert alert-dismissible alert-danger ticket-danger "
                      style="display: none">
                      <button type="button" class="close">×</button>
                      <div></div>
                  </div>
      
      
      
      
      
							  <div class="card-body pt-3 pb-3">							      
			<form  method="post" action="" id="ticketsend">
								       
									<div class="form-group subject-panel">
									  <label for="select_subject" class="form-label">Subject</label>
<select  type="text" class="form-control" id="subject" name="subject">
                                  {% for subjects in orders %}
                   <option value"{{ subjects['subject'] }}">{{ subjects['subject'] }}</option>
                  {% endfor %}
                              </select>

								   </div>
								   <div class="form-group">
									  <label for="message" class="form-label">Message (Optional)</label>
									  <textarea class="form-control" rows="7" id="message" name="message">{{ data['message'] }}</textarea>
								   </div>
								   <button type="submit" class="btn btn-primary btn-100 mt-3">{{ lang['tickets.button'] }}</button>

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



                              </div>  
							
							
							
							
							
							
							
						  							  </div>
						   </div>
						</div>
					 </div>
				</div>
			 </div>
         </div>
      </main>              
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
              
{% include 'footer.twig' %}