{% block stylesheets %}
    <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>

        .row {
            diasplay: flex;
            margin-bottom: 4px;
            margin-left: 0!important;
            margin-bottom: 10px;
            padding-left: 5px;
            font-size: 14px;
        }

        .col {
            margin-bottom: 4px;
            margin-left: 0!important;
            margin-bottom: 16px;
            padding-left: 5px;
            font-size: 14px;
        }
        .value {
            white-space: pre-wrap;
        }

        .row.email .value{
            //color: #3F9CE8
        }

        .row label, .col label {
            margin-right: 12px;
            font-weight: 700;
        }
        .row .value, .col .value {
            font-size: 14px;
        }
        .modal-footer {
            padding: 16px 16px 4px 16px;
        }
        .modal-footer>:not(:first-child) {
            margin-left: 16px;
        }
        .modal-footer .btn{
            margin-bottom: 12px;
        }

        .form-section {
            margin-bottom: 40px;
        }

        .form-section .head {
            margin-bottom: 16px;
            font-size: 18px;
            font-weight: 700;
            color: #3F9CE8;
        }

        .monitoring-btn {
            width: 150px;
            font-size: 14px;
            height: 34px;
            margin-bottom: 24px;
        }

        #btn_destruct_end_rma {
            margin: 5px 15px 20px 15px;
        }

        #btn_irrep_end_rma {
            margin: 5px 0px 20px 0;
        }

        .required-input-sign {
            font-size: 18px;
            color: #e54040;
        }


    </style>
{% endblock %}

