{% include 'header.twig' %}




		 <!-- // page and other top info -->
                    <style>
    .order_id {
    display: block;
    background: var(--text-primary);
    text-align: center;
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
}
</style>
<div id="top_services">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card_v2">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="service_button_filter">
                                    
                                <!--    <button class="btn_ser_filter btn_all" onclick="allSearch()">
                                        All
                                    </button>

                                    <button class="btn_ser_filter btn_fb"  onclick="btnFltr(this)"
                                    data-value="facebook">
                                        <span class="icon">
                                            <i class="fab fa-facebook"></i>
                                        </span>
                                        
                                    </button>

                                    <button class="btn_ser_filter btn_tw"  onclick="btnFltr(this)"
                                    data-value="twitter">
                                        <span class="icon">
                                            <i class="fab fa-twitter"></i>
                                        </span>
                                        
                                    </button>

                                    <button class="btn_ser_filter btn_ig"  onclick="btnFltr(this)"
                                    data-value="instagram">
                                        <span class="icon">
                                            <i class="fab fa-instagram"></i>
                                        </span>
                                        
                                    </button>


                                    <button class="btn_ser_filter btn_in"  onclick="btnFltr(this)"
                                    data-value="linkedin">
                                        <span class="icon">
                                            <i class="fab fa-linkedin"></i>
                                        </span>
                                        
                                    </button>


                                    <button class="btn_ser_filter btn_yt"  onclick="btnFltr(this)"
                                    data-value="youtube">
                                        <span class="icon">
                                            <i class="fab fa-youtube"></i>
                                        </span>
                                        
                                    </button>


                                    <button class="btn_ser_filter btn_sp"  onclick="btnFltr(this)"
                                    data-value="spotify">
                                        <span class="icon">
                                            <i class="fab fa-spotify"></i>
                                        </span>
                                        
                                    </button>
                                    <button class="btn_ser_filter btn_tik"  onclick="btnFltr(this)"
                                    data-value="tiktok">
                                        <span class="icon">
                                            <i class="fab fa-tiktok"></i>
                                        </span>
                                    </button>

                                    <button class="btn_ser_filter btn_dis"  onclick="btnFltr(this)"
                                    data-value="discord">
                                        <span class="icon">
                                            <i class="fab fa-discord"></i>
                                        </span>
                                    </button>

                                    <button class="btn_ser_filter btn_traffic"  onclick="btnFltr(this)"
                                    data-value="traffic">
                                        <span class="icon">
                                            <i class="fas fa-globe"></i>
                                        </span>
                                    </button> -->

                                </div>
                            </div>
                        </div>
                        <div class="row">
                           <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="drop_dwon_menu" id="cat_filter">
                                            <div class="text_filter">
                                            <button class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <svg xmlns="http://www.w3.org/2000/svg" height="14" width="14" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/></svg>
          <span data-filter-active-category="true">Select Catogery</span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
                    <li>
            <a class="dropdown-item" href="#" data-filter-category-id="All">All</a>
          	{% for category in serviceCategory %}
          	<a class="dropdown-item" href="services#" data-filter-category-id="{{ category["category_id"] }}"
          	data-filter-category-name="{{ category["category_name"] }}">{{ category["category_name"] }}</a>{% endfor %}
      </ul>
                                            
                                            
                                            
                                               </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                                                                    <ul id="currency_changer">
                                                <li>
                                                    <div class="dropdown ">
                                                        <button class="btn btn-primary dropdown-toggle mb-sm-2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="currencyToggler">
                                                            <span>
                                                                                                                                  {{site_base_currency}}
                                                                                                                            </span>
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu" id="currencies-list">
                                                             {% if site_currency_converter == "1" %}       <li>
                                        <a class="dropdown-item" > {{ currencies_dropdown }}</a>
                                    </li> {% endif %}
                                                                    <li>
                                     
                                                            </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                                                            </div>
                                    
                                </div>
                           </div>
                            <div class="col-md-6"><div class="input-group">
                                <input type="text" class="form-control" placeholder="Search" id="priceService" data-search-service="#service-table">
                               
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" data-filter-serch-btn="true">
                                        <i class="fa fa-search" aria-hidden="true"></i>
                                    </button>
                                </span>
                            </div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<section id="table" class="services_page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="responsive-table def_table">
                       <div class="table-responsive">
                            <table class="table" id="service-table">
                                
                                
                                                                    <thead class="category_filterable category{{ category["category_id"] }}">
                                        <tr class="" data-category="{{ category["category_name"] }} ">
                                          
                                        </tr>
                                        <tr data-category="{{ category["category_name"] }} ">
                                            <th>ID</th>
                                            <th>Service</th>
                                            <th>Rate per 1000</th>
                                            <th>Min order</th>
                                            <th>Max order</th>
                                                                                            <th class="nowrap">Average time
                                                    <span class="fa fa-exclamation-circle" data-toggle="tooltip" data-placement="top" title="The average time is based on 10 latest completed orders per 1000 quantity."></span>
                                                </th>
                                                                                                                                        <th>Description</th>
                                                                                 
                                        </tr>
                                    </thead>

                                        <tbody>
                                        
                                                {% for category in serviceCategory %}
                                                                                                            <tr class="catetitle" data-filter-table-category-id="{{ category["category_id"] }}">
                                                <td colspan="8">
                                                   <div class="catetitle ">
                                                       <div class="style-bg-primary-alpha-20 style-text-primary services-category text-center" style="font-size:20px; font-weight:bold;">
                                                         <strong class=" si-title mk-icons"> {{ category["category_name"] }}</strong>
                                                       </div>
                                                   </div>
                                                </td>
                                            </tr>
                                           


                                                

                {% for service in category['services'] %}
                
                <!-- start service filter -->
                
                  <tr data-filter-table-category-id="{{ category["category_id"] }}">
                   <td data-filter-table-service-id="{{ category["category_id"] }}">
              
                              <span class="px-2 d-flex justify-content-between align-items-center">
                    <span class="fav" data-id="{{ service["service_id"] }}" data-status="0"></span>
                    <a class="notif" style="color: #000;" data-status="0" data-id="{{ service["service_id"] }}" data-rate="≈  {{ currency['symbol'] }}{{ (service["service_price"]*currency["value"]) }} "><i class="far fa-bell-slash"></i></a>
                </span>
                            <span id="servis_id" class="order_id">{{ service["service_id"] }}</span>
                                            </td>
                                            
                                            <!-- service filter -->
                                            
                    <td data-label="Service" class="app-col mk-icons" data-filter-table-service-name="true">{{ service["service_name"] }}</td>
                    
