{% include 'header.twig' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
function serviceclicked(sid,cid){
 
 console.log(sid, cid)
 $(`#neworder_category option[value=${cid}]`).prop('selected', 'selected').change();
setTimeout(servd, 1000)
function servd(){
  console.log('run after 1 second');
 $(`#neworder_services option[value=${sid}]`).prop('selected', 'selected').change();
  var h23 = $(`#neworder_services option[value=${sid}]`).attr('data-content');
  console.log(h23);
 h23 = h23.replace('<span class="badge badge-secondary style-text-primary badge-rounded">','');
 h23 = h23.replace('</span>','');
 h23 = h23.replace('</b>','');
 h23 = h23.replace('<b>','');
  $('#dropdown_for_search').html('');
 
  $('#search_services_field').val(h23);
}


 
 }
$(document).ready(function () {
    // Event listener for changes in the serviceSearch input
 
    $('#search_services_field').on('input', function () {
        // Get the input value
        var inputValue = $(this).val();
if(!inputValue){
   $('#dropdown_for_search').html('');
}else{
        // Making an AJAX request
        $.ajax({
            type: 'POST',
            url: '/ajax_data',  // Replace '/neworder' with the actual URL of your neworder route
            data: { 
                action: 'service_search' ,
                search_term: inputValue
            },
            beforeSend: function(){
               $('#dropdown_for_search').html(`<div class="dropdown-item"  bis_skin_checked="1" style="padding: 6px 12px; cursor: pointer;"><span class="badge service_id_badge bg-primary">Searching</span> Please Wait...</div>`);
            },
            success: function (response) {
                // Handle the response from the server
              
                 $('#dropdown_for_search').html(response);
              
                // You can update the DOM or perform other actions based on the response
            },
            error: function (error) {
                console.error('AJAX error:', error);
            }
        });
    }});
});
</script>
<div class="inner-page" style="display: inline-block;">
<section>
<div class="container">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.17/dist/css/bootstrap-select.min.css">
<style type="text/css">
  .bootbox-body {
      word-break: break-all;
  }
  .alert-blue {
      color: #3B653C;
      background-color: #DDECD8;
      border-color: #e9ebee;
  }
  .tile {
      position: relative;
      padding: 14px;
      margin-bottom: 20px;
      text-align: center;
      background-color: #e9ebee;
      border-radius: 6px;
  }
  .tile {
      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
      border: 0;
  }
  .tile-title{
    font-size: 20px;
  }
div#service_description {
   background: #fafafa;
    font-size: 15px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    border-radius: 4px;
    padding: 8px;
}
  .notifyjs-corner { left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

  .card .form-group .form-control button{
    font-weight: 400;
    color:#000000;
    background-color: #fafafa;
    box-shadow: 0 4px 6px #32325d1c, 0 1px 3px #00000014;
  }
  .dropdown i.fab, .dropdown i.fas, .dropdown i.far, .dropdown i.fad {
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
      dropdown-rendering: optimizeLegibility;
  }
  .dropdown i.fab.fa-instagram {

      background: #f09433;
      background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      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 );
      font-size: 14px;
      padding: 2.4px;
      border-radius: 5px;
      color: #FFF;
      font-weight: lighter;
      margin-right: 5px;
  }
  .dropdown i.fab.fa-facebook-square {
      color: #207eff;
      font-size: 17px;
      font-weight: bold;
      border-radius: 5px;
      margin-right: 5px;
  }
  .dropdown i.fas.fa-star {
      color: #ffb120;
      font-size: 17px;
      font-weight: bold;
      border-radius: 5px;
      margin-right: 5px;
  }
  .dropdown i.fab.fa-facebook {
      color: #207eff;
      font-size: 17px;
      font-weight: bold;
      border-radius: 5px;
      margin-right: 5px;
  }
  .dropdown i.fab.fa-twitter {
      color: #1da1f2;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }
  .dropdown i.fab.fa-spotify {
      color: #62ffa2;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }
  .dropdown i.fab.fa-soundcloud {
      color: #ff5836;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }
  .dropdown i.fab.fa-pinterest-square {
      color: #ff5858;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }
  @media screen and (max-width: 991px) {
    .inner-page {
        padding-top: 45px;
        padding-bottom: 46px;
    }
}

.inne
  .dropdown i.fab.fa-google-play {
      color: #FFD400;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fab.fa-periscope {
      color: #3aa4c6;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fab.fa-twitch {
      color: #e600ff;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fab.fa-youtube {
      color: #ff0042;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fas.fa-heart {
      color: #ff0000;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fas.fa-clock {
      color: green;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fas.fa-comment {
      color: #666;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fas.fa-thumbs-up {
      color: blue;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fab.fa-telegram-plane {
      color: #29F200;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fas.fa-camera-home {
      color: #6515dd;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fab.fa-tiktok {
      color: #000000;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }
  .dropdown i.fab.fa-threads {
      color: #000000;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.far.fa-lock-alt {
      color: #00b8ff;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fas.fa-user-ninja {
      color: #ffc107;
      font-size: 17px;
      font-weight: bold;
      margin-right: 5px;
  }

  .dropdown i.fab.fa-linkedin {
      color: #0a66c2;
      font-size: 17px;
      margin-right: 10px;
  }

  .dropdown i.fab.fa-discord {
      color: #1090F3;
      font-size: 17px;
      margin-right: 10px;
  }

  .dropdown i.fab.fa-google {
      color: #DA3810;
      font-size: 17px;
      margin-right: 10px;
  }

  .dropdown i.fab.fa-apple {
      color: #5910DA;
      font-size: 17px;
      margin-right: 10px;
  }
  .dropdown i.fab.fa-internet-explorer {
      color: #1DB5E7;
      font-size: 17px;
      margin-right: 10px;
  }
  .ordersel .dropdown-menu {
      max-height: 400px;
  }
</style>
        {% if contentText %}

<div class="alert alert-blue" role="alert" style="margin-bottom: 2px;">

{{ contentText }}

</div>
{% endif %}

<div class="row" style="margin-top: 10px;">
<div class="col-lg">
<div class="card order-dashboard">
<div class="card-body">
<div class="icon rounded-circle">
<i class="fa fa-clone"></i>
</div>
<div class="content-box">
<div class="title">Total Orders at {{ site["site_name"]}}</div>
<div class="numbers">{{ site_order }}</div>
</div>
<div class="des-sec">3+ years experience providing SMM services!</div>
</div>
</div>
</div>
<div class="col-lg">
<div class="card order-dashboard">
<div class="card-body">
<div class="icon rounded-circle">
<i class="fa fa-wallet"></i>
</div>
<div class="right-side">
<label>looking to Deposit? </label>
<a href="/addfund" class="btn btn-green">Deposit now </a>
</div>
<div class="content-box">
<div class="title">Current Balance </div>
<div class="numbers userBalance">
{{ user['balance'] }}</div>
<div class="des-sec">Your total spendings : <span class="userSpends">{{ user['spent'] }}</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-lg-6">
<div class="card">
<div class="card-body pt-0">
<ul class="nav nav-tabs">

<li class="nav-item">
<a class="nav-link active show" href="#neworder" aria-controls="new-order" data-toggle="tab" onclick="toggleTab('Normal',false)">
<i class="fa fa-clone"></i> New Order
</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#massorder" aria-controls="mass-order" data-toggle="tab" onclick="toggleTab('Mass',false)">
<i class="fa fa-sitemap"></i> Mass Order
</a>
</li>
</ul>

<div class="tab-content">
<div id="neworder" class="tab-pane fade in active show ">
<div class="alert alert-success" role="alert" id="order-alert" style="margin: 5px;display:none">
<button type="button" class="close" id="order-alert-close" aria-hidden="true">⨉</button>
<legend id="al-title">Your</legend>
<h6 id="al-id-row"><strong>ID: </strong> <span id="al-id"></span></h6>
<h6 id="al-service-row"><strong>Package: </strong> <span id="al-service"></span></h6>
<h6 id="al-link-row"><strong>Link: </strong> <span id="al-link"></span></h6>
<h6 id="al-qty-row"><strong>Quantity: </strong> <span id="al-qty"></span></h6>
<h6 id="al-runs-row" style="display: none;"><strong>Runs: </strong> <span id="al-runs"></span></h6>
<h6 id="al-price-row"><strong>You have paid </strong> <span id="al-price"></span></h6>
<h6 id="al-disc-row"><strong>Cashback Earned </strong> <span id="al-disc"></span></h6>
<h6 id="al-bal-row"><strong>Balance: </strong> <span id="al-bal"></span></h6>
</div>



<div class="well">
    {% if error %}
      <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">✕</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 %}
 
    <form method="post" action="">
        <div class="component_button_forms">
            <div class="form-group">
                <div class="search_services_content">
                    <input type="search" id="search_services_field" class="form-control" placeholder="Search for a service...">
                </div>
                <div id="dropdown_for_search" class="dropdown">
                    <!-- Dropdown content goes here -->
                </div>
            </div>

            <div class="form-group">
                <label for="neworder-category">🌲{{ 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" aria-label="Select category">
                    {{ category_html_simplify }}
                </select>
                <div id="select-category-container" class="position-relative"></div>
            </div>

            <div class="form-group">
                <label for="neworder-service">🌿{{ 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" aria-label="Select service">
                    <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">
                <label for="charge"><i class="mdi mdi-currency-inr"></i> You will pay</label>
                <input type="text" class="form-control" id="charge" value="" readonly>
                <p id="not-enough-funds" style="display:none;color:red">💸 I am having an out of money experience.... Not enough funds on balance</p>
            </div>

            <button type="submit" class="btn btn-blue" onclick="clickme()">🕊️{{ lang["neworder.button"] }}🕊️</button>
        </div>
    </form>
</div>




</div>

<div id="massorder" class="tab-pane fade ">

massform


</div>

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

<div class="col-lg-6">
<div class="card bg-white latest-news-panel">
<div class="card-header">
<div class="card-title">
<i class="fa fa-newspaper"></i> Latest News
</div>
</div>
<div class="card-body" id="newOrderContent" style="max-height: 400px;">
<div class="news-list-panel">
    
    		          {% for new in news %}

    
<div class="news-list-item">
<span class="badge badge-green date">{{ new['news_date'] }}</span>
<div class="news-type-list">
<div class="news-type-list-item">
<div class="title blue"><img width="30" src="{{ new['news_icon'] }}">  {{ new['news_title'] }}</div>
<ul class="list">
<li class="list-item">
    
    {{ new['news_content'] }}
    

</li>
</ul>
</div>
</div>

</ul>
</div>
                {% endfor %}    


</div>
</div>
</div>
</div>
</div>
<div class="card bg-white latest-news-panel" style="margin-top:20px">
<div class="card-header">
<div class="card-title">
<i class="fa fa-video"></i> Our Video
</div>
</div>
<div class="card-body" id="videoContent" style="max-height: 400px;">
<div class="video-list-panel">
<div class="video-list-item">
<iframe width="100%" height="200vh" src="https://www.youtube.com/embed/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

</div>

</div>

</div>
</div>
<br>
        {% if contentText %}

<div class="alert alert-blue" role="alert" style="margin-bottom: 2px;">

{{ contentText }}

</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
         
{% include 'footer.twig' %}


