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

{% block title %}Commandes{% endblock %}
{% block sub_title %}<small><strong>Commande {{ selectedCommande.ref }} de {{ selectedCommande.fkClient.completeName }}</strong></small>{% endblock%}

{% block container %}
    <div class="row">
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-purple"><i class="far fa-calendar-alt"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Date</span>
                    <span class="info-box-number">{{ selectedCommande.commandeAt|date('d/m/Y') }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-green"><i class="far fa-money-bill-alt"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Total</span>
                    <span id="priceCommande" class="info-box-number">{{ priceCommande|number_format(2, '.', ',') }} €</span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fas fa-h-square"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Panier</span>
                    <span id="numberPanierCommande" class="info-box-number">{{ commande_service.numberPanierCommande(selectedCommande.id) }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            {% embed 'views/macro_card.html.twig' with {'color': 'dark', 'type': 'outline'} %}
                {% block card_title %}<i class="fas fa-credit-card"></i> Commande référence : <strong>{{ selectedCommande.ref }}</strong>{% endblock %}
                {% block card_tools %}
                    {% if selectedCommande.isLivred is same as(false) and selectedCommande.livredAt >= date() %}
                        <a class="createArticle btn bg-gradient-primary btn-xs" data-fkCommande="{{ selectedCommande.id }}">
                            <i class="fas fa-plus-square"></i> Ajouter des panier
                        </a>
                    {% endif %}
                    <a class="btn bg-gradient-white btn-xs" href="{{ path('commande') }}"><i class="fas fa-sign-out-alt"></i> Retour au commande</a>
                {% endblock %}
                {% block card_body %}
                    <table id="_Table_Commande_View" class="table-bordered table-hover table-striped table-sm"
                           data-url="{{ path('commande_view_response') }}"
                           data-mobile-responsive="true"
                           data-pagination="true">
                    </table>
                {% endblock %}
            {% endembed %}
        </div>
        <div class="col-sm-6">
            {% embed 'views/macro_card.html.twig' with {'color': 'dark', 'type': 'outline'} %}
                {% block card_title %}<i class="fas fa-user"></i> Client : {{ selectedCommande.fkClient.completeName }}{% endblock %}
                {% block card_tools %}
                    <a class="editClient btn bg-gradient-green btn-xs" data-fkClient="{{ selectedCommande.fkClient.id }}" data-fkCommande="{{ selectedCommande.id }}"><i class="fas fa-edit"></i> Modifier le client</a>
                {% endblock %}
                {% block card_body %}
                    <div class="card card-widget widget-user-2">
                        <div class="card-footer p-0">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="far fa-envelope"></i> <strong>Adresse e-mail</strong> <span class="float-right">{{ selectedCommande.fkClient.email }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="fas fa-phone-square"></i> <strong>Téléphone</strong> <span class="float-right">{{ selectedCommande.fkClient.phone }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="far fa-calendar"></i> <strong>Compte créé</strong> <span class="float-right badge badge-info">{{ selectedCommande.fkClient.createdAt|date('d/m/Y H:s') }}</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="far fa-money-bill-alt"></i> <strong>Total payé depuis la création du compte</strong> <span id="totalPriceClientCommande" class="float-right badge badge-success">{{ commande_service.totalPriceClientCommande(selectedCommande.fkClient.id)|number_format(2, '.', ',') }} €</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="far fa-credit-card"></i> <strong>Total de commande depuis la création du compte</strong> <span class="float-right badge badge-secondary">{{ commande_service.totalCommande(selectedCommande.fkClient.id) }}</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                {% endblock %}
            {% endembed %}
        </div>
    </div>

    {% include('admin/client/EditModal.html.twig') %}
    {% include('admin/article/EditModal.html.twig') %}
    {% include('admin/commande/modals/modalCreateArticle.html.twig') %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('adminCommandesViews') }}
    <script>
        let _Table_Commande_View = $('#_Table_Commande_View');

        $(document).ready(function () {
            _Table_Commande_View.bootstrapTable({
                queryParams: function (p) {
                    return {
                        fkCommande: {{ selectedCommande.id }},
                        order: p.order,
                        sort: p.sort,
                        limit: p.limit,
                        offset: p.offset
                    };
                },
                method: 'get',
                cache: false,
                pageSize: 10,
                pageList: [10, 25],
                sortName: 'number',
                sortOrder: 'asc',
                columns: [
                    {field: 'number',title: 'Numéro',valign: 'middle',sortable: true,formatter: NumberStrongFormatter},
                    {field: 'panier',title: 'Quantité par panier',sortable: true,valign: 'middle',formatter: QuantiteStrongFormatter},
                    {field: 'price',title: 'Tarif',valign: 'middle',sortable: true,formatter: parseFloatFormat},
                    {field: 'quantity',title: 'Quantité',sortable: true,valign: 'middle'},
                    {field: 'additionnal_products',title: 'Pdt Supp',sortable: true,valign: 'middle'},
                    {field: 'operate',title: 'Actions',align: 'center',valign: 'middle',clickToSelect: false,formatter: OperateFormatter,events: operateEventsArticle}
                ]
            })

            {% if selectedCommande.isLivred is same as(false) and selectedCommande.livredAt >= date() %}
            _Table_Commande_View.bootstrapTable('showColumn', 'operate');
            {% else %}
            _Table_Commande_View.bootstrapTable('hideColumn', 'operate');
            {% endif %}
        });

        function NumberStrongFormatter(value)
        {
            return '<b> N° ' + value + '</b>';
        }

        function QuantiteStrongFormatter(value)
        {
            return '<b>' + value + ' Huîtres</b>';
        }

        function parseFloatFormat(value)
        {
            return parseFloat(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + ' €';
        }

        function OperateFormatter(value, row)
        {
            const _livredAt = moment(row.livredAt, 'DD/MM/YYYY HH:mm').toDate();

            let result_delete;
            let result_update;

            if (moment().isSameOrBefore(_livredAt)) {
                result_update = '<a class="is_update" href="javascript:void(0)"><i class="fas fa-edit text-success"></i></a>';
                result_delete = '<a class="is_delete" href="javascript:void(0)"><i class="fas fa-trash text-danger"></i></a>';
            }

            return [
                result_update, result_delete
            ].join(' ');
        }

        window.operateEventsArticle = {
            'click .is_update': function (e, value, row) {
                $('.modalEditPanier').modal();
                let url = '/admin/commande/article/edit/' + row.id + '/' + {{ selectedCommande.id }};

                $.get(url, function (data) {
                    $('.bodyEdit').html(data);
                    let modal = $(this);
                    modal.find('.bodyEdit input').val();
                    $('#editPanierModal').modal('show');
                });
            },
            'click .is_delete': function (e, value, row) {
                bootbox.confirm({
                    message: "- Êtes-vous sûr de vouloir supprimer le panier ?",
                    buttons: {
                        cancel: {
                            label: '<i class="fas fa-sign-out-alt"></i> Annuler'
                        },
                        confirm: {
                            label: '<i class="fas fa-trash"></i> Supprimer',
                            className: 'btn-danger'
                        }
                    },
                    callback: function (result) {
                        if (_.isEqual(result, true)) {
                            $.ajax({
                                type: "POST",
                                url: "/admin/commande/article/delete",
                                data: { id: row.id },
                                cache: false,
                                dataType: 'json',
                                success: function () {
                                    window.location.reload();
                                }
                            });
                        }
                    }
                });
            }
        }
    </script>
{% endblock %}