{% include 'header.twig' %}

 
<script>
	   let toggling_bar=document.getElementById("toggling_bar");
	   toggling_bar.addEventListener("click",function(){
document.getElementById("navbar").classList.toggle("active");
document.getElementById("overlays").classList.toggle("active")
	   })
    
     
   </script>

   
 
<div class="container-fluid container-fluid-spacious">

<div class="row">

   <div class="col-md-12">

      
<div class="well well-float table-responsive">

      
      {% if contentText %}
<div class="card mt-2 mb-2">																
{{ contentText }}
</div>
{% endif %}   

      </div>

      <style>

         .authorized .section_49041 .card-orders {

         position: relative;

         -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         /* box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%); */

         /* margin-bottom: 10

         px

         ; */

         background-color: #fff !important;

         }

         .authorized .section_49041 .card {

         margin: 12px 0px;

         }

         .authorized .section_49041 .card-orders .icon {

         width: 60px;

         height: 60px;

         background: #7dc7d0;

         margin: 0px 25px 20px 10px;

         text-align: center;

         font-size: 30px;

         line-height: 60px;

         color: #fff;

         float: left;

         }

         .authorized .section_49041 .icon-rounded {

         border-radius: 50% !important;

         }

         .authorized .section_49041 .card-orders .content-box {

         overflow: hidden;

         display: flex;

         flex-direction: column;

         }

         .authorized .section_49041 .card-orders .content-box .title {

         font-size: 15px;

         text-transform: uppercase;

         font-weight: 600;

         width: 100%;

         float: left;

         }

         .authorized .section_49041 .card-orders .content-box .numbers {

         font-size: 24px;

         font-weight: 600;

         width: 100%;

         float: left;

         }

         .authorized .section_49041 .card-orders .des-sec {

         font-size: 14px;

         opacity: 0.8;

         }

         .authorized .section_49041 .card {

         border-radius: 8px;

         }

         .authorized .section_49041 .card-orders:hover .btn-overlay-test {

         display: flex;

         justify-content: center;

         align-items: center;

         }

         .authorized .section_49041 .card-orders a {

         color: #fff;

         }

         .authorized .section_49041 .btn-overlay-test {

         display: none;

         position: absolute;

         top: 0;

         /* left: 0; */

         width: 100%;

         height: 100%;

         text-align: center;

         font-size: 19px;

         border-radius: 20px;

         }

         .authorized .section_49041 .btn {

         white-space: nowrap;

         /* display: inline-block; */

         /* height: 40px; */

         line-height: 40px;

         padding: 0 14px;

         -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         border-radius: 8px;

         font-size: 12px;

         font-weight: 600;

         text-transform: uppercase;

         letter-spacing: .025em;

         color: #fff;

         text-decoration: none;

         -webkit-transition: all .15s ease;

         transition: all .15s ease;

         }

         .authorized .section_49041 .bg-green {

         background: #7dc7d0;

         }

         .authorized .section_49041 .card-body {

         /* -ms-flex: 1 1 auto; */

         flex: 1 1 auto;

         padding: 1.25rem;

         height: 100px;

         }

         .authorized .card_v2 {

         background-color: #fff;

         position: relative;

         -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         border-radius: 20px;

         padding: 1.25rem;

         }

         .authorized .card_v2 #unavlist {}

         @media (max-width:768px) {

			 .authorized .section_49041 .card {

				margin: 4px 0px !important;

			 }

			 #main-page.well{

				padding: 0px 0px;

				margin: 0px 0px;

			 }

         }

      </style> 
        
      <style>

         .authorized .section_49041 .card-orders {

         position: relative;

         -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         /* box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%); */

         /* margin-bottom: 10

         px

         ; */

         background-color: #fff !important;

         }

         .authorized .section_49041 .card {

         margin: 12px 0px;

         }

         .authorized .section_49041 .card-orders .icon {

         width: 60px;

         height: 60px;

         background: #7dc7d0;

         margin: 0px 25px 20px 10px;

         text-align: center;

         font-size: 30px;

         line-height: 60px;

         color: #fff;

         float: left;

         }

         .authorized .section_49041 .icon-rounded {

         border-radius: 50% !important;

         }

         .authorized .section_49041 .card-orders .content-box {

         overflow: hidden;

         display: flex;

         flex-direction: column;

         }

         .authorized .section_49041 .card-orders .content-box .title {

         font-size: 15px;

         text-transform: uppercase;

         font-weight: 600;

         width: 100%;

         float: left;

         }

         .authorized .section_49041 .card-orders .content-box .numbers {

         font-size: 24px;

         font-weight: 600;

         width: 100%;

         float: left;

         }

         .authorized .section_49041 .card-orders .des-sec {

         font-size: 14px;

         opacity: 0.8;

         }

         .authorized .section_49041 .card {

         border-radius: 8px;

         }

         .authorized .section_49041 .card-orders:hover .btn-overlay-test {

         display: flex;

         justify-content: center;

         align-items: center;

         }

         .authorized .section_49041 .card-orders a {

         color: #fff;

         }

         .authorized .section_49041 .btn-overlay-test {

         display: none;

         position: absolute;

         top: 0;

         /* left: 0; */

         width: 100%;

         height: 100%;

         text-align: center;

         font-size: 19px;

         border-radius: 20px;

         }

         .authorized .section_49041 .btn {

         white-space: nowrap;

         /* display: inline-block; */

         /* height: 40px; */

         line-height: 40px;

         padding: 0 14px;

         -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         border-radius: 8px;

         font-size: 12px;

         font-weight: 600;

         text-transform: uppercase;

         letter-spacing: .025em;

         color: #fff;

         text-decoration: none;

         -webkit-transition: all .15s ease;

         transition: all .15s ease;

         }

         .authorized .section_49041 .bg-green {

         background: #7dc7d0;

         }

         .authorized .section_49041 .card-body {

         /* -ms-flex: 1 1 auto; */

         flex: 1 1 auto;

         padding: 1.25rem;

         height: 100px;

         }

         .authorized .card_v2 {

         background-color: #fff;

         position: relative;

         -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);

         border-radius: 20px;

         padding: 1.25rem;

         }

         .authorized .card_v2 #unavlist {}

         @media (max-width:768px) {

			 .authorized .section_49041 .card {

				margin: 4px 0px !important;

			 }

			 #main-page.well{

				padding: 0px 0px;

				margin: 0px 0px;

			 }

         }

      </style>

      <section class="section_49041">

         <div class="">

            <div class="row">

               <div class="col-md-4 col-sm-12 col-xs-12">

                  <div class="card card-orders">

                     <div class="card-body">

                        <div class="card-tabel">

                           <div class="icon icon-rounded">

                              <i class="fas fa-cart-plus"></i>

                           </div>

                        </div>

                        <div class="card-tabel">

                           <div class="content-box">

                              <div class="title">Total Orders </div>

                              <h4><div class="numbers">{{totalorders}}</div></h4>

                              

                           </div>

                        </div>

                     </div>

                     <a href="/orders" class="btn btn-overlay-test bg-green"> <span> View your

                     Orders!️️ </span></a>

                  </div>

               </div>

               <div class="col-md-4 col-sm-12 col-xs-12">

                  <div class="card card-orders">

                     <div class="card-body">

                        <div class="card-tabel">

                           <div class="icon icon-rounded">

                              <i class="fas fa-donate"></i>

                           </div>

                        </div>

                        <div class="card-tabel">

                           <div class="content-box">

                              <div class="title">Current Balance</div>

                              <div class="numbers">{{ user['balance']}}

                              </div>

                              

                           </div>

                        </div>

                     </div>

                     <a href="addfunds" class="btn btn-overlay-test bg-green"> <span>Add Funds

                     now!</span> </a>

                  </div>

               </div>

               <div class="col-md-4 col-sm-12 col-xs-12">

                  <div class="card card-orders">

                     <div class="card-body">

                        <div class="card-tabel">

                           <div class="icon icon-rounded">

                              <i class="fas fa-donate"></i>

                           </div>

                        </div>

                        <div class="card-tabel">

                           <div class="content-box">

                              <div class="title">Spent Balance</div>

                              <div class="numbers" id=""> {{user["spent"]}} </div>


                           </div>

                        </div>

                     </div>

                     <a href="orders" class="btn btn-overlay-test bg-green"> {{user["spent"]}} <span>

                     Total Spent

                     </span> </a>

                  </div>

               </div>

            </div>

         </div>

      </section>

      

      
               				<p></p>

      <div class="row">

         <div class="col-md-6">

            <div class="card_v2">

               <div class="row">

                  <div class="col-md-12">

                     <nav id="unavlist">

                        <ul class="nav nav-pills " id="pills-tab" role="tablist">

                           <li class="nav-item active">

                              <a class="nav-link active" id="pills-home-tab" data-toggle="pill"

                                 href="#new-order" role="tab" aria-controls="pills-home"

                                 aria-selected="true">New Order</a>

                           </li>

                           <li class="nav-item">

                              <a class="nav-link" id="pills-home-tab" data-toggle="pill"

                                 href="#check-updates" role="tab" aria-controls="pills-home"

                                 aria-selected="true">🔔Check Updates</a>

                           </li>

                           <li class="nav-item">

                              <a class="nav-link" id="pills-home-tab" data-toggle="pill"

                                 href="#all" role="tab" aria-controls="pills-home"

                                 aria-selected="true">🧩Others</a>

                           </li>

                        </ul>

                        <select name="page_Category" id="page_Category"

                           class="custom-select w-full">

                           <option value="0">New Order</option>

                           <option value="1">🔔Check Updates</option>

                           <option value="2">🧩Others</option>

                        </select>

                     </nav>

                  </div>
                  

			<div class="col-md-12">
                      
                     		

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

    {% if data["order"]["success"] == 1 %}
