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

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

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

        .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;
        }
        .modal-footer {
            padding: 16px 16px 4px 16px;
        }
        .modal-footer>:not(:first-child) {
            margin-left: 16px;
        }
        .modal-footer .btn{
            margin-bottom: 12px;
        }
    </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-monitoring-url" value="{{ path('douchette_search_reploc') }}/?searchString={{ reploc.code }}">

    {% if status == 'submit' %}

        <script>window.location.href = "{{ path('reploc_list') }}"</script>

    {% elseif status == 'ok' %}

        <div id="message-after-submit" style="display: none">
            <h5><i style="margin-right: 8px" class="fa fa-check"></i> Le diagnostic a bien été envoyé</h5>
        </div>

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

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

            <div class="block block-themed block-transparent mb-0">
                <div class="block-header">
                    <h3 style="font-size: 18px;" class="block-title">Formulaire Diagnostic</h3>
                </div>
                <div class="block-content">
                    <div style="display: flex; flex-wrap: wrap;">
                        <div class="col-12" style="display: inline-flex; padding: 0;">
                            <div class="col-6" style="display: flex; flex-direction: column">
                                <div class="form-group row">
                                    <label class="col-12">Date de création<span class="required-input-sign">*</span></label>
                                    <div class="col-12" style="display: inline-flex">
                                        {{ form_widget(form.dateDiagnostic, {'attr' : {'style' : 'border: none;' }}) }}
                                    </div>
                                </div>
                                <div class="form-group row" style="width: 316px; display: block; margin-left: 0.5em;">
                                    <label class="col-12" style="padding: 0;">Durée <span class="required-input-sign">*</span></label>
                                    <div class="col-12" style="display: inline-flex">
                                        <div style="display: flex; margin-right: 8px;">
                                            {{ form_widget(form.diagnosticDurationHour, {'attr' : {'style' : 'width: 44px; padding-right: 0;' }}) }}
                                            <span style="position: relative; top: 7px">heures</span>
                                        </div>
                                        <div style="display: flex;">
                                            {{ form_widget(form.diagnosticDurationMinute, {'attr' : {'style' : 'width: 58px; padding-right: 0;' }}) }}
                                            <span style="position: relative; top: 7px">minutes</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row diagnostic-intervenant col-6" style="width: 316px; display: block;">
                                <label class="col-12" for="reploc_diagnostic_diagnosticIntervenant">Intervenant <span class="required-input-sign">*</span></label>
                                <div class="col-12" style="display: inline-flex">
                                    {{ form_widget(form.diagnosticIntervenant) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-12">
                            <label for="reploc_diagnostic_type">Type<span class="required-input-sign">*</span></label>
                            <div style="margin-left: 15px; display: flex;">
                                {{ form_widget(form.type, {'attr' : { 'id' : 'CalibSelect', 'style' : 'margin-left: 50px; width: 150px; padding-right: 0;' }}) }}
                            </div>
                        </div>
                    </div>
                    <div id="form-rep" style="display: none">
                        <div class="form-group row">
                            <label class="col-12" for="reploc_diagnostic_diagnosticNumAffaire">Numéro affaire<span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.diagnosticNumAffaire, {'attr' : {'style' : 'height: 46px; resize: none; width: 50%;'}}) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12">Date de réception matériel<span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: inline-flex">
                                {{ form_widget(form.diagnosticDateRecMat, {'attr' : {'style' : 'border: none;' }}) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12" for="reploc_diagnostic_diagnosticPictureArticle">Photo<span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.diagnosticPictureArticle, {'attr' : {'style' : 'height: 46px; resize: none; width: 50%;'}}) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12" for="reploc_diagnostic_diagnosticTestFonctMat">Test du fonctionnement du matériel à l'arrivée<span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.diagnosticTestFonctMat, {'attr' : {'style' : 'height: 100px; resize: none;'}}) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12" for="reploc_diagnostic_diagnosticDefaultNoted">Défauts constatés<span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.diagnosticDefaultNoted, {'attr' : {'style' : 'height: 100px; resize: none;'}}) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-12" for="reploc_diagnostic_diagnosticPropRep">Proposition de réparation<span class="required-input-sign">*</span></label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.diagnosticPropRep, {'attr' : {'style' : 'height: 100px; resize: none;'}}) }}
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label for="reploc_diagnostic_diagnosticCalibYesNo">Calibration<span class="required-input-sign">*</span></label>
                                <div style="margin-left: 15px; display: flex;">
                                    {{ form_widget(form.diagnosticCalibYesNo, {'attr' : { 'id' : 'CalibSelect', 'style' : 'margin-left: 50px; width: 65px; padding-right: 0;' }}) }}
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <div class="CalibText" class="col-12" style=" display: none; width: 100%;">
                                    <label for="reploc_diagnostic_diagnosticCalibText">Détail de la calibration</label>
                                    {{ form_widget(form.diagnosticCalibText, {'attr' : { 'style' : 'height: 100px; resize: none;'}}) }}
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-12" for="reploc_diagnostic_diagnosticConclusionDiag">Conclusion du diagnostic</label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.diagnosticConclusionDiag, {'attr' : {'style' : 'height: 100px; resize: none;'}}) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer" 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"><i style="margin-right: 8px" class="fa fa-check"></i>Valider le diagnostic</button>
        </div>

        {{ form_end(form) }}

    {% elseif status == 'notOk' %}

        <h4>Cette REP/CAL LOC ne nécessite pas de diagnostic</h4>

    {% else %}

        <h4>Aucune REP/CAL LOC trouvée</h4>

    {% endif %}
{% endblock %}

{% block modal %}
{% 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() {
            if ($('#rep_loc_diagnostic_diagnosticCalibYesNo').val() === 'Oui') {
                $('.CalibText').show();
            }
            $('#rep_loc_diagnostic_diagnosticCalibYesNo').bind('change', function(event) {
                if(this.value === "Oui") {
                    if ($('#rep_loc_diagnostic_diagnosticCalibText').val() === 'non') {

                        $('#rep_loc_diagnostic_diagnosticCalibText').val('');
                        $('.CalibText').show();
                    }
                    else {
                        $('.CalibText').show();
                    }
                }
                else if(this.value === "Non" || this.value === "") {
                    $('#rep_loc_diagnostic_diagnosticCalibText').val('non');
                    $('.CalibText').hide();
                }
            })

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

        });

        $('#rep_loc_diagnostic_type').bind('change', function (event){
            if (this.value === "rep") {
                $('#form-rep').css('display', 'block');
                $("#rep_loc_diagnostic_diagnosticNumAffaire").attr("required",true);
                $("#rep_loc_diagnostic_diagnosticDateRecMat").attr("required",true);
                $("#rep_loc_diagnostic_diagnosticPictureArticle").attr("required",true);
                $("#rep_loc_diagnostic_diagnosticTestFonctMat").attr("required",true);
                $("#rep_loc_diagnostic_diagnosticDefaultNoted").attr("required",true);
                $("#rep_loc_diagnostic_diagnosticPropRep").attr("required",true);
                $("#rep_loc_diagnostic_diagnosticCalibYesNo").attr("required",true);
            } else {
                $('#form-rep').css('display', 'none');
                $("#rep_loc_diagnostic_diagnosticNumAffaire").attr("required",false);
                $("#rep_loc_diagnostic_diagnosticDateRecMat").attr("required",false);
                $("#rep_loc_diagnostic_diagnosticPictureArticle").attr("required",false);
                $("#rep_loc_diagnostic_diagnosticTestFonctMat").attr("required",false);
                $("#rep_loc_diagnostic_diagnosticDefaultNoted").attr("required",false);
                $("#rep_loc_diagnostic_diagnosticPropRep").attr("required",false);
                $("#rep_loc_diagnostic_diagnosticCalibYesNo").attr("required",false);
            }
        })


        function closeForm() {
            window.location.href = "{{ path('reploc_list') }}";
        }

    </script>
{% endblock %}