{% extends '@admin/base.html.twig' %}

{% block title %}Historique point de vente{% endblock %}

{% block subheader %}
    <div class="badge-titre pos-page-header d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
        <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
            <span class="crm-badge me-2"><i class="fa fa-clock-rotate-left"></i></span>
            <div>
                <h3 class="m-subheader__title m-0">Historique point de vente</h3>
                <small class="text-muted">Suivi des tickets emis et des sessions de caisse cloturees ou encore ouvertes.</small>
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ path('admin_pos_index') }}" class="btn btn-light border btn-sm">
                <i class="fa fa-arrow-left me-1"></i>Retour caisse
            </a>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
    <div class="contentMargin">
        <style>
            .pos-page-header{background:linear-gradient(135deg,#6b2f12 0%,#9a3412 48%,#c2410c 100%);border:1px solid rgba(194,65,12,.32);border-radius:20px;padding:1rem 1.15rem;box-shadow:0 16px 36px rgba(120,53,15,.15)}
            .pos-page-header .m-subheader__title,
            .pos-page-header small,
            .pos-page-header .crm-badge,
            .pos-page-header .text-muted{color:#fff !important}
            .pos-page-header .crm-badge{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18)}
            .pos-page-header .btn-light{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.7)}
            .pos-history-shell{position:relative;padding:1rem;border-radius:24px;background:linear-gradient(180deg,#fff2e2 0%,#fff8ef 38%,#fffdf9 100%);border:1px solid #f3d8be;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
            .pos-history-content{position:relative}
            .pos-history-card{background:#fff;border:1px solid #f1dcc4;border-radius:18px;box-shadow:0 14px 30px rgba(120,53,15,.07);overflow:hidden}
            .pos-history-card__head{padding:1rem 1.2rem;border-bottom:1px solid #eef2f7;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
            .pos-history-card__title{margin:0;font-size:1rem;font-weight:800;color:#0f172a}
            .pos-history-card__body{padding:1.1rem 1.2rem 1.3rem}
            .pos-history-kpi{border:1px solid #f1dfca;border-radius:16px;padding:1rem 1rem;background:#fff;height:100%}
            .pos-history-kpi__label{display:block;color:#64748b;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem}
            .pos-history-kpi__value{display:block;color:#0f172a;font-size:1.15rem;font-weight:800}
            .pos-history-table tbody tr{background:#fff}
            .pos-session-status{display:inline-flex;align-items:center;padding:.24rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700}
            .pos-session-status--open{background:#dcfce7;color:#166534}
            .pos-session-status--closed{background:#e2e8f0;color:#475569}
        </style>

        <div class="pos-history-shell">
            <div class="pos-history-content">
                <div class="row g-4 mb-4">
                    <div class="col-md-4">
                        <div class="pos-history-kpi">
                            <span class="pos-history-kpi__label">Ventes affichees</span>
                            <span class="pos-history-kpi__value">{{ sales|length }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="pos-history-kpi">
                            <span class="pos-history-kpi__label">Sessions affichees</span>
                            <span class="pos-history-kpi__value">{{ sessions|length }}</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="pos-history-kpi">
                            <span class="pos-history-kpi__label">Derniere vente</span>
                            <span class="pos-history-kpi__value">{{ sales|length ? sales|first.createdAt|date('d/m/Y') : '-' }}</span>
                        </div>
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-xl-8">
                        <div class="pos-history-card h-100">
                            <div class="pos-history-card__head">
                                <div>
                                    <h4 class="pos-history-card__title">Ventes point de vente</h4>
                                    <div class="text-muted small">Chaque vente point de vente reutilise le moteur Document existant.</div>
                                </div>
                            </div>
                            <div class="pos-history-card__body">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0 pos-history-table">
                                        <thead>
                                            <tr>
                                                <th>Reference</th>
                                                <th>Date</th>
                                                <th>Client</th>
                                                <th>Caissier</th>
                                                <th>Caisse</th>
                                                <th class="text-end">Total TTC</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for sale in sales %}
                                                <tr>
                                                    <td class="fw-semibold">{{ sale.internalNbr ?: ('#' ~ sale.id) }}</td>
                                                    <td>{{ sale.createdAt ? sale.createdAt|date('d/m/Y H:i') : '-' }}</td>
                                                    <td>{{ sale.client ? (sale.client.fullName ?: sale.client.username) : 'Comptoir' }}</td>
                                                    <td>{{ sale.user ? (sale.user.fullName ?: sale.user.username) : '-' }}</td>
                                                    <td>{{ sale.posSession ? sale.posSession.storehouse : '-' }}</td>
                                                    <td class="text-end fw-semibold">{{ sale.totalToPay|number_format(3, '.', ' ') }} TND</td>
                                                    <td class="text-end">
                                                        <div class="d-inline-flex gap-2">
                                                            <a href="{{ path('admin_pos_show', {id: sale.id}) }}" class="btn btn-light border btn-sm">Detail</a>
                                                            <a href="{{ path('admin_pos_receipt', {id: sale.id}) }}" class="btn btn-dark btn-sm" target="_blank">Ticket</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% else %}
                                                <tr>
                                                    <td colspan="7" class="text-center text-muted py-4">Aucune vente point de vente disponible.</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="pos-history-card h-100">
                            <div class="pos-history-card__head">
                                <div>
                                    <h4 class="pos-history-card__title">Sessions de caisse</h4>
                                    <div class="text-muted small">Montants attendus, montants declares et statut des sessions.</div>
                                </div>
                            </div>
                            <div class="pos-history-card__body">
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0 pos-history-table">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Caisse</th>
                                                <th>Caissier</th>
                                                <th>Etat</th>
                                                <th class="text-end">Ventes</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for session in sessions %}
                                                <tr>
                                                    <td class="fw-semibold">#{{ session.id }}</td>
                                                    <td>{{ session.storehouse }}</td>
                                                    <td>{{ session.user ? (session.user.fullName ?: session.user.username) : '-' }}</td>
                                                    <td>{% if session.isOpen %}<span class="pos-session-status pos-session-status--open">Ouverte</span>{% else %}<span class="pos-session-status pos-session-status--closed">Fermee</span>{% endif %}</td>
                                                    <td class="text-end">{{ session.totalSalesAmount ? session.totalSalesAmount|number_format(3, '.', ' ') : '0.000' }} TND</td>
                                                </tr>
                                            {% else %}
                                                <tr>
                                                    <td colspan="5" class="text-center text-muted py-4">Aucune session enregistree.</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}