{% extends 'panel/base.html' %} <!-- مطمئن شوید این فایل بیس شامل فایل‌های CSS بوت‌استرپ و FontAwesome باشد -->

{% block content %}
<div class="staff-container" style="max-width: 900px; margin: 0 auto; padding: 20px; font-family: 'Vazirmatn', Tahoma, sans-serif; direction: rtl;">
    
    <!-- هدر صفحه و دکمه افزودن -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #eee; padding-bottom: 15px;">
        <h2 style="margin: 0; color: #333;"><i class="fa fa-users me-2"></i> لیست پرسنل کافه</h2>
        
        <!-- دکمه افزودن پرسنل جدید -->
        <a href="{% url 'add_staff' cafe_slug %}" style="background-color: #27ae60; color: white; padding: 10px 15px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
            <i class="fa fa-plus me-1"></i> افزودن پرسنل جدید
        </a>
        <a href="javascript:history.back()" class="btn btn-outline-secondary rounded-3">
            <i class="fa fa-arrow-left ms-1"></i> بازگشت
        </a>
    
    </div>

    <!-- پیام‌های سیستم (اختیاری - برای نمایش پیام موفقیت تغییر وضعیت) -->
    {% if messages %}
        {% for message in messages %}
            <div style="background-color: #d4edda; color: #155724; padding: 10px 15px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #c3e6cb;">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <!-- جدول نمایش پرسنل -->
    <div style="background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #f0f0f0;">
        <table style="width: 100%; border-collapse: collapse; text-align: right;">
            <thead style="background-color: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                <tr>
                    <th style="padding: 15px; color: #495057;">نام و نام خانوادگی</th>
                    <th style="padding: 15px; color: #495057;">شماره موبایل</th>
                    <th style="padding: 15px; color: #495057;">نقش / سمت</th>
                    <th style="padding: 15px; color: #495057;">وضعیت</th>
                    <th style="padding: 15px; color: #495057; text-align: center;">عملیات</th>
                </tr>
            </thead>
            <tbody>
                {% for staff in staff_members %}
                <tr style="border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#f8f9fa';" onmouseout="this.style.backgroundColor='transparent';">
                    
                    <td style="padding: 15px; vertical-align: middle;">{{ staff.get_full_name|default:"ثبت نشده" }}</td>
                    
                    <td style="padding: 15px; vertical-align: middle;" dir="ltr" style="text-align: right;">{{ staff.phone }}</td>
                    
                    <!-- 🔴 اصلاح نمایش نقش (حسابدار / ویتر) -->
                    <td style="padding: 15px; vertical-align: middle; font-weight: bold; color: #4361ee;">
                        {{ staff.get_role_display }}
                    </td>
                    
                    <td style="padding: 15px; vertical-align: middle;">
                        {% if staff.is_active %}
                            <span style="color: #27ae60; font-weight: bold; background: #e8f8f5; padding: 4px 8px; border-radius: 4px; font-size: 0.9em;"><i class="fa fa-check-circle"></i> فعال</span>
                        {% else %}
                            <span style="color: #e74c3c; font-weight: bold; background: #fdedec; padding: 4px 8px; border-radius: 4px; font-size: 0.9em;"><i class="fa fa-times-circle"></i> مسدود</span>
                        {% endif %}
                    </td>
                    
                    <!-- 🔴 دکمه‌های عملیات (ویرایش و تغییر وضعیت) -->
                    <td style="padding: 15px; vertical-align: middle;">
                        <div style="display: flex; gap: 8px; justify-content: center;">
                            
                            <!-- دکمه ویرایش (آدرس URL ویرایش را چک کنید که با urls.py شما یکی باشد) -->
                            <a href="{% url 'edit_staff' cafe_slug staff.id %}" style="background: #e9ecef; color: #495057; border: 1px solid #ced4da; padding: 6px 12px; border-radius: 6px; text-decoration: none; font-size: 0.9em; transition: 0.3s;">
                                <i class="fa fa-edit"></i> ویرایش
                            </a>

                            <!-- فرم تغییر وضعیت -->
                            <form action="{% url 'toggle_staff_status' cafe_slug staff.id %}" method="post" style="margin: 0;">
                                {% csrf_token %}
                                {% if staff.is_active %}
                                    <button type="submit" onclick="return confirm('آیا از مسدود کردن این پرسنل مطمئن هستید؟ شخص دیگر نمی‌تواند وارد پنل شود.');" style="background: #fff; color: #e74c3c; border: 1px solid #e74c3c; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9em; transition: 0.3s;" onmouseover="this.style.background='#e74c3c'; this.style.color='#fff';" onmouseout="this.style.background='#fff'; this.style.color='#e74c3c';">
                                        <i class="fa fa-ban"></i> مسدود موقت
                                    </button>
                                {% else %}
                                    <button type="submit" style="background: #fff; color: #27ae60; border: 1px solid #27ae60; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9em; transition: 0.3s;" onmouseover="this.style.background='#27ae60'; this.style.color='#fff';" onmouseout="this.style.background='#fff'; this.style.color='#27ae60';">
                                        <i class="fa fa-unlock"></i> فعال‌سازی
                                    </button>
                                {% endif %}
                            </form>

                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" style="padding: 40px; text-align: center; color: #7f8c8d; font-size: 1.1em; background-color: #fafafa;">
                        <i class="fa fa-user-slash mb-3" style="font-size: 3em; color: #ccc; display: block;"></i>
                        هیچ پرسنلی برای این کافه ثبت نشده است.<br>
                        <span style="font-size: 0.9em; color: #aaa;">می‌توانید از دکمه بالا، افراد جدید را اضافه کنید.</span>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}