{% include 'header.twig' %}
<style>
#unique-dropdown{max-height: 300px;border-radius: 8px;margin-top:8px;border-left-width: 0px;border-right-width: 0px;border-top-width: 0px;border-bottom-width: 0px;border-color: transparent;border-style: solid;box-shadow: 0 12px 24px 12px rgba(0, 0, 0, 0.2);overflow-y: auto;display: block;position: absolute;left:auto;max-width:100%;width: 86%;background:white;z-index: 1;}@media(min-width:776px){ #unique-dropdown{width: 93%;}}@media(min-width:991px){ #unique-dropdown{width: 92.4%;}}.selectme {padding: 3px 10px;cursor: pointer;list-style-type: none; }.selectme:hover {background-color: #f2f2f2;}.highlight {font-weight: bold; }.form-group .search-dropdown .input-wrapper .input-wrapper__prepend, .form-group .search-dropdown .input-wrapper .input-wrapper__append {position: absolute;background: none;border: none;top: 50%;transform: translateY(-50%);padding: 0px 15px;color: var(--form_group_icon_color);}.form-group .search-dropdown .input-wrapper .input-wrapper__prepend:hover, .form-group .search-dropdown .input-wrapper .input-wrapper__append:hover {opacity: 0.5;}.form-group .search-dropdown .input-wrapper .input-wrapper__prepend:hover, .form-group .search-dropdown .input-wrapper .input-wrapper__append:focus {outline:none;}.form-group .search-dropdown .input-wrapper .input-wrapper__append {font-size: 12px;right: 3px;display: none;}
</style>
<style>

 {% if settings["site_theme_alt"] == "Lilac_Eternity" %}


		#service_description,
		#service_avg_time {
			padding: 13px;
			border-radius: 10px;
			color: #393e46;
			border: 1px solid #a8c4ab;
			background-color: #F8F0FF;
		}

	


	{% else %}
		#service_description,
		#service_avg_time {
			padding-right: 12px;
    padding-bottom: 8px;
			font-size: 14px;
			line-height: 1.5;
			border: 1px solid #a8c4ab;
			border-radius: 2px;
			color: #515b78;
			
				
			background-color: #fafcfe;
   
		}

	{% endif %}
	



</style>
 <script type="text/javascript">
$(function () {
    $('#neworder_category').selectpicker();
});
</script>	
<br>
   <div class="wrapper-content">
    <div class="wrapper-content__header">
          </div>
    <div class="wrapper-content__body">
    
                                                                     
 
  <div id="block_12">
 
 <div class="totals ">
    <div class="bg"></div>
    <div class="divider-top"></div>
    <div class="divider-bottom"></div>
    <div class="container-fluid">
      <div class="row align-items-stretch justify-content-center">
<div class="col-lg-3 col-md-6 col-sm-12 mt-2">
    <div class="card h-100" style="padding-top: 10px; padding-bottom: 10px; border: 0;">
        <div class="totals-block__card">
            <div class="totals-block__card-left">
                    <span class="totals-block__icon style-text-primary fas fa-user" style="
                                font-size: 38px;
                                transform: rotate(0deg);
                                color: ;
                                text-shadow: Array;
                                border-radius: 0px;
                                "></span>
                </div>
            <div class="totals-block__card-right">
                <div class="totals-block__count">
                    <h2 class="totals-block__count-value style-text-primary" style="font-size: 19px;">
                        {{ user["username"] }}
                    </h2>
                </div>
                <div class="totals-block__card-name">
                    <p style="font-size: 14px;"><marquee>Welcome To {{ site["site_name"] }}</marquee></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 col-sm-12 mt-2">
    <div class="card h-100" style="padding-top: 10px; padding-bottom: 10px; border: 0;">
        <div class="totals-block__card">
            <div class="totals-block__card-left">
                <span class="totals-block__icon style-text-primary fas fa-money-bill-wave" style="
                                font-size: 38px;
                                transform: rotate(0deg);
                                color: ;
                                text-shadow: Array;
                                border-radius: 0px;
                                "></span>
            </div>
            <div class="totals-block__card-right">
                <div class="totals-block__count">
                    <h2 class="totals-block__count-value style-text-primary" style="font-size: 22px;">
                        {{ user["spent"] }}
                    </h2>
                </div>
                <div class="totals-block__card-name">
                    <p>Total Spent</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 col-sm-12 mt-2">
    <div class="card h-100" style="padding-top: 10px; padding-bottom: 10px; border: 0;">
        <div class="totals-block__card">
            <div class="totals-block__card-left">
               <span class="totals-block__icon style-text-primary fas fa-shopping-cart" style="
                                font-size: 38px;
                                transform: rotate(0deg);
                                color: ;
                                text-shadow: Array;
                                border-radius: 0px;
                                "></span>
            </div>
            <div class="totals-block__card-right">
                <div class="totals-block__count">
                    <h2 class="totals-block__count-value style-text-primary" style="font-size: 22px;">
                        {{ totalorders }}
                    </h2>
                </div>
                <div class="totals-block__card-name">
                    <p>Today Orders</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 col-sm-12 mt-2">
    <div class="card h-100" style="padding-top: 10px; padding-bottom: 10px; border: 0;">
        <div class="totals-block__card">
            <div class="totals-block__card-left">
                <span class="totals-block__icon style-text-primary fas fa-wallet" style="
                                font-size: 38px;
                                transform: rotate(0deg);
                                color: ;
                                text-shadow: Array;
                                border-radius: 0px;
                                "></span>
            </div>
            <div class="totals-block__card-right">
                <div class="totals-block__count">
                    <h2 class="totals-block__count-value style-text-primary" style="font-size: 22px;">
                        {{ user["balance"] }}
                    </h2>
                </div>
                <div class="totals-block__card-name">
                    <p>Total Balance</p>
                </div>
            </div>
        </div>
    </div>
