{% include 'header.twig' %}
<!-- Main variables *content* -->
<div id="page-wrapper">
<div class="container">
  <div class="inner-dashboard neworderPage"> 
    <div class="row">
      <div class="col-sm-6">

    {% if user['balance'] < 5 %}
      <div class="alert alert-dismissible alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>Dear @{{ user['username'] }}, </strong> <br>Your balance seems to be running low, don't forget to top up for trouble-free service.
      </div>
     {% endif %}

    {% if error %}
      <div class="alert alert-dismissible alert-danger">
        {{ errorText }}
      </div>
    {% endif %}

    {% if data["order"]["success"] == 1 %}
      <div class="alert alert-dismissible alert-success">
          <strong> {{ lang["neworder.success.id"] }}: </strong> {{ data['order']['id'] }} <br>
          <strong> {{ lang["neworder.success.service"] }}: </strong> {{ data['order']['service'] }} <br>
          <strong> {{ lang["neworder.success.link"] }}: </strong> {{ data['order']['link'] }} <br>
          <strong> {{ lang["neworder.success.quantity"] }}: </strong> {{ data['order']['quantity'] }} <br>
          <strong> {{ lang["neworder.success.charge"] }}: </strong> {{ data['order']['price'] }} <br>
          <strong> {{ lang["neworder.success.balance"] }}: </strong>{{ data['order']['balance'] }} <br>
      </div>
    {% endif %}
    {% if data["order"]["success"] == 2 %}
      <div class="alert alert-dismissible alert-success">
         <strong> {{ lang["neworder.success.id"] }}: </strong> {{ data['order']['id'] }} <br>
         <strong> {{ lang["neworder.success.service"] }}: </strong> {{ data['order']['service'] }} <br>
         <strong> {{ lang["neworder.success.username"] }}: </strong> {{ data['order']['link'] }} <br>
         <strong> {{ lang["neworder.success.quantity"] }}: </strong> {{ data['order']['min'] }} - {{ data['order']['max'] }} <br>
         <strong> {{ lang["neworder.success.posts"] }}: </strong> {{ data['order']['posts'] }} <br>
         <strong> {{ lang["neworder.success.delay"] }}: </strong>{{ data['order']['delay'] }} <br>
       </div>
    {% endif %}

      <div class="well neworderStats tab">
          <ul id="myTabs" class=" centerTabs nav nav-pills" role="tablist" data-tabs="tabs">
              <li class="active"><a href="newOrder" data-toggle="tab"><i class="material-icons">add_circle_outline</i> New Order</a></li>
            </ul>
          <div class="tab-content newOrderTabs">
              <div role="tabpanel" class="tab-pane fade in active" id="newOrder">
          <form  action="/" method="post" id="order-form">
            
                  
            <div class="form-group">
              <label for="orderform-category" class="control-label">{{ lang["neworder.category"] }}</label>
              <select class="form-control" id="neworder_category" name="categories">
                {% for category in categories %}
                    <option value="{{ category["category_id"] }}" {% if category["category_id"] == data['categories'] %} selected {% endif %} >{{ category["category_name"] }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="form-group">
              <label for="orderform-service" class="control-label">{{ lang["neworder.service"] }}</label>
              <select class="form-control" id="neworder_services" name="services">

              </select>
            </div>

            <div id="neworder_fields"></div>

            <div class="form-group" id="charge_div">
              <label for="charge" class="control-label">{{ lang["neworder.charge"] }}</label>
              <input type="text" class="form-control" id="charge" readonly>
            </div>


          
          <button type="submit" class="btn btn-primary">{{ lang["neworder.button"] }}</button>

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


<div class="col-sm-6 splitWellCol">
      	<div class="well">
            <h3><i class="material-icons">play_circle_filled</i> Video Tutorial</h3>
            <ul id="myTabs" class="centerTabs nav nav-pills" role="tablist" data-tabs="tabs">
              
              <li class="active"><a href="#contactUs" data-toggle="tab" aria-expanded="false"><i class="material-icons">mail</i> Contact Us</a></li>
              <li class=""><a href="#bcd" data-toggle="tab" aria-expanded="false"><i class="material-icons">featured_play_list</i>Featured</a></li>
              <li class=""><a href="#abc" data-toggle="tab" aria-expanded="true"><i class="material-icons">play_circle_filled</i>Placing An Order</a></li>
                    <!--<li class=""><a href="#def" data-toggle="tab" aria-expanded="false"><i class="material-icons">play_circle_filled</i>Coming Soon!</a></li> -->
                  </ul>
            <div class="tab-content">
                   
                    <div role="tabpanel" class="tab-pane fade" id="abc">
                      <iframe src="https://www.youtube.com/embed/jMBufrXDnaI" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="100%" height="280" frameborder="0"></iframe>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="bcd">
                   		                      		<iframe src="https://giphy.com/embed/huyZxIJvtqVeRp7QcS" class="giphy-embed" allowfullscreen="" width="100%" height="280" frameborder="0"></iframe>


                      	                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="def">
                      <iframe src="https://www.youtube.com/embed/LbuzgZNX41k" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="100%" height="280" frameborder="0"></iframe>
                    </div>
               <div role="tabpanel" class="tab-pane fade active in" id="contactUs">
                  <div class="contactInfo">
                  	<p>Need help? We are always ready to help you in any of your needs! Choose the best way to get in touch and we'll contact you ASAP!</p>
                  </div>
                  <h2>Support Ticket <span>(easiest &amp; fastest)</span></h2>
                  <a class="openTicket" href="/tickets">Open New Ticket</a>
                  <div class="media">
                    <div class="media-left">
                      <a href="#" style="color:#00aff1;">
                        <i class="fa fa-skype"></i>
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">Skype</h4>
                      <p>live:codeclub.in</p>
                    </div>
                  </div>
                  <div class="media">
                    <div class="media-left">
                      <a href="#" style="color:#5ee78d;">
                        <i class="fa fa-envelope"></i>
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">Email</h4>
                      <p>codeclub@gmail.com</p>
                    </div>
                  </div>
                 <div class="media">
                    <div class="media-left">
                      <a href="#" style="color:#5ee78d;">
                        <i class="fa fa-envelope"></i>
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">Email</h4>
                      <p>codeclub@gmail.com</p>
                    </div>
                  </div>
                 <div class="media">
                    <div class="media-left">
                      <a href="#" style="color:#5ee78d;">
                        <i class="fab fa-whatsapp-square"></i>
                      </a>
                    </div>
                 <div class="media">
                    <div class="media-left">
                      <a href="#" style="color:#5ee78d;">
                        <i class="fas fa-newspaper"></i>
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">Telegram News Channel</h4>
                      <p>https://t.me/CodeClub</p>
                    </div>
                  </div>
                 <div class="media">
                    <div class="media-left">
                      <a href="#" style="color:#5ee78d;">
                        <i class="fab fa-telegram-plane"></i>
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">Telegram</h4>
                      <p>https://t.me/codeclub</p>
                    </div>
                  </div>
                  <!-- <div class="media">
                    <div class="media-left">
                      <a href="#"  style="color:#ffb822;">
                        <i class="fa fa-phone"></i>
                      </a>
                    </div>
                     <div class="media-body">
                      <h4 class="media-heading">Phone</h4>
                      <p>+1 234 567 89</p>
                    </div>
                  </div> -->
              	</div>
                  </div>  
          </div>
        <div class="well userInfo">
          <ul id="myTabs" class="centerTabs nav nav-pills" role="tablist" data-tabs="tabs">
              <!-- <li class="active"><a href="#latestNews" data-toggle="tab"><i class="material-icons">rss_feed</i> Latest News</a></li> -->
              <li class="active"><a href="#latestNews" data-toggle="tab"><i class="material-icons">rss_feed</i> GiveAway</a></li>
            </ul>
           <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="latestNews">
                  <div class="timeLineWrapper">
                    <!-- <iframe src="https://giphy.com/embed/huyZxIJvtqVeRp7QcS" class="giphy-embed" allowfullscreen="" width="100%" height="280" frameborder="0"></iframe>

 -->
                    <img src="https://images.squarespace-cdn.com/content/v1/52407caee4b0b715dcb3ba89/1573601815046-CZU0O558DE2VVEI9TU4R/ke17ZwdGBToddI8pDm48kJK4Mm1kch8SFO9ZNkN1NT97gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmoW6VMYd7DRFXOxjGuORbJVRIz_X6uKxhFE9bwG5-diIJ9kj42L3XbtP_RiBprpp_/gensler+100k+followers?format=500w" style="width:90%;display:block;margin:0 auto;">
                  </div>
                </div>
            </div>        	
        </div>

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

{#<div class="container">#}
{#  <div class="row">#}
{#    <div class="col-md-8 col-md-offset-2">#}
{#      <div class="well ">#}
{#        {{ contentText }}#}
{#      </div>#}
{#    </div>#}
{#  </div>#}
{#</div>#}

{% include 'footer.twig' %}
