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

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

{% block title %}
    {{ parent() }}
    Recherche REPLOC
{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
            height: 40px;
        }
        .modal-dialog .form-group {
            margin-bottom: 5px;
        }
        .modal-dialog .block-header {
            padding-top: 2px;
            padding-bottom: 2px;
        }
        .modal-dialog .block-content {
            padding-top: 5px;
        }

        .modal-dialog .form-control, .input-group-text {
            height: 30px;
        }
        .modal-dialog .btn-clear {
            height: 30px;
        }
        .modal-footer {
            display: block;
        }

        .nav-link.bl {
            background-color: aliceblue;
        }

        .modal-dialog input[type=radio] {
            width: 30px;
            -ms-transform: scale(2);
            -webkit-transform: scale(2);
            transform: scale(2);
        }
        .table-title {
            text-align: right;
            font-size: 11px;
            width: 80px;
        }
        .table-data {
            font-weight: 700;
            font-size: 13px;
            text-align: left;
        }
        @media (max-width: 770px) {
            .datepicker.datepicker-dropdown.dropdown-menu {
                top:65px!important;
                left:10px!important;
                width: 90%!important;
            }
        }
        .input-form-douchette {
            width: 155px!important;
            padding-left: 4px;
            padding-right: 4px;
        }
        input[readonly] {
            cursor: pointer !important;
            background-color: white !important;
        }
        @media screen and (min-width: 771px) {
            .display-desktop {
                display: inline;
            }
            .display-mobile {
                display: none;
            }
        }
        @media (max-width: 770px) {
            h4 {
                margin-bottom: 5px;
            }
            .display-desktop {
                display: none;
            }
            .display-mobile {
                display: inline;
            }
            .datepicker-inline {
                width: 100%;
            }

            .datepicker table {
                width: 100%;
            }
        }

        .main-info-container {
            background: #fff;
            padding-top: 4px;
            box-sizing: border-box;
            font-weight: 600;
            font-size: 16px;
        }
        .main-action-container {
            padding: 16px;
            box-sizing: border-box;
            font-weight: 600;
            font-size: 16px;
            display: flex;
            flex-wrap: wrap;
        }
        .main-action-btn {
            font-size: 18px;
            height: auto;
            padding: 12px 16px;
        }
        .action-container {
            padding: 0 20px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 600;
            margin-top: 24px;
        }
        .main-info-container .row {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 8px 20px;
            margin: 0;
            border-bottom: 2px solid #e4e7ed;
        }
        .main-info-container .row .label {
            width: 220px;
            opacity: 0.75;
        }
        .main-info-container .row .value {
        }
        .monitoring-btn {
            text-transform: uppercase;
            width: 100%;
            font-size: 18px;
            height: auto;
            padding: 32px 32px;
            margin-bottom: 24px;
        }
        h4 {
            text-align: left;
            margin-bottom: 0;
            font-size: 18px;
        }

        .info-retour-four {
            text-transform: uppercase;
            width: 100%;
            font-size: 18px;
            height: auto;
            padding: 32px 32px;
            color: #212529;
            background-color: #f0f2f5;
            border-radius: 0.25rem;
            border: 1px solid;
            border-color: #cbd2dd;
            text-align: center;
        }

        .info_end {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 1em;
        }

    </style>
{% endblock %}

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

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-content block-content-full" style="padding: 5px">

            {{ form_start(form, {'attr' : {'id' : 'repLocForm', 'class' : 'spinner_form form-inline'}}) }}

            <a type="button" name="menu" class="btn" href="{{ path('douchette_menu') }}"  style="padding: 2px; display: flex; align-items: center">
                <span >Menu</span>
            </a>

            {{ form_widget(form.search) }}

            <button type="submit" name="search" class="btn spinner_button" id="search-btn" style="padding: 2px;width: 70px;">
                <span>Valider</span>
            </button>

            {{ form_end(form) }}

        </div>

        {% if status != 'default' %}

            <div style="padding: 8px 0 24px 0">

                {% if status == 'notFound' %}

                    <h4 style="padding: 24px; font-size: 16px; font-weight: 600;">Aucune REPLOC trouvée</h4>

                {% elseif status == 'ok' %}

                    <input type="hidden" id="reploc-id" value="{{ reploc.getId }}">

                    <!-- info générales -->
                    <div class="main-info-container">
                        <div class="row">
                            <div class="label">Référence REPLOC :</div>
                            <div class="value">{{ reploc.code }}</div>
                        </div>
                        <div class="row">
                            <div class="label">Statut actuel :</div>
                            <div class="value">{{ reploc.displayStatus }}</div>
                        </div>
                        <div class="row">
                            <div class="label">Libellé article :</div>
                            <div class="value">{% if reploc.articleName == '' %}INCONNU{% else %}{{ reploc.articleName }}{% endif %}</div>
                        </div>
                        <div class="row">
                            <div class="label">Code article :</div>
                            <div class="value">{% if reploc.articleCode == '' %}INCONNU{% else %}{{ reploc.articleCode }}{% endif %}</div>
                        </div>
                        <div class="row">
                            <div class="label">Date prévisionnelle de réparation :</div>
                            <div class="value">{% if reploc.datePlanifRepar != null %}{{ reploc.datePlanifRepar| date("d/m/Y") }}{% else %}Aucune{% endif %}</div>
                        </div>
                        <div class="row">
                            <div class="label">Date de remise en location :</div>
                            <div class="value">{% if reploc.dateRemiseLoc != null %}{{ reploc.dateRemiseLoc| date("d/m/Y") }}{% else %}Aucune{% endif %}</div>
                        </div>
                    </div>
                    <input type="text" id="remise-loc-reploc" value="{{ path('reploc_remise_loc') }}" style="display: none">

                    <!-- Actions générales -->
                    {% if reploc.isStatusEnr %}
                        <div class="main-action-container">
                            <button type="button" class="btn btn-primary main-action-btn monitoring-btn" onclick="redirect('{{ path('reploc_diagnostic_form') }}?id={{ reploc.getId }}')">Remplir le diagnostic</button>
                            <button type="button" class="btn btn-secondary main-action-btn monitoring-btn" onclick="redirect('{{ path('reploc_files') }}?redirect=monitoring&id={{ reploc.getId }}')">Gérer les fichiers</button>
                        </div>
                    {% endif %}

                    {% if reploc.isStatusDiag or reploc.isStatusFourEnv or reploc.isStatusFourP %}
                        <div class="main-action-container">
                            <button type="button" class="btn btn-secondary main-action-btn" style="margin-right: 16px" onclick="redirect('{{ path('reploc_diagnostic_form') }}?id={{ reploc.getId }}')">Modifier le diagnostic</button>
                            <button type="button" class="btn btn-secondary main-action-btn" onclick="redirect('{{ path('reploc_files') }}?redirect=monitoring&id={{ reploc.getId }}')">Gérer les fichiers</button>
                        </div>
                        {% if reploc.isCal %}
                            {% if reploc.getHasCertif == "oui" %}
                                <div class="main-action-container">
                                    <button type="button" id="btn-modal-confirm-terminer" data-toggle="modal" data-target="#modal-large-confirm-terminer" onclick="redirect('{{ path('reploc_end') }}?repLocId={{ reploc.getId }}')" class="btn btn-danger main-action-btn monitoring-btn" >Terminer la RepLoc</button>
                               </div>
                            {% else %}
                                <div style="display: flex; flex-direction: column; align-items: center">
                                    <h4 class="info_end" style="margin-bottom: 1em; width: 100%; font-size: larger" >La CALLOC ne peut pas être terminée sans certificat</h4>
                                    <button type="button" id="btn-modal-confirm-terminer"  onclick="redirect('{{ path('certificat_reploc') }}?id={{ reploc.getId }}')" class="btn btn-success main-action-btn monitoring-btn" style="width: 80%;" >Générer un certificat</button>
                                </div>
                            {% endif %}
                        {% elseif reploc.isRep %}
                            {% if not reploc.isDiagnosticCalibYes or reploc.getHasCertif == "oui" %}
                                <div class="main-action-container">
                                    <button type="button" id="btn-modal-confirm-terminer" data-toggle="modal" data-target="#modal-large-confirm-terminer" onclick="redirect('{{ path('reploc_end') }}?repLocId={{ reploc.getId }}')" class="btn btn-danger main-action-btn monitoring-btn" >Terminer la RepLoc</button>
                                </div>
                            {% else %}
                                <div style="display: flex; flex-direction: column; align-items: center">
                                    <h4 class="info_end" style="margin-bottom: 1em; width: 100%; font-size: larger">La REPLOC ne peut pas être terminée sans certificat</h4>
                                    <button type="button" id="btn-modal-confirm-terminer"  onclick="redirect('{{ path('certificat_reploc') }}?id={{ reploc.getId }}')" class="btn btn-success main-action-btn monitoring-btn" style="width: 80%;" >Générer un certificat</button>
                                </div>
                            {% endif %}
                        {% endif %}
                    {% elseif isButtonLoc == 0 %}
                        <div class="main-action-container">
                            <button type="button" id="btn-modal-confirm-remise-loc" data-toggle="modal" data-target="#modal-large-confirm-remise-loc" onclick="remiseLocRedirect({{ reploc.getId }})" class="btn btn-success main-action-btn monitoring-btn" >Remise en location de l'article {{ reploc.getArticleCode }}</button>
                        </div>
                    {% elseif reploc.isStatusTermine %}
                        <h4 class="info_end" >La REPLOC est terminée</h4>
                    {% elseif reploc.isStatusIrrep %}

                        <h4 class="info_end">La REPLOC est irréparable</h4>

                    {% endif %}

                {% endif %}

            </div>

        {% endif %}

    </div>

{% 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">

        $('.spinner_form').submit(function() {
            $(this).find('.spinner_button').append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
            $(this).find('.spinner_button').css('pointer-events', 'none');
            $(this).find('.spinner_button').css('opacity', '0.5');
        });

        $(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
                }
            });
        });

        function redirect(url) {
            window.location.href = url;
        }

        function remiseLocRedirect(replocId) {
            $.ajax({
                url: $('#remise-loc-reploc').val(),
                type: 'GET',
                data: {
                    'repLocId': replocId
                },
                success: function(data){
                    window.location.reload();
                }
            });
        }

    </script>

{% endblock %}