{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}

<br />
<br />

<br />


<style>
    @media print {
        .no-print {
            display: none !important; /* مخفی کردن دکمه یا المان با این کلاس */
        }
    }
    
</style>
    <style>
        body {
            direction: rtl;
            text-align: right;
            background-color: #f9f9f9;
        }

        .table th, .table td {
            vertical-align: middle;
        }

        .search-bar {
            margin-bottom: 20px;
        }

        .search-bar input,
        .search-bar select,
        .search-bar button {
            margin: 5px;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #004085;
        }
    </style>

    <div class="container my-4 ">
        <h1 class="text-center mb-4">امتیازدهی کاربران</h1>
        <h2 class="text-center mb-4">نقش: {{ role_name }}</h2>

        <div class="search-bar d-flex justify-content-center align-items-center">
            <form method="get" class="d-flex">
                <input type="text" class="form-control mx-2" id="search" name="search" value="{{ search_query }}" placeholder="عبارت جستجو">
                
                <select id="search_field" name="search_field" class="form-select mx-2">
                    <option value="first_name" {% if search_field == "first_name" %}selected{% endif %}>نام</option>
                    <option value="last_name" {% if search_field == "last_name" %}selected{% endif %}>نام خانوادگی</option>
                    <option value="national_code" {% if search_field == "national_code" %}selected{% endif %}>کد ملی</option>
                </select>
                
                <button type="submit" class="btn btn-primary mx-2">جستجو</button>
            </form>
        </div>

        <form method="post" >
            {% csrf_token %}
            <div class="table-responsive text-center animate__animated animate__delay-0.1s animate__fadeIn">
                <table class="table table-bordered table-striped ">
                    <thead class="table-dark">
                        <tr>
                            <th>ردیف</th>
                            <th>عکس</th>
                            <th>نام</th>
                            <th>نام خانوادگی</th>
                            <th>کد ملی</th>
                            <th>نمره</th>
                            <th>عملیات</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for person in people_data %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>
                                    {% if person.image %}
                                    <img src="{{ person.image }}" alt="بدون تصویر" width="60" height="60" class="rounded-circle">
                                {% else %}
                                    <img src="{% static 'media/users/default_profile.png' %}" alt="بدون تصویر" width="60" height="60" class="rounded-circle"/>
                                {% endif %}
                                <td>{{ person.first_name }}</td>
                                <td>{{ person.last_name }}</td>
                                <td>{{ person.national_code }}</td>
                                <td>
                                    {% if person.is_editable %}
                                        <input type="number" name="score_{{ person.id }}" value="{{ person.role_score }}" placeholder="نمره" required class="form-control">
                                    {% else %}
                                        {{ person.role_score }}
                                    {% endif %}
                                </td>
                                <td>
                               
                                        {% if person.id %}
                                            <a href="{% url 'edit_scores' person.id role_key %}" class="btn btn-warning no-print">ویرایش</a>
                                        {% else %}
                                            <span class="text-danger">داده نامعتبر</span>
                                        {% endif %}
                                
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="6" class="text-center">هیچ کاربری یافت نشد.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>
    </div>
    
  <div class="d-flex justify-content-center mb-4">
    <div class="btn-group text-center" role="group">
        <button type="button"  class="btn btn-warning  no-print  text-center"  onclick="window.print()">پرینت صفحه</button>
    </div>
</div>

{% endblock %}