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

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

{% block title %}
    {{ parent() }}
    Reception 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>

        .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>: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-rma-form" onclick="closeForm()">Retour page précédente</button>
{% endblock %}

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

    <input type="hidden" id="rma-monitoring-url" value="{{ path('douchette_search_rma') }}/?searchString={{ rma.code }}">

    {% if status == 'submit' %}

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

    {% elseif status == 'ok' %}

        <div id="message-after-submit" style="display: none">
            <h5><i style="margin-right: 8px" class="fa fa-check"></i> La réception du matériel à bien été enregistrée</h5>
        </div>

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

            {{ form_start(form, {'attr' : {'id' : 'rma-reception-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 Réception du Matériel</h3>
                </div>
                <div class="block-content">
                    <div class="reception-group row reception-intervenant-all" style="display: none;">
                        <div class="col-12">
                            <label for="douchette_reception_materiel_receptionIntervenant">Intervenant réception<span class="required-input-sign">*</span></label>
                            <div style="display: block">
                                {{ form_widget(form.receptionIntervenantAll, {'attr' : { 'style' : 'width: 200px;'}})}}
                            </div>
                        </div>
                    </div>
                    <div class="reception-group row reception-intervenant-actif"  style="display: none;">
                        <div class="col-12">
                            <label for="douchette_reception_materiel_receptionIntervenantActif">Intervenant réception<span class="required-input-sign">*</span></label>
                            <div style="display: block">
                                {{ form_widget(form.receptionIntervenantActif, {'attr' : { 'style' : 'width: 200px;'}})}}
                            </div>
                        </div>
                    </div>
                    <div class="reception-group row" style="margin-top: 25px;">
                        <div class="col-12">
                            <label for="douchette_reception_materiel_receptionExt">État extérieur du colis : <span class="required-input-sign">*</span></label>
                            <div style="display: block; ">
                               {{ form_widget(form.receptionExt, {'attr' : { 'style' : 'width: 150px;'}})}}
                            </div>
                        </div>
                    </div>
                    <div class="reception-group row" >
                        <div class="col-12">
                            <div class="PictureExt" class="col-12" style="display: block;">
                            <label style="margin-top: 10px;">Photo état extérieur du colis : <span class="required-input-sign">*</span></label>
                                <div>
                                    {{ form_widget(form.pictureExt) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="reception-group row">
                        <div class="col-12" id="div_PacketInt" style="margin-top: 70px;">
                            <label for="douchette_reception_materiel_receptionInt">État du matériel à l'intérieur du colis : <span class="required-input-sign">*</span></label>
                            <div style="display: block;">
                                {{ form_widget(form.receptionInt, {'attr' : { 'style' : 'width: 150px;'}})}}
                            </div>
                        </div>
                    </div>
                    <div class="reception-group row">
                        <div class="col-12">
                            <div class="PictureInt" class="col-12" style="display: block">
                                <label style="margin-top: 10px;">Photo état du matériel à l'intérieur du colis : <span class="required-input-sign">*</span></label>
                                <div>
                                    {{ form_widget(form.pictureInt) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="reception-group row">
                        <div class="col-12" id="div_PacketAcc" style="margin-top: 70px;" >
                            <label for="douchette_reception_materiel_receptionAcc">Accessoires présents dans le colis : <span class="required-input-sign">*</span></label>
                            <div style="display: block;">
                                {{ form_widget(form.receptionAcc, {'attr' : { 'style' : 'width: 150px;'}})}}
                            </div>
                        </div>
                    </div>
                    <div class="reception-group row" style="margin-bottom: 50px;">
                        <div class="col-12">
                            <div class="PictureAcc" class="col-12" style="display: block">
                                <label style="margin-top: 10px;">Photo accessoires présents dans le colis : <span class="required-input-sign">*</span></label>
                                <div>
                                    {{ form_widget(form.pictureAcc) }}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal-footer" style="display: flex; flex-wrap: wrap;">
            <button type="submit" class="btn btn-primary"><i style="margin-right: 8px" class="fa fa-check"></i>Valider la Réception du Matériel</button>
        </div>

        {{ form_end(form) }}
        </div>

    {% elseif status == 'notOk' %}

        <h4>Cette RMA ne nécessite pas de réception</h4>

    {% else %}

        <h4>Aucune RMA 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 ($('#douchette_reception_materiel_receptionExt').val() === '' || $('#douchette_reception_materiel_receptionExt').val() === 'Correct') {
                $('.PictureExt').hide();
            }
            if ($('#douchette_reception_materiel_receptionInt').val() === '' || $('#douchette_reception_materiel_receptionInt').val() === 'Correct') {
                $('.PictureInt').hide();
            }
            $('#douchette_reception_materiel_receptionExt').bind('change', function (event){
                if (this.value === "Pas Correct") {
                    $("#douchette_reception_materiel_pictureExt").attr("required","required");
                    $('.PictureExt').show();
                } else {
                    $("#douchette_reception_materiel_pictureExt").removeAttr("required")
                    $('.PictureExt').hide();
                }
            })
            $('#douchette_reception_materiel_receptionInt').bind('change', function (event){
                if (this.value === "Pas Correct") {
                    $("#douchette_reception_materiel_pictureInt").attr("required","required");
                    $('.PictureInt').show();
                } else {
                    $("#douchette_reception_materiel_pictureInt").removeAttr("required")
                    $('.PictureInt').hide();
                }
            })
            var isBm = "{{ isBm }}";
            if (!isBm) {
                $(".reception-intervenant-actif").css("display","block");
                $("#douchette_reception_materiel_receptionIntervenantActif").attr("required","required");
            }
            else {
                var bmActif = "{{ bmActif }}";
                if (bmActif) {
                    $(".reception-intervenant-actif").css("display","block");
                    $("#douchette_reception_materiel_receptionIntervenantActif").attr("required","required");
                }
                else {
                    $(".reception-intervenant-all").css("display","block");
                    $("#douchette_reception_materiel_receptionIntervenantAll").attr("required","required");
                }
            }
        });

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

    </script>
{% endblock %}