{% include 'header.twig' %}
      <div class="content">
        <!-- page and other top info -->
        <div id="page_info">

        </div>
        <!-- // page and other top info -->
        <section id="tickets_page">
  <div class="container-fluid">
     <div class="row">
        <div class="col-md-12">
           <div class="card card_v2 mb-4">
              <div class="card-body">
                 <form action="/tickets" method="get" id="history-search">
                    <div class="input-group">
                       <input type="text" name="search" class="form-control" value=""
                          placeholder="Search">
                       <span class="input-group-btn">
                       <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
                       </span>
                    </div>
                 </form>
              </div>
           </div>
        </div>
     </div>
          <div class="row">
        <div class="col-md-12">
           <div class="card card_v2">
              <div class="card-body">
                 <div  id="newOrderTabsWrap">
                    <ul class="nav nav-pills tab_btn_wrap mb-3" id="pills-tab" role="tablist">
                       <li class="nav-item" role="presentation">
                          <button class="nav-link active" id="pills-order-tab" data-bs-toggle="pill" data-bs-target="#pills-order" type="button" role="tab" aria-controls="pills-order" aria-selected="true"> <i class="fas fa-ticket-alt"></i> New Ticket</button>
                       </li>

                    </ul>
                 </div>

            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
   {% if settings['ticket_form'] == 1 %}  
      
                      	<form method="post" action="" id="ticketsend"class="">
                      	        
                          <div class="alert alert-dismissible alert-danger ticket-danger " style="display: none">
                            <button type="button" class="close">&times;</button>
                            <div></div>
                          </div>
								       
									<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="siginInRow form-group ticket-textarea" >
                              <label class="control-label">Message</label>    
                             <textarea class="form-control" rows="4" cols="50" id="message" name="message" style="min-height: 100px; display: block;">{{ data['message'] }}</textarea>
								   </div>
                             <button type="submit" class="btn btn-primary d-blc w-100" id="sendTicket">Submit ticket</button>
                          </span>
                        </form>

                    </div>
                    {% endif %} 
                    
                    
                    
                    
                    
         {% if settings['ticket_form'] == 2 %}
      
      <form method="post" action="tickets" id="ticketsend" onSubmit="form_submit()">
							  
									  
									  <div class="form-group">
										<label for="subject" class="control-label">Subject</label>
										<select class="form-control" id="subject" name="raw_subject" onchange="handleOrderType(this)" >
										  <option value="Order" selected="">Order</option>
										  <option value="Payment">Payment</option>
										  <option value="Api">API</option>
										  <option value="Request">Request</option>
										  <option value="Discount">Discount</option>
										  <option value="Other">Others</option>
										</select>
									   
										
									  </div>
									  <div class="form-group" id="order-group" style="display: block;">
										<label>Order ID: [For multiple orders, please separate them using comma. Example: 31851525,31851511,31851509]</label>
										<input type="text" class="form-control" id="orderid">
										<label style="margin-top:15px">Request</label>
										<select class="form-control" name="want" id="want">
										  <option value="Speed-up">Speed Up</option>
										  <option value="Cancel">Cancel</option>
										  <option value="Refill">Refill</option>
										  <option value="Restart">Restart</option>
										  <option value="Not-Started">Not Started</option>						  
										  <option value="Others">Others</option>
										</select>
									  </div>
									  <div class="form-group" id="payment-group" style="display: none;">
										<label>Payment Method</label>
										<select class="form-control" name="payment" id="payment">
										  <option value="Bkash">Bkash</option>
                                          <option value="Nagad">Nagad</option>
                                          <option value="Rocket">Rocket</option>
                  
                <option value="Payeer">Payeer</option>
                <option value="PayPal">PayPal</option>
                 <option value="Binance">Binance</option>
                  <option value="Perfect Money">Perfect Money</option>
                                          <option value="Others">Others</option>
										</select>
										<label style="margin-top:15px">Payment ID / Transaction ID:</label>
										<input type="text" class="form-control" name="transaction_id" id="PaymentID">
										<label style="margin-top:15px">Payment Number / Email ID:</label>
										<input type="text" class="form-control" name="payment_email" id="emailID">
										<label style="margin-top:15px">Payment Amount</label>
										<input type="number" class="form-control" name="payment_amount" id="addamount">
									  </div>
									  <div class="form-group message">
										<label for="message" class="control-label">Message</label>
										 <textarea class="form-control" rows="7" id="message" name="message">{{ data['message'] }}</textarea>
									  </div>
									  <input id="hmessage" name="message" type="hidden">
									  <input id="hsubject" name="subject" type="hidden">
									  
									 
									  <input type="hidden" name="add_ticket" value="add_ticket">
									  <button type="submit" class="btn btn-block btn-big-primary">Submit ticket </button>
              
                                    </div>
                            </div>
                                  
                         </form>
      
      
      
      
      
      
      
      <script>
					document.getElementById("payment-group").style.display = "none";
				  
					function handleOrderType(selectObject) {
					  var element = document.getElementById("order-group");
					  var element2 = document.getElementById("payment-group");
					  var optional = document.getElementById("optional");
				  
					  if (selectObject.value == "Order") {
						element.style.display = "block";
						element2.style.display = "none";
						optional.style.display = "block";
					  } else if (selectObject.value == "Payment" ) {
						element.style.display = "none";
						element2.style.display = "block";
						optional.style.display = "none";
					  } else if (selectObject.value == "Other") {
						element.style.display = "none";
						element2.style.display = "none";
						optional.style.display = "none";
					  }else{
						element.style.display = "none";
						element2.style.display = "none";
						optional.style.display = "none";
					  }
					}
				  
					function createTicket(e) {
					  if (e.preventDefault) e.preventDefault();
				  
					  var subject = document.getElementById("subject").value;
					  var message = "";
if (subject == "Order") {
    subject = subject + " : " + document.getElementById("want").value;
    message = "<span><div><b>Order ID</b>: " + document.getElementById("orderid").value + "</div><hr><div><b>Request</b>: " + document.getElementById("want").value + "</div><hr><div><b>Message</b>: " + document.getElementById("message").value + "</div></span>";
} else if (subject == "Payment") {
    subject = subject + " : " + document.getElementById("payment").value;
    message = "<span><div><b>Payment Method</b>: " + document.getElementById("payment").value + "</div><hr><div><b>Transaction ID</b>: " + document.getElementById("PaymentID").value + "</div><hr><div><b>Payment Number</b>: " + document.getElementById("emailID").value + "</div><hr><div><b>Amount</b>: " + document.getElementById("addamount").value + "</div><hr><div><b>Message</b>: " + document.getElementById("message").value + "</div></span>";
} else {
    message = "<span><div><b>Message</b>: " + document.getElementById("message").value + "</div></span>";
}
					  
					  document.getElementById("hmessage").value = message;
					  document.getElementById("hsubject").value = subject;
				  
					  return true;
					}
					
					function form_submit(){
					  var form = document.getElementById("ticketsend");
					  createTicket(form);
					  form.submit();
					}
					</script>
      
      
      
      {% endif %}                 
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                 

                 </div>
              </div>
           </div>
        </div>
        
        
        
        
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      <div class="col-lg-12">
           <div class="card card_v2">
            <div class="card-header v2_header">
              

              <div class="card-body">
                <div class="tab-content tab_wrap" id="pills-tabContent">
                  <div class="tab-pane fade show active" id="pills-favorite" role="tabpanel" aria-labelledby="pills-favorite-tab">
                        
							                              <div class="tickets-list__margin-table">
                                <div class="table-bg component_table ">
                                    <div class="table-wr table-responsive">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th><span class="">ID</th>
                                                <th><span class="">Subject</th>
                                                <th><span class="">Status</th>
                                                <th class="nowrap"><span class="">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 %}
                              </div>  
							
							
							
							
							
							
							
						  							  </div>
						   </div>
						</div>
					 </div>
				</div>
			 </div>
         </div>
      </main>              
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
                                               
              
{% include 'footer.twig' %}