{% include 'header.twig' %}

<!-- Main variables *content* -->
<script src="https://kit.fontawesome.com/c547f88615.js" crossorigin="anonymous"></script>		 
<div class="container">
  <div class="row">
    <div class="col-sm-4">
    	<div class="side-box">
            <div class="media">
              <div class="media-left">
               <i class="fas fa-user-check" aria-hidden="true"></i>
              </div>
              <div class="media-body">
                <h4 class="media-heading">{{ user["username"]  }}</h4>
                <h5>User name</h5>
              </div>
            </div>
          </div>
    </div>
  
  <div class="col-sm-4">
      <div class="side-box">
        <div class="media">
          <div class="media-left">
            <i class="fas fa-money-bill-alt" aria-hidden="true"></i>
          </div>
          <div class="media-body">
            <h4 class="media-heading">{{ user["balance"] }}</h4>
            <h5>Balance</h5>
          </div>
        </div>
      </div>
    </div>

<div class="col-sm-4">
      <div class="side-box">
        <div class="media">
          <div class="media-left">
            <i class="fa-solid fa-chart-simple" ></i>
          </div>
          <div class="media-body">
            <h4 class="media-heading">{{totalorders}}</h4>
            <h5>Total Orders</h5>
          </div>
        </div>
      </div>
    </div>
  
  
   
  </div>
    </div>
    
    

 <div class="col-md-8 col-md-offset-2 align-items-center"><style>
    .section-title {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5em;
    line-height: 1.4;
}

#reseller-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 85%;
    height: 80px;
    padding: 0 20px 0 20px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(110deg,#ea037f,#0587f7);
    text-decoration: none;
    box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
    margin: 0 auto;
}

.section-title {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5em;
    line-height: 1.4;
}

#reseller-banner:before {
    background-image: url(/images/reseller-banner-bg-md.webp);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    opacity: 0.2;
}

#reseller-banner .title {
    font-size: 21px;
    position: relative;
    line-height: 23px;
    font-weight: 600;
    letter-spacing: 0px;
    margin-bottom: unset;
    margin-top: unset;
    font-family: sans-serif !important;
    width:80%;
    //text-shadow: 2px 2px #000;
    //color:yellow;
}

#reseller-banner .arrow {
    right: 30px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 150px;
    height: 32px;
    border-radius: 16px;
    color: #fff;
    background-color: #e81586;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .88px;
}


#reseller-banner .arrow .icon {
    display: none;
}


@media only screen and (max-width: 540px){
    
    #reseller-banner .title{
        width:85%;
    }
#reseller-banner .arrow {
    right: 20px;
    width: 32px;
}

#reseller-banner .arrow .icon {
    display: block;
}

#reseller-banner .arrow .arrow-text {
    display: none;
}

}
#reseller-banner .title br {
    display: none !important;
}


.fade-in {
  animation-name: FadeIn;
  animation-duration: 1.5s;
  transition-timing-function: linear;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
  </div>          
      </div>
 </div><!--dashboard ends here-->
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="well">

            
            
                {% 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="/"><span class="badge badge-primary">Close</span></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 %}
            
            
          <form action="/" method="post" id="order-form">
            <div class="component_button_forms">

                                <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">Charge</label>
      <input type="text" class="form-control" id="charge" readonly>
    </div>
                                          
                                          
                                          
                                          
                                          
                                          
                 <div class="new-order-button-submit component_button_submit ">
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>                                     
                               
{% include 'footer.twig' %}             