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

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

{% block title %}
    {{ parent() }}
    Recherche bons de livraison
{% endblock %}

{% block stylesheets %}

    {{ parent() }}


    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
            height: 40px;
        }
        .modal-dialog .form-group {
            margin-bottom: 5px;
        }
        .modal-dialog .block-header {
            padding-top: 2px;
            padding-bottom: 2px;
        }
        .modal-dialog .block-content {
            padding-top: 5px;
        }

        .modal-dialog .form-control, .input-group-text {
            height: 30px;
        }
        .modal-dialog .btn-clear {
            height: 30px;
        }
        .modal-footer {
            display: block;
        }

        .nav-link.bl {
            background-color: aliceblue;
        }

        .modal-dialog input[type=radio] {
            width: 30px;
            -ms-transform: scale(2);
            -webkit-transform: scale(2);
            transform: scale(2);
        }
        .table-title {
            text-align: right;
            font-size: 11px;
            width: 80px;
        }
        .table-data {
            font-weight: 700;
            font-size: 13px;
            text-align: left;
        }
        @media (max-width: 770px) {
            .datepicker.datepicker-dropdown.dropdown-menu {
                top:65px!important;
                left:10px!important;
                width: 90%!important;
            }
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

    <style>
        .input-form-douchette {
            width: 155px!important;
            padding-left: 4px;
            padding-right: 4px;
        }
        input[readonly] {
            cursor: pointer !important;
            background-color: white !important;
        }
        h4 {
            text-align: center;
        }
        @media screen and (min-width: 771px) {
            .display-desktop {
                display: inline;
            }
            .display-mobile {
                display: none;
            }
        }
        @media (max-width: 770px) {
            h4 {
                margin-bottom: 5px;
            }
            .display-desktop {
                display: none;
            }
            .display-mobile {
                display: inline;
            }
            .datepicker-inline {
                width: 100%;
            }

            .datepicker table {
                width: 100%;
            }
        }
    </style>
    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-content block-content-full" style="padding: 5px">

            {{ form_start(form, {'attr' : {'id' : 'blForm', 'class' : 'spinner_form form-inline'}}) }}

            <a type="button" name="menu" class="btn" href="{{ path('douchette_menu') }}"  style="padding: 2px;">
                <span style="vertical-align: -webkit-baseline-middle;">Menu</span>
            </a>

            {{ form_widget(form.search) }}

            <button type="submit" name="search" class="btn spinner_button" id="search-btn" style="padding: 2px;width: 70px;">
                <span>Valider</span>
            </button>

            {{ form_end(form) }}

        </div>

        {% if bonLivraisons %}
            <div>
                <div id="accordion" role="tablist" aria-multiselectable="true">
                    {% for bonLivraison in bonLivraisons %}
                        <div class="block block-bordered block-rounded mb-2">
                            <div class="block-header" role="tab" id="accordion_h{{ loop.index }}" style="padding-top: 4px;padding-bottom: 4px;height: 60px;">
                                <a class="font-w600 collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion_q{{ loop.index }}" aria-expanded="false" aria-controls="accordion_q1" style="width: 100%">
                                    {{ bonLivraison.documentNumber }} - {{ bonLivraison.customerName }}
                                    <br>
                                    {{ bonLivraison.dealId }} - {{ bonLivraison.dealSecteur }}- {{ bonLivraison.dealStatus }}
                                </a>
                            </div>
                            <div id="accordion_q{{ loop.index }}" class="collapse {% if bonLivraisons|length == 1 %}show{% endif %}" role="tabpanel" aria-labelledby="accordion_h{{ loop.index }}" data-parent="#accordion">
                                <div class="block-content" style="padding-bottom: 20px;padding-top: 5px;">
                                    <div class="row">
                                        <div class="col-12" style="padding-left: 3px">
                                            <div style="margin-bottom: 5px ;color:black">
                                                <table style="border: none">
                                                    <tr>
                                                        <td class="table-title">Numéro :</td>
                                                        <td class="table-data">{{ bonLivraison.documentNumber }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Date :</td>
                                                        <td class="table-data">{{ bonLivraison.getDocumentDate|date('d/m/Y') }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Affaire :</td>
                                                        <td class="table-data">{{ bonLivraison.dealId }} ({{ bonLivraison.dealStatus }})</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Secteur :</td>
                                                        <td class="table-data">{{ bonLivraison.dealSecteur }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Référence :</td>
                                                        <td class="table-data">{{ bonLivraison.reference }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Transport :</td>
                                                        <td class="table-data">{{ bonLivraison.transport }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Commande :</td>
                                                        <td class="table-data">{{ bonLivraison.CommandeClient }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title">Client :</td>
                                                        <td class="table-data">
                                                            {{ bonLivraison.customerName }}
                                                            {% if bonLivraison.getInvoiceContactName() != '' %}
                                                                - {{ bonLivraison.getInvoiceContactName() }} {{ bonLivraison.getInvoiceContactFirstName() }}
                                                            {% else %}
                                                                - {{ bonLivraison.getDeliveryContactName() }} {{ bonLivraison.getDeliveryContactFirstName() }}
                                                            {% endif  %}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title" style="vertical-align: text-bottom;">Adresse :</td>
                                                        <td class="table-data">
                                                            {{ bonLivraison.getDeliveryAddress1() }}<br>
                                                            {% if bonLivraison.getDeliveryAddress2() != '' %}{{ bonLivraison.getDeliveryAddress2() }}<br>{% endif  %}
                                                            {{ bonLivraison.getDeliveryZipCode() }} {{ bonLivraison.getDeliveryCity() }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title" style="vertical-align: text-bottom;">Tel - Mail :</td>
                                                        <td class="table-data">
                                                            {% if bonLivraison.getDeliveryContactPhone() != '' and bonLivraison.getDeliveryContactCellPhone() != '' %}
                                                                {{ bonLivraison.getDeliveryContactPhone() }} / {{ bonLivraison.getDeliveryContactCellPhone() }}
                                                            {% elseif bonLivraison.getDeliveryContactPhone() != '' %}
                                                                {{ bonLivraison.getDeliveryContactPhone() }}
                                                            {% elseif bonLivraison.getDeliveryContactCellPhone() != '' %}
                                                                {{ bonLivraison.getDeliveryContactCellPhone() }}
                                                            {% endif  %}
                                                            - {{ bonLivraison.getDeliveryContactEmail() }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-title" style="vertical-align: text-bottom;">Commentaire :</td>

                                                        <td class="table-data">
                                                            {{ bonLivraison.comment|nl2br }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="table-data" colspan="2" style="padding-left: 10px">
                                                            <textarea id="bl-commentaire-{{ bonLivraison.documentNumber }}"  placeholder="Saisir le commentaire à ajouter" name="bl-commentaire-{{ bonLivraison.documentNumber }}" rows="3" cols="40"></textarea>
                                                        </td>
                                                    </tr>


                                                </table>
                                            </div>
                                        </div>

                                            <div class="col-12" style="text-align: center;display: flex">
                                                <a type="button" id="btn-commentaire-{{ bonLivraison.documentNumber }}" class="btn btn-secondary" style="height: 30px;font-size: 12px" onclick="sendComment('{{ bonLivraison.documentNumber }}')">AJOUTER COMMENTAIRE</a>
                                                <a type="button" class="btn btn-secondary" style="height: 30px;margin-left: 15px;font-size: 12px" onclick="generatePdfBonLivraison('{{ bonLivraison.documentNumber }}')">VOIR PDF BL</a>
                                            </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

    </div>

{% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $('#bon_livraison_search_search').focus();
        $('#bon_livraison_search_search').select();

        // detect enter keypress
        $('#bon_livraison_search_search').click(function(e) {
            $('#bon_livraison_search_search').select();
        });

        $('.spinner_form').submit(function() {
            $(this).find('.spinner_button').append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
            $(this).find('.spinner_button').css('pointer-events', 'none');
            $(this).find('.spinner_button').css('opacity', '0.5');
        });

        function sendComment(blid) {

            var inputId = "#bl-commentaire-" + blid;
            var btnId = "#btn-commentaire-" + blid;
            var commentaire = $(inputId).val();

            if (commentaire != '') {
                if (confirm('Ce commentaire sera ajouté au commentaire eixstant du BL, confirmez-vous l\'envoi ?')) {


                    var blid = blid;
                    //requet ajax pour recupérer le contenu
                    var url = '{{ path('update_bon_livraison_comment_from_douchette') }}';

                    $(btnId).css('pointer-events', 'none');
                    $(btnId).css('opacity', '0.5');
                    $(btnId).html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> en cours');

                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            'commentaire': commentaire,
                            'blid': blid
                        },
                        success: function (data) {
                            $(btnId).html('OK');
                            alert('le commentaire a bien été mise à jour');
                            $('#blForm').submit();
                        }
                    });
                }
            }
        }

        function generatePdfBonLivraison(blid) {

            //requet ajax pour recupérer le contenu
            var url = '{{ path('bon_livraison_generate_pdf') }}';

            $('#btn-generate-pdf').css('pointer-events', 'none');
            $('#btn-generate-pdf').css('opacity', '0.5');
            $('#btn-generate-pdf').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> en cours');

            document.location = url + "?blid=" + blid;

            $('#btn-generate-pdf').css('pointer-events', 'auto');
            $('#btn-generate-pdf').css('opacity', '1');
            $('#btn-generate-pdf').html('PDF BON DE LIVRAISON');
        }

    </script>

{% endblock %}