{% extends "pos/base.html" %}

{% block title %}Restaurant Staff{% endblock %}

{% block heading %}
Restaurant Staff
{% endblock %}

{% block stylesheets %}
<style>
    .staff-page .staff-card {
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        box-shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, .08);
    }

    .staff-page .staff-filter-form {
        background: #fff !important;
        border: 1px solid #e3e6f0 !important;
        border-radius: 8px !important;
        padding: 12px !important;
        margin-bottom: 12px;
    }

    .staff-page .staff-inline-form {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-block;
    }

    .staff-page .page-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        margin-bottom: 12px;
    }

    .staff-page .table th {
        background: #f8f9fc;
        color: #000;
        font-size: 13px;
        white-space: nowrap;
    }

    .staff-page .table td {
        color: #000;
        font-size: 13px;
        vertical-align: middle;
    }

    .staff-page .staff-name {
        font-weight: 700;
        color: #000;
    }

    .staff-page .staff-remarks {
        display: block;
        font-size: 12px;
        color: #6c757d;
        margin-top: 2px;
    }

    .staff-page .badge-active {
        background: #1cc88a;
        color: #fff;
        padding: 5px 9px;
        border-radius: 20px;
        font-size: 11px;
    }

    .staff-page .badge-inactive {
        background: #e74a3b;
        color: #fff;
        padding: 5px 9px;
        border-radius: 20px;
        font-size: 11px;
    }

    .staff-page .btn-action {
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 5px;
    }

    .staff-page .empty-row {
        padding: 24px !important;
        text-align: center;
        color: #6c757d !important;
        font-weight: 600;
    }

    .staff-page .pagination-wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }

    @media (max-width: 767.98px) {
        .staff-page .page-actions {
            justify-content: stretch;
        }

        .staff-page .page-actions .btn {
            width: 100%;
        }

        .staff-page .pagination-wrap {
            justify-content: center;
            flex-wrap: wrap;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="staff-page">

    <div class="page-actions">
        <a href="{% url 'restaurant:staff:add' %}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus"></i> Add Staff
        </a>
    </div>

    <div class="card staff-card">
        <div class="card-body">

            <form method="get" class="staff-filter-form">
                <div class="row">
                    <div class="col-md-5 mb-2">
                        <label class="font-weight-bold text-dark mb-1">Search</label>
                        <input
                            type="text"
                            name="q"
                            value="{{ q }}"
                            class="form-control form-control-sm"
                            placeholder="Name, mobile, phone, address..."
                        >
                    </div>

                    <div class="col-md-3 mb-2">
                        <label class="font-weight-bold text-dark mb-1">Staff Type</label>
                        <select name="type" class="form-control form-control-sm">
                            <option value="">All Types</option>
                            {% for value, label in staff_type_choices %}
                                <option value="{{ value }}" {% if staff_type == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-2 mb-2">
                        <label class="font-weight-bold text-dark mb-1">Status</label>
                        <select name="status" class="form-control form-control-sm">
                            <option value="">All</option>
                            {% for value, label in status_choices %}
                                <option value="{{ value }}" {% if status == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-2 mb-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary btn-sm btn-block">
                            <i class="fas fa-search"></i> Filter
                        </button>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width:70px;">T-ID</th>
                            <th>Name</th>
                            <th style="width:160px;">Type</th>
                            <th style="width:130px;">Mobile</th>
                            <th style="width:130px;">Phone</th>
                            <th style="width:80px;">Sort</th>
                            <th style="width:100px;">Status</th>
                            <th style="width:150px;">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for staff in staff_rows %}
                            <tr>
                                <td>{{ staff.t_id }}</td>

                                <td>
                                    <span class="staff-name">{{ staff.name }}</span>
                                    {% if staff.remarks %}
                                        <span class="staff-remarks">{{ staff.remarks }}</span>
                                    {% endif %}
                                </td>

                                <td>{{ staff.get_booker_type_display }}</td>
                                <td>{{ staff.mobile }}</td>
                                <td>{{ staff.phone }}</td>
                                <td>{{ staff.sort_order }}</td>

                                <td>
                                    {% if staff.status == "ACTIVE" %}
                                        <span class="badge-active">Active</span>
                                    {% else %}
                                        <span class="badge-inactive">Inactive</span>
                                    {% endif %}
                                </td>

                                <td>
                                    <a
                                        href="{% url 'restaurant:staff:edit' staff.t_id %}"
                                        class="btn btn-success btn-action"
                                    >
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    <form
                                        method="post"
                                        action="{% url 'restaurant:staff:delete' staff.t_id %}"
                                        class="staff-inline-form"
                                        onsubmit="return confirm('Are you sure? This staff will be marked inactive.');"
                                    >
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger btn-action">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="8" class="empty-row">
                                    No staff found.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if page_obj %}
                <div class="pagination-wrap">
                    {% if page_obj.has_previous %}
                        <a
                            class="btn btn-light btn-sm"
                            href="?page={{ page_obj.previous_page_number }}{% if query_string %}&{{ query_string }}{% endif %}"
                        >
                            Previous
                        </a>
                    {% endif %}

                    <span class="text-dark font-weight-bold">
                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                    </span>

                    {% if page_obj.has_next %}
                        <a
                            class="btn btn-light btn-sm"
                            href="?page={{ page_obj.next_page_number }}{% if query_string %}&{{ query_string }}{% endif %}"
                        >
                            Next
                        </a>
                    {% endif %}
                </div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock %}