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

<br />
<br />
<br />
<div class="container mt-5">
    <!-- عنوان صفحه -->
    <h1 class="mb-4 text-center text-primary font-weight-bold">لیست اشخاص</h1>

    <!-- فرم جستجو -->
    <form method="GET" action="{% url 'user_list_report' %}" class="mb-4">
        <div class="row g-2">
            <div class="col-md-6">
                <input type="text" name="search" value="{{ search_query }}" placeholder="جستجو" class="form-control mt-5">
            </div>
            <div class="col-md-4 mt-5">
                <label for="searchField" class="form-label">فیلد جستجو:</label>
                <select name="search_field" class="btn btn-outline-dark">
                    <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>
                    {% comment %} <option value="raste" {% if search_field == 'raste' %}selected{% endif %}>رسته</option>
                    <option value="ring" {% if search_field == 'ring' %}selected{% endif %}>حلقه</option> {% endcomment %}
                </select>
            </div>
            <div class="col-md-2 mt-5">
                <button type="submit" class="btn btn-primary w-100">جستجو</button>
            </div>
        </div>
    </form>
    

    <!-- جدول نمایش اشخاص -->
    <div class="table-responsive shadow-lg rounded animate__animated animate__delay-0.1s animate__fadeIn">
        <table class="table table-bordered table-striped text-center" style="border-radius: 15px; overflow: hidden;">
            <thead class="table-dark">
                <tr>
                    <th class="py-4">عکس</th>
                    <th class="py-4">نام</th>
                    <th class="py-4">کدملی</th>
                    <th class="py-4">مشاهده کارنامه‌ها</th>
                </tr>
            </thead>
            <tbody>
                {% if persons %}
                    {% for person in persons %}
                        <tr>
                            <td class="align-middle">
                                {% if person.person_private_info.pic %}
                                    <img src="{{ person.person_private_info.pic.url }}" 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>
                            <td class="align-middle">{{ person.user.first_name }} {{ person.user.last_name }}</td>
                            <td class="align-middle">{{ person.national_code }}</td>
                            <td class="align-middle">
                                <a href="{% url 'user_report_cards' person.id %}" class="btn btn-info btn-sm shadow-sm rounded-pill px-3">
                                    مشاهده کارنامه‌ها
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="4" class="text-center text-danger font-weight-bold py-3">
                            هیچ شخصی با مشخصات وارد شده یافت نشد!
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- استایل‌های سفارشی -->
<style>
    /* استایل برای جدول */
    .table {
        background-color: #fff;
        border-radius: 15px;
        overflow: hidden;
    }

    /* تغییر رنگ ردیف‌ها هنگام هاور */
    .table-hover tbody tr:hover {
        background-color: #f1f1f1;
    }

    /* استایل هدر جدول */
    .table-dark th {
        font-size: 1.1rem;
        font-weight: bold;
        text-transform: uppercase;
    }

    /* استایل دکمه‌ها */
    .btn-info {
        background: linear-gradient(to right, #17a2b8, #138496);
        border: none;
    }

    .btn-info:hover {
        background: linear-gradient(to right, #138496, #17a2b8);
        color: #fff;
    }
</style>

{% endblock %}