{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as popup %}
{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('install-bois/css/faq.css') ~ "?rnd=" ~ random() }}">
    {% if is_granted('ROLE_DEMO') %}
    <style>
        .content {
            padding: 0 !important;
        }
        @media screen and (max-width: 400px) {
            form {
                box-sizing: border-box !important;
                margin: 2rem 0 !important;
                padding: 1rem;
                width: 100% !important;
            }
        }
    </style>
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Contactez-nous
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div>
        <div style="margin-left: 20px">
            <h3>Besoin de nous contacter ?</h3>
            {% if not is_granted('ROLE_FABRICANT') and not is_granted('ROLE_REFERENT_FABRICANT') %}
                <h3>Choisissez votre interlocuteur, nous vous répondrons rapidement.</h3>
            {% endif %}
        </div>
        <div class="containerImgs">
            {% for key,card in cards %}
                <div class="containerImg" onclick="activeImg(this)" data-slug="{{ key }}">
                    <img src="{{ asset('install-bois/icon/faq/' ~ key ~ '.png') }}" alt="{{ key }}">
                </div>
            {% endfor %}
        </div>

{#        {% if not is_granted('ROLE_DEMO') %}#}
        <div class="containerImgQuestion">
            <div class="modal-body">
                <div class="form-group">
                    <label for="object" class="bold">Objet</label>
                    <select required class="form-control" id="object" aria-label="Default select example">
                        <option value="null" style="color:#d2d6de">-- Sélectionnez le type de produit --
                            {% for key,card in cards %}
                        <option onclick="activeImg(e)" data-slug="{{ key }}"
                                value="{{ key }}">{{ card.sentence }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="message" class="bold">Message</label>
                    <textarea type="text" class="form-control" id="message"></textarea>
                </div>
                <div>
                    <button id="send" type="button" class="boutonAction" onclick="sendTicket()">Envoyer</button>
                </div>
            </div>
            <div class="containerQuestion">
                <div class="containerPhone">
                    <img src="{{ asset('images/phone.svg') }}" class="phoneImg " alt="Phone">
                </div>
                <div>
                    <span>Une question sur l'utilisation de nos services ?</span>
                    <span class="bold">Nous restons à votre disposition au <a class="phone" href="tel:0972541679">09 72 54 16 79</a></span>
                </div>
            </div>
        </div>
{#        {% else %}#}
{#            <div style="background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,176,51,1) 30%, rgba(255,174,47,1) 70%, rgba(255,255,255,1) 100%); padding: 8rem 0;">#}
{#                <form action="{{ path('contact_us_send') }}" method="POST" style="display: grid; gap: 1rem; justify-items: center; margin: 2rem auto 0 auto; width: 50%;  ">#}
{#                    <div style="display: flex; gap: 1rem; width: 100%; flex-wrap: wrap">#}
{#                        <input name="name" type="text" placeholder="Nom" style="flex: 1; padding: .5rem" required>#}
{#                        <input name="society" type="text" placeholder="Société" style="flex: 1; padding: .5rem" required>#}
{#                    </div>#}
{#                    <div style="display: flex; gap: 1rem; width: 100%; flex-wrap: wrap">#}
{#                        <input name="tel" type="tel" placeholder="Téléphone" style="flex: 1; padding: .5rem" required>#}
{#                        <input name="email" type="email" placeholder="Email" style="flex: 1; padding: .5rem" required>#}
{#                    </div>#}
{#                    <div style="width: 100%">#}
{#                        <textarea name="message" placeholder="Message" style="width: 100%; padding: .5rem; resize: none" required></textarea>#}
{#                    </div>#}
{#                    <div style="width: 100%">#}
{#                        <button class="boutonAction" style="float: right; margin: 0; display: flex; gap: .4rem; justify-content: space-between; align-items: center">Envoyer <i class="fas fa-paper-plane"></i></button>#}
{#                    </div>#}
{#                </form>#}
{#            </div>#}
{#        {% endif %}#}
    </div>
    {{ popup.simple('info','Merci pour votre message. Il a bien été transmis, nous vous répondrons rapidement. À bientôt') }}
    {% if is_granted('ROLE_DEMO') %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
    <script type="text/javascript">
        let isFab = !!{{ (is_granted('ROLE_FABRICANT') or is_granted('ROLE_REFERENT_FABRICANT')) | raw | json_encode }};
        let slug = null;
        $(document).ready(function () {
            $('#object').select2();
            $('#object').on('change', function (event) {
                slug = $(this).val();
                $('.containerImg').addClass('disabledImg');
                $('.containerImg[data-slug="' + slug + '"]').removeClass('disabledImg');
            });
            $('#boutonOui').on('click', function () {
                $('#message').val('');
                $('#object').val('null').trigger('change');
                $('.containerImg').removeClass('disabledImg');
            });

            if (isFab) {
                $('#object').val('margot').trigger('change');
            }
        });

        function activeImg(e) {
            slug = $(e).data('slug');
            $('#object').val(slug).trigger('change');
        }

        function sendTicket() {
            $('#send').hide()
            let message = $('#message').val();
            let data = {
                "message": message,
                "slug": slug
            }
            $.ajax({
                url: "{{ path('contact_us_send') }}",
                type: "POST",
                contentType: "application/json",
                dataType: "JSON",
                data: JSON.stringify(data),
                success: function (response) {
                    if (response.success) {
                        $('#confirm-popup-info').modal('show');
                        $('#send').show()
                    } else {
                        createToast("danger", "Une erreur est apparue, veuillez réessayer");
                        $('#send').show()
                    }
                },
                error: function (err) {
                    createToast("danger", "Une erreur est apparue, veuillez réessayer");
                    $('#send').show()
                }
            });
        }
    </script>
{% endblock %}