{% include 'header.twig' %}

<style>
		#service_description,
		#service_average_time {
			padding: 13px;
			border-radius: 12px;
			color: #393e46;
			box-shadow:none;
			background-color: #f3f3f3;}
	svg {fill: #ffffff;}@media (min-width:992px){
    .totals-block__card-right{ background-color: #fff; }
}
</style>

<style>
    
 .badge {
	margin: 0px;
	background: #0084ff;
	width: fit-content;
	padding: 5px 15px 5px ;
	border-radius: 100px;
	color: #ffffff;
	font-weight: 500;
	align-items: center;
	gap: 10px;
}   
    /* 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>











<div class="container-fluid">
    <section class="mt-4 mb-3">
        <p class="text-center fw-bold">
          We have Completed: <span class="text-primary">{{totalorders}}</span> Orders
                                     <br/> 
          <span class="text-danger"> <small>For Place Order need balance! <a href="/addfunds" class="link">Add Fund Now</a></small></span>            
                     </p>
        <div class="nwoCard-row row row-cols-2 row-cols-md-2 row-cols-lg-4">
            <div class="col">
              <a href="/addfunds">
               <div class="card nwoCard    animate_for_balance ">
                    <div class="card-body">
                        <div class="icon">
                            <i class="ri-money-dollar-circle-line"></i>
                        </div>
                        <div class="col-r">
                            <h3 class="title">
                                                                                       <span class="text-warning"> Add Funds </span>
                                                              </h3>
                            <p class="value">{{ user["balance"] }}</p>
                        </div>
                    </div>
                </div>
              </a>
            </div>
            <!-- ./col -->
                        <div class="col">
                <div class="card nwoCard">
                    <div class="card-body">
                        <div class="icon">
                            <i class="ri-shopping-cart-fill"></i>
                        </div>
                        <div class="col-r">
                            <h3 class="title">
                                                                Total Orders
                                                           </h3>
                            <p class="value">{{totalorders}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <div class="col">
                <div class="card nwoCard">
                    <div class="card-body">
                        <div class="icon">
                            <i class="ri-exchange-dollar-line"></i>
                        </div>
                        <div class="col-r">
                            <h3 class="title">
                                                                Spending 
                                                           </h3>
                            <p class="value">{{ user["spent"] }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ./col -->
            <div class="col">
                <div class="card nwoCard">
                    <div class="card-body">
                        <div class="icon">
                            <i class="ri-shield-flash-line"></i>
                        </div>
                        <div class="col-r">
                            <h3 class="title">
                                                                Status 
                                                           </h3>
                            <p class="value">
                                                                                                                      NEW 
                                                                           
                                                          </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ./col -->
        </div>
    </section>

<section id="noc-wrapper" style="display: block;">
    

                   
<!-- New Orders Part -->
    <section class="nwoMain mt-3">
        <div class="row">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-auto mt-lg-0">
                                <ul class="nwoNav nav nav-tabs" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nwoNavLink active smmspot-newOrderBtn" data-bs-toggle="tab" d="newOrder-tab" data-bs-target="#newOrder" type="button" role="tab" aria-controls="newOrder" aria-selected="true">
                                                                                        New Order 
                                                                                   </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nwoNavLink smmspot-favOrderBtn"  type="button" href="/massorder">
                                                                                        Mass Order
                                                                                   </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
 


                    <div class="card-body">
                                                       							      {% if error %}
      <div class="alert alert-dismissible alert-danger">
        {{ errorText }}
      </div>
    {% endif %}
    
                             {% 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="/" class="badge badge-success">Close</a>


      </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 class="tab-content">
                            <div class="tab-pane active" id="newOrder" role="tabpanel" aria-labelledby="newOrder-tab">
                                <div class="smmspot-newOrderArea">
                                    <div class="smmspot-orderFormContainer">
                                        <form  action="/" method="post" id="order-form">
                               
                                                                                                                                        <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;">
     
                                                        
                                                    </div>
                                                    </div>
                                                </div>
                                                {% 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="mb-4">
        
<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>
                                                    <div class="mb-3">
<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>
                          <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 btn-100">Submit</button>
                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            
            
            
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            <span id=""></span>
                            <span id="s_name"></span>
                        </h2>
                        <center><font size="5" color="#fff"><b><i class="fal fa-newspaper mr-2"></i>Latest New</b></font></center>
                
                
              </div>
            </div>
                  					
					
 
{% if news %}
    <div style="padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;" class="card mb-3">
      
      <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>
          <div class="news-content">{{ new['news_content'] }}</div>
        </div>
      </div>
      {% endfor %}
      </div>
  </div>
  </div>
{% endif%}                 
                          

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

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

						   
{% include 'footer.twig' %}

