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

{% block title %}{{ page_title }}{% endblock %}
  {% block stylesheets %}
      {{ encore_entry_link_tags('app') }}
  {% endblock %}
{% block nav %}
    {% embed 'nav.html.twig' %}{% endembed %}
{% endblock %}

{% block body %}
<div class="container">



        <!-- Section Commandes impayées -->
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h1 class="mb-4 title-custom">Commandes impayées</h1>
            </div>
        </div>
        <div class="table-responsive table-wrapper mb-5">
            <table class="table table-bordered table-striped">
                <thead class="thead-dark">
                <tr>
                    <th>Utilisateur</th>
                    <th>Date de la commande</th>
                    <th>Montant</th>
                    <th>Communication Structurée</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for order in orders %}
                    <tr>
                        <td>{{ order.user.fname }} {{ order.user.lname }}</td>
                        <td>{{ order.orderTime|date('d-m-Y') }}</td>
                        <td>{{ order.totalAmount|number_format(2, '.', ',') }} €</td>
                        <td>{{ order.structuredCommunication }}</td>
                        <td>
                            <button class="btn btn-primary update-paid-status-btn"
                                    data-order-id="{{ order.id }}"
                                    data-csrf-token="{{ csrf_token('update_paid_status') }}">
                                Marquer comme Payée
                            </button>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="4" class="text-center">Aucune commande impayée.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Section Remboursements -->
        <div class="row mb-4">
        <div class="col-12 text-center">
            <h1 class="mb-4 title-custom">Remboursements à effectuer</h1>
        </div>
    </div>
        <div class="table-responsive table-wrapper mb-5">
        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
            <tr>
                <th>Utilisateur</th>
                <th>ID Commandes</th>
                <th>Montant Total à Rembourser</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for refund in refunds %}
                <tr>
                    <td>{{ refund.user.fname }} {{ refund.user.lname }}</td>
                    <td>
                        {% for id in refund.orderIds %}
                            {{ id }}{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    </td>
                    <td>{{ refund.totalRefundAmount|number_format(2, '.', ',') }} €</td>
                    <td>
                        <button class="btn btn-warning mark-refund-done-btn"
                                data-user-id="{{ refund.user.id }}"
                                data-order-ids="{{ refund.orderIds|json_encode }}"
                                data-goods-to-order-ids="{{ refund.goodsToOrderIds|json_encode }}"
                                data-csrf-token="{{ csrf_token('mark_refund_done') }}">
                            Marquer comme remboursé
                        </button>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="4" class="text-center">Aucun remboursement à effectuer.</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

        <!-- Section Import CSV -->
        <div class="row justify-content-center mb-4">
            <div class="col-md-6 col-lg-4">
                <div class="card shadow-sm p-4">
                    {{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
                    <div class="form-group">
                        <!-- Le label stylé comme un bouton cliquable -->
                        <label for="csv_upload_csvFile" id="csv-upload-label" class="csv-upload-btn btn-block">
                            Choisissez un fichier CSV
                        </label>
                        <!-- Champ de fichier caché -->
                        {{ form_widget(form.csvFile, {'attr': {'class': 'd-none', 'id': 'csv_upload_csvFile'}}) }}
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-success btn-block mt-3">
                            Télécharger
                        </button>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>

</div>
{% endblock %}

{% block bodyScript %}
    {{ encore_entry_script_tags('admin') }} {# Insertion du fichier JS compilé par Webpack #}
{% endblock %}