{% load utils_tags %}
<div class="card shadow-sm p-4 mt-4  animate__animated animate__fadeInDown">
            <h4 class="text-center mb-4 fw-bold" style="color:#6f86d6">Technician List</h4>
            <div class="row mb-4"  style="color: var(--text-color); ">
                <div class="col-md-6">
                    <div class="row g-2">
                        <div class="col-md-5" >
                            <label for="filterTypeTechnician" class="form-label">Search by</label>
                            <select class="form-select" id="filterTypeTechnician" name="filterTypeTechnician">
                                <option value="specialty">Specialty</option>
                                <option value="first_name">Name</option>
                                <option value="phone_number">Phone</option>
                            </select>
                        </div>
                        <div class="col-md-7">
                            <label for="searchQueryDoctor" class="form-label">Search Term</label>
                            <div class="input-group">
                                    <input type="text" class="form-control" id="searchQueryDoctor" name="searchQueryDoctor"
                                           value="{{ search_query }}"
                                           placeholder="Enter the search term..."
                                           autocomplete="off"
                                           data-bs-toggle="tooltip"
                                           data-bs-placement="top"
                                           title="Results will be displayed automatically as you type.">
                                    <span class="input-group-text bg-primary text-white">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <button class="btn btn-outline-primary mt-4" data-bs-toggle="modal" data-bs-target="#addServiceModal">
                        <i class="fas fa-plus-circle me-1"></i> Add New Technician
                    </button>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-4 mb-2">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-filter"></i></span>
                        <select id="statusFilter" class="form-select">
                            <option value="">All Status</option>
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-8 text-end">
                    <span class="badge bg-info py-2 px-3">
                        <i class="fas fa-info-circle me-1"></i>
                        Click on column headings to sort
                    </span>
                </div>
            </div>

            <!-- نشانگر وضعیت جستجو -->
            <div id="searchStatus" class="mb-3 d-none">
                <div class="alert alert-info">
                    <i class="fas fa-search me-2"></i>
                    Showing results for: <strong id="searchTermDisplay"></strong>
                    <button type="button" id="clearSearch" class="btn btn-sm btn-outline-dark ms-2">
                        <i class="fas fa-times"></i>Clean
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table id="serviceTable" class="table table-bordered table-hover align-middle text-center sortable-table">
                    <thead>
                        <tr>
                            <th data-sort="id"># <i class="fas fa-sort"></i></th>
                            <th>Picture</th>
                            <th data-sort="name">Name <i class="fas fa-sort"></i></th>
                            <th data-sort="specialty">Specialty <i class="fas fa-sort"></i></th>
                            <th data-sort="phone_number">Phone <i class="fas fa-sort"></i></th>
                            <th data-sort="services">Services <i class="fas fa-sort"></i></th>
                            <th data-sort="status">Status <i class="fas fa-sort"></i></th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        {% for technician in page_obj %}
                        <tr data-id="{{ technician.id }}">
                            <td>{{ technician.id }}</td>
                            <td>
                                {% if technician.profile_picture %}
                                    <img src="{{ technician.profile_picture.url }}" alt="img" class="rounded-circle" style="width: 50px; height: 50px; object-fit: cover;">
                                {% else %}
                                        {% with colors="#fa6f08,#2ecc71,#3498db,#9b59b6,#9fa9b6,#901a06,#1159a3,#a154f1" %}
                                        {% with color_list=colors|split:"," %}
                                            <button class="btn rounded-circle text-center text-sm" style="width: 50px; height: 50px; border: 50px; background: {{ color_list|random }}; !important;">
                                                {{ technician.get_short_name }}
                                            </button>
                                        {% endwith %}
                                        {% endwith %}
                                {% endif %}
                            </td>
                            <td  class="name">{{ technician.first_name }} {{ technician.last_name }}</td>
                            <td  class="specialty">{{ technician.specialty }}</td>
                            <td  class="phone_number">{{ technician.country_code}}{{technician.phone_number }}</td>
                            <td class="text-center status">
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input toggle-status"
                                        id="statusToggle-{{ technician.id }}"
                                        data-id="{{ technician.id }}"
                                        {% if technician.status == 'active' %}checked{% endif %}>
                                    <label class="form-check-label" for="statusToggle-{{ technician.id }}">
                                        <span class="status-text">{{ technician.status|title }}</span>
                                    </label>
                                </div>
                            </td>
                            <td class="technician_services">
                                {% for service in technician.services.all %}
                                    <span class="badge bg-info me-1">{{ service.name }}</span>
                                {% empty %}
                                    <span class="text-muted">No Service</span>
                                {% endfor %}
                            </td>

                            <td class="text-center">
                                    <button class="btn action-btn edit action-btn_edit me-1"
                                            data-bs-toggle="modal"
                                            data-bs-target="#editServiceModal"

                                    >
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <a class="btn action-btn view-profile me-1"
                                       href="{% url 'core:profile' 'technician' technician.id %}"
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="top" title="View Profile">
                                        <i class="fas fa-eye"></i>
                                    </a>

{#                                    <button class="btn action-btn delete" onclick="confirmDelete({{ technician.id }})">#}
{#                                        <i class="fas fa-trash-alt"></i>#}
{#                                    </button>#}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <i class="fas fa-database fa-3x text-muted mb-3"></i>
                                <p>No services found!</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- صفحه‌بندی -->
            {% if page_obj.has_other_pages %}
                <div id="service-pagination">

                </div>
            {% endif %}


    </div>