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

{% block title %}Gestion des comptes{% endblock %}
{% block titre_page %}Gestion du compte - {{ compteSaison.compte.name }}{% endblock %}
{% block resume_page %}Vue d'ensemble du compte {{ compteSaison.compte.name }}{% endblock %}
{% block description_page %}Est-ce que le compte se porte bien ?{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-xs-12 col-md-8 row">
            <div class="col-xs-12 col-md-6">
                <div class="card" style="background-color: {{ compteSaison.compte.color }}">
                    <div class="card-header d-flex align-items-center border-0">
                        <div class="me-auto">
                            <h3 class="h4 m-0">Solde</h3>
                        </div>
                    </div>
                    <div class="card-body align-items-center border-0 display-5 text-end text-white">
                        {{ compteSaison.balance | currency }}
                    </div>
                </div>
            </div>
            <div class="col-12 mt-3 mb-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <h5 class="card-title">Opérations ({{ operations|length }} opérations)</h5>
                            </div>
                            <div class="col-6 text-end">
                                {% if compteSaison.saison.active %}
                                <a href="#modal-add-operation" data-bs-toggle="modal" role="button"
                                   class="btn btn-primary rounded-pill"><i
                                            class="ti-plus"></i> Nouvelle opération</a>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Hover rows -->
                        <div class="table-responsive">
                            <table class="table pb-5">
                                <thead>
                                <tr>
                                    <th class="text-center">Cat.</th>
                                    <th class="text-center">Date</th>
                                    <th class="text-start">Libellé</th>
                                    <th class="text-end">Débit</th>
                                    <th class="text-end">Crédit</th>
                                    <th class="text-center">Facture</th>
                                    <th class="text-center"></th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for operation in operations %}
                                    <tr>
                                        <td class="text-center text-white"
                                            style="background-color: {{ constant('App\\Constants\\CategoryOperation::' ~ operation.category)['color'] }}">
                                            <i
                                                    class="ti-{{ constant('App\\Constants\\CategoryOperation::' ~ operation.category)['icon'] }} fs-4"
                                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                                    title=""
                                                    data-bs-original-title="{{ constant('App\\Constants\\CategoryOperation::' ~ operation.category)['label'] }}"></i>
                                        </td>
                                        <td class="text-center">
                                            <span class="h6">{{ operation.date|date('d/m/Y') }}</span>
                                        </td>
                                        <td class="text-start">
                                            {{ operation.label }}
                                        </td>
                                        <td class="text-end">
                                            {% if operation.montant < 0 %}
                                                <span class="text-{{ operation.montant|currencyColor }} fw-bolder">
                                                    {{ operation.montant|currency }}
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td class="text-end">
                                            {% if operation.montant >= 0 %}
                                                <span class="text-{{ operation.montant|currencyColor }} fw-bolder">
                                                    {{ operation.montant|currency }}
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            {% if operation.facture %}
                                                <a class="action-link" target="_blank"
                                                   href="{{ asset('uploads/operation/facture/' ~ operation.facture) }}"><i
                                                            class="ti-receipt"></i></a>
                                            {% endif %}
                                        </td>
                                        <td class="text-center">
                                            {% if compteSaison.saison.active or not operation.facture %}
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-xs" data-bs-toggle="dropdown"
                                                        aria-expanded="false">
                                                    <i class="ti-more-alt"></i>
                                                </button>
                                                <ul class="dropdown-menu" style="">
                                                    {% if compteSaison.saison.active %}
                                                    <li>
                                                        <a class="editOperation dropdown-item"
                                                           href="#modal-edit-operation"
                                                           role="button" data-bs-toggle="modal"
                                                           data-id="{{ operation.id }}"
                                                           data-montant="{{ operation.montant }}"
                                                           data-category="{{ operation.category }}"
                                                           data-date="{{ operation.date|date('d/m/Y') }}"
                                                           data-label="{{ operation.label }}"><i
                                                                    class="ti-pencil"></i>&nbsp;Modifier</a>
                                                    </li>
                                                    {% endif %}
                                                    {% if not operation.facture %}
                                                        <li><a class="linkInvoice dropdown-item"
                                                               href="#modal-link-invoice"
                                                               role="button" data-bs-toggle="modal"
                                                               data-id="{{ operation.id }}">
                                                                <i class="ti-receipt"></i>&nbsp;Ajouter
                                                                facture</a></li>
                                                    {% endif %}
                                                    {% if compteSaison.saison.active %}
                                                    <li>
                                                        <a href="#modal-delete-operation" role="button"
                                                           data-bs-toggle="modal"
                                                           class="deleteOperation dropdown-item"
                                                           data-id="{{ operation.id }}"><i
                                                                    class="ti-trash"></i> Supprimer</a>
                                                    </li>
                                                    {% endif %}
                                                </ul>
                                            </div>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}

                                <tr>
                                    <td class="text-end fw-bolder" colspan="3">
                                        Total :
                                    </td>
                                    <td class="text-end text-danger fw-bolder">
                                        {{ operations|total('debit')|currency }}
                                    </td>
                                    <td class="text-end text-success fw-bolder">
                                        {{ operations|total('credit')|currency }}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}

    <div class="modal" id="modal-add-operation" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                {{ form_start(form, {'action':path('compte_add_operation', {'idCompteSaison':compteSaison.id})}) }}
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Ajouter une opération</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            {{ form_label(form.category, 'Catégorie', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.category, {'attr': {'class': 'form-select'}}) }}
                        </div>
                        <div class="col-sm-6">
                            {{ form_label(form.date, 'Date (format DD/MM/AAAA)', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.date, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-8">
                            {{ form_label(form.label, 'Libellé', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.label, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="col-sm-4">
                            {{ form_label(form.montant, 'Montant', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.montant, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-12">
                            {{ form_label(form.facture, 'Facture (si elle existe)', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.facture, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary modal-submit"><i
                                class="ti-plus"></i> Ajouter
                    </button>
                    <a class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler</a>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
    <div class="modal" id="modal-edit-operation" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                {{ form_start(formEdit, {'action':path('compte_edit_operation', {'idOperation':'___'}), 'name':'operation-edit'}) }}
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Modifier une opération</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            {{ form_label(formEdit.category, 'Catégorie', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(formEdit.category, {'attr': {'class': 'form-select'}}) }}
                        </div>
                        <div class="col-sm-6">
                            {{ form_label(formEdit.date, 'Date (format DD/MM/AAAA)', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(formEdit.date, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-8">
                            {{ form_label(formEdit.label, 'Libellé', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(formEdit.label, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="col-sm-4">
                            {{ form_label(formEdit.montant, 'Montant', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(formEdit.montant, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-12">
                            {{ form_label(formEdit.facture, 'Facture (si elle existe)', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(formEdit.facture, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary modal-submit"><i
                                class="ti-pencil"></i> Modifier
                    </button>
                    <a class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler</a>
                </div>
                {{ form_end(formEdit) }}
            </div>
        </div>
    </div>
    <div class="modal" id="modal-link-invoice" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                {{ form_start(formInvoice, {'action':path('compte_link_invoice', {'idOperation':'___'}), 'name':'operation-link-invoice'}) }}
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Ajouter une facture</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="row mt-3">
                        <div class="col-sm-12">
                            {{ form_label(formInvoice.invoice, 'Facture', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(formInvoice.invoice, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary modal-submit"><i
                                class="ti-pencil"></i> Ajouter la facture
                    </button>
                    <a class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler</a>
                </div>
                {{ form_end(formInvoice) }}
            </div>
        </div>
    </div>
    <div class="modal" id="modal-delete-operation" aria-hidden="true"
         aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Supprimer une opération</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Tu veux vraiment supprimer cette opération ?
                </div>
                <div class="modal-footer">
                    <a href="#"
                       class="btn btn-primary modal-submit"><i class="ti-trash"></i>
                        Supprimer</a>
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function (e) {

            $('.deleteOperation').on('click', function (element) {
                var url = "{{ path('compte_delete_operation', {'idOperation':'___'}) }}";
                url = url.replace('___', $(this).data('id'));

                $('#modal-delete-operation .modal-submit').attr('href', url);
            });

            $('.editOperation').on('click', function (element) {
                var url = "{{ path('compte_edit_operation', {'idOperation':'___'}) }}";
                url = url.replace('___', $(this).data('id'));

                $('form[name=operation-edit]').attr('action', url);

                $('form[name=operation-edit]').find('#operation_category').val($(this).data('category'));
                $('form[name=operation-edit]').find('#operation_label').val($(this).data('label'));
                $('form[name=operation-edit]').find('#operation_date').val($(this).data('date'));
                $('form[name=operation-edit]').find('#operation_montant').val($(this).data('montant'));
            });

            $('.linkInvoice').on('click', function (element) {
                var url = "{{ path('compte_link_invoice', {'idOperation':'___'}) }}";
                url = url.replace('___', $(this).data('id'));

                $('form[name=operation-link-invoice]').attr('action', url);
            });
        });
    </script>
{% endblock %}