<td><span class="sp-serv-sm"><strong style="font-weight: bold">

{% if user["auth"] == "1" %} 
{{service["service_price"]}} 

{% else %}
{{service["without_login_service_price"]}} 
{% endif %}
    </span></td>
                    <td>{{ service["service_min"] }}</td>
                    <td>{{ service["service_max"] }}</td>
                    
                    <td>{{ service["time"] }}</td>
                     
                     <td>
                         
                     <!-- Modal -->
                        <div class="modal fade" id="servis{{ service["service_id"] }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                             
                                 
                               <div class="servicesHead">
                    <div class="serv_id_wrap">
                        <span id="servId">#{{ service["service_id"] }}</span>
                    </div>
                    <div class="servName"> <span id="serv_names">
                                                {{ service["service_name"] }} 
                                            </span></div>
                </div>
                               <div class="modal-header">
                                <button type="button" class="serv_modal_close" data-dismiss="modal" aria-label="Close"><i class="fas fa-times"></i></button>
                              </div>
                              <div class="modal-body text-left">
                                <div id="serv_details">{{ service["service_description"] }}</div>
                              </div>
                              
                               <div class="serv_more_infos">
                    <div class="ser_more_item">
                        <div class="serv_more_icon">
                            <i class="fas fa-water-lower"></i>
                        </div>
                        <div class="more_infos">
                            <h5>Min Order</h5>
                            <span id="minOrder">{{ service["service_min"] }}</span>
                        </div>
                    </div>

                    <div class="ser_more_item">
                        <div class="serv_more_icon">
                            <i class="fas fa-water-rise"></i>
                        </div>
                        <div class="more_infos">
                            <h5>Max Order</h5>
                            <span id="maxOrder">{{ service["service_max"] }}</span>
                        </div>
                    </div>

                    <div class="ser_more_item">
                        <div class="serv_more_icon">
                            <i class="far fa-usd-circle"></i>
                        </div>
                        <div class="more_infos">
                            <h5>Price Per 1000</h5>
                            <span id="pricePer">{% if user["auth"] == "1" %} 
{{service["service_price"]}} 

{% else %}
{{service["without_login_service_price"]}} 
{% endif %}</span>
                        </div>
                    </div>
                </div>

                <div class="buyNOwBtn">
                    <a id="buyNow" href="{{ site["url"] }}/?select_service_id={{ service["service_id"] }}"><i class="fas fa-cart-plus"></i> Buy Now</a>
                </div>

                
              
                
                              
                            
                            </div>
                          </div>
                          
						  
                         </div><a href="javascript:void(0)" class="btn btn-primary btn_serv btn_detail" data-toggle="modal" data-target="#servis{{ service["service_id"] }}">
                         Details
                      </a>

                   
                        </td>

                  </tr>
                {% endfor %}
              {% endfor %}

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