{% include 'header.twig' %}




<style>

/* 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;
  }
 

</style>


<style>
		#service_description,
		#service_average_time {
			padding: 13px;
			border-radius: 10px;
			border: 1px #000000;
			color: #393e46;
			box-shadow: 3px 4px 8px -7px #000000;
			background-color: #e9f3ff;}

</style>

   <div class="wrapper-content">
    <div class="wrapper-content__header">
          </div>
    <div class="wrapper-content__body">
      <!-- Main variables *content* -->
      <div id="block_116"><div class="block-bg"></div><div class="container-fluid"><div class="totals ">
    <div class="row align-items-stretch justify-content-start">
                                                        <div class="col-lg-6 col-sm-12 mb-2 mt-2">
                        <div class="card h-100"
                             style="
                                                                                                                              border-color: var(--color-id-38);                                  padding-top: 24px;                                  padding-bottom: 24px;                                  padding-left: 24px;                                                                                                                                                                                                  border-left-width: 0px;                                  border-right-width: 0px;                                  border-bottom-width: 0px;                                  border-top-width: 0px;                                  box-shadow: none;                                  border-style: solid; ">
                            <div class="totals-block__card">
                                                                    <div class="totals-block__card-left">
                                        <div
                                                class="totals-block__icon-preview style-bg-primary-alpha-10 style-border-radius-default style-text-primary"
                                                style="
                                                                                                                                                                                                                                                                        ">
                        <span class="totals-block__icon style-text-primary fas fa-address-card" style="
                                font-size: 38px;
                                transform: rotate(0deg);
                                color: ;
                                text-shadow: none;
                                border-radius: 0px;
                                "></span>
                                        </div>
                                    </div>
                                                                <div class="totals-block__card-right">
                                                                            <style>
                                            #block_116 .totals-block__count a {
                                                color: inherit !important;
                                            }
                                        </style>
                                                                        <div class="totals-block__count">
                                        <h2 class="totals-block__count-value style-text-primary"
                                            style=" color: inherit; ">
                                                                                                                                                {{ user["username"]  }}
                                                                                                                                                                                </h2>
                                    </div>
                                    <div class="totals-block__card-name">
                                                                                    <p>Welcome to {{site["site_name"]}}!</p>
                                                                            </div>
                                </div>
                            </div>
                        </div>
                    </div>
                                                                                                                                                                                                                                                            <div class="col-lg-6 col-sm-12 mb-2 mt-2">
                        <div class="card h-100"
                             style="
                                                                                                                              border-color: var(--color-id-38);                                  padding-top: 24px;                                  padding-bottom: 24px;                                  padding-left: 24px;                                                                                                                                                                                                  border-left-width: 0px;                                  border-right-width: 0px;                                  border-bottom-width: 0px;                                  border-top-width: 0px;                                  box-shadow: none;                                  border-style: solid; ">
                            <div class="totals-block__card">
                                                                    <div class="totals-block__card-left">
                                        <div
                                                class="totals-block__icon-preview style-bg-primary-alpha-10 style-border-radius-default style-text-primary"
                                                style="
                                                                                                                                                                                                                                                                        ">
                        <span class="totals-block__icon style-text-primary fas fa-wallet" style="
                                font-size: 38px;
                                transform: rotate(0deg);
                                color: ;
                                text-shadow: none;
                                border-radius: 0px;
                                "></span>
                                        </div>
                                    </div>
                                                                <div class="totals-block__card-right">
                                                                            <style>
                                            #block_116 .totals-block__count a {
                                                color: inherit !important;
                                            }
                                        </style>
                                                                        <div class="totals-block__count">
                                        <h2 class="totals-block__count-value style-text-primary"
                                            style=" color: inherit; ">
                                                                                                                                               {{ (user["balance"]) }}
                                                                                                                                                                                </h2>
                                    </div>
                                    <div class="totals-block__card-name">
                                                                                    <p>Account balance</p>
                                                                            </div>
                                </div>
                            </div>
                        </div>
                    </div>
                                                                                                                        </div>
</div></div></div><div id="block_60"><div class="block-bg"><div class="bg-image"></div></div><div class="container-fluid"><div class="new_order-block ">
  <div class="row">
    <div class="col-lg-7 mb-3 mb-lg-0">
      <div class="component_form_group component_card component_radio_button">
        <div class="card ">
            {% if error %}
      <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">✕</button>
{{ errorText }}
      </div>
    {% endif %}
<br>

     {% if data["order"]["success"] == 1 %}
      <div class="alert alert-dismissible alert-success"><h4>Your Order  received.</h4>
          <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>
<a href="/"><span class="badge badge-success">Close</span></a>

      </div>
      <br>
    {% 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 %}
          <form action="/" method="post" id="order-form">
            <div class="component_button_forms">
                                                                                          {% if settings.search_enabled == 1 %}
  
    <div class="form-group">
      <div class="search_services_content">
        <!-- Input group with icon in placeholder -->
        <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="form-group">
                  <label for="orderform-category" class="control-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 id="select-category-container" class="position-relative"></div>
                </div>
                            <div class="form-group">
                <label for="orderform-service" class="control-label">Service</label>
                <div class="d-flex">
                  <div class="w-100 new_order-block__services-list">
                   <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 id="select-service-container" class="position-relative"></div>
                  </div>
                </div>
              </div>
  <div id="neworder_fields"></div>
            
              <div class="form-group">
                <label for="charge" class="control-label">Charge</label>
                <input type="text" class="form-control" id="charge" readonly>
              </div>
                          </div>
                          {% if neworderTerms %}
                        <div class="checkbox">
                           <label>
                           <input type="checkbox" name="neworder_check"> {{ lang['neworder.recheck'] }}
                           </label>
                        </div>
                        {% endif %}
              <input type="hidden" name="csrf_token" value="{{ csrfToken }}">
            <div class="new-order-button-submit component_button_submit ">
              <button type="submit" class="btn btn-block btn-big-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="component_content_card component_content_button">
        <div class="card">
                                <div class="new-order__content-title">
              <div class="position-relative">
                                  <p><span style="font-size: 18px"><span style="text-transform: uppercase"><strong style="font-weight: bold">Services Details</strong></span></span></p>
                              </div>
            </div>
                    <div class="new-order__content-text">
                          <p>What <strong style="font-weight: bold">R30,R60,R90,Rꝏ</strong> means?</p>
<p>&nbsp;-&gt; Here <strong style="font-weight: bold">R</strong> means <strong style="font-weight: bold">Refill </strong>and the numbers showing as<strong style="font-weight: bold"> date</strong>, ex : R30(30 Days Refill) and <strong style="font-weight: bold">ꝏ </strong>this is infinity symbol it means <strong style="font-weight: bold">Lifetime</strong>.</p>
<p><br></p>
<p>What <strong style="font-weight: bold">LD,ND,NR,CB,RB </strong>means?</p>
<p>&nbsp;-&gt; LD : Low Drop , ND : Non Drop , NR : No Refill , CB : Cancel Button Active , RB : Refill Button Active</p>
<p><br></p>
<p>What <strong style="font-weight: bold">HQ,LQ,MQ </strong>means?</p>
<p>&nbsp;-&gt; HQ : High Quality , LQ : Low Quality , MQ : Medium Quality</p>
<p><br></p>
<p><br></p>
<p>⚠ 𝗪𝗔𝗥𝗜𝗡𝗚<br>
★ Don't make multiple order at same time or don't use multiple website at same time. Wait for previous/running order complete then make new order at any place.</p>
                      </div>
                  </div>
      </div>
    </div>
  </div>
</div></div></div>
    </div>
    <div class="wrapper-content__footer">
           </div>
  </div>
</div>
{% include 'footer.twig' %}             