{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Cashier Management - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/cashiers.css">
{% endblock %}
{% block content %}
<div class="header">
    <h1 class="brand">Gvelo Enterprise Platform - Cashier Management</h1>
    <a href="/logout" class="logout">Logout</a>
</div>

<div class="container">
    <nav class="sidebar">
        <a href="/inventory">Inventory</a>
        <a href="/sales">Sales</a>
        <a href="/customers">Customers</a>
        <a href="/cashier_tutorial_videos">🎥 Cashier Tutorials</a>
        <a href="/release-notes">Release Notes</a>
        <a href="/cashiers">Cashiers</a>
        <a href="/admin">Admin</a>
        <a href="/logout">Logout</a>
    </nav>

    <main class="content">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="flash-messages">
                    {% for category, message in messages %}
                        <div class="{{ category }}">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        <div class="hil-inline-6a388c7f1f">
            <label>Language / Lugha: </label>
            <form method="POST" action="/set-language" class="hil-inline-cccfa4560d">
                <select name="language" onchange="this.form.submit()">
                    {% for lang in languages %}
                        <option value="{{ lang }}" {% if current_language == lang %}selected{% endif %}>{{ _(lang.title()) }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>

        <!-- Add Cashier -->
        <section class="card">
            <h3>Add New Cashier</h3>
            <p>Add cashiers to your shop. There is no limit on the number of cashiers.</p>
            <form method="POST" action="/cashiers" enctype="multipart/form-data">
                <input type="hidden" name="action" value="add_cashier">
                <div class="form-row">
                    <div>
                        <label>Full Name</label><br>
                        <input type="text" name="full_name" placeholder="Full Name" required>
                    </div>
                    <div>
                        <label>Username</label><br>
                        <input type="text" name="username" placeholder="Username" required>
                    </div>
                    <div>
                        <label>Email</label><br>
                        <input type="email" name="email" placeholder="Email" required>
                    </div>
                    <div>
                        <label>Phone</label><br>
                        <input type="text" name="phone" placeholder="Phone" required>
                    </div>
                </div>
                <div class="form-row hil-inline-8a77e5a311">
                    <div>
                        <label>Password</label><br>
                        <input type="password" name="password" placeholder="Min 8 chars" required minlength="8">
                    </div>
                    <div>
                        <label>Confirm Password</label><br>
                        <input type="password" name="confirm_password" placeholder="Confirm" required minlength="8">
                    </div>
                    <div>
                        <label>Certification</label><br>
                        <input type="file" name="certification" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    <div><button type="submit">Add Cashier</button></div>
                </div>
            </form>
        </section>

        <!-- Cashier List -->
        <section class="card">
            <h3>Cashier List</h3>
            {% if cashiers %}
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Cert</th>
                            <th>Total Sales</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for cashier in cashiers %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td><strong>{{ cashier[5] or '-' }}</strong></td>
                                <td>{{ cashier[1] }}</td>
                                <td>{{ cashier[3] or '-' }}</td>
                                <td>{{ cashier[4] or '-' }}</td>
                                <td>
                                    {% if cashier[6] %}
                                        <span class="cert-badge">Yes</span>
                                    {% else %}-{% endif %}
                                </td>
                                <td>{{ currency_symbol }} {{ "%.2f"|format(sales_dict.get(cashier[0], 0)) }}</td>
                                <td>
                                    <a href="/cashiers/{{ cashier[0] }}/edit" class="btn edit-btn">Edit</a>
                                    <form method="POST" action="/cashiers" onsubmit="return confirm('Delete this cashier?');" class="hil-inline-cccfa4560d">
                                        <input type="hidden" name="action" value="delete_cashier">
                                        <input type="hidden" name="cashier_id" value="{{ cashier[0] }}">
                                        <button type="submit" class="delete-btn">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <div class="empty-state"><p>No cashiers found. Add your first cashier above.</p></div>
            {% endif %}
        </section>

        <!-- Scanning Options -->
        <section class="card">
            <h3>Scanning Options</h3>
            {{ ui.button('Scanner Center', '/scanner-center?return_to=/cashiers&target=/sales') }}
            {{ ui.button('Connect Phone via Bluetooth/Link', '/connect-phone-scanner?return_to=/cashiers&target=/sales') }}
            {{ ui.button('Hardware Barcode Scanner', '/scan?return_to=/cashiers&target=/sales') }}
            {{ ui.button('Mobile Camera Scanner', '/mobile-scan?return_to=/cashiers&target=/sales') }}
            {{ ui.button('Barcode Hub', '/barcode') }}
            {{ ui.button('Training Mode', '/barcode/training') }}
        </section>
    </main>
</div>
{% endblock %}