{% extends 'partials/backend.html' %}
{% load static %}
{% load humanize %}
{% block content %}

<main class="app-content">
  <div class="page-title m-b-20">
    <div class="row justify-content-between">
      <div class="col-md-2">
        <h1 class="page-title"><span class="fe fe-list-ul"></span> Services</h1>
      </div>
      <div class="col-md-4 search-area">
        <div class="form-group">
          <div class="input-group">
            <input
              type="text"
              name="query"
              class="form-control"
              placeholder="Search for…"
              value=""
            />
            <select name="field" class="form-control" id="">
              <option value="all">All</option>
              <option value="id">ID</option>
              <option value="name">Name</option>
              <option value="api_service_id">API service id</option>
            </select>
            <button class="btn btn-primary btn-square btn-search" type="button">
              <span class="fe fe-search"></span>
            </button>
            <button
              class="btn btn-outline-danger btn-square btn-clear d-none"
              data-toggle="tooltip"
              data-placement="bottom"
              title=""
              data-original-title="Clear"
              type="button"
            >
              <span class="fe fe-x"></span>
            </button>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="row justify-content-between">
          <div class="col-md-6">
            <div class="btn-group" role="group" aria-label="Basic example">
              <a
                href="/admin/services/update"
                class="btn btn-outline-primary ajaxModal"
                ><span class="fe fe-plus"></span> Add new</a
              >
              <a
                href="/admin/provider/services"
                class="btn btn-outline-primary"
                ><span class="fe fe-folder-plus"></span> Import</a
              >
              <a href="#" class="btn btn-outline-primary btn-services-collapse"
                ><span class="fe fe-chevrons-up"></span> Hide All</a
              >
            </div>
          </div>
          <div class="col-md-4 d-flex">
            <select
              name="status"
              class="form-select order_by ajaxListServicesSortByCateogry m-t-4 m-r-10"
              data-url="/admin/services"
            >
              <option value="0">All</option>              
            </select>
            <div class="item-action dropdown action-options">
              <button
                type="button"
                class="btn btn-outline-primary dropdown-toggle"
                data-toggle="dropdown"
              >
                Actions <span class="fe fe-chevrons-down"></span>
              </button>
              <div class="dropdown-menu dropdown-menu-right">
                <a
                  href="/admin/services/bulk_action/active"
                  data-type="active"
                  class="dropdown-item ajaxActionOptions"
                  ><i class="dropdown-icon fe fe-check-square"></i> Active</a
                ><a
                  href="/admin/services/bulk_action/deactive"
                  data-type="deactive"
                  class="dropdown-item ajaxActionOptions"
                  ><i class="dropdown-icon fe fe-x-square"></i> Deactive All</a
                ><a
                  href="/admin/services/bulk_action/delete_custom_rates"
                  data-type="delete_custom_rates"
                  class="dropdown-item ajaxActionOptions"
                  ><i class="dropdown-icon fe fe-trash"></i> Delete custom
                  rates</a
                ><a
                  href="/admin/services/bulk_action/delete"
                  data-type="delete"
                  class="dropdown-item ajaxActionOptions"
                  ><i class="dropdown-icon fe fe-trash-2"></i> Delete</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 col-xl-12 items-by-category">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">
            Facebook New Services | Update 2025
            <a
              href="/admin/category/update/332"
              class="badge badge-default ajaxModal"
              data-toggle="tooltip"
              data-placement="top"
              title=""
              data-original-title="Edit Category"
              ><i class="fe fe-edit-2"></i
            ></a>
          </h4>
          <div class="card-options">
            <a
              href="#"
              class="card-options-collapse"
              data-toggle="card-collapse"
              ><i class="fe fe-chevron-up"></i
            ></a>
            <a href="#" class="card-options-remove" data-toggle="card-remove"
              ><i class="fe fe-x"></i
            ></a>
          </div>
        </div>
        <div class="table-responsive service-sortable">
          <table
            class="table table-hover table-bordered table-vcenter card-table"
          >
            <thead>
              <tr>
                <th class="text-center w-1"><i class="fe fe-move"></i></th>
                <th class="text-center w-1">
                  <div class="custom-controls-stacked">
                    <label class="form-check"
                      ><input
                        type="checkbox"
                        class="form-check-input check-items check-all"
                        data-name="check_332"
                      /><span class="custom-control-label"></span>
                    </label>
                  </div>
                </th>
                <th class="text-center">ID</th>
                <th class="">Name</th>
                <!-- <th class="text-center">provider</th> -->
                <th class="text-center">type</th>
                <th class="text-center">Rate per 1k</th>
                <th class="text-center">Min/Max</th>
                <th class="text-center">description</th>
                <th class="text-center">Status</th>
                <th class="text-center">action</th>
              </tr>
            </thead>
            <tbody class="ui-sortable">
              {% for s in ser %}
              <tr
                class="tr_f1e4b8c5b3666f719d8713b36ddb07f9"
                data-id="2499"
                data-cate_id="332"
              >
                <td class="sort-handler w-1p ui-sortable-handle">
                  <i class="fe fe-grid"></i>
                </td>
                <th class="text-center w-1">
                  <div class="custom-controls-stacked">
                    <label class="form-check"
                      ><input
                        type="checkbox"
                        class="form-check-input check-item check_332"
                        name="ids[]"
                        value="2499"
                      /><span class="custom-control-label"></span>
                    </label>
                  </div>
                </th>
                <td class="text-center w-5p text-muted">{{ s.id }}</td>
                <td>
                  <div class="title">
                    {{ s.name }}
                  </div>
                </td>
                <!-- <td class="text-center w-10p text-muted">
                  smmtitan
                  <div class="text-muted small">9897</div>
                </td> -->
                <td class="text-center w-10p">{{ s.type }}</td>
                <td class="text-center w-5p">
                  <div>{{ s.rate }}</div>
                  <!-- <small class="text-muted">0.0113</small> -->
                </td>
                <td class="text-center w-10p text-muted">{{ s.min }} / {{ s.max }}</td>
                <td class="text-center w-5p"></td>
                <td class="text-center w-5p">
                  <label class="custom-switch">
                    <input
                      type="checkbox"
                      name="item_status"
                      data-id="2499"
                      data-status="1"
                      data-action="/admin/services/change_status/"
                      class="custom-switch-input ajaxToggleItemStatus"
                      checked=""
                    />
                    <span class="custom-switch-indicator"></span>
                  </label>
                </td>
                <td class="text-center w-5p">
                  <div class="item-action dropdown">
                    <a
                      href="javascript:void(0)"
                      data-toggle="dropdown"
                      class="icon"
                      ><i class="fe fe-more-vertical"></i
                    ></a>
                    <div class="dropdown-menu">
                      <a
                        href="/admin/services/update/2499"
                        class="dropdown-item ajaxModal"
                        data-confirm_ms=""
                        ><i class="dropdown-icon fe fe-edit"></i> Edit</a
                      ><a
                        href="/admin/services/delete_custom_rate/2499"
                        class="dropdown-item ajaxDeleteItem"
                        data-confirm_ms="Are you sure you want to delete custom rates for this service?"
                        ><i class="dropdown-icon fe fe-trash"></i> Delete custom
                        rates</a
                      ><a
                        href="/admin/services/delete/2499"
                        class="dropdown-item ajaxDeleteItem"
                        data-confirm_ms="Are you sure you want to delete this item"
                        ><i class="dropdown-icon fe fe-trash-2"></i> Delete</a
                      >
                    </div>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</main>


{% endblock content %}