{% include 'header.twig' %}

<div class="wrapper-content">
    <div class="wrapper-content__header">
          </div>


   
    <div class="wrapper-content__body">
    
      <!-- Main variables *content* -->
      <div id="block_7">
    <div class="services-list ">
        <div class="bg"></div>
        <div class="divider-top"></div>
        <div class="divider-bottom"></div>
        <div class="container-fluid">
            <div class="row">
                <div class="col ">
                    <div class="services-filters component_filter_form_group component_filter_card mb-3">
                   <br>     <div class="card">
                            <div class="row">
                                <div class="col-md-auto mb-3 mb-md-0">
                                   
                                    <div class="component_filter_button">
                                        <div class="dropdown">
                                            <a class="btn btn-big-primary w-sm-auto w-100 dropdown-toggle" href="#" role="button" id="dropdown-category-filter-7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="fal fa-filter"></span>
                                                <span class="services-filter__active-category" data-filter-active-category="true"></span>
                                            </a>
                                            <div class="dropdown-menu"><a class="dropdown-item"  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 %}
                                                                                                                                                                                                
                                                                                                                                          </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Search" id="priceService" data-search-service="#service-table">
                                            <span class="input-group-append component_button_search">
                                            <button class="btn btn-big-secondary" type="button" data-filter-serch-btn="true">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




<div class="row">
                <div class="col">
                    <div class="services-list__table">
                        <div class="table-bg component_table ">
                            <div class="table-wr table-responsive">
                                <table class="table" id="service-table"> 
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th width="40%">Service</th>
                                        <th class="nowrap">Price per 1000</th>
                                        <th class="nowrap">Min order</th>
                                        <th class="nowrap">Max order</th>
<th class="nowrap" nowrap><div class="d-flex align-items-center">
                                                    <span>Average time</span>
                                                    <span class="ml-1 mr-1 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>
                                                </div>
                                            </th>
                                          <th width="7%">Description</th>
                                                                            </tr>
                                    </thead>
                                    <tbody>
            

              {% for category in serviceCategory %}
                                                                                                            <tr class="services-list-category-title" data-filter-table-category-id="{{ category["category_id"] }}">
                                                <td colspan="7">
                                                   <div class="w-100 ">
                                                       <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-label="ID" data-filter-table-service-id="{{ service["service_id"] }}"><span id="service-{{ service["service_id"] }}">{{ service["service_id"] }}</span>
                                        <a>
                                            <span
                                                data-clip="true"
                                                title="Service id copied"
                                                data-clipboard-action="copy"
                                                data-clipboard-target="#service-{{ service["service_id"] }}"
                                                class="fas fa-clone"></span>
                                        </a></td>
                    <td data-label="Service" class="table-service" data-filter-table-service-name="true">{{ service["service_name"] }}</td>
                    
                    <td>
                      
{{ currency['symbol'] }}{{ (service["service_price"]*currency["value"]) }}   


                      

                    </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="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">{{ service["service_name"] }} </h5> 
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">×</span>
                                </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-actions " data-toggle="modal" data-target="#servis{{ service["service_id"] }}">
                         View
                      </a>
                   
                        </td>

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

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






{% include 'footer.twig' %}