{% if environnement == 'recette' or environnement == 'preproduction' or environnement == 'production' and user.is_administrateur or environnement == 'production' and user.is_admin_franchise %}
<div id="macaron_retour">
    <img src="https://revolucy.fr/wp-content/uploads/2024/12/icone-retour.png" alt="Besoin d'aide ?">
</div>
<div id="popup_retour" style="display: none;">
    <div>
        <span id="close_popup" style="cursor: pointer;">&times;</span>
        <form id="retour_client_form" method="post" enctype="multipart/form-data" action="{% url 'retour_client:retour_client_form' %}">
            {% csrf_token %}
            <h4>Ajouter un bug</h4>
            {% if environnement == 'production' and jrs_restant_garantie < 0 %}
                <span class="solde_ticket {% if solde_ticket < 1 %}solde_faible{% endif %}">{{ solde_ticket }} h de crédit disponible</span>
                {% if solde_ticket < 1 %}
                    <a href="https://app.lucy-crm.fr/sav/souscription-client-ticket/{{ siren_client }}" target="_blank" style="background: #0818af;color: #FFF;text-align: center;display: block;width: 100%;padding: 9px 0 6px 0;margin-bottom: 10px;border-radius: 5px;font-weight: bold;">Souscrire à un pack de ticket de 10H</a>
                {% endif %}
            {% endif %}
            <div>
                <label for="{{ form_bug.priorite.id_for_label }}">Priorité</label>
                {{ form_bug.priorite }}
                {% if form_bug.priorite.errors %}
                {% for error in form_bug.priorite.errors %}
                <p class="erreur">{{ error|escape }}</p>
                {% endfor %}
                {% endif %}
            </div>
            <div>
                <label for="{{ form_bug.titre.id_for_label }}">Titre</label>
                {{ form_bug.titre }}
                {% if form_bug.titre.errors %}
                {% for error in form_bug.titre.errors %}
                <p class="erreur">{{ error|escape }}</p>
                {% endfor %}
                {% endif %}
            </div>
            <div>
                <label for="{{ form_bug.description.id_for_label }}">Description</label>
                {{ form_bug.description }}
                {% if form_bug.description.errors %}
                {% for error in form_bug.description.errors %}
                <p class="erreur">{{ error|escape }}</p>
                {% endfor %}
                {% endif %}
            </div>
            <input type="hidden" id="lien_url" name="lien_url">
            <input type="hidden" id="navigateur" name="navigateur">
            <input type="hidden" id="image" name="image">
            <div id="retour_message" style="display: none; color: green;"></div>
            <button type="submit" class="mt-3 submit-retour">Envoyer</button>
            <a href="{% url 'retour_client:pipeline_retours' %}" target="_blank" class="mt-3 btn-plus-bug">Voir toute la liste</a>
        </form>
    </div>