{% block body %}

    {% if status == 'ok' %}

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

            <div class="block block-themed block-transparent mb-0">
                <div class="block-content" style="padding-top: 55px;">
                    <button class="btn btn-primary" style="margin-right: 8px; margin-bottom: 8px;" onclick="redirect('{{ path('rma_overview_pdf') }}?id={{ rma.id }}')"><i style="margin-right: 8px;" class="fa fa-download"></i>Récap complet</button>
                    <button class="btn btn-primary" style="margin-right: 8px; margin-bottom: 8px;" onclick="redirect('{{ path('rma_download_pdf') }}?id={{ rma.id }}')"><i style="margin-right: 8px;" class="fa fa-download"></i>Fiche client</button>
{#                    <button class="btn btn-primary" style="margin-right: 8px; margin-bottom: 8px;" onclick="redirect('{{ path('rma_files') }}?redirect=overview&id={{ rma.id }}&search={{ search }}&filterStatus={{ filterStatus }}&filterDatePrev={{ filterDatePrev }}')"><i style="margin-right: 8px;" class="fa fa-external-link"></i>Fichiers</button>#}
                    {% if rma.isStatusNull == false and rma.isStatusZero == false and rma.isStatusTermine == false %}
                        <button type="button" class="btn btn-primary" style="margin-right: 8px; margin-bottom: 8px;" onclick="redirect('{{ path('rma_diagnostic_form') }}?id={{ rma.getId }}')">Modifier le diagnostic</button>
                    {% endif %}
                </div>
                <br>
                <div class="block-content" style="position: relative;">

                <div style="display: flex; justify-content: space-between;">

                    <div class="form-section">
                        <div class="head">Général</div>
                        <div class="body">

                            <div class="row">
                                <label>Code :</label>
                                <div class="value">{{ rma.code }}</div>
                            </div>
                            <div class="row">
                                <label>Type :</label>
                                {% if rma.type %}
                                    <div class="value">{{ rma.type }}</div>
                                {% else %}
                                    <div class="value">Inconnu</div>
                                {% endif %}
                            </div>
                            <div class="row">
                                <label>Chargé d'affaire :</label>
                                {% if rma.getBusinessManager %}
                                    <div class="value">{{ rma.businessManager.firstName ~ ' ' ~ rma.businessManager.name }}</div>
                                {% else %}
                                    <div class="value">Inconnu</div>
                                {% endif %}
                            </div>
                            <div class="row email">
                                <label>Email du chargé d'affaire :</label>
                                {% if rma.getBusinessManager %}
                                    <div class="value">{{ rma.businessManager.email }}</div>
                                {% else %}
                                    <div class="value">Inconnu</div>
                                {% endif %}
                            </div>
                            <div class="row">
                                <label>Statut :</label>
                                <div class="value">{{ rma.displayStatus }}</div>
                            </div>
                            <div class="row date">
                                <label>Date de création :</label>
                                <div class="value">{{ rma.createdAt | date("d/m/Y") }}</div>
                            </div>
                            {% if rma.getDateReception %}
                            <div class="row date">
                                <label>Date de réception du matériel :</label>
                                <div class="value">{{ rma.dateReception | date("d/m/Y") }}</div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div id="barcode-container" class="form-section">
                        {{ rma.getBarCodeImg() | raw }}
                    </div>
                </div>

                    {% if not user.hasServiceDemo %}
                        <div class="form-section">
                            <div class="head">Client</div>
                            <div class="body">

                                <div class="row">
                                    <label>Nom du client :</label>
                                    <div class="value">{{ rma.clientName }}</div>
                                </div>
                                <div class="row">
                                    <label>Code client :</label>
                                    <div class="value">{{ rma.clientCode }}</div>
                                </div>
                                <div class="row">
                                    <label>Agence du client :</label>
                                    <div class="value">{{ rma.clientAgence }}</div>
                                </div>
                            </div>

                        </div>

                        <div class="form-section">
                            <div class="head">Contact</div>
                            <div class="body">

                                <div class="row">
                                    <label>Nom du contact :</label>
                                    <div class="value">{{ rma.contactName }}</div>
                                </div>
                                <div class="row email">
                                    <label>Email du contact :</label>
                                    <div class="value">{{ rma.contactEmail }}</div>
                                </div>
                                {% if rma.getContactFormDate %}
                                    <div class="row date">
                                        <label>Date du formulaire contact :</label>
                                        <div class="value">{{ rma.contactFormDate | date("d/m/Y") }}</div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}

                    {% if rma.getContactFormDate %}
                        <div class="form-section">
                            <div class="head">Matériel</div>
                            <div class="body">
                                <div class="row">
                                    <label>Designation du matériel :</label>
                                    <div class="value">{{ rma.articleDesignation }}</div>
                                </div>
                                <div class="row">
                                    <label>Code matériel :</label>
                                    <div class="value">{{ rma.articleCode }}</div>
                                </div>
                                {% if rma.getArticleBuyDate %}
                                    <div class="row">
                                        <label>Date d'achat :</label>
                                        <div class="value">{{ rma.articleBuyDate | date("d/m/Y")}}</div>
                                    </div>
                                {% endif %}
                                {% if rma.getArticleNumFacture %}
                                    <div class="row">
                                        <label>Numéro facture :</label>
                                        <div class="value">{{ rma.articleNumFacture }}</div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    {% if not rma.isStatusNull%}
                    <div class="form-section">
                        <div class="head">Réception</div>
                        <div class="body">
                            {% if rma.receptionIntervenant %}
                                <div class="row" style="margin-bottom: 20px;">
                                    <label>Intervenant réception :</label>
                                    <div class="value" style="display:inline-flex;">{{ rma.receptionIntervenant.firstName ~ ' ' ~ rma.receptionIntervenant.name }}</div>
                                </div>
                            {% endif %}
                            <div class="row">
                                <label>État extérieur du colis :</label>
                                <div class="value" style="display:inline-flex;">{{ rma.receptionExt }}</div>
                            </div>
                            {% if rma.filenameExt %}
                                <a href="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameExt)) }}" target="_blank"><img src="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameExt)) }}" style="max-width: 150px;"></a>
                            {% endif %}
                            <div class="row" style="margin-top: 40px;" >
                                <label>État du matériel à l'intérieur du colis :</label>
                                <div style="display: inline-flex" class="value">{{ rma.receptionInt }}</div>
                            </div>
                            {% if rma.filenameInt %}
                                <a href="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameInt)) }}" target="_blank"><img src="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameInt)) }}" style="max-width: 150px;"></a>
                            {% endif %}
                            <div class="row" style="margin-top: 40px;">
                                <label>Accessoires présents dans le colis :</label>
                                <div style="display: inline-flex" class="value">{{ rma.receptionAcc }}</div>
                            </div>
                            {% if rma.filenameAcc %}
                                <a href="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameAcc)) }}" target="_blank"><img src="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameAcc)) }}" style="max-width: 150px;"></a>
                            {% endif %}
                            {% endif %}
                        </div>
                    </div>

                    {% if not rma.isStatusNullOrZero %}
                        {% if rma.isNewRma %}
                        <div class="form-section">
                            <div class="head">Diagnostic</div>
                            <div class="body">
                                <div class="row date">
                                    <label>Date du diagnostic :</label>
                                    <div class="value">{% if rma.dateDiagnostic != null %}{{ rma.dateDiagnostic | date("d/m/Y") }}{% endif %}</div>
                                </div>
                                <div class="row">
                                    <label>Intervenant diagnostic :</label>
                                    <div class="value">{% if rma.diagnosticIntervenant != null %}{{ rma.diagnosticIntervenant.firstName ~ ' ' ~ rma.diagnosticIntervenant.name }}{% endif %}</div>
                                </div>
                                <div class="row email">
                                    <label>Email de l'intervenant :</label>
                                    <div class="value">{% if rma.diagnosticIntervenant != null %}{{ rma.diagnosticIntervenant.email }}{% endif %}</div>
                                </div>
                                <div class="row">
                                    <label>Durée :</label>
                                    <div class="value">{% if rma.diagnosticDurationHour != null %}{{ rma.diagnosticDurationHour ~ 'h ' }}{% endif %}{% if rma.diagnosticDurationMinute != null %}{{ rma.diagnosticDurationMinute }}{% endif %}</div>
                                </div>
                                <div class="row">
                                    <label>Test du fonctionnement du matériel à l'arrivée :</label>
                                    <div class="value">{{ rma.diagnosticTestFonctMat }}</div>
                                </div>
                                <div class="row">
                                    <label>Défauts constatés :</label>
                                    <div class="value">{{ rma.diagnosticDefaultNoted }}</div>
                                </div>
                                <div class="row">
                                     <label>Test de réparabilité :</label>
                                    <div class="value">{{ rma.diagnosticTestRepair }}</div>
                               </div>
                                <div class="row">
                                    <label>Calibration :</label>
                                    <div class="value">{% if rma.isCalibration %}{{ rma.diagnosticCalibText }}{% else %}Non{% endif %}</div>
                                </div>
                                <div class="row">
                                    <label>Conclusion du diagnostic :</label>
                                    <div class="value">{{ rma.diagnosticConclusionDiag }}</div>
                                </div>
                            </div>
                        </div>
                        {% else %}
                            <div class="form-section">
                                <div class="head">Diagnostic</div>
                                <div class="body">
                                    <div class="row date">
                                        <label>Date du diagnostic :</label>
                                        <div class="value">{% if rma.dateDiagnostic != null %}{{ rma.dateDiagnostic | date("d/m/Y") }}{% endif %}</div>
                                    </div>
                                    <div class="row">
                                        <label>Intervenant diagnostic :</label>
                                        <div class="value">{% if rma.diagnosticIntervenant != null %}{{ rma.diagnosticIntervenant.firstName ~ ' ' ~ rma.diagnosticIntervenant.name }}{% endif %}</div>
                                    </div>
                                    <div class="row email">
                                        <label>Email de l'intervenant :</label>
                                        <div class="value">{% if rma.diagnosticIntervenant != null %}{{ rma.diagnosticIntervenant.email }}{% endif %}</div>
                                    </div>
                                    <div class="row">
                                        <label>Durée :</label>
                                        <div class="value">{% if rma.diagnosticDurationHour != null %}{{ rma.diagnosticDurationHour ~ 'h ' }}{% endif %}{% if rma.diagnosticDurationMinute != null %}{{ rma.diagnosticDurationMinute }}{% endif %}</div>
                                    </div>
                                    <div class="row">
                                        <label>Accessoires joints :</label>
                                        <div class="value" style="display: inline-flex">{{ rma.diagnosticAccessories }}</div>
                                    </div>
                                    <div class="col">
                                        <label>Diagnostic :</label>
                                        <div class="value" style="display: inline-flex">{{ rma.diagnosticDiag }}</div>
                                    </div>
                                    <div class="col">
                                        <label>Proposition de réparation :</label>
                                        <div class="value" style="display: inline-flex">{{ rma.diagnosticRep }}</div>
                                    </div>
                                    <div class="col">
                                        <label>Calibration :</label>
                                        <div class="value" style="display: inline-flex">{{ rma.diagnosticCalib }}</div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endif %}

                    <div class="row" style="padding: 0;">
                    {% if not rma.isDisplayDevis %}
                        <div class="col-md-6" style="padding: 0;">
                            <div class="col-md-12" style="padding: 0;">
                                <div class="form-section">
                                    <div class="head">Devis</div>
                                    <div class="body">

                                        <div class="row date">
                                            <label>Date du devis :</label>
                                            <div class="value">{% if rma.dateDevis != null %}{{ rma.dateDevis | date("d/m/Y") }}{% endif %}</div>
                                        </div>
                                        <div class="row">
                                            <label>Code du devis :</label>
                                            <div class="value">{{ rma.codeDevis }}</div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if rma.isDisplayFournisseur %}
                        <div class="col-md-6" style="padding: 0;">
                            <div class="col-md-12" style="padding: 0;">
                                <div class="form-section">
                                    <div class="head">Fournisseur</div>
                                    <div class="body">

                                        <div class="row">
                                            <label>Nom du fournisseur :</label>
                                            <div class="value">{{ rma.fourName }}</div>
                                        </div>
                                        <div class="row">
                                            <label>Référence RMA fournisseur :</label>
                                            <div class="value">{{ rma.rmaFourRef }}</div>
                                        </div>
                                        <div class="row date">
                                            <label>Date d'envoi chez le fournisseur :</label>
                                            <div class="value">{% if rma.dateEnvoiFour != null %}{{ rma.dateEnvoiFour | date("d/m/Y") }}{% endif %}</div>
                                        </div>
                                        <div class="row date">
                                            <label>Date du diagnostic fournisseur :</label>
                                            <div class="value">{% if rma.dateRetourFour != null %}{{ rma.dateRetourFour | date("d/m/Y") }}{% endif %}</div>
                                        </div>
                                        <div class="row">
                                            <label>Commentaire du diagnostic fournisseur :</label>
                                            <div class="value">{{ rma.commentaireRetourFour }}</div>
                                        </div>
                                        <div class="row date">
                                            <label>Date de la réception du matériel fournisseur :</label>
                                            <div class="value">{% if rma.dateRetourMateriel != null %}{{ rma.dateRetourMateriel | date("d/m/Y") }}{% endif %}</div>
                                        </div>

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

                {% if rma.isDisplayFournisseur %}
                    {% if not user.hasServiceDemo %}
                        <div class="form-section">
                            <div class="head">Commande client</div>
                            <div class="body">

                                <div class="row date">
                                    <label>Date de la commande :</label>
                                    <div class="value">{% if rma.dateValidationDevis != null %}{{ rma.dateValidationDevis | date("d/m/Y") }}{% endif %}</div>
                                </div>
                                <div class="row">
                                    <label>Code de la commande :</label>
                                    <div class="value">{{ rma.codeCommande }}</div>
                                </div>
                                <div class="row date">
                                    <label>Date prévisionnelle de réparation :</label>
                                    <div class="value">{% if rma.datePlanifRepar != null %}{{ rma.datePlanifRepar | date("d/m/Y") }}{% endif %}</div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <div class="form-section">
                        <div class="head">Bon de livraison de prise sous garantie</div>
                        <div class="body">

                            <div class="row date">
                                <label>Date du bon de livraison :</label>
                                <span class="value">{% if rma.dateBlRemplacement != null %}{{ rma.dateBlRemplacement | date("d/m/Y") }}{% endif %}</span>
                            </div>
                            <div class="row">
                                <label>Numéro du bon de livraison :</label>
                                <span class="value">{{ rma.blRemplacementCode }}</span>
                            </div>
                            <div class="row">
                                <label>Commentaire :</label>
                                <span class="value">{{ rma.commentaireBlRemplacement|nl2br }}</span>
                            </div>

                        </div>
                    </div>

                    <div class="form-section">
                        <div class="head">Bon de livraison</div>
                        <div class="body">

                            <div class="row date">
                                <label>Date du bon de livraison :</label>
                                <span class="value">{% if rma.dateFin != null %}{{ rma.dateFin | date("d/m/Y") }}{% endif %}</span>
                            </div>
                            <div class="row">
                                <label>Numéro du bon de livraison :</label>
                                <span class="value">{{ rma.blCode }}</span>
                            </div>
                            <div class="row">
                                <label>Commentaire :</label>
                                <span class="value">{{ rma.commentaireFin|nl2br }}</span>
                            </div>

                        </div>
                    </div>

                </div>
                {% endif %}
                {% if not rma.isStatusNullOrZeroOrTermine and user.isAdmin or user.hasServiceRmaAdminLight%}
                    <div class="action-container">
                        <button type="button" id="btn-modal-confirm-terminer" data-toggle="modal" data-target="#modal-large-confirm-terminer"  class="btn btn-danger main-action-btn monitoring-btn" style="margin-left: 20px;">Terminer la RMA</button>
                    </div>
                {% endif %}
            </div>

        </div>

    {% elseif status == 'submit' %}

        <script>window.location.replace(document.getElementById('rma-list-url').value)</script>

    {% else %}

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

    {% endif %}
{% endblock %}

