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

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

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

    </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' : 'rmaForm', 'class' : 'spinner_form form-inline'}}) }}

            <a type="button" name="menu" class="btn" href="{{ path('douchette_menu') }}"  style="padding: 2px;">
                <span style="vertical-align: -webkit-baseline-middle;">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 RMA trouvée</h4>

                {% elseif status == 'ok' %}

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

                    <!-- info générales -->
                    <div class="main-info-container">
                        <div class="row">
                            <div class="label">Référence RMA :</div>
                            <div class="value">{{ rma.code }}</div>
                        </div>
                        <div class="row">
                            <div class="label">Statut actuel :</div>
                            <div class="value">{{ rma.displayStatus }}</div>
                        </div>
                        <div class="row">
                            <div class="label">Client :</div>
                            <div class="value">{{ rma.clientName }}</div>
                        </div>
                        <div class="row">
                            <div class="label">Matériel :</div>
                            <div class="value">{% if rma.articleDesignation == '' %}INCONNU{% else %}{{ rma.articleDesignation }}{% endif %}</div>
                        </div>
                        <div class="row">
                            <div class="label">Référence matériel :</div>
                            <div class="value">{% if rma.articleCode == '' %}INCONNU{% else %}{{ rma.articleCode }}{% endif %}</div>
                        </div>
                    <div class="row">
                        <div class="label">Date prévisionnelle de réparation :</div>
                        <div class="value">{% if rma.datePlanifRepar != null %}{{ rma.datePlanifRepar| date("d/m/Y") }}{% endif %}</div>
                    </div>
                    </div>

                    <!-- Actions générales -->
                        <input type="hidden" id="reception-url" value="{{ path('rma_reception') }}">
                        <input type="hidden" id="terminer-url" value="{{ path('rma_end') }}">

                        <div class="action-container">
                            {% if rma.isStatusNull and rma.contactFormDate != null %}
                                <button type="button" id="btn-modal-confirm-reception" data-toggle="modal" data-target="#modal-large-confirm-reception" class="btn btn-primary monitoring-btn" onclick="redirect('{{ path('rma_reception') }}?id={{ rma.getId }}')">Réception du matériel</button>
                            {% endif %}
                        </div>

                    {% if rma.isStatusNull == false %}
                        <div class="main-action-container">

                            {% if rma.isStatusNull == false and rma.isStatusZero == false and rma.isStatusTermine == false %}
{#                                <button type="button" class="btn btn-secondary main-action-btn" style="margin-right: 16px" onclick="redirect('{{ path('rma_diagnostic_form') }}?id={{ rma.getId }}')">Modifier le diagnostic</button>#}
                            {% endif %}
                            <button type="button" class="btn btn-secondary main-action-btn" onclick="redirect('{{ path('rma_files') }}?redirect=monitoring&id={{ rma.getId }}')">Gérer les fichiers</button>
                        </div>
                    {% endif %}

                    <div class="action-container">

                        {% if rma.contactFormDate == null %}

                            <h4>Le contact n'a pas encore remplit le formulaire</h4>

                        {% elseif rma.isStatusNull and rma.contactFormDate != null %}

                            <button type="button" id="btn-modal-confirm-reception" data-toggle="modal" data-target="#modal-large-confirm-reception" class="btn btn-primary monitoring-btn" onclick="redirect('{{ path('rma_reception') }}?id={{ rma.getId }}')">Réception du matériel</button>

                        {% endif %}

                    </div>

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

        $('#rma_search_search').focus();
        $('#rma_search_search').select();

        // detect enter keypress
        $('#rma_search_search').click(function(e) {
            $('#rma_search_search').select();
        });

        $('.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
            $('#rma-contact-form input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    return false
                }
            });
        });

        function reception() {
            $.ajax({
                url: $('#reception-url').val(),
                type: 'GET',
                data: {
                    'rmaId': $('#rma-id').val()
                },
                success: function(data){
                    document.location.reload();
                }
            });
        }

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

    </script>

{% endblock %}