{% include 'header.twig' %}     
<!-- Main variables *content* -->
        <main class="auth">
                    <div class="about_us_effect">
            <img
              src="https://smmxz.sacloud.site/images/about-us-page-left-image.png"
              class="img-fluid about_us_img_left"
              alt=""
            />
            <img
              src="https://smmxz.sacloud.site/images/about-us-page-right-image.png"
              class="img-fluid about_us_img_right"
              alt=""
            />
          </div>


<br>
<br>
<br>


















   <section id="service_page_top">
  <div class="container-fluid">
        <div class="row">
      <div class="col-lg-12">
        <div class="card search_filter_card mb-3">
          <div class="card-body">
            <div class="search_filter_wrap">
              <div class="search">
                <input
                  type="text"
                  class="search_input"
                  placeholder="Search...."
                  data-search-service="#service-table"
                  id="filterServicesInput"
                />
                <span class="icon" data-filter-serch-btn="true">
                  <iconify-icon icon="material-symbols:search"></iconify-icon>
                </span>
              </div>
              <div class="filter">
                <div class="dropdown filter_services">
                  <button
                    class="btn btn-secondary filter_btn dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <div class="filter_service_text">
                      <span class="icon">
                        <iconify-icon icon="mage:filter-2-fill"></iconify-icon>
                      </span>
                      <span class="text">Filter</span>
                    </div>
                    <div class="filter_service_icon">
                      <i class="fas fa-chevron-down"></i>
                    </div>
                  </button>
                                            
                                            <ul class="dropdown-menu v2">
                                            <div class="drop_dwon_items">
                    <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>
{% if site_currency_converter == "1" %}
                                    <div class="currency">
                <div class="dropdown filter_currency">
                  <button
                    class="btn btn-secondary dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <div class="currency_name">
                                              Currencies
                                          </div>
                  </button>
                  <ul class="dropdown-menu v2">
                         
                          
                    {{ currencies_dropdown }}
          
                   
                  </ul>
                </div>
              </div>
              {% else %}
                          </div>
                          {% endif %}
          </div>
        </div>
      </div>
    </div>




<div class="row">
      <div class="col-lg-12">
        <div class="social_media_wrap mb-3" id="servicesFilterWraper">
          <button class="social_media_btn" onclick="filterBySearch('instagram')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/instagram-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Instagram</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('facebook')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/facebook-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Facebook</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('youtube')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/youtube-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Youtube</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('twitter')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/twitter-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Twitter</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('spotify')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/spotify-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Spotify</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('tiktok')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/tiktok-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Tiktok</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('linkedin')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/linkedin-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Linkedin</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('soundcloud')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/soundcloud-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">SoundCloud</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('telegram')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/telegram-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Telegram</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('traffic')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/website-traffic-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Web Traffic</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('snapchat')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/snapchat-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Snapchat</div>
          </button>

          <button class="social_media_btn" onclick="filterBySearch('discord')" type="button">
            <div class="icon">
              <img
                src="https://smmxz.sacloud.site/images/discord-logo-for-btn.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="media_name">Discord</div>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>















<section id="table" class="services_wraper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <div class="serv_category_card">
                       <div class="table-responsive">
                            
                             <table id="serv-table" class="app-mtable table results table-mobile-cards">
                                 
                                <thead>
                                            <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>
                                                                                 <th>Order</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;">
                                                           {{ category["category_name"] }}
                                                       </div>
                                                   </div>
                                                </td>
                                            </tr>
                                           
                                                

                {% for service in category['services'] %}
                   <tr data-filter-table-category-id="{{ category["category_id"] }}">
                   <td data-filter-table-service-id="{{ category["category_id"] }}">
              
                    
                    
                            <span id="servis_id" class="order_id">{{ service["service_id"] }}</span>
                                            </td>
                                            
                                    <td class="service-name" data-filter-table-service-name="true">{{ service["service_name"] }}
                                    </td>
                                    <td>
                      
{% if user["auth"] == "1" %} 
{{service["service_price"]}}

{% else %}
{{service["without_login_service_price"]}}
{% endif %}
                    </td>
                                    <td>{{ service["service_min"] }}</td>
                                    <td>{{ service["service_max"] }}</td>
                                                                        <td class="avarage_time_Services">{{ 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="modal-header">
                                  <center><div class="serv_id_wrap" bis_skin_checked="1">
                       <span id="servId">#{{ service["service_id"] }}</span>
                    </div></center>
                    <div class="servName" bis_skin_checked="1"> <span id="exampleModalLabel">
                                                {{ service["service_name"] }}
                                            </span></div>
                                
                                <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">
                                <p class="detail-data details-split-959"> {{ service["service_description"] }}</p>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-actions" data-dismiss="modal">Close</button>
                              </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>         
                                         <td>
                                                <a href="{{ site['url'] }}/?category_id={{category['category_id']}}&service_id={{ service['service_id'] }}" class="btn btn-primary btn_serv">
                                                    <i class="fas fa-shopping-cart"></i> 
                                                </a>
                                            </td>                                                       
                                                                                                

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

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div></div>
</div>
</div></div></div>


{% if contentText2 %}
{{ contentText2 }}
{% endif %}

<script>
function btnFltr(t){var e=t.getAttribute("data-services-filter");$("#search").val(e),$("#search").attr("data-filter-value",e),$("#search").trigger("keyup")}$(document).ready(function(){$("#search").on("keyup",function(){var t=$(this).val().toLowerCase();$("#serv-table tbody tr").each(function(){var e=$(this).find("#servis_id").text().toLowerCase(),a=$(this).find(".service-name").text().toLowerCase(),i=$(this).attr("data-filter-table-category-id"),r=$('.catetitle[data-filter-table-category-id="'+i+'"]');(e+a).includes(t)?($(this).show(),r.show()):($(this).hide(),$('#serv-table tbody tr[data-filter-table-category-id="'+i+'"]:visible').length>0||r.hide())})})});
</script>

<script type="text/javascript"  src="https://storage.perfectcdn.com/libs/jquery/1.12.4/jquery.min.js" >
                            </script>
                    <script type="text/javascript"  src="https://storage.perfectcdn.com/global/6lea6p5h1se0ydlc.js" >
                            </script>
                    <script type="text/javascript"  src="https://storage.perfectcdn.com/global/lpckws4jmmcjpzoh.js" >
                            </script>
                    <script type="text/javascript"  src="https://storage.perfectcdn.com/global/41oyxac8gg4eoke6.js" >
                            </script>
                    <script type="text/javascript"  src="https://storage.perfectcdn.com/global/dmabhtcke4de93dz.js" >
                            </script>
                    <script type="text/javascript"  src="https://storage.perfectcdn.com/global/7hl6zfgduel1sfu0.js" >
                            </script>
                    <script type="text/javascript"  src="https://storage.perfectcdn.com/o9v0gb/umnk9pmrxf8674fk.js" >
                            </script>
                    <script type="text/javascript" >
                window.modules.layouts = {"theme_id":1,"auth":1,"live":true,"csrftoken":"Ja-Bu4fuQ_BujwZmBb5R9a8oh5qlELuSD7na71mWIw5H6_vrvtwhxyDZUw1MhwfMynLR85JGi_Za4Z2waaVuRw=="};
            </script>
                    <script type="text/javascript" >
                window.modules.siteServices = {"quickOrderAction":"\/quick-order","quickOrderUrl":"\/"};
            </script>
                    <script type="text/javascript" >
                window.modules.alerts = {"alerts":[]};
            </script>
                    <script type="text/javascript" >
                            </script>
 

  
            
                     