</div>
<style>

    table.retour_bug_table td {
      border: 1px solid #969696;
      padding: 5px;
    }

    .solde_ticket.solde_faible {
      background: #ff6c6c;
    }

    table.retour_bug_table tr > td:first-child {
      background: #e6e6e6;
    }

    #accordionBug .accordion-header button.collapsed {
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
    }

    #accordionBug .accordion-header button {
        background: #e6e6e6;
        padding: 7px 10px;
        color: #000;
    }

    #accordionBug .accordion-collapse {
        padding-bottom: 5px;
    }

    .solde_ticket {
        background: #1416aa;
        width: 100%;
        display: block;
        padding: 3px;
        text-align: center;
        margin-bottom: 8px;
        border-radius: 6px;
        color: #fff;
    }

    #macaron_retour > img {
        max-width: 60px;
    }

        #macaron_retour {
            position: fixed;
            bottom: 100px;
            right: 0px;
            cursor: pointer;
            z-index: 999;
        }

        span.repondant {
            position: absolute;
            right: 10px;
            font-size: 15px;
        }

        #popup_retour {
            position: fixed;
            bottom: 100px;
            right: -1px;
            width: 450px;
            background: white;
            border: 2px solid #e63363;
            border-radius: 15px 0 0 15px;
            padding: 20px;
            z-index: 9999;
            max-width: 95%;
        }

        #close_popup {
            position: absolute;
            font-size: 1.5em;
            right: 10px;
            top: 5px;
        }

        #retour_client_form select, #retour_client_form textarea, #retour_client_form input {
            width: 100%;
            margin-bottom: 15px;
            border-radius: 5px;
            padding: 5px 10px;
            border: 2px solid #c5c5c5;
        }

        #retour_client_form h4 {
            text-align: center;
            text-transform: uppercase;
            border-bottom: 1px solid;
            margin-bottom: 15px;
            padding-bottom: 15px;
            font-size: 22px;
        }

        #retour_client_form button.submit-retour {
            width: 100%;
            background: #e63363;
            color: #fff;
            border: none;
            padding: 5px;
            border-radius: 10px;
            text-transform: uppercase;
        }

        #retour_client_form button.submit-retour:hover {
            background: #000;
        }

        a.btn-plus-bug {
            width: 100%;
            background: #000;
            color: #fff;
            border: none;
            padding: 5px;
            border-radius: 10px;
            text-transform: uppercase;
        }

        a.btn-plus-bug:hover {
            background: #e63363;
        }

        #liste_retours .accordion-body {
            padding: 10px;
            font-size: 16px;
        }

        #retour_message {
            text-align: center;
            font-size: 14px;
            background: #dcdcdc;
            padding: 5px;
            margin-bottom: 10px;
            border-radius: 10px;
            width: 100%;
        }

        a.btn-plus-bug {
            display: block;
            text-align: center;
            margin-top: 10px;
        }

        span.num_ticket {
            background: #c5c5c5;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 3px;
            margin-right: 13px;
            font-size: 12px;
            color: #fff;
        }
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var macaron = document.getElementById('macaron_retour');
        var popup = document.getElementById('popup_retour');
        var closePopup = document.getElementById('close_popup');
        var form = document.getElementById('retour_client_form');
        var messageDiv = document.getElementById('retour_message');

        macaron.addEventListener('click', function () {
            popup.style.display = 'block';
            document.getElementById('lien_url').value = window.location.href;
            document.getElementById('navigateur').value = navigator.userAgent;
            takeScreenshot();
        });

        closePopup.addEventListener('click', function () {
            popup.style.display = 'none';
        });

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value,
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        messageDiv.style.display = 'block';
                        messageDiv.textContent = 'Bug envoyé à Revolucy';
                        form.reset();
                    } else {
                        console.log(data)
                        messageDiv.style.display = 'block';
                        messageDiv.style.color = 'red';
                        messageDiv.textContent = 'Erreur lors de la soumission';
                    }
                })
                .catch(error => {
                    messageDiv.style.display = 'block';
                    messageDiv.style.color = 'red';
                    messageDiv.textContent = 'Erreur lors de la soumission du formulaire';
                    console.error('Erreur:', error);
                });
        });

        function takeScreenshot() {
            // Obtenir la zone visible (viewport)
            var viewportWidth = window.innerWidth;
            var viewportHeight = window.innerHeight;

            html2canvas(document.body, {
                width: viewportWidth,
                height: viewportHeight,
                windowWidth: document.documentElement.clientWidth,
                windowHeight: document.documentElement.clientHeight
            }).then(function (canvas) {
                var maxWidth = 1000;
                var scale = maxWidth / canvas.width;

                // Redimensionner le canvas si nécessaire
                if (canvas.width > maxWidth) {
                    var resizedCanvas = document.createElement('canvas');
                    resizedCanvas.width = maxWidth;
                    resizedCanvas.height = canvas.height * scale;

                    var ctx = resizedCanvas.getContext('2d');
                    ctx.drawImage(canvas, 0, 0, resizedCanvas.width, resizedCanvas.height);

                    var dataURL = resizedCanvas.toDataURL('image/png');
                    document.getElementById('image').value = dataURL;
                } else {
                    // Si la largeur est déjà inférieure ou égale à maxWidth, utiliser le canvas original
                    var dataURL = canvas.toDataURL('image/png');
                    document.getElementById('image').value = dataURL;
                }

                // Réafficher les éléments masqués
                elementsToHide.forEach(selector => {
                    document.querySelector(selector).style.display = '';
                });
            });
        }

    });
</script>
{% endif %}