{% include 'header.twig' %}

<style>
    .Kpcss {

        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 13px;

        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .2),
        -1px -1px 5px rgba(0, 0, 0, .1);

    }
    .Kpcss2 {
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #ffffff;
        border: 1px solid #059fff;
        border-radius: 13px;

        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .2),
        -1px -1px 5px rgba(0, 0, 0, .1);

    }  

        </style>      			
<div class="wrapper-content">
	<div class="wrapper-content__header"></div>
	<div
		class="wrapper-content__body">
		<!-- Main variables *content* -->
		<div class="container-fluid container-fluid-spacious">
				<div class="col-md-8 col-md-offset-2">
					<div class="row">
						<div  class="col-md-12">
							<div class="component_card">
								<div  class="card">
									
								
						
				
								  <div id="main-page" class="Kpcss"class="well  table-responsive">		
        <img src="https://imgbb.host/images/N8tFG.png"'' alt="Hello dear user" class="img-fluid logo-white" >
				
				</div>
					</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><br>
									{% 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> <br>
								


									

										<form method="post" action="tickets">
										
										<div class="">
											<div class="form-group">
												<label  for="subject" class="control-label">{{ lang['tickets.subject'] }}</label>
												<input class="form-control" id="subject" name="subject" value="{{ data['subject'] }}">
											</div>
											<div class="form-group">
												<label for="message" class="control-label">{{ lang['tickets.message'] }}</label>
												<textarea class="form-control" rows="7" id="message" name="message">{{ data['message'] }}</textarea>
											</div>
											
										</div>
										<div class="component_button_submit">
											<div class="">
												<button class="btn btn-block btn-primary" type="submit">
													{{ lang['tickets.button'] }}
												</button>
											</div>
										</div>
									</form>

								{% endif %}


								

								<div class="tab-content" id="pills-tabContent">
								<!-- New Order Tab -->
								
								<div class="tab-pane  active in" id="new-ticket" role="tabpanel" aria-labelledby="pills-home-tab">
								  <div id="main-page" class="Kpcss2"class="well  table-responsive">
								   
								  <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="Child Panel">Child Panel</option>
										  <option value="Request">Request</option>
										  <option value="Real Followers">Real Followers</option>
										  <option value="Blue Badge Verification">Blue Badge Verification</option>
										  <option value="Other">Other</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="Refill">Refill</option>
										  <option value="Cancel">Cancel</option>
										  <option value="Speed-up">Speed Up</option>
										  <option value="Restart">Restart</option>
										  <option value="Not-Started">Not Started</option>
										  <option value="Mark-as-completed-without-done">Mark as completed without done</option>
										  <option value="Other">Other</option>
										</select>
									  </div>
									  <div class="form-group" id="payment-group" style="display: none;">
										<label>Payment</label>
										<select class="form-control" name="payment" id="payment">
										  <option value="PayTM / PHONEPE">PayTM / PHONEPE</option>
										  <option value="Other">Other</option>
										</select>
										<label style="margin-top:15px">Payment / Transaction ID(s):</label>
										<input type="text" class="form-control" name="transaction_id" id="PaymentID">
										<label style="margin-top:15px">Payment / Email ID(s):</label>
										<input type="text" class="form-control" name="payment_email" id="emailID">
										<label style="margin-top:15px">Add 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="raw_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-primary">Submit ticket</button>
									</form>
								  </div>
								
								  
							
							
							



						
							
							  
										</div>
									</div>
										               <div class="Kpcss2" class="well"><div class="form-group">
      
	      
	  <div class="table-responsive">
        <table class="table ">							<thead>
												<tr>
																	<th>{{ lang['tickets.id'] }}</th>
																	<th>{{ lang['tickets.subject'] }}</th>
																	<th>{{ lang['tickets.status'] }}</th>
																	<th class="nowrap">{{ lang['tickets.updated'] }}</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>{{ ticket['status'] }}</td>
																		<td>
																			<span class="nowrap">{{ ticket['lastupdate_time'] }}</span>
																		</td>
																	</tr>
																{% endfor %}
														</tbody>
													</table>
													<div></div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
											<nav class="component_pagination">
												<div class=""></div>
											</nav>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				{% include 'footer.twig' %}

				<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("orderid").value
						message = "Order ID: " + document.getElementById("orderid").value + " " + "Request: " + document.getElementById("want").value + " , Message : " + document.getElementById("message").value;
					  } else if (subject == "Payment") {
						subject = subject + " : " + document.getElementById("payment").value
						message = "Payment : " + document.getElementById("payment").value + " , " + "Transaction ID : " + document.getElementById("PaymentID").value + " , " + "Payment Email ID : " + document.getElementById("emailID").value + " , " + "Amount : " + document.getElementById("addamount").value + " , Message :  " + document.getElementById("message").value;
					  } else {
						message = document.getElementById("message").value;
					  }
					  
					  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>
				