   {% include 'header.twig' %}
 <style>

		#service_description,
		#service_average_time {
			padding: 13px;
			border: solid 1px rgba(218, 218, 218);
		
			font-size: 14px;
			font-weight: bold;
			box-shadow:none;
}
.badge {
     background: #0d6efd;
}
		
		
	
 /* Dropdown container style */
  #dropdown_for_search {
    display: none; /* Hidden by default */
    max-height: 600px; /* Maximum height */
    overflow-y: auto; /* Vertical scrolling if the dropdown is long */
    overflow-x: hidden; /* Hide horizontal scrolling */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    margin-top: 5px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    white-space: normal; /* Text will wrap to the next line if it's long */
    word-wrap: break-word; /* Words will break if they're too long */
  }

  /* Dropdown item style */
  .dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Will wrap to the next line if items don't fit */
    white-space: normal; /* Text inside dropdown will wrap */
    word-break: break-word; /* Long words will break and wrap */
  }

  /* Service badge style */
  .badge.service_id_badge {
    margin-right: 8px; /* Gap between the badge and name */
    font-size: 12px; /* Badge text size */
  }

  /* Centered "Please Wait" or loading message */
  #dropdown_for_search .text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Correct positioning for the message */
    font-weight: bold;
  }
 

    
.fab.fa-instagram {

	background: #f09433;

	background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)!important;

	background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);

/*	background-clip: text; */
background-color: text;
	font-size: 14px;

	padding: 2.4px;

	border-radius: 5px;

	color: #FFF;

	font-weight: lighter;

	margin-right: 10px;

}



.fab.fa-facebook {

	background: #207eff;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 18px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	border-radius: 5px;

	margin-right: 10px;

}



