{% include 'header.twig' %}
<div class="content">
<main id="notLogin">
    <style>
    .order_id {
    display: block;
    background: var(--text-primary);
    text-align: center;
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
}
.dashboard #notLogin{
    padding-top:20px;
}#notLogin{
    padding-top:100px;
}
</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-6">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="drop_dwon_menu" id="cat_filter">
                                            <div class="text_filter">
                                            <button class="btn mr-2 cat_btn_filter mb-sm-2 " role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fas fa-filter"></i> <span data-filter-active-category="true">Select Catogery</span>
                                                <i class="fas fa-sort-down"></i>
                                            </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>
                                    {% if user['auth'] == 0 %}
<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 class="services-filter__active-currency">{{route_service_currency}}</span>
                                                        </button>
                                                        <ul class="dropdown-menu" id="currencies-list">
                                                            <a class="dropdown-item" href="/services">{{site_base_currency}}{{" "}}{{ site_base_currency_symbol}}</a>
                                                                                   {{ without_login_currencies_item }}                                         
                                                                </li>
                                                                                                                    </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                                                            </div>
{% endif %}
                                    
                                </div>
                           </div>
                            <div class="col-md-6"><div class="input-group">
                                <input type="text" class="form-control" placeholder="Search" id="search" 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 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>
                      

{{service["service_price"]}}

                    </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>
   $(document).ready(function(){
    $('#search').on('keyup', function(){
        var searchText = $(this).val().toLowerCase();
        $('#serv-table tbody tr').each(function(){
            var serviceId = $(this).find('#servis_id').text().toLowerCase();
            var serviceName = $(this).find('.service-name').text().toLowerCase();
            var rowText = serviceId + serviceName;
            var categoryId = $(this).attr('data-filter-table-category-id');
            var categoryRow = $('.catetitle[data-filter-table-category-id="' + categoryId + '"]');
            
            if(rowText.includes(searchText)){
                $(this).show();
                categoryRow.show();
            } else {
                $(this).hide();
                var categoryVisible = $('#serv-table tbody tr[data-filter-table-category-id="' + categoryId + '"]:visible').length > 0;
                if (!categoryVisible) {
                    categoryRow.hide();
                }
            }
        });
    });
});

</script>
{% include 'footer.twig' %}


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

  <script type="text/javascript" src="/public/global/ch3915babussofa4.js">
      </script>
  <script type="text/javascript" src="/public/global/cgtptn05b64bwcs4.js">
      </script>
  <script type="text/javascript" src="/public/global/xcz59lmywkfdgsp4.js">
      </script>
  <script type="text/javascript" src="/public/global/wnzsoolloslhfumj.js">
      </script>
      <script type="text/javascript" src="/public/global/qri1ac173hshc2hdjc.js">
</script>

  <script type="text/javascript" >
     window.modules.layouts = {"auth":0};   </script>
  <script type="text/javascript" >
     window.modules.signin = [];   </script>
  <script type="text/javascript" >
      </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.6/js/jquery.tablesorter.js"></script>

