{% include 'header.twig' %}
<div class="top-padding"></div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="page-header-lgin">
        <div class="contpghdr">
          <span class="bdghdr threedblue">Boost Bayan PH</span>
          <h2><span>HELP</span> DESK</h2>
          <p>We deal every query as an priority with excellence and proffesionalism.</p>
        </div>
        <img src="https://cdn.mypanel.link/edeed4/jedxgchyoqs203fx.png">
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="well">
        <div class="wellhdr">
          <div class="headrwell">
            <i class="far fa-ticket-alt"></i>
            <p>
              Create a Tickets
            </p>
          </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>
{% endif %}
        
        <form  method="post" action="" id="ticketsend" onSubmit="form_submit()">

          <div class="siginInRow form-group">
            <label for="subject" class="control-label">Subject</label>
												<select class="form-control" id="subject" name="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="Other">Other</option>
												</select>
          </div>
          <div class="siginInRow form-group" id="order-group">
            <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>
            <br>
            <label class="control-label">Order Id's</label>
            <input type="text" class="form-control" id="orderid" placeholder="Multiple orders? please spearate them with commas ( Ex: 215000,226000,237000 )">
          </div>
          <div class="siginInRow form-group" id="payment-group" style="display: none;">
<label>Payment</label>
												<select class="form-control" name="payment" id="payment">
													<option value="Select Payment Method">Select Payment Method</option><option value="Phonepe Qr">Phonepe Qr</option><option value="Paytm Qr">Paytm Qr</option><option value="Gpay | Fampay | All UPI">Gpay | Fampay | All UPI</option><option value="Automatic - Easypaisa | Jazzcash | Bank">Automatic - Easypaisa | Jazzcash | Bank</option><option value="Easypaisa | Sadapay Manual">Easypaisa | Sadapay Manual</option><option value="Jazzcash Manual">Jazzcash Manual</option><option value="Bkash | Nagad | Rocket">Bkash | Nagad | Rocket</option><option value="Gcash Manual">Gcash Manual</option><option value="Touch n Go Manual">Touch n Go Manual</option><option value="Cryptomus [ All Crypto Currency ]">Cryptomus [ All Crypto Currency ]</option><option value="Binance Pay [ USDT ]">Binance Pay [ USDT ]</option><option value="Crypto [ USDT (TRC 20) - BTC ]">Crypto [ USDT (TRC 20) - BTC ]</option><option value="Visa | MasterCard">Visa | MasterCard</option><option value="PayPal">PayPal</option><option value="Voucher System">Voucher System</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="siginInRow form-group" id="service-group" style="display: none;">
            <label class="control-label"> Service Name :</label>
            <input type="text" class="form-control" id="servicename">
            <br>
            <label class="control-label">Your Query</label>
            <input type="text" class="form-control" id="servicequery">
          </div>
          <div class="siginInRow form-group" id="discount-group" style="display: none;">
            <label class="control-label"> Service Id :</label>
            <input type="text" class="form-control" id="discserviceid">
            <br>
            <label class="control-label"> Your Username :</label>
            <input type="text" class="form-control" id="discserviceun">
            <br>
            <label class="control-label"> Daily Spending after discount :
            </label>
            <input type="text" class="form-control" id="discservicespend">
          </div>
          <div class="siginInRow form-group" id="contact-group" style="display: none;">
            <label class="control-label"> Subject :</label>
            <input type="number" class="form-control" name="payment_amount" id="addamount">
          </div>-->
          <div class="siginInRow form-group">
            <label for="message" class="control-label">Describe it<span id="optional"> (optional) </span></label>    
            <textarea class="form-control" rows="7" id="message" name="raw_message"  placeholder="Please let us know in few words, about the reason behind your Request so that we can assist you."></textarea>
          </div>
          <div class="form-group">
            <div
                 class="tickets-uploader"
                 data-rtl="false"
                 data-lang-button-attach="Attach files"
                 data-lang-file-format-incorrect="Invalid file format"
                 data-lang-file-size-incorrect="File is too large (limit 5 MB)"
                 ></div>
          </div>
          <input id="hmessage" name="message" type="hidden"  />
          	<input type="hidden" name="_csrf"  value="3b279d02eb2c53d8e23af76ddec89aca_eabd8ffd1715a8b9a4d05d303698e32f" />
											<input type="hidden" name="add_ticket" value="add_ticket" />
											<button type="submit" class="btn btn-primary">Submit ticket</button>
										</form>
      </div>
    </div>
    <div class="col-md-6">
            <div class="row">
        <div class="col-md-12">
          <div class="nav-pills ">
            <form action="" method="get" id="history-search">
              <div class="input-group">
                <input type="text" class="form-control" value="" name="search" placeholder="Search">
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary" style=""><i class="fa fa-search" aria-hidden="true"></i></button>
                </span>
              </div>
            </form>
          </div>
        </div>
      </div>
            <div class="well">
        <div class="wellhdr">
          <div class="headrwell">
            <i class="far fa-ticket-alt"></i>
            <p>
              Your Tickets
            </p>
          </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>
  </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>
				