<div class="order-success-card" id="order-success-card">
<center
<img src="https://www.linkpicture.com/q/404-tick.png" alt="checkmark"></center>
<h2>Your order has been placed.</h2>
<div class="order-details">
<p><span class="service-name">
<b>Service :</b><br/>{{data['order']['service']}}</span></p>
<p><span class="link"><b>Link :</b><br /><a href="{{data['order']['link']}}">{{data['order']['link']}}</a></span></p>
<p><span class="paid-amount"><b>You paid :</b>&nbsp;&nbsp;<span style="color:#7743DB">
    {{ data['order']['price'] }}</span></span><span class="quantity"><b>Quantity :</b>&nbsp;&nbsp;<span style="color:#E0144C">{{data['order']['quantity']}}</span></span></p>
</div>
<div class="user-details">
<p>Order ID :&nbsp;&nbsp;{{data['order']['id']}}</p>
<p>Remaining balance :&nbsp;&nbsp;
{{ data['order']['balance']}}</p>
</div>
<button type="button" onclick="closeOrderReceiptCard()">OK</button>
</div>


</div>
<script>

setTimeout(function(){
var el = $("#order-success-card");
el.addClass("order-success-card-active");
},1000);
function closeOrderReceiptCard(){

var el = document.getElementById("order-success-card");

el.classList.remove("order-success-card-active");
}
</script>

    {% 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="tab-pane fade active in" id="new-order" role="tabpanel"

                           aria-labelledby="pills-home-tab">

                           <div id="main-page" class="well well-float table-responsive">

                              

                              <form method="post" action="">
                              
                              

                              
              <div class="form-hidden form-group"> 
              
              
             
              
 
<label class="control-label" for="orderCategory">📚Category</label>

	<select name="category" id="orderCategory" data-size="10"  class="custom-select w-full form-control">

{{ category_html }}
</select>

</div>




                 
              <div class="form-group"> 



											<label class="control-label" for="OrderService">📑Service</label>

<select class="form-control custom-select w-full"  data-size="13"  id="OrderService" name="services">
</select>

			
              
              <div id="neworder_fields"></div>
    
                
              
              <div class="form-group" id="order_charge"> 
               <label class="control-label" for="charge">💰Charge</label> 
                    
               
               <input class="form-control" id="charge" name="charge" disabled type="text">							       </div>
    
        </select>        
      
              <input type="hidden" name="place_order" value="place_order"> 
              <button type="submit" class="btn btn-primary" name="place_order">✅Submit</button> 

									</form>

									

								</div>

								

							</div>

							

							 

		</div>

	</div>
</div>

</div>

<p> &nbsp;&nbsp;&nbsp;</p>
			
<div class="container-fluid container-fluid-spacious">

<div class="row">

   <div class="col-md-6">

      
<div class="well well-float table-responsive">

      
      {% if contentText2 %}
	<div class="card mt-2 mb-2">															
{{ contentText2 }}
</div>
{% endif %}   

      </div>
 
      </div>
      
         <p> &nbsp;&nbsp;&nbsp;</p>
         <p> &nbsp;&nbsp;&nbsp;</p>
         <p> &nbsp;&nbsp;&nbsp;</p>
	    <div class="wrapper-content">
    <div class="wrapper-content__header">
          </div>
          
          <br>
         			
	
 {% include 'footer.twig' %}       
       
       
       
       
       
       
       
       
       
       
       
   
            