</div>
      </div>
    </div>
</div>
    </div>
                                    
  
         




   
<div style="padding-bottom: 2px;padding-top: 2px;" id="block_93">
    <div class="new_order-block ">
<div class="bg"></div>
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<div class="container">
    <div class="row new-order-form">
<div class="col-lg-7">
   <div class="component_form_group component_card component_radio_button">
<div class="card ">
{% 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://i.ibb.co/3MJZdBd/icons8-checkmark-384-3x.png" alt="checkmark"></center>
<div class="user-details">
<div id="sample" class="order-details">
<center><p><span class="paid-amount"><b>Your Order Has Been Placed :</b><span  style="color:#7743DB">{{data['order']['id']}}</span></span></p></center>
 

<br>
<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="quantity"><b> Quantity :</b><span style="color:#E0144C">{{data['order']['quantity']}}</span></span></p>
<div class="order-details">
    
</div></div>
<div class="user-details">
<center><p><span class="paid-amount"><b>You paid :</b><span style="color:#7743DB">{{ data['order']['price'] }}</span></span></p>
<p><b></b>Remaining balance :</b><span class="quantity" style="color:#E0144C">{{ data['order']['balance'] }}</span></p>

</div></div>
<button type="button" onclick="closeOrderReceiptCard()">OK</button>

<button type="button" onclick="CopyToClipboard('sample');return false;">Copy Order Details</button>
</div>
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
  
    
<script>
function CopyToClipboard(id){
    var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();

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

el.classList.remove("order-success-card-active");
    var copy = $('.copy_text').val();
    $('.copy_text').select();
    document.execCommand('copy');
    
    Swal.fire({
        icon: 'success',
        title: 'Successfully Copied',
        text: copy,
        showConfirmButton: false,
        timer: 3000
    });
    
}

 

</script>    

<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="well">

	
<form method="post" action="">
<div class="component_button_forms">
<div class="form-group">
        <div class="search-dropdown" id="new-order-search" style="position: relative;" data-lang-placeholder="Search">
            <div class="input-wrapper" style="position: relative;">
                <button type="button" class="input-wrapper__prepend" onclick="focusInputField()"><span class="fas fa-search"></span></button>
             <input style="padding-left:41px" type="text" class="form-control" id="unique-input" value="" placeholder="Search">
             <button type="button" class="input-wrapper__append" onclick="clearInput()"><span class="fas fa-times"></span></button>
            </div>
        </div>
        <div class="search-results" id="unique-dropdown" style="display: none;"></div>
    </div>
    <div class="form-group">
<label for="orderform-category" class="control-label">{{ lang["neworder.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>
    <div class="form-group">
<label for="orderform-service" class="control-label">{{ lang["neworder.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 id="select-service-container" class="position-relative"></div>
    </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-block btn-primary">Submit</button>
</form>
                      </div>
   </div>
</div>
    </div> </div> 
                
<br>
  <div class="component_content_card component_content_button component_content_headers">
{% if news %}
    <div class="card">
      <div class="headsir"><i class="fal fa-newspaper mr-2"></i>Latest Announcements</div>
      <div class="ssw">
      {% for new in news %}
      <div class="news-item">
        <div class="news-details">
          <p class="news-date"><i class="fad fa-calendar-alt mr-1" style="--fa-secondary-opacity: 0.65;"></i>{{ new['news_date'] }}</p>
          <h4 class="news-title">
            <span class="icon-container">
              <img width="30" class="news-icon-inline" src="{{ new['news_icon'] }}" alt="News Icon">
            </span>
            {{ new['news_title'] }}
          </h4>
          <p class="news-content">{{ new['news_content'] }}</p>
        </div>
      </div>
      {% endfor %}
      </div>
  </div>
  </div>
{% endif%}

  <div class="component_content_card component_content_button component_content_headers">
</div>	
{% if contentText2 %}
<div class="card">
{{ contentText2 }}
</div>
{% endif %}
														
</div>
</div>
</div> </div>



<br><br>

{% include 'footer.twig' %}


</div>
