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

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

{% block title %}
    {{ parent() }}
    REP/CAL LOC ADMIN
{% 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>
        .form-group {
            margin-bottom: 1em;
        }
        .input-reploc {
            margin-left: 0!important;
            margin-bottom: 10px;
            padding-left: 5px;
        }

        .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: 20px;
            font-weight: 700;
            color: #3F9CE8;
        }

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

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

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

    </style>
{% endblock %}

{% block headerRight %}
    {{ parent() }}
    <button type="button" class="btn btn-secondary" id="btn-submit-reploc-form" onclick="closeForm()">Retour page précédente</button>
{% endblock %}

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

    <input type="hidden" id="reploc-list-url" value="{{ path('reploc_list') }}?search={{ search }}&filterStatus={{ filterStatus }}&filterDatePrev={{ filterDatePrev }}">

    {% if status == 'ok' %}

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

            {{ form_start(form, {'attr' : {'id' : 'reploc-admin-form', 'autocomplete' : 'off'}}) }}

            <div class="block block-themed block-transparent mb-0">
                <div class="block-header">
                    <h3 style="font-size: 18px;" class="block-title">REP/CAL LOC ADMIN</h3>
                </div>
                <div class="block-content">

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

                            <div class="form-group row">
                                <label class="col-12">Code</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.code) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Type</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.type) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Statut</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.status) }}
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12">Date de création</label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.created_at, {'attr' : {'style' : 'border: none;'}}) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12">Date prévisionnelle de réparation</label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.date_planif_repar, {'attr' : {'style' : 'border: none;'}}) }}
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="head">Matériel</div>
                        <div class="body">
                            <div class="form-group row">
                                <label class="col-12">Libellé du matériel</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.articleName) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Code du matériel</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.articleCode) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-section">
                        <div class="head">Enregistremenet</div>
                        <div class="body">
                            <div class="form-group row" style="margin-top: 20px;">
                                <label class="col-12">Intervenant enregistrement</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.enregistrementIntervenant, {'attr' : { 'style' : 'width: 200px;'}})}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Date de l'enregistrement</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.dateEnr, {'attr' : {'style' : 'border: none;'}}) }}
                                </div>
                            </div>
                            <div id="PictureEnr">
                                {% if reploc.enrFilenamePict %}
                                    <a href="{{ absolute_url(asset('uploads/reploc/' ~ reploc.enrFilenamePict)) }}" target="_blank"><img src="{{ absolute_url(asset('uploads/reploc/' ~ reploc.enrFilenamePict)) }}" style="max-width: 150px; margin-top: 10px;"></a>
                                {% endif %}
                                <div style="display: inline-flex; margin-left: 10px;">
                                    <div>
                                        <label >Modifier la photo : </label> </br>
                                        {{ form_widget(form.pictureEnr)}}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Événement : </label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.evenement, {'attr' : { 'id' : 'evenement', 'style' : 'margin-left: 50px; width: 60px; padding-right: 0;' }}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Détail de l'événement : </label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.evenementText, {'attr' : {'style' : 'height: 80px; resize: none;'}}) }}
                                </div>
                            </div>
                        </div>
                    </div>

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

                            <div class="form-group row">
                                <label class="col-12">Date du diagnostic</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.dateDiagnostic, {'attr' : {'style' : 'border: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Intervenant</label>
                                <div class="col-12" style="display: inline-flex">
                                    {{ form_widget(form.diagnosticIntervenant, {'attr' : { 'style' : 'width: 200px;'}})}}
                                </div>
                            </div>
                            <div style="display: flex; flex-wrap: wrap;">
                                <div class="form-group row" style="width: 316px; margin-right: 16px">
                                    <label class="col-12">Durée</label>
                                    <div class="col-12" style="display: inline-flex">
                                        <div style="display: flex; margin-right: 8px;">
                                            {{ form_widget(form.diagnostic_duration_hour, {'attr' : {'style' : 'width: 44px; padding-right: 0;' }}) }}
                                            <span style="position: relative; top: 7px">heures</span>
                                        </div>
                                        <div style="display: flex;">
                                            {{ form_widget(form.diagnostic_duration_minute, {'attr' : {'style' : 'width: 55px; padding-right: 0;' }}) }}
                                            <span style="position: relative; top: 7px">minutes</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12" for="reploc_diagnostic_diagnosticNumAffaire">Numéro affaire</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.diagnosticNumAffaire, {'attr' : {'style' : 'height: 50px; resize: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Date de réception matériel</label>
                                <div class="col-12" style="display: inline-flex">
                                    {{ form_widget(form.diagnosticDateRecMat, {'attr' : {'style' : 'border: none;' }}) }}
                                </div>
                            </div>
                            <div id="PictureDiag">
                                {% if reploc.diagFilenamePict %}
                                    <a href="{{ absolute_url(asset('uploads/reploc/' ~ reploc.diagFilenamePict)) }}" target="_blank"><img src="{{ absolute_url(asset('uploads/reploc/' ~ reploc.diagFilenamePict)) }}" style="max-width: 150px; margin-top: 10px;"></a>
                                {% endif %}
                                <div style="display: inline-flex; margin-left: 10px; margin-bottom: 1em;">
                                    <div>
                                        <label >Modifier la photo : </label> </br>
                                        {{ form_widget(form.diagnosticPictureArticle)}}
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Test du fonctionnement du matériel à l'arrivée</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.diagnosticTestFonctMat, {'attr' : {'style' : 'height: 80px; resize: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Défauts constatés</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.diagnosticDefaultNoted, {'attr' : {'style' : 'height: 80px; resize: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Proposition de réparation</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.diagnosticPropRep, {'attr' : {'style' : 'height: 80px; resize: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Calibration</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.diagnosticCalibYesNo, {'attr' : { 'id' : 'CalibSelect', 'style' : 'margin-left: 50px; width: 60px; padding-right: 0;' }}) }}
                                </div>
                            </div>
                            <div id="CalibText" class="form-group row">
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.diagnosticCalibText, {'attr' : {'style' : 'height: 80px; resize: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Conclusion du diagnostic</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.diagnosticConclusionDiag, {'attr' : {'style' : 'height: 80px; resize: none;'}}) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-section">
                        <div class="head">Fournisseur</div>
                        <div class="body">
                            <div class="form-group row">
                                <label class="col-12">Nom du fournisseur</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.four_name) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Date d'envoi chez le fournisseur</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.date_envoi_four, {'attr' : {'style' : 'border: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Date du retour fournisseur</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.date_retour_four, {'attr' : {'style' : 'border: none;'}}) }}
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Commentaire du diagnostic fournisseur</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.commentaire_retour_four) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if reploc.isStatusTermine %}
                    <div class="form-section">
                        <div class="head">Terminer</div>
                        <div class="body">
                            {% if reploc.getDateRemiseLoc %}
                                <div class="form-group row">
                                    <label class="col-12">Date de remise en location</label>
                                    <div class="col-12" style="display: block">
                                        {{ form_widget(form.dateRemiseLoc, {'attr' : {'style' : 'border: none;'}}) }}
                                    </div>
                                </div>
                            {% else %}
                                {{ form_widget(form.dateRemiseLoc, {'attr' : {'style' : 'display: none;'}}) }}
                            {% endif %}
                            <div class="form-group row">
                                <label class="col-12">Commentaire de fin</label>
                                <div class="col-12" style="display: block">
                                    {{ form_widget(form.commentaire_fin) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                        {{ form_widget(form.dateRemiseLoc, {'attr' : {'style' : 'display: none;'}}) }}
                        {{ form_widget(form.commentaire_fin, {'attr' : {'style' : 'display: none;'}}) }}
                    {% endif %}
                </div>
                <div class="modal-footer" style="display: flex; justify-content: space-between; flex-wrap: wrap;">
                    <div class="left">
                        <button type="button" id="btn-modal-reploc-delete" class="btn btn-danger" data-toggle="modal" data-target="#modal-large-delete" style="margin-right: 15px;">Supprimer la RepLoc</button>
                    </div>
                    <div class="right" style="display: flex; flex-wrap: wrap;">
                        <button type="button" class="btn btn-secondary" id="btn-submit-reploc-form" onclick="closeForm()">Annuler</button>
                        <button type="submit" class="btn btn-primary" id="btn-submit-reploc-form" style="margin-left: 16px;"><i style="margin-right: 8px" class="fa fa-check"></i>Mettre à jour la RepLoc</button>
                    </div>
                </div>
            </div>
            {{ form_end(form) }}
        </div>

    {% else %}

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

    {% endif %}
{% endblock %}

{% block modal %}
    <input id="delete-reploc-url" type="hidden" value="{{ path('delete_reploc') }}?id={{ reploc.id }}">

    <div class="modal" id="modal-large-delete" 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>Etes vous sûr de vouloir supprimer definitivement cette Rep Loc et les fichiers qui lui sont associés ?</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-modal-reploc-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-danger" onclick="deleteRepLoc()" id="btn-update-reploc-create">Supprimer</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
            $('#reploc-contact-form input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    return false
                }
            });

            if ($('#reploc_admin_diagnosticCalibYesNo').val() === 'Oui') {
                $('#CalibText').show();
            }
            else
                $('#CalibText').hide();
            $('#reploc_admin_diagnosticCalibYesNo').bind('change', function(event) {
                if(this.value === "Oui") {
                    $('#CalibText').show();
                }
                else if(this.value === "Non" || this.value === "") {
                    $('#reploc_admin_diagnosticCalib').val(' ');
                    $('#CalibText').hide();
                }
            })
        });

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

        function closeForm() {
            redirect($('#reploc-list-url').val());
        }

        function deleteRepLoc(){
            $.ajax({
                url: $('#delete-reploc-url').val(),
                type: 'GET',
                data: {
                },
                success: function(data){
                    closeForm();
                }
            });
        }

    </script>
{% endblock %}