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

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    Gestion des commandes
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
        .all_column {
            font-size: 15px;
        }
        .title_column {
            font-weight: 600;
        }
        .required-input-sign {
            font-size: 18px;
            color: #e54040;
        }
        .comment_denied {
            font-weight: 600;
            text-align: left!important;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <input type="text" id="order-set-denied" value="{{ path('order_denied') }}" style="display: none">
    <input type="text" id="order-set-validate" value="{{ path('order_validate') }}" style="display: none">

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-header block-header-default bg-gray">
            <h4 class="font-w700">
                Liste des commandes
            </h4>
        </div>
        <div class="block-content block-content-full">
            <!-- DataTables functionality is initialized with .js-dataTable-full class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
            <table class="table table-bordered table-vcenter js-dataTable-full">
                <thead>
                <tr>
                    <th class="font-w700" style="width: 37%">Utilisateur ayant passé la commande</th>
                    <th class="font-w700" style="width: 33%">Détail</th>
                    <th class="font-w700" style="width: 30%">Statut</th>
                </tr>
                </thead>
                <tbody>

                {% for order in orders %}

                    <tr>
                        <td class="d-none d-sm-table-cell all_column">
                            <span class="title_column">Nom</span> : {{ order.getUserId.getName }} <br>
                            <span class="title_column">Prénom</span> : {{ order.getUserId.getFirstName }} <br>
                            <span class="title_column">Email</span> : {{ order.getUserId.getEmail }} <br>
                        </td>
                        <td class="d-none d-sm-table-cell all_column">
                            <span style="display: none">ID = {{ order.getId }}</span>
                            <span class="title_column">Reference</span> : {{ order.getReference }} <br>
                            <span class="title_column" >Prix total HT</span> : {{ order.getTotalHt }} <br>
                            <span class="title_column" >Prix total TTC</span> : {{ order.getTotalTtc }} <br>
                            <span class="title_column" >Prix discount HT</span> : {{ order.getDiscountHt }} <br>
                            <span class="title_column" >Prix discount TTC</span> : {{ order.getDiscountTtc }} <br>
                            <span class="title_column" >Prix wrapping HT</span> : {{ order.getWrappingHt }} <br>
                            <span class="title_column" >Prix wrapping TTC</span> : {{ order.getWrappingTtc }} <br>
                            <span class="title_column" >Prix shipping HT</span> : {{ order.getShippingHt }} <br>
                            <span class="title_column" >Prix shipping TTC</span> : {{ order.getShippingTtc }} <br>
                        </td>
                        <td class="d-none d-sm-table-cell all_column" style="text-align: center">
                            {% if order.isDenied %}
                                <span class="title_column" style="color: #ef5350">{{ order.displayStatus }}</span>
                            {% elseif order.isValidate %}
                                <span class="title_column" style="color: #3f9ce8">{{ order.displayStatus }}</span>
                            {% else %}
                                <span class="title_column" >{{ order.displayStatus }}</span>
                            {% endif %}
                            {% if order.isWaiting %}
                                <button type="button" id="btn-modal-command-refuse" class="btn btn-danger" data-toggle="modal" data-target="#modal-large-refuse" onclick="setOrderIdPopupDeniedComment({{ order.getId }})" style="margin-top:15px;"><i style="margin-right: 5px;" class="fa fa-trash"></i>Refuser la commande</button>
                                <button type="button" id="btn-modal-command-valid" class="btn btn-primary" data-toggle="modal" data-target="#modal-large-valid" onclick="setOrderIdPopupValidateComment({{ order.getId }})" style="padding:0 15px 0 15px; margin-top: 10px;"><i style="margin-right: 5px;" class="fa fa-check" ></i>Valider la commande</button>
                            {% elseif order.isDenied and order.getCommentDenied %}
                                <br><br><span class="comment_denied">Commentaire de refus : </span><p style="white-space: pre-wrap;">{{ order.getCommentDenied }}</p>
                            {% endif %}
                        </td>
                    </tr>

                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Dynamic Table Full -->


{% endblock %}

{% block modal %}

    <div class="modal" id="modal-large-refuse" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">Refus Commande</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <label for="denied_comment">Commentaire du refus de la commande : <span class="required-input-sign">*</span></label>
                            <textarea id="denied_comment" class="form-control input-rma ml-2 mr-2" rows="3"></textarea>
                            <p style="margin-top: 5px;">Etes vous sûr de vouloir refuser definitivement cette commande ?</p>
                            <input type="text" id="order-id-denied" style="display: none">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal" style="height: 50px;">Annuler</button>
                        <button type="button" class="btn btn-danger spinner_button" onclick="deniedCommand()" style="height: 50px;" id="btn-update-rma-create">Refuser<br><span style="font-size: 11px;">Le traitement peut durer 30sec</span></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-large-valid" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">Validation Commande</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <p>Etes vous sûr de vouloir valider cette commande ?</p>
                            <input type="text" id="order-id-validate" style="display: none">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary" onclick="validateCommand()" id="btn-update-rma-create">Valider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock  %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            var tableArticle = $(".js-dataTable-full");
            tableArticle.DataTable({
                fixedHeaders: true,
                "paging": false,
                "order": [[ 0, "asc" ]],
                columnDefs:[
                    {orderable:false,targets:[1]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucune commande",
                    "zeroRecords": "La recherche ne donne aucun résultat"
                }
            });

            $('#DataTables_Table_0_filter input').focus();

            // detect enter keypress
            $('#DataTables_Table_0_filter input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    $('#DataTables_Table_0_filter input').select();
                }
            });
        });

        function setOrderIdPopupDeniedComment(orderId) {
            $('#order-id-denied').val(orderId);
        }

        function setOrderIdPopupValidateComment(orderId) {
            $('#order-id-validate').val(orderId);
        }

        function validateCommand() {
            var orderId = $('#order-id-validate').val();

            $.ajax({
                url: $('#order-set-validate').val(),
                type: 'GET',
                data: {
                    'orderId' : orderId,
                },
                success: function(data){
                    document.location.reload();
                }
            });
        }

        function deniedCommand() {
            var commentDenied = $('#denied_comment').val();
            var orderId = $('#order-id-denied').val();

            if (!commentDenied) {
                alert('Le commentaire est obligatoire pour refuser une commande.')
            }
            else {
                $('.spinner_button').append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
                $('.spinner_button').css('pointer-events', 'none');
                $('.spinner_button').css('opacity', '0.5');
                $.ajax({
                    url: $('#order-set-denied').val(),
                    type: 'GET',
                    data: {
                        'commentDenied' : commentDenied,
                        'orderId' : orderId,
                    },
                    success: function(data){
                        document.location.reload();
                    }
                });
            }
        }

        function redirect(url) {
            window.location.replace(url);
        }

    </script>
{% endblock %}