{% include 'header.twig' %}
<script>
  // Override viewport for desktop mode
  document.addEventListener("DOMContentLoaded", function() {
    const metaViewport = document.querySelector("meta[name='viewport']");
    if (!metaViewport) {
      const newMetaViewport = document.createElement("meta");
      newMetaViewport.name = "viewport";
      newMetaViewport.content = "width=1024"; // Adjust width for desktop
      document.head.appendChild(newMetaViewport);
    } else {
      metaViewport.content = "width=1024"; // Adjust width for desktop
    }
  });
</script>

<style>


{% if settings["site_theme_alt"] == "Red" %}
    /* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#d83346 !important
}

{% elseif settings["site_theme_alt"] == "Blue" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#1e79e4 !important;
}

{% elseif settings["site_theme_alt"] == "Lime" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#46b649 !important;
}

{% elseif settings["site_theme_alt"] == "Grapes" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#6216fb !important;
}


{% elseif settings["site_theme_alt"] == "Cyan" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#32c7ce !important;
}

{% elseif settings["site_theme_alt"] == "Coral" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#ff6b63 !important;
}

{% elseif settings["site_theme_alt"] == "Green" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#307c6f !important;
}

{% elseif settings["site_theme_alt"] == "Grey" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#415566 !important;
}

{% elseif settings["site_theme_alt"] == "Lilac" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#7c96cf !important;
}

{% elseif settings["site_theme_alt"] == "Orange" %}
/* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#f36b15 !important;
}

{% else %}
    /* Badge */
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{
 background-color:#5a5a5a !important;
}

{% endif %}


	</style>
<style>
/* Col */
.services-list .container-fluid > .row > .col{
 top:-6px;
}
/* Font Icon */
#service-table a .fas{
 display:none;
}

/* Badge */
#service-table tr .badge{
 background-color:#d83346 !important;
}


/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Card */
.services-list .services-filters .card{
 font-family:'Nunito', sans-serif;
}

/* Wrapper content */
#block_80 .wrapper-content{
 font-family:'Nunito', sans-serif;
}

