{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% trans "Cashier Registry" %}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">{% trans "Cashier Registry" %}</h1>
    </div>

    <div class="row">
        <!-- Assignment Form -->
        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Assign Cashier to Counter" %}</h6>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="assign">
                        
                        <div class="mb-3">
                            <label for="cashier" class="form-label">{% trans "Cashier" %}</label>
                            <select name="cashier_id" id="cashier" class="form-select" required>
                                <option value="">{% trans "Select Cashier" %}</option>
                                {% for user in cashiers %}
                                <option value="{{ user.id }}">
                                    {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="counter" class="form-label">{% trans "Counter" %}</label>
                            <select name="counter_id" id="counter" class="form-select" required>
                                <option value="">{% trans "Select Counter" %}</option>
                                {% for counter in counters %}
                                <option value="{{ counter.id }}">
                                    {{ counter.name }}
                                </option>
                                {% endfor %}
                            </select>
                            <div class="form-text">{% trans "Only devices of type 'POS Counter' are shown." %}</div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">{% trans "Assign" %}</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Registry List -->
        <div class="col-md-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Current Assignments" %}</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>{% trans "Cashier" %}</th>
                                    <th>{% trans "Counter" %}</th>
                                    <th>{% trans "Assigned At" %}</th>
                                    <th>{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for reg in registries %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            {% if reg.cashier.profile.image %}
                                                <img src="{{ reg.cashier.profile.image.url }}" class="rounded-circle me-2" width="30" height="30">
                                            {% else %}
                                                <div class="rounded-circle bg-secondary text-white d-flex justify-content-center align-items-center me-2" style="width: 30px; height: 30px;">
                                                    {{ reg.cashier.username|make_list|first|upper }}
                                                </div>
                                            {% endif %}
                                            <div>
                                                <div class="fw-bold">{{ reg.cashier.first_name }} {{ reg.cashier.last_name }}</div>
                                                <div class="small text-muted">@{{ reg.cashier.username }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ reg.counter.name }}</td>
                                    <td>{{ reg.assigned_at|date:"Y-m-d H:i" }}</td>
                                    <td>
                                        <form method="post" class="d-inline" onsubmit="return confirm('{% trans "Are you sure you want to remove this assignment?" %}');">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="delete">
                                            <input type="hidden" name="registry_id" value="{{ reg.id }}">
                                            <button type="submit" class="btn btn-danger btn-sm" title="{% trans "Remove" %}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">
                                        <i class="fas fa-clipboard-list fa-2x mb-2"></i>
                                        <p>{% trans "No assignments found." %}</p>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
