{% 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_repintern_end_reploc {
            margin: 5px 15px 20px 15px;
        }

        #btn_repfour_end_reploc {
            margin: 5px 15px 20px 0;
        }

        #btn_irrep_end_reploc {
            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('reploc_overview_pdf') }}?id={{ reploc.id }}')"><i style="margin-right: 8px;" class="fa fa-download"></i>Télécharger le récap complet</button>
{#                    <button class="btn btn-primary" style="margin-right: 8px; margin-bottom: 8px;" onclick="redirect('{{ path('reploc_files') }}?redirect=overview&id={{ reploc.id }}&search={{ search }}&filterStatus={{ filterStatus }}&filterDatePrev={{ filterDatePrev }}')"><i style="margin-right: 8px;" class="fa fa-external-link"></i>Fichiers</button>#}
                    {% if reploc.isStatusDiag or reploc.isStatusFourEnv or reploc.isStatusFourP %}
                        <button type="button" class="btn btn-primary main-action-btn"style="margin-right: 8px; margin-bottom: 8px;" onclick="redirect('{{ path('reploc_diagnostic_form') }}?id={{ reploc.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">{{ reploc.code }}</div>
                                </div>
                                <div class="row">
                                    <label>Type :</label>
                                    {% if reploc.type %}
                                        <div class="value">{{ reploc.type }}</div>
                                    {% else %}
                                        <div class="value">Inconnu</div>
                                    {% endif %}
                                </div>
                                <div class="row">
                                    <label>Chargé d'affaire :</label>
                                    {% if reploc.getEnregistrementIntervenant %}
                                        <div class="value">{{ reploc.enregistrementIntervenant.firstName ~ ' ' ~ reploc.enregistrementIntervenant.name }}</div>
                                    {% else %}
                                        <div class="value">Inconnu</div>
                                    {% endif %}
                                </div>
                                <div class="row email">
                                    <label>Email du chargé d'affaire :</label>
                                    {% if reploc.getEnregistrementIntervenant %}
                                        <div class="value">{{ reploc.enregistrementIntervenant.email }}</div>
                                    {% else %}
                                        <div class="value">Inconnu</div>
                                    {% endif %}
                                </div>
                                <div class="row">
                                    <label>Statut :</label>
                                    <div class="value">{{ reploc.displayStatus }}</div>
                                </div>
                                <div class="row date">
                                    <label>Date de création :</label>
                                    <div class="value">{{ reploc.createdAt | date("d/m/Y") }}</div>
                                </div>
                            </div>
                        </div>
                        <div id="barcode-container" class="form-section">
                            {{ reploc.getBarCodeImg() | raw }}
                        </div>
                    </div>

                    {% if reploc.getArticleCode or reploc.getArticleName%}
                        <div class="form-section">
                            <div class="head">Matériel</div>
                            <div class="body">
                                {% if reploc.getArticleCode %}
                                    <div class="row">
                                        <label>Code matériel :</label>
                                        <div class="value">{{ reploc.articleCode }}</div>
                                    </div>
                                {% endif %}
                                {% if reploc.getArticleName%}
                                    <div class="row">
                                        <label>Libellé matériel :</label>
                                        <div class="value">{{ reploc.articleName }}</div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    <div class="form-section">
                        <div class="head">Enregistrement</div>
                        <div class="body">
                            {% if reploc.getEnregistrementIntervenant %}
                                <div class="row" style="margin-bottom: 20px;">
                                    <label>Intervenant enregistrement :</label>
                                    <div class="value" style="display:inline-flex;">{{ reploc.enregistrementIntervenant.firstName ~ ' ' ~ reploc.enregistrementIntervenant.name }}</div>
                                </div>
                            {% endif %}
                            <div class="row">
                                <label>Photo de l'article (Enregistrement) : </label>
                                {% if reploc.getEnrFilenamePict %}
                                    <a href="{{ absolute_url(asset('uploads/reploc/' ~ reploc.enrFilenamePict)) }}" target="_blank"><img src="{{ absolute_url(asset('uploads/reploc/' ~ reploc.enrFilenamePict)) }}" style="max-width: 150px;"></a>
                                {% else %}
                                    <div class="value">Aucune</div>
                                {% endif %}
                            </div>
                            <div class="row" style="margin-top: 40px;">
                                <label>Événement :</label>
                                <div style="display: inline-flex" class="value">{{ reploc.getEvenement }}</div>
                            </div>
                            {% if reploc.getEvenementText %}
                            <div class="row" style="margin-top: 40px;">
                                <label>Détail événement :</label>
                                <div style="display: inline-flex" class="value">{{ reploc.evenementText }}</div>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    {% if reploc.isStatusTermine or reploc.isStatusFourEnv or reploc.isStatusDiag %}
                       {% if reploc.dateDiagnostic %}
                       <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 reploc.dateDiagnostic != null %}{{ reploc.dateDiagnostic | date("d/m/Y") }}{% endif %}</div>
                               </div>
                               <div class="row">
                                   <label>Intervenant diagnostic :</label>
                                   <div class="value">{% if reploc.diagnosticIntervenant != null %}{{ reploc.diagnosticIntervenant.firstName ~ ' ' ~ reploc.diagnosticIntervenant.name }}{% endif %}</div>
                               </div>
                               <div class="row email">
                                   <label>Email de l'intervenant :</label>
                                   <div class="value">{% if reploc.diagnosticIntervenant != null %}{{ reploc.diagnosticIntervenant.email }}{% endif %}</div>
                               </div>
                               <div class="row">
                                   <label>Durée :</label>
                                   <div class="value">{% if reploc.diagnosticDurationHour != null %}{{ reploc.diagnosticDurationHour ~ 'h ' }}{% endif %}{% if reploc.diagnosticDurationMinute != null %}{{ reploc.diagnosticDurationMinute }}{% endif %}</div>
                               </div>
                               {% if reploc.isRep %}
                                   <div class="row">
                                       <label>Numéro affaire :</label>
                                       <div class="value">{{ reploc.diagnosticNumAffaire }}</div>
                                   </div>
                                   <div class="row">
                                       <label>Date réception du matériel :</label>
                                       <div class="value">{% if reploc.diagnosticDateRecMat != null %}{{ reploc.diagnosticDateRecMat | date("d/m/Y") }}{% endif %}</div>
                                   </div>
                                   <div class="row">
                                       <label>Photo de l'article (Diagnostic) :</label>
                                       <a href="{{ absolute_url(asset('uploads/reploc/' ~ reploc.diagFilenamePict)) }}" target="_blank"><img src="{{ absolute_url(asset('uploads/reploc/' ~ reploc.diagFilenamePict)) }}" style="max-width: 150px;"></a>
                                   </div>
                                   <div class="row">
                                       <label>Test du fonctionnement du matériel à l'arrivée :</label>
                                       <div class="value">{{ reploc.diagnosticTestFonctMat }}</div>
                                   </div>
                                   <div class="row">
                                       <label>Défauts constatés :</label>
                                       <div class="value">{{ reploc.diagnosticDefaultNoted }}</div>
                                   </div>
                                   <div class="row">
                                       <label>Proposition de réparation :</label>
                                       <div class="value">{{ reploc.diagnosticPropRep }}</div>
                                   </div>
                                   <div class="row">
                                       <label>Calibration :</label>
                                       <div class="value">{% if reploc.isCalibration %}{{ reploc.diagnosticCalibText }}{% else %}Non{% endif %}</div>
                                   </div>
                                   <div class="row">
                                       <label>Conclusion du diagnostic :</label>
                                       <div class="value">{% if reploc.getDiagnosticConclusionDiag %}{{ reploc.diagnosticConclusionDiag }}{% else %}Aucun{% endif %}</div>
                                   </div>
                                   {% endif %}
                           </div>
                       </div>
                       {% endif %}
                    {% endif %}

                    {% if reploc.getFourName %}
                        <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">{{ reploc.fourName }}</div>
                                        </div>
                                        <div class="row date">
                                            <label>Date d'envoi chez le fournisseur :</label>
                                            <div class="value">{% if reploc.dateEnvoiFour != null %}{{ reploc.dateEnvoiFour | date("d/m/Y") }}{% endif %}</div>
                                        </div>
                                        <div class="row date">
                                            <label>Date du diagnostic fournisseur :</label>
                                            <div class="value">{% if reploc.dateCommentaireFour != null %}{{ reploc.dateCommentaireFour | date("d/m/Y") }}{% endif %}</div>
                                        </div>
                                        <div class="row">
                                            <label>Commentaire du diagnostic fournisseur :</label>
                                            <div class="value">{{ reploc.commentaireRetourFour }}</div>
                                        </div>
                                        <div class="row date">
                                            <label>Date de la réception du matériel fournisseur :</label>
                                            <div class="value">{% if reploc.dateRetourFour != null %}{{ reploc.dateRetourFour | date("d/m/Y") }}{% endif %}</div>
                                        </div>

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

                {% if reploc.isStatusDiag or reploc.isStatusFourEnv and user.isAdmin or user.hasServiceRepLocAdmin%}
                    <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: 18px;">Terminer la RepLoc</button>
                    </div>
                {% endif %}
            </div>
        </div>

    {% elseif status == 'submit' %}

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

    {% else %}

        <h4>Aucune Rep Loc 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' : 'reploc-termine-form', 'autocomplete' : 'off'}}) }}
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">TERMINER REP/CAL LOC</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">
                                    <label class="col-12">Intervenant : <span class="required-input-sign">*</span></label>
                                    <div class="col-12" style="display: block">
                                        {{ form_widget(form.termineIntervenant, {'attr' : {'style' : 'max-width: 55%;'}}) }}
                                    </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_repintern_end_reploc" onclick="displayComment('repintern')" class="btn btn-secondary">Réparation Interne</button>
                                    <button type="button" id="btn_repfour_end_reploc" onclick="displayComment('repfour')" class="btn btn-secondary">Réparation Fournisseur</button>
                                    <button type="button" id="btn_irrep_end_reploc" 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 class="form-group row" id="date-remise-loc-reploc-form" style="display: none">
                                    <label class="col-12">Date de remise en location : <span class="required-input-sign">*</span></label>
                                    <div class="col-12" style="display: block">
                                        {{ form_widget(form.dateRemiseLoc, {'attr' : {'style' : 'border: 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="buttonEndRepLoc()"><i class="fa fa-check"></i> Valider</button>
                    </div>
                    {{ form_end(form) }}
                </div>
            </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
            $('#reploc-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($('#reploc-list-url').val());
        }

        function displayComment(button) {
            console.log('test ', button);
            if (button === "repfour") {
                $('#rep_loc_end_commentaireFin').val('Matériel réparé par le fournisseur.');
                $('#date-remise-loc-reploc-form').css('display', 'block');
            }
            else if (button === "irrep") {
                $('#rep_loc_end_commentaireFin').val('Matériel irréparable.');
                $('#date-remise-loc-reploc-form').css('display', 'none');
            }
            else if (button === "repintern") {
                $('#rep_loc_end_commentaireFin').val('Matériel réparé par en interne.');
                $('#date-remise-loc-reploc-form').css('display', 'block');
            }
        }

        function buttonEndRepLoc() {
            var form = document.getElementById('reploc-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 %}