/* Span Tag */
.footer span{
 font-family:'Nunito', sans-serif;
}
/* Import Google Fonts */
@import url("//fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Balance Unknowndown  toggle */
.navbar-nav-currencies .balance-dropdown .balance-dropdown__toggle{
 font-family:'Nunito', sans-serif;
}

/* Wrapper content */
.wrapper-sidebar-navbar .wrapper-content{
 font-family:'Nunito', sans-serif;
}

/* Link */
.sidebar-block__left-menu .component-sidebar__menu-item-active a{
 font-family:'Nunito', sans-serif;
}

/* Link */
.sidebar-block__left-menu li a{
 font-family:'Nunito', sans-serif !important;
}
.body h5{
 font-family:'Nunito', sans-serif;
}

</style>
<style>
@media (max-width:992px){

 /* Table service */
 #service-table tr .table-service{
  max-width:1625px;
 }
 
}
</style>
<style>
@media (max-width:480px){

 /* Table service */
 .wrapper-sidebar-navbar .wrapper-content .wrapper-content__body #block_94 .services-list .container-fluid .row .col .services-list__table .table-bg .table-wr #service-table tbody tr .table-service{
  width:1255px !important;
 }
 
 /* Table service */
 #service-table tr .table-service{
  padding-right:36px;
  max-width:1625px;
 }
 
}
</style>
<style>.body .btn-big-primary {margin-top: 0px;}.body .form-control{width:0%;}.body a:focus {color: #fff;}.dropdown-menu {position: absolute;top: 100%;left: 0;z-index: 1;display: none;float: left;min-width: 10rem;padding: 0;margin: .125rem 0 0;font-size: 1rem;color: #212529;text-align: left;list-style: none;background-color: #ffffffb4;margin-top:5px;border-radius:10px;max-height:380px;overflow-y:auto;max-width: 100%;min-width: 100%;border: 1.5px solid #ffffff;box-shadow: 0 12px 24px 12px rgba(0, 0, 0,0.2);}.dropdown-item {display: block;width: 100%;padding: 0.3rem 0.7rem;clear: both;font-weight: 400;color: #212529;white-space: normal;background-color: #fff;border: 0;}.dropdown-menu a{color: #212529;}.dropdown-menu a:hover{color: #fff;}.dropdown-item:hover{background: #6a7c7c;color: #fff;}@media (min-width: 768px) {.dropdown-menu {max-width:900px;min-width:350px;}}.super-lud {transform: none;will-change: auto;}</style>
<div class="component_navbar" ></div>
    <div class="component_navbar_sub "></div>
<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">
                        {% if contentText %}
<div class="card mt-2 mb-3">
{{ contentText }}
</div>
{% endif %}
                   <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>
{% if user['auth'] == 0 %}
<br>
<div class="col-md-auto mb-3 mb-md-0">
<div class="component_filter_currency_button">
<div class="dropdown dropdown-currency">
<a class="btn btn-big-primary w-sm-auto w-100 dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="services-filter__active-currency">{{route_service_currency}}</span>
</a>
<div class="dropdown-menu w-100" id="curr_anchor">
<a class="dropdown-item" href="/services">{{site_base_currency}}{{" "}}{{ site_base_currency_symbol}}</a>
{{ without_login_currencies_item }}

</div>

</div>
</div></div>
<br>
{% endif %}


<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-primary" type="button" data-filter-serch-btn="true"style="box-shadow:none;">
                                                <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>{% if settings["fav_services"] == 1 %}
                                         <th></th>
                                         {% endif %}

                                        <th>ID</th>
                                        <th class="nowrap">Service</th>
                                        <th class="nowrap">Rate for 1000</th>
                                        <th class="nowrap">Min / Max</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 class="hidden-xs hidden-sm service-description__th">Service <br>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 style="border-radius:10px;" class="style-bg-primary-alpha-20 style-text-primary services-category p-3">
                                                          <strong>{{ category["category_name"] }}</strong>
                                                       </div>
                                                   </div>
                                                </td>
                                            </tr>


                                                

                         {% for service in category['services'] %}
                  <tr data-filter-table-category-id="{{ category["category_id"] }}">
                      {% if settings["fav_services"] == 1 %}
<td>
  <i class="favorite-toggle {% if service.is_fav %}fas text-warning{% else %}far text-muted{% endif %} fa-star"
     data-service-id="{{ service.service_id }}"
     style="cursor:pointer;"
     data-fav-status="{% if service.is_fav %}1{% else %}0{% endif %}"></i>
</td>

<script>
$(document).on("click", ".favorite-toggle", function () {
    {% if user["auth"] == "1" %}
    const icon = $(this);
    const serviceId = icon.data("service-id");

    // Prevent rapid multiple clicks
    if (icon.prop("disabled")) return;
    icon.prop('disabled', true);

    $.ajax({
        url: '/ajax_data',
        type: 'POST',
        data: {
            action: 'toggle_favorite',
            service_id: serviceId
        },
        success: function(response) {
            let json;
            try {
                json = JSON.parse(response);
            } catch (e) {
                console.error("Invalid JSON:", response);
                return;
            }

            if (!json.error) {
                if (json.status === "added") {
                    icon.removeClass("far text-muted").addClass("fas text-warning");
                } else {
                    icon.removeClass("fas text-warning").addClass("far text-muted");
                }
            }

            icon.prop('disabled', false);
        },
        error: function() {
            icon.prop('disabled', false);
        }
    });
    
    {% endif %}
});
</script>
{% endif %}
                    <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><span class="badge" style="background:#0dd887;">


{{service["service_price"]}} PER 1K

    </span></td>

<td data-th="Min" data-column="column3"><span class="badge" style="background:#ED4166;">{{ service["service_min"] }} / {{ service["service_max"] }}</span></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">
                                <a class="btn btn-big-primary" href="/neworder" style="width:70%">Create Order</a>
                                <button type="button" class="btn btn-big-primary" style="width:25%" data-dismiss="modal">Okay</button>
                              </div>
                            </div>
                          </div>{% if service["service_description"]  %}
                        </div><a href="javascript:void(0)" class="btn btn-big-primary " style="padding-top:10px;padding-bottom:10px;"data-toggle="modal" data-target="#servis{{ service["service_id"] }}">
                         View
                      </a>
                  {% endif %} 
                        </td>
                  </tr>
                {% endfor %}
              {% endfor %}
          </tbody>
        </table>
      </div></br></br>
    </div>
  </div>
</div>



{% include 'footer.twig' %}