{% block modal %}

        {% if status == 'ok' %}

            <!-- Début popup terminer-->
            <div class="modal" id="modal-large-confirm-terminer" 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_start(form, {'attr' : {'id' : 'rma-termine-form', 'autocomplete' : 'off'}}) }}
                            <div class="block block-themed block-transparent mb-0">
                                <div class="block-header">
                                    <h3 class="block-title">TERMINER RMA</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">
                                    <div class="form-section">
                                        <div class="form-group row">
                                            <label class="col-12">Date de fin : <span class="required-input-sign">*</span></label>
                                            <div class="col-12" style="display: block">
                                                {{ form_widget(form.dateFin, {'attr' : {'style' : 'border: none;'}}) }}
                                            </div>
                                        </div>
                                        <div class="form-group row" style="margin-top: 20px;">
                                            <label class="col-12">Commentaire : <span class="required-input-sign">*</span></label>
                                            <button type="button" id="btn_destruct_end_rma" onclick="displayComment('destruct')" class="btn btn-secondary">Destruction</button>
                                            <button type="button" id="btn_irrep_end_rma" onclick="displayComment('irrep')" class="btn btn-secondary">Irréparable</button>
                                            <div class="col-12" style="display: block">
                                                {{ form_widget(form.commentaireFin, {'attr' : {'style' : 'height: 80px; resize: none;'}}) }}
                                            </div>
                                        </div>
                                    </div>
                                </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="buttonEndRma()"><i class="fa fa-check"></i> Valider</button>
                            </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
            <!-- Fin popup terminer-->

        {% endif %}

{% endblock %}

{% block javascripts %}

    <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 redirect(url) {
            window.location.replace(url);
        }

       function closePage() {
           redirect($('#rma-list-url').val());
       }

        function displayComment(button) {
            console.log('test ', button);
            if (button === "destruct") {
                $('#rma_end_commentaireFin').val('Matériel détruit.');
            }
            if (button === "irrep") {
                $('#rma_end_commentaireFin').val('Matériel irréparable.');
            }
        }

        function buttonEndRma() {
            var form = document.getElementById('rma-termine-form');
            if (form.checkValidity()) {
                form.submit();
            }
            else {
                alert('Le formulaire est incomplet. Veuillez remplir tous les champs marqués d\'une étoile.')
            }
        }

    </script>
{% endblock %}