.fab.fa-youtube {

	background: #ff0042;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-twitter {

	background: #1da1f2;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-telegram {

	background: #2b9fd2;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-soundcloud {

	background: #ff5836;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-spotify {

	background: #62ffa2;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-twitch {

	background: #e600ff;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-pinterest-p {

	background: #ff5858;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fa.fa-music {

	background: #f8004d;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-tiktok {

	background: #f8004d;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fas.fa-globe {

	background: #636be6;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fas.fa-stream {

	background: #ccc;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}



.fab.fa-hotjar {

	background: #ff0000;

	background-clip: text;

	-webkit-background-clip: text;

	font-size: 17px;

	-webkit-text-fill-color: transparent;

	font-weight: bold;

	margin-right: 10px;

}
    
    
</style> 
			 <!-- Main variables *content* -->
			 <main  id="content" >
			{% if contentText %}
															
{{ contentText }}

{% endif %}
				 <!-- User Statistics -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
        <div class="user__data">
          <div class="user__data__wrap">
              <div class="user_data__item">
                <div class="icon">
                  <i class="fas fa-user-circle"></i>
                </div>
                <div class="user__data">
                  <h4>{{ user["username"]  }}</h4>
                  <p>Username</p>
                </div>
              </div>
              <div class="user_data__item">
                <div class="icon">
                  <i class="fas fa-badge-dollar"></i>
                </div>
                <div class="user__data">
                  <h4>{{ user["balance"] }}</h4>
                  <p>Balance</p>
                </div>
              </div>
              <div class="user_data__item">
                <div class="icon">
                  <i class="fas fa-hands-usd"></i>
                </div>
                <div class="user__data">
                  <h4>{{ user["spent"] }}</h4>
                  <p>Total Spend</p>
                </div>
              </div>
              <div class="user_data__item">
                <div class="icon">
                  <i class="fas fa-luggage-cart"></i>
                </div>
                <div class="user__data">
                  <h4>{{totalorders}}</h4>
                  <p>Total Orders</p>
                </div>
              </div>
          </div>
        </div>
    </div>
  </div>
</div>
<!-- ## User Statistics -->
<!-- category Filters -->
<div id="category_filter" class="mb-3">
<div class="container-fluid">
   <div class="row">
      <div class="col-md-12">
         <div class="category_filter_wrap">
            <div class="card card_v2">
               <div class="card-body">
                  <div class="filter_btn_wrap" id="new-order-cats">
                      <button class="  nwo-cat-btn btn_filter" data-change-cat="" onclick="filterStarted('everything')">
                         <i class="far fa-ball-pile"></i>
                         <span class="filter_txt">
                            Everythings
                         </span>      
                      </button>

                     <button class="nwo-cat-btn btn_filter" data-change-cat="Instagram" onclick="filterStarted('instagram')">
                         <i class="fab fa-instagram"></i>
                         <span class="filter_txt">
                            Instagram
                         </span>  
                     </button>
                     <button class="nwo-cat-btn btn_filter" data-change-cat="Facebook" onclick="filterStarted('Facebook')">
                         <i class="fab fa-facebook"></i>
                         <span class="filter_txt">
                            Facebook
                         </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="Youtube" onclick="filterStarted('youtube')">
                         <i class="fab fa-youtube"></i>
                         <span class="filter_txt">
                           Youtube
                         </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="Twitter" onclick="filterStarted('Twitter')">
                         <i class="fab fa-twitter"></i>
                         <span class="filter_txt">
                            Twitter
                          </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="Spotify" onclick="filterStarted('Spotify')">
                         <i class="fab fa-spotify"></i>
                         <span class="filter_txt">
                            Spotify
                          </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="Tiktok" onclick="filterStarted('Tiktok')"> 
                         <i class="fab fa-tiktok"></i>
                         <span class="filter_txt">
                               Tiktok
                         </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="Telegram" onclick="filterStarted('Telegram')">
                         <i class="fab fa-telegram"></i>
                         <span class="filter_txt">
                            Telegram
                         </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="LinkedIn" onclick="filterStarted('Linkedin')">
                         <i class="fab fa-linkedin"></i>
                         <span class="filter_txt">
                            Linkedin
                         </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="Discord" onclick="filterStarted('Discord')">
                         <i class="fab fa-discord"></i>
                         <span class="filter_txt">
                            Discord
                         </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="Traffic" onclick="filterStarted('Traffic')">
                         <i class="fas fa-globe"></i>
                         <span class="filter_txt">
                            Website Traffic  
                         </span> 
                     </button>

                     <button class="  nwo-cat-btn btn_filter" data-change-cat="" onclick="filterOthers()">
                         <i class="fas fa-star-christmas"></i>
                         <span class="filter_txt">
                            Others
                         </span> 
                     </button>
                    
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
</div>
<!-- //category Filters -->


<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-sm-12 col-12 mb-2">
      <div class="card custom__card">
          <div class="card-body">
 {% if error %}
      <div class="alert alert-dismissible alert-danger">
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
{{ 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>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">❌</span></button>

      </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 id="tabSwiter">
                  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                      <li class="nav-item" role="presentation">
                          <!-- Tabs For New Orders -->
                        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
                          <i class="fas fa-shopping-cart"></i> New Order
                        </button>
                      </li>
                      <!-- Tabs For Favorite -->
                      <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
                          <i class="fas fa-heart"></i> Favorite
                        </button>
                      </li>
                      <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
                          <i class="fas fa-search"></i> Search By Id
                        </button>
                      </li>
                      <li class="nav-item" role="presentation">
                          <button class="nav-link" id="pills-sub-tab" data-bs-toggle="pill" data-bs-target="#pills-sub" type="button" role="tab" aria-controls="pills-sub" aria-selected="false">
                              <i class="fas fa-thumbs-up"></i> <span class="for_desk">Auto Subscriptions</span> <span class="for_mob">
                                Subscriptions
                              </span>
                          </button>
                      </li>
                    </ul>
              </div>
                <div class="tab-content" id="pills-tabContent">
                  <!-- New Order Tabs -->
                  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                      <form  action="/" method="post" id="order-form">
                                                
           {% if settings.search_enabled == 1 %}
      <div class="form-group">
        <div class="search_services_content">
          <!-- Search input and clear icon -->
          <div class="input-group">
            <!-- Search input -->
            <input 
              type="search" 
              id="search_services_field" 
              class="form-control" 
              placeholder="Search by Service ID or Name"
              data-gtm-form-interact-field-id="0"
            >
          </div>
        </div>

        <!-- Search result dropdown -->
        <div 
          id="dropdown_for_search" 
          class="dropdown"
          style="
            display: none; /* Dropdown is hidden by default */
            max-height: 600px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px;
            margin-top: 5px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
          ">
          <div class="text-center" style="display: none;">
            Please Wait...
          </div>
        </div>
      </div>
  
{% endif %}


<div class="mb-3">
                              <label for="orderform-category" class="form-label">Category</label>
<select class="form-control" id="neworder_category" name="categories" data-select="true" data-select-search="true" data-select-search-placeholder="Search" data-select-container="#select-category-container" tabindex="-1" aria-hidden="true">
{{ category_html_simplify }}

</select>
                            </div>
                                                    <div class="mb-3">
                            <label for="orderform-service" class="form-label">Service</label>
                                                                <select class="form-control" id="neworder_services" name="services" data-select="true" data-select-search="true" data-select-search-placeholder="Search" data-select-container="#select-service-container" tabindex="-1" aria-hidden="true">
<option value="1">No services found in this category</option>
</select>
                          </div>
                          <div class="mb-3 hidden fields" id="service_description" style="display: none;">
                            <label for="service_description" class="form-label">Description</label>
                            <div class="panel-body border-solid border-rounded">
                                
                            </div>
                          </div>
                      
                             <div id="neworder_fields"></div>
                      
                          <div class="mb-3">
                            <label for="charge" class="form-label">Charge</label>
                             <input type="text" class="form-control" id="charge" value="" readonly>
                          </div>
                      <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
                       <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                  </div>
<!--## New Order Tabs -->

                  <!-- Favorite -->
                  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                      <div class="alert alert-success">
                          Here will show your all Favorite services.
                      </div>
                  </div>
                  <!-- ## Favorite -->

                  <!-- Search by Id -->
                  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                      <div class="alert alert-success">
                          Here will Search By id Search Box.
                      </div>
                  </div>
                  <!-- ## Search by Id -->

                  
                  <!-- Auto Subscriptions -->
                  <div class="tab-pane fade" id="pills-sub" role="tabpanel" aria-labelledby="pills-sub-tab" tabindex="0">
                      <div class="alert alert-success">
                          Here will show Auto Subscriptions categories.
                      </div>
                  </div>
                  <!-- ## Auto Subscriptions -->

                 
                </div>
                
          </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 col-12  mb-2">
      <div class="card custom_card card-details">
        <div class="card-body card-body-details">
            <div class="services_name">
              <div class="current_services">
                <div id="servicesId">Content Notes<span id="servicesIds"></span></div>
              </div>
            </div>
           <!-- services details -->
           <div class="tab-pane fade show active" id="pills-details" role="tabpanel" aria-labelledby="pills-details-tab" tabindex="0">
              <div class="details_data_wraper">
                <div class="details_data">
                  <div class="details_name">
                  </div>
                  {% if contentText2 %}
<div class="card mt-3 mb-4">
{{ contentText2 }}
</div>
{% endif %}
                     </div>
                     <div class="item_content">
                        <span data-id="serviceLink"></span>
                     </div>
                  </div>
               </div>

               
          <!-- ## Services Details -->
        </div>
      </div>
    </div>
  </div>
</div>



{% include 'footer.twig' %}

 
<script>
  // Initialize all tooltips on the page
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
</script>

<script>
const _0x8cb7c=_0x4289;(function(_0x44ce59,_0x18222c){const _0xb6a44b=_0x4289,_0x1fd6e4=_0x44ce59();while(!![]){try{const _0x25ade8=parseInt(_0xb6a44b(0x158))/0x1+-parseInt(_0xb6a44b(0x15a))/0x2+parseInt(_0xb6a44b(0x14b))/0x3+parseInt(_0xb6a44b(0x14c))/0x4+parseInt(_0xb6a44b(0x14f))/0x5+-parseInt(_0xb6a44b(0x148))/0x6*(parseInt(_0xb6a44b(0x15f))/0x7)+parseInt(_0xb6a44b(0x159))/0x8*(-parseInt(_0xb6a44b(0x138))/0x9);if(_0x25ade8===_0x18222c)break;else _0x1fd6e4['push'](_0x1fd6e4['shift']());}catch(_0x2facbc){_0x1fd6e4['push'](_0x1fd6e4['shift']());}}}(_0x4c2c,0x8ac17));const newOrderCats=document[_0x8cb7c(0x139)](_0x8cb7c(0x13b));function _0x4289(_0x3c1831,_0x2bcc08){const _0x4c2cdc=_0x4c2c();return _0x4289=function(_0x4289df,_0x3a1238){_0x4289df=_0x4289df-0x136;let _0x449dc5=_0x4c2cdc[_0x4289df];return _0x449dc5;},_0x4289(_0x3c1831,_0x2bcc08);}function _0x4c2c(){const _0x27fe5b=['725816IVHwTw','forEach','#neworder_category-copy\x20option','none','push','133IwTXDA','join','block','innerHTML','12840507XEXsRq','getElementById','data-change-cat','new-order-cats','noc-wrapper','style','active','includes','display','insertBefore','outerHTML','setAttribute','neworder_category-copy','classList','.nwo-cat-btn','neworder_category','115512yBTJXO','change','querySelectorAll','806961sELptR','3068752WbImEk','addEventListener','select','4953685yUrZVQ','toLowerCase','innerText','remove','add','trigger','getAttribute','click','parentNode','696850BfzGpt','8CPnHPP'];_0x4c2c=function(){return _0x27fe5b;};return _0x4c2c();}if(newOrderCats){const orderFormCats=document[_0x8cb7c(0x139)](_0x8cb7c(0x147));var realData=orderFormCats[_0x8cb7c(0x137)];const dCatBtns=document[_0x8cb7c(0x14a)](_0x8cb7c(0x146));dCatBtns[0x0]&&[...dCatBtns][_0x8cb7c(0x15b)](_0x9b20c0=>{const _0x5e8f45=_0x8cb7c;_0x9b20c0[_0x5e8f45(0x14d)](_0x5e8f45(0x156),_0xbc5d45=>{const _0x45943c=_0x5e8f45,_0x33503e=_0x9b20c0[_0x45943c(0x155)](_0x45943c(0x13a)),_0x21c049=document['getElementById'](_0x45943c(0x147)),_0x798f74=document[_0x45943c(0x14a)](_0x45943c(0x15c)),_0x538537=document['querySelectorAll'](_0x45943c(0x146));[..._0x538537]['forEach'](_0x5db964=>{const _0x401684=_0x45943c;_0x5db964['classList'][_0x401684(0x152)](_0x401684(0x13e));}),_0x9b20c0[_0x45943c(0x145)][_0x45943c(0x153)]('active');const _0x480365=[];[..._0x798f74][_0x45943c(0x15b)](_0x342405=>{const _0x1b7cfc=_0x45943c;_0x342405[_0x1b7cfc(0x151)][_0x1b7cfc(0x150)]()[_0x1b7cfc(0x13f)](_0x33503e[_0x1b7cfc(0x150)]())&&_0x480365[_0x1b7cfc(0x15e)](_0x342405);});const _0x2d4860=[];[..._0x480365][_0x45943c(0x15b)](_0x1d608a=>{const _0x1ed324=_0x45943c;_0x2d4860['push'](_0x1d608a[_0x1ed324(0x142)]);}),_0x21c049[_0x45943c(0x137)]=_0x2d4860[_0x45943c(0x160)](''),$('#neworder_category')[_0x45943c(0x154)](_0x45943c(0x149));});});setTimeout(()=>{const _0x5f06b3=_0x8cb7c,_0x14c256=document['createElement'](_0x5f06b3(0x14e));_0x14c256[_0x5f06b3(0x143)]('id',_0x5f06b3(0x144)),_0x14c256['style'][_0x5f06b3(0x140)]=_0x5f06b3(0x15d),_0x14c256[_0x5f06b3(0x137)]=realData,orderFormCats[_0x5f06b3(0x157)][_0x5f06b3(0x141)](_0x14c256,orderFormCats);},0x3e8);const nocWrapper=document['getElementById'](_0x8cb7c(0x13c));nocWrapper[_0x8cb7c(0x13d)][_0x8cb7c(0x140)]=_0x8cb7c(0x15d),setTimeout(()=>{const _0x541131=_0x8cb7c;nocWrapper['style'][_0x541131(0x140)]=_0x541131(0x136);},0x3e9);}
</script>