{% include 'header.twig' %}
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <div class="dark-well">
        <ul class="nav nav-tabs dash-tab" id="myTab" role="tablist">
          <li class="nav-item active">
            <a class="nav-link " id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="far fa-plus-circle"></i> Add New Ticket</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="far fa-clock"></i> Ticket History</a>
          </li>
        </ul>
        
        
          
           {% 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="tab-content" id="myTabContent">
          <div class="tab-pane fade in active" id="home" role="tabpanel" aria-labelledby="home-tab">
              
          	<form  method="post" action="" id="ticketsend">
                
              <div class="siginInRow form-group">
                <label class="control-label">Subject</label>
             <select 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" id="order-group">
                <label class="control-label">Order ID: <span class="label-mute">[For multiple orders, please separate them using comma. (example: 10867110,10867210,10867500)] </span></label>
                <input type="text" class="form-control" id="orderid">

                <label class="control-label" style="margin-top: 15px;">Request</label>
                <select class="form-control extraoption" style="margin-top: 15px;" id="want">
                  <option value="Refill" selected>Refill</option>
                  <option value="Cancel">Cancel</option>
                  <option value="Speed-up">Speed Up</option>
                  <option value="Restart">Restart</option>
                  <option value="Restart">Not Started</option>
                  <option value="Other">Other</option>
                </select>

              </div>
              <div id="payment-group" style="display:none;">
                <div class="siginInRow form-group">
                  <label class="control-label">Payment</label>
                  <select class="form-control extraoption" style="margin-top: 15px;" id="payment">
                    <option value="Paypal" selected>Paypal ( We don't accept )</option>
                    <option value="Skrill">Skrill</option>
                    <option value="Payoneer">Payoneer</option>
                    <option value="JazzCash">JazzCash</option>
                    <option value="Perfect-money">Perfect Money</option>
                    <option value="Western-union">Western Union</option>
                    <option value="BTC">BTC</option>
                    <option value="Crypto-currency">Crypto Currency</option>
                    <option value="Other">Other</option>
                  </select>
                </div>
                <div class="siginInRow form-group">
                  <label class="control-label">Transaction Id</label>
                  <input type="text" class="form-control" id="paymentid">
                </div>
                <div class="siginInRow form-group"> 
                  <label class="control-label">Email Id</label>
                  <input type="email" class="form-control" id="paymentemail">
                </div>
                <div class="siginInRow form-group">
                  <label class="control-label">Payment Amount</label>
                  <input type="text" class="form-control" id="paymentamount">
                </div> 
              </div>
              <div id="api-group" style="display:none;">
                <div class="siginInRow form-group">
                  <label class="control-label">Website Url</label>
                  <input type="text" class="form-control" id="apiurl">
                </div>
                <div class="siginInRow form-group">
                  <label class="control-label">Whatsapp/Skype/Calling Details</label>
                  <input type="text" class="form-control" id="calldetail">
                </div>
                <div class="siginInRow form-group"> 
                  <label class="control-label">Monthly sell</label>
                  <input type="text" class="form-control" id="monthlysell">
                </div>
                <div class="siginInRow form-group">
                  <label class="control-label">On which service Id do you need discount' [(example 123,453,999,998,1023,564)]</label>
                  <input type="text" class="form-control" id="apidiscount">
                </div> 
              </div>
              <div id="bug-group" style="display:none;">
                <div class="siginInRow form-group">
                  <label class="control-label">Bug In Website</label>
                  <input type="text" class="form-control" id="websitebug">
                </div>
                <div class="siginInRow form-group">
                  <label class="control-label">Bug In Services</label>
                  <input type="text" class="form-control" id="servicebug">
                </div>
              </div>
              <div id="request-group" style="display:none;">
                <div class="siginInRow form-group">
                  <label class="control-label">ADD THIS SERVICE</label>
                  <input type="text" class="form-control" id="addservice">
                </div>
                <div class="siginInRow form-group">
                  <label class="control-label">ADD THIS FEATURE</label>
                  <input type="text" class="form-control" id="addfeature">
                </div>
                <div class="siginInRow form-group">
                  <label class="control-label">ADD THIS PAYMENT METHOD</label>
                  <input type="text" class="form-control" id="addpaymentmethod">
                </div>
              </div>  --->
                            <div class="siginInRow form-group">
               <label for="message">Message</label>
									   <textarea rows="7" id="message" name="message" class="form-control">{{ data['message'] }}</textarea>
									   </div>
  
            
            
               <button type="submit" class="btn btn-primary btn-block mt-4 mb-3">Submit ticket</button>
									</form>
          </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div class="search" style="margin: auto auto 20px;">
              <form action="/tickets" method="get" id="history-search" style="margin-bottom: 0;">
                <div class="input-group">
                  <input type="text" class="form-control" value="" name="search" placeholder="Search" style="color: #fff;">
                  <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 class="table-responsive">
              <table class="table ticket-table ">
                <thead>
                  <tr>
                    <th></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>
                                        <td><a href="/tickets/{{ ticket['ticket_id'] }}">{{ ticket['subject'] }}</a></td>
                                        <td>{{ ticket['status'] }}</td>
                    <td><span class="nowrap">{{ ticket['lastupdate_time'] }}</span></td>
                  </tr>
                                    
                                   {% endfor %} </tbody>
              </table>
            </div>
                              </div>
    </div>
  </div>

</div>
<div class="col-sm-6">
  <div class="dark-well">
    <div class="title">Ticket FAQs</div>
    <div class="ticket-accordian">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Orders
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              If You have a problem with your order,Open The ticket and Explain your problem
              First of all Select the order in the subject after this Fill in the Order ID in the  provided space Then choose your Request and click the submit button Our Team will check it And will reply to you as soon as possible
              
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Payments
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              If you have sent the Payment but its not added in to your account,Open the ticket and Choose Subject as Payment Then select Payment Method,
              Write the transaction Id,Email Id,Payment ammount,And your Message(if any have)And click the submit button our Payment department will Confirm your payment and add it as soon as possible into your account
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Child Panel
              </a>
            </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
             If you need a Child Panel then we provide the child panel for 20$ per month For the Child Panel You Must have a domain or you can buy it, We will provide 10% discount But   for the discount you need to spend at least 500$ per month via API
            
              .
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>


<script>
  f
  
  /*function createTicket(e) {*/
document.addEventListener('DOMContentLoaded', function () {
    jQuery('#send').click(function (e) {
        e.preventDefault();

    //  var paysub = $('#payment option:checked').val();
    var want = jQuery('#want :selected').val();
    var paym = jQuery('#payment :selected').val();
    var want1 = jQuery('#want1 :selected').val();
    //	var want = $('#want').find(":selected").val();
    //  var sub = document.getElementById("subject").value;
    //  var subject = sub + "-" + want;
    //   alert(subject);

    var subject = document.getElementById("subject").value;
    $finalsubject = subject;
    var message = "";
    if (subject == "New-Order" || subject == "New-VIP-Order") {
      message = "Order ID: " + document.getElementById("orderid").value + "\n" + "Request: " + document.getElementById("want").value  + "\n" + document.getElementById("message").value;
      $finalsubject += ' - ' + want;
    } else if (subject == "New-Payment" || subject == "New-VIP-Payment") {
      message = "Payment: " + document.getElementById("payment").value  + "\n" + "Payment Id: " + document.getElementById("paymentid").value + "\n" + "Payment Email: " + document.getElementById("paymentemail").value + "\n" + "Payment Amount: " + document.getElementById("paymentamount").value + "\n" +  document.getElementById("message").value;
      $finalsubject += ' - ' + paym;
    } else if (subject == "New-API" || subject == "New-VIP-API") {
      message = "Website Url: " + document.getElementById("apiurl").value  + "\n" + "Calling Details: " + document.getElementById("calldetail").value + "\n" + "Monthly Sell: " + document.getElementById("monthlysell").value + "\n" + "Discount: " + document.getElementById("apidiscount").value + "\n" +  document.getElementById("message").value;
    } else if (subject == "New-Bug" || subject == "New-VIP-Bug") {
      message = "Bug In Website: " + document.getElementById("websitebug").value  + "\n" + "Bug In Service: " + document.getElementById("servicebug").value + "\n" + document.getElementById("message").value;
    } else if (subject == "New-Request" || subject == "New-VIP-Request") {
      message = "ADD THIS SERVICE: " + document.getElementById("addservice").value  + "\n" + "ADD THIS FEATURE: " + document.getElementById("addfeature").value + "\n" + "ADD THIS PAYMENT METHOD: " + document.getElementById("addpaymentmethod").value + "\n" + document.getElementById("message").value;
    } else if (subject == "New-Point" || subject == "New-VIP-Point") {
      message = document.getElementById("want1").value + "\n" + document.getElementById("message").value;
      $finalsubject += ' - ' + want1;
    }  else {
      message = document.getElementById("message").value;
    }

    jQuery('#subject :selected').val($finalsubject);
    document.getElementById("hmessage").value = message;
	jQuery('#ticketsend').submit();
    /*return true;*/
  });
});
  /*var form = document.getElementById("ticketsend");
  if (form.attachEvent) {
    form.attachEvent("submit", createTicket);
  } else {
    form.addEventListener("submit", createTicket);
  }*/
  
</script>
        </div>
      </div>
    </div>

{% include 'footer.twig' %}