{% include 'header.twig' %}
    <div id="page-wrapper">
      <div class="inner-page-wrapper">
<style>
  /* #ticketmodal .modal-dialog .modal-content {
  background-image: url('https://i.imgur.com/khGREnz.png');
  background-color: transparent;
  box-shadow: none;
  border: 0;
  background-size: 100% 100%;
  padding: 70px 80px 0px;
  }
  #ticketmodal .modal-dialog .modal-content label {
  color: #fff;
  text-shadow: 2px 2px 0px #000;
  font-size: 15px;
  }
  #ticketmodal .modal-body {
  padding-top: 0;
  margin-top: 0;
  }
  #ticketmodal .title-search .dash-title {
  width: 100%;
  }
  #ticketmodal .title-search h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: center;
  color: #fff;
  font-size: 35px;
  }
  #ticketmodal .title-search::after {
  display:none;
  }
  #ticketmodal .title-search {
  border-bottom: 0;
  }
  #ticketmodal .modal-body .form-group .form-control {
  background-color: #fff;
  color: #000 !important;
  } */
  .ticketContainer .row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  margin-left: -5px;
  margin-right: -5px;
  }
  .ticketContainer .col {
  padding-right: 5px;
  padding-left: 5px;
  position: relative;
  width: 100%;
  min-height: 1px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  }
  .ticketContainer .custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding: 0;
  margin-top: 5px;
  }
  .ticketContainer .custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  }
  .ticketContainer .custom-control-input:checked ~ .custom-control-label {
  border-color: #ff7748;
  }
  .ticketContainer .custom-control .custom-control-label {
  width: 100%;
  height: 50px;
  padding-left: 35px;
  padding-right: 15px;
  border-radius: 4px;
  border: solid 2px #eeeeee;
  color: #1f2324;
  font-size: 14px;
  white-space: nowrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  }
  .ticketContainer .custom-control-input:checked ~ .custom-control-label::before {
  color: #ffffff;
  background-color: #ff7748;
  }
  .ticketContainer .custom-control-label::before {
  border-radius: 50px;
  top: 18px !important;
  left: 12px !important;
  }
  .ticketContainer .custom-control-label::before {
  position: absolute;
  top: .25rem;
  left: 0;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  content: "";
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #dee2e6;
  }
  .ticketContainer .custom-control-input:checked ~ .custom-control-label::after {
  opacity: 1;
  }
  .ticketContainer .custom-control-label::after {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  content: '\f00c';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #fff;
  font-size: 9px;
  width: auto;
  height: auto;
  top: 19px;
  left: 15px;
  opacity: 0;
  }
  #ticketmodal .ticketContainer #message {
  height: 180px;
  }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>

  $(document).ready(function(){

  $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {

  localStorage.setItem('activeTab', $(e.target).attr('href'));

  });

  var activeTab = localStorage.getItem('activeTab');

  if(activeTab){

  $('#myTab a[href="' + activeTab + '"]').tab('show');

  }

  });
        </script>
<div class="container-fluid ticket-page">
  <div class="row">
    <div class="col-md-9 col-md-offset-1">
            <div class="well">
        <form action="/tickets" method="get" id="history-search">
          <div class="input-group">
            <input type="text" class="form-control" value="" name="search" placeholder="Search tickets">
            <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="well">
        <div class="title-search">
          <div class="dash-title">
            <h2>Ticket</h2>
          </div>
          <div class="nav-pills ">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link" data-toggle="modal" data-target="#ticketmodal"><i class="fas fa-money-bill-alt"></i> New Ticket</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="well">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <!-- <li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#ticketmodal" ><i class="fas fa-money-bill-alt"></i> New Ticket</a>
</li> -->
          <li class="nav-item active">
            <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="fas fa-list-ol"></i> Ticket Lists</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#ticket-info" role="tab" aria-controls="ticket-info" aria-selected="false"><i class="fas fa-info-circle"></i> Info</a>
          </li>
          <li class="pull-right"><button class="btn btn-primary" data-toggle="modal" data-tooltip="tooltip" data-placement="left" data-target="#exampleModal" title="" data-original-title="Click me !!" aria-describedby="tooltip832309">
            <i class="fas fa-info"></i>
            <span class="like-tootips">click me !!</span>
            <div class="tooltip-arrow" style="top: 53%;"></div>
            </button></li>

        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab"> 

          </div>
          <div class="tab-pane fade active in" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="easypaisa">
              <p>Payment Ticket Response time 12-24 hours
                <br> Order Ticekt Response time 0-2 hours
                <br> Other or API Ticket Response time 24 hours
                <br> <br>
                </div>
                        <div class="">
              <div class="table-responsive">
                <table class="table ">
                  <thead>
                    <tr>
              </div>
          </div>
      </div>
  </div>
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">

      {% 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>
     </div>
     <div class="modal fade" id="ticketmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      {% if settings['ticket_system'] == 2 %}
        <div class="well">
          <form method="post" action="tickets">
            <div class="form-group">
              <label for="subject" class="control-label">{{ lang['tickets.subject'] }}</label>
              <input type="text" 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>
            <button type="submit" class="dash-btn">{{ lang['tickets.button'] }}</button>
          </form>
        </div>
      {% endif %}
      <div class="well">
          <table class="table">
            </tr>
              <th>{{ lang['tickets.id'] }}</th>
              <th>{{ lang['tickets.subject'] }}</th>
              <th>{{ lang['tickets.status'] }}</th>
              <th class="nowrap">{{ lang['tickets.updated'] }}</th>
            </tr>
            <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 class="tab-pane fade" id="ticket-info" role="tabpanel" aria-labelledby="ticket-info-tab">            <div class="container-fluid">
              <h2>Information</h2>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

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

      </div>


    </div>
  </div>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <img src="{{ site['logo'] }}" alt="ftr-logo">

        </div>
        <div class="modal-body">
          <h4 class="modal-title" id="myModalLabel">Information</h4>
          <p>Before raising a ticket, please check the following instructions: </p>
          <ol>
            <li>Do not ask us to speed up your order until the StartTime of the service has passed.</li>
            <li>Please,check the description of the services carefully. Specifically:
              <ul>
                <li><strong>StartTime</strong> We cannot interfere  until the StartTime of the service has passed.</li>
                <li><strong>Delivery Speed</strong> We cannot deliver your order faster than it is specified there.</li>
                <li><strong>Refill Time Gurantee</strong> If the service isn`t guaranteed or the refill time was expiried, we cannot refill any drops.</li>
              </ul>
            </li>
            <li>No need to write to us every 5 minutes. Your request was accepted and sent to the provider. Please, allow up to 24 hours to process. Also, due to multiple IG platform updates, the services may work with the delays. We cannot cancel any orders if they haven`t started on time. Only speed up is possible.</li>
          </ol>

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


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