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

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

{% block title %}
    {{ parent() }}
    REP/CAL LOC 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-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_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 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 == 'ok' %}

        <div id="main-block" class="block">
            {{ form_start(form, {'attr' : {'id' : 'reploc-termine-form', 'autocomplete' : 'off'}}) }}
            {{ form_widget(form.repLocResFinal, {'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 REP/CAL LOC</h3>
                </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: 50%;'}}) }}
                            </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 id="file-irrep" class="form-group row" style="display: none; margin-top: 1em;">
                            <label class="col-12" >Fiche de vie : </label>
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.repLocFilesIrrep) }}
                            </div>
                        </div>
                        <div id="file-rep" class="form-group row" style="display: none; margin-top: 1em;">
                            {% if reploc.isCal %}
                                <label class="col-12">Certificat : <span class="required-input-sign">*</span></label>
                            {% else %}
                                <label class="col-12">Certificat : </label>
                            {% endif %}
                            <div class="col-12" style="display: block">
                                {{ form_widget(form.repLocFilesRep) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeForm()">Annuler</button>
                <button type="button" class="btn btn-primary" onclick="buttonEndRepLoc()"><i class="fa fa-check"></i> Valider</button>
            </div>
            {{ form_end(form) }}
        </div>

    {% elseif status == 'submit' %}

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

    {% else %}

        <h4> Aucune REP/CAL LOC 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() {

        });

        function displayComment(button) {
            var status = "{{ reploc.getType }}";
            if (button === "repfour") {
                $('#rep_loc_end_commentaireFin').val('Matériel réparé par le fournisseur.');
                $('#date-remise-loc-reploc-form').css('display', 'block');
                $("#rep_loc_end_repLocFilesIrrep").attr("required",false);
                if ( status == "CALLOC" ) {
                    $("#rep_loc_end_repLocFilesRep").attr("required", true);
                }
                $('#file-rep').css('display', 'block');
                $('#file-irrep').css('display', 'none');
                $("#rep_loc_end_repLocResFinal").val('repfour');
            }
            else if (button === "irrep") {
                $('#rep_loc_end_commentaireFin').val('Matériel irréparable.');
                $('#date-remise-loc-reploc-form').css('display', 'none');
                $("#rep_loc_end_repLocFilesRep").attr("required",false);
                $("#rep_loc_end_repLocFilesIrrep").attr("required",false);
                $('#file-irrep').css('display', 'block');
                $('#file-rep').css('display', 'none');
                $("#rep_loc_end_repLocResFinal").val('irrep');
            }
            else if (button === "repintern") {
                $('#rep_loc_end_commentaireFin').val('Matériel réparé en interne.');
                $('#date-remise-loc-reploc-form').css('display', 'block');
                $("#rep_loc_end_repLocFilesIrrep").attr("required",false);
                if ( status == "CALLOC" ) {
                    $("#rep_loc_end_repLocFilesRep").attr("required", true);
                }
                $('#file-rep').css('display', 'block');
                $('#file-irrep').css('display', 'none');
                $("#rep_loc_end_repLocResFinal").val('repintern');
            }
        }

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

        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.')
            }
        }

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

    </script>
{% endblock %}