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

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

{% block title %}
    {{ parent() }}
    Formulaire RMA
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('salsa/SalsaCalendar.min.css') }}" media="all" />
    <style>
        .input-rma {
            margin-left: 0!important;
            margin-bottom: 10px;
            padding-left: 5px;
        }

        .form-group {
            width: 300px;
        }

        .block-article {
            border: 1px solid #d4dae3;
            border-radius: 4px;
            padding: 16px;
            margin-top: 24px;
        }

        .block-article .block-article-title {
            font-weight: 700;
            font-size: 1.1em;
            text-decoration: underline;
            margin-bottom: 16px;
        }
        .required-input-sign {
            font-size: 18px;
            color: #e54040;
        }
        .block-header-form {
            background-color: #3164a9!important;
        }
        .btn-info {
            background-color: #5887c7!important;
            border-color: #ffffff!important;
        }
        .btn-info:hover {
            background-color: #3164a9!important;
        }
    </style>
{% endblock %}

{% block headerRight %}
{% endblock %}


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

    {% if status == 'ok' %}

        <div id="message-after-submit" style="display: none">
            <h5><i style="margin-right: 8px" class="fa fa-check"></i> Le formulaire a bien été envoyé</h5>
            <h5><i style="margin-right: 8px" class="fa fa-check"></i> Un récapitulatif de votre formulaire a été téléchargé</h5>
        </div>

        <div id="main-block" class="block">

            {{ form_start(form, {'attr' : {'id' : 'rma-contact-form', 'autocomplete' : 'off'}}) }}

            <div class="block block-themed block-transparent mb-0">
                <div class="block-header block-header-form">
                    <h3 class="block-title ">Formulaire RMA</h3>
                </div>
                <div class="block-content">
                    <p><i style="margin-right: 8px" class="fa fa-arrow-right"></i>Protéger le matériel et utiliser un emballage adapté. Tout matériel réceptionné endommagé ou détérioré à la suite d’un mauvais emballage ne sera pas garanti.</p>
                </div>

                <div class="block-content">
                    <h5>1 - Vos coordonnées</h5>
                    <div style="display: flex">
                        <div class="form-group row" style="margin-right: 16px">
                            <label class="col-12" for="rma-client-name">Société <span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: inline-flex">
                                {{ form_widget(form.clientName) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12" for="rma-client-agence">Agence</label>
                            <div class="col-12" style="display: inline-flex">
                                {{ form_widget(form.clientAgence) }}
                            </div>
                        </div>
                    </div>

                    <div style="display: flex">
                        <div class="form-group row" style="margin-right: 16px">
                            <label class="col-12">Nom <span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: inline-flex">
                                {{ form_widget(form.contactName) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12">Email <span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: inline-flex">
                                {{ form_widget(form.contactEmail) }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="block-content">
                    <h5>2 - Votre colis contient :</h5>

                    <input id="article-count" type="number" min="1" max="50" step="1" style="display: none" value="1">
                    {% for i in 1..50 %}

                        <div id="article-{{ i }}" class="block-article" {% if i > 1 %}style="display: none"{% endif %}>
                            <div class="block-article-title">Article {{ i }}</div>
                            <div class="form-group row" style="width: 100%">
                                <div class="col-12" style="display: block">
                                    <label>Date d'achat de l'article</label>
                                    {{ form_widget(form['articleBuyDate' ~ i], {'attr' : {'style' : 'border: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row" style="width: 100%">
                                <div class="col-12" style="display: block">
                                    <label>Numéro de facture (si achat PLM)</label>
                                    {{ form_widget(form['articleNumFacture' ~ i], {'attr' : {'style' : 'height: 46px; width: 200px'}}) }}
                                </div>
                            </div>
                            <div style="display: flex">
                                <div class="form-group row" style="margin-right: 16px">
                                    <label class="col-12">Designation <span class="required-input-sign">*</span></label>
                                    <div class="col-12" style="display: inline-flex">
                                        {{ form_widget(form['articleDesi' ~ i])}}
                                    </div>
                                </div>
                                <div class="form-group row" style="margin-right: 16px">
                                    <label class="col-12">N° de série <span class="required-input-sign">*</span></label>
                                    <div class="col-12" style="display: inline-flex">
                                        {{ form_widget(form['articleSerialNumber' ~ i]) }}
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-12">Référence Interne</label>
                                    <div class="col-12" style="display: inline-flex">
                                        {{ form_widget(form['articleRef' ~ i]) }}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" style="width: 100%">
                                <div class="col-12" style="display: inline-flex">
                                    {{ form_widget(form['articleCalib' ~ i]) }}
                                    <label for="rma_contact_articleCalib{{ i }}" style="margin-left: 12px; position: relative; top: -5px">Calibration</label>
                                </div>
                            </div>
                            <div class="form-group row" style="width: 100%">
                                <div class="col-12" style="display: inline-flex">
                                    {{ form_widget(form['articleDiag' ~ i]) }}
                                    <label for="rma_contact_articleDiag{{ i }}" style="margin-left: 12px; position: relative; top: -5px">Diagnostic et Réparation</label>
                                </div>
                            </div>
                            <div class="form-group row" style="width: 100%">
                                <div class="col-12" style="display: block">
                                    <label>Préciser le détail des défauts constatés</label>
                                    {{ form_widget(form['articleDiagDetail' ~ i], {'attr' : {'style' : 'min-height: 80px; max-height: 200px'}}) }}
                                </div>
                            </div>
                        </div>

                    {% endfor %}

                    <br>
                    <button id="btn-add-article" type="button" onclick="addArticle()" class="btn btn-info" style="margin-right: 16px"><i style="margin-right: 8px" class="fa fa-plus"></i>Ajouter un article</button>
                    <button id="btn-remove-article" type="button" onclick="removeArticle()" class="btn btn-secondary" disabled><i style="margin-right: 8px" class="fa fa-minus"></i>Retirer le dernier article</button>
                </div><br>
                <div class="block-content">
                    <h5>Bon pour accord :</h5>
                    <p><strong>Note : </strong>Pour respecter la santé et les exigences de sécurité, tout équipement retourné doit être déclaré exempt de tout polluant pouvant causer un risque à la santé.</p>
                    <p><strong style="text-decoration: underline">Je note que :</strong><br><i style="margin-right: 8px" class="fa fa-arrow-right"></i>J’accepte de régler un forfait de 45€ pour frais de décontamination dans le cas où mes matériels ne répondraient pas aux exigences de sécurité énoncées dans la note précédente.</p>
                    <br>
                    <div class="form-group row" style="width: 100%">
                        <div class="col-12" style="display: inline-flex">
                            {{ form_widget(form.contactFormChecked, {'attr' : {'value' : rma.contactName, 'style' : 'position: relative; top : 8px'}}) }}
                            <label for="rma_contact_contactFormChecked" style="margin-left: 12px">J’accepte le retour dans l’état de tout matériel non réparable avec facturation des frais de port.<br>En l’absence de coche, je donne mon bon pour accord pour l’élimination de tout matériel non réparable</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-12" >Nom <span class="required-input-sign">*</span></label>
                        <div class="col-12" style="display: inline-flex">
                            {{ form_widget(form.contactFormSignature, {'attr' : {'value' : rma.contactName}}) }}
                        </div>
                    </div>
                </div>
                <br>
                <button type="submit" name="search" class="btn spinner_button btn-info" id="form-btn" style="display: none">
                    <span>Valider</span>
                </button>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-info" onclick="popupConfirm()" id="btn-submit-rma-form"><i class="fa fa-check"></i> Valider</button>
            </div>

            {{ form_end(form) }}

        </div>

    {% elseif status == 'filled' %}

        <h5><i style="margin-right: 8px" class="fa fa-check"></i> Le formulaire correspondant à cette RMA a déjà été envoyé</h5>

    {% else %}

        <h5>Aucune RMA trouvée</h5>

    {% endif %}
{% endblock %}

{% block modal %}

    <button type="button" id="btn-modal-rma-confirm" class="btn" data-toggle="modal" data-target="#modal-large-confirm" style="display: none"></button>

    <div class="modal" id="modal-large-confirm" 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">Confirmation</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>Êtes-vous sûr de vouloir envoyer ce formulaire aux équipes de PLM Services ?</p>
                        </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="submitRmaForm()" id="btn-update-rma-create">
                            <i class="fa fa-check"></i> 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() {

            // detect enter keypress
            $('#rma-contact-form input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    return false
                }
            });
        });


        function popupConfirm() {
            var form = document.getElementById('rma-contact-form');
            if (form.checkValidity()) {
                $('#btn-modal-rma-confirm').click();
            }
            else {
                alert('Le formulaire est incomplet. Veuillez remplir tous les champs marqués d\'une étoile.')
            }
        }

        function submitRmaForm() {
            var form = document.getElementById('rma-contact-form');
            if (form.checkValidity()) {
                form.submit();
                $('#btn-modal-rma-confirm-close').click();
                form.style.display = 'none';
                window.scroll(0,0);
                $('#message-after-submit').css('display', 'block');
            }
            else {
                alert('Le formulaire est incomplet. Veuillez remplir tous les champs marqués d\'une étoile.')
            }
        }

        // Maximum d'articles possible dans le formulaire (=50)
        const articleMax = document.getElementsByClassName('block-article').length

        // Réinitialise les champs d'un article
        function resetArticle(id) {
            $('#article-' + id + ' :input').val("");
            $('#article-' + id + ' :checkbox').prop('checked', false);
        }

        // Gère l'affichage des articles
        function displayArticles(nb) {
            for (let i = 2; i <= articleMax; i++) {
                if(i <= nb) {
                    $("#article-" + i).css('display', 'block')
                }
                else {
                    $("#article-" + i).css('display', 'none')
                    resetArticle(i);
                }
            }
        }

        // Met à jour le compteur d'article (ex: quand le compteur vaut 2:les articles 1 et 2 sont affichés)
        function updateCounter() {
            var articleCounter = document.getElementById('article-count');
            var count = parseInt(articleCounter.value)

            $("#btn-add-article").removeAttr("disabled").button('refresh');
            $("#btn-remove-article").removeAttr("disabled").button('refresh');

            if(count <= 1) {
                count = 1;
                $("#btn-remove-article").attr("disabled", true).button('refresh');
            }
            else if(count >= articleMax) {
                count = articleMax;
                $("#btn-add-article").attr("disabled", true).button('refresh');
            }

            articleCounter.value = count;
        }

        // Ajoute un article au formulaire
        function addArticle() {
            var articleCounter  = document.getElementById('article-count')
            if(articleCounter.value < articleMax) {
                articleCounter.value = parseInt(articleCounter.value) + 1
                updateCounter()
                displayArticles(articleCounter.value);
            }
        }

        // Retire le dernier article du formulaire
        function removeArticle() {
            var articleCounter  = document.getElementById('article-count')
            if(articleCounter.value > 1) {
                articleCounter.value = parseInt(articleCounter.value) - 1
                updateCounter()
                displayArticles(articleCounter.value);
            }
        }

    </script>
{% endblock %}