{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Ouvrir la caisse{% endblock %}

{% block content %}
<div class="max-w-lg mx-auto mt-12">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
        <div class="bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-8 text-center text-white">
            <svg class="w-16 h-16 mx-auto mb-3 opacity-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            <h1 class="text-2xl font-bold">Ouvrir la caisse</h1>
            <p class="text-emerald-100 mt-1">Sélectionnez votre caisse et saisissez le fond de caisse</p>
        </div>

        <form method="POST" action="{{ path('employer_pos_cashier_open') }}" class="p-6 space-y-5">
            <input type="hidden" name="_token" value="{{ csrf_token('cashier_open_session') }}">
            {% if registers|length == 0 %}
                <div class="text-center py-6">
                    <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                    <p class="text-gray-500 font-medium">Aucune caisse disponible</p>
                    <p class="text-sm text-gray-400 mt-1">Contactez votre manager pour créer une caisse.</p>
                </div>
            {% else %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Caisse</label>
                    <select name="register_id" required class="w-full border border-gray-300 dark:border-gray-600 rounded-lg py-2.5 px-3 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                        <option value="">-- Sélectionnez une caisse --</option>
                        {% for register in registers %}
                            <option value="{{ register.id }}" {{ register.currentSession ? 'disabled' : '' }}>
                                {{ register.name }}
                                {% if register.location %} — {{ register.location }}{% endif %}
                                {% if register.currentSession %} (occupée){% endif %}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Fond de caisse (FCFA)</label>
                    <input type="number" name="opening_amount" value="0" min="0" step="1" required
                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg py-2.5 px-3 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500">
                    <p class="text-xs text-gray-400 mt-1">Montant en espèces dans la caisse à l'ouverture</p>
                </div>

                <button type="submit" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg transition-colors">
                    Ouvrir la caisse
                </button>
            {% endif %}

            <a href="{{ path('app_employer_dashboard') }}" class="block text-center text-sm text-gray-500 hover:text-gray-700">
                Retour au dashboard
            </a>
        </form>
    </div>
</div>
{% endblock %}