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

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

{% block title %}
    {{ parent() }}
    RMA TERMINE
{% 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: 4px;
        }
        .input-rma {
            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_rma {
            margin: 5px 15px 20px 15px;
        }

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

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

        .no-certif-div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .no-certif-p {
           font-size: larger;
        }

    </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 }}">
{#    <input type="hidden" id="rma-certif-url" value="{{ path('certificat_rma') }}">#}

    {% if status == 'notCertif' %}
        <div id="main-block" class="block">
            <div class="block block-themed block-transparent mb-0">
                <div class="block-header">
                    <h3 style="font-size: 18px;" class="block-title">TERMINER RMA</h3>
                </div>
                <div class="block-content">
                    <div class="col-12 no-certif-div" >
                        <p class="no-certif-p">La rma {{ rma.code }} nécessite un certificat pour pouvoir être terminée</p>
                        <button type="button" class="btn btn-primary" style="margin-bottom: 2em" onclick="goToCertif({{ rma.id }})"><i class="fa fa-book" style="margin-right: 1em"></i>Générer le certificat</button>
                    </div>
                </div>
            </div>
        </div>
    {% elseif status == 'ok' %}

        <div id="main-block" class="block">
            {{ form_start(form, {'attr' : {'id' : 'rma-termine-form', 'autocomplete' : 'off'}}) }}
            {{ form_widget(form.state, {'attr' : { 'style' : 'display: none;'}})}}
            <div class="block block-themed block-transparent mb-0">
                <div class="block-header">
                    <h3 style="font-size: 18px;" class="block-title">TERMINER RMA</h3>
                </div>
                <div class="block-content">
                    <div class="form-section">
                        <div class="reception-group row terminer-intervenant-actif" style="display: none;">
                            <div class="col-12">
                                <label for="rma_end_terminerIntervenantActif">Intervenant terminer : <span class="required-input-sign">*</span></label>
                                <div style="display: block">
                                    {{ form_widget(form.terminerIntervenantActif, {'attr' : { 'style' : 'width: 200px;'}})}}
                                </div>
                            </div>
                        </div>
                        <div class="reception-group row terminer-intervenant-all" style="display: none;">
                            <div class="col-12">
                                <label for="rma_end_terminerIntervenantAll">Intervenant terminer : <span class="required-input-sign">*</span></label>
                                <div style="display: block">
                                    {{ form_widget(form.terminerIntervenantAll, {'attr' : { 'style' : 'width: 200px;'}})}}
                                </div>
                            </div>
                        </div>
                        <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' : {'class' : 'form-control', '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 type="button" class="btn btn-secondary" onclick="closeForm()">Annuler</button>
                <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i> Valider</button>
            </div>
            {{ form_end(form) }}
        </div>

    {% elseif status == 'submit' %}

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

    {% else %}

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

    {% endif %}
{% 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() {

            var isBm = "{{ isBm }}";
            if (!isBm) {
                $(".terminer-intervenant-actif").css("display","block")
                $("#rma_end_terminerIntervenantActif").attr("required","required");
            }
            else {
                var bmActif = "{{ bmActif }}";
                if (bmActif) {
                    $(".terminer-intervenant-actif").css("display","block")
                    $("#rma_end_terminerIntervenantActif").attr("required","required");
                }
                else {
                    $(".terminer-intervenant-all").css("display","block")
                    $("#rma_end_terminerIntervenantAll").attr("required","required");
                }
            }
        });

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

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

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

        function goToCertif(rmaId) {
            redirect()
        }

    </script>
{% endblock %}