{% import "forms-macro/popup.html.twig" as popup %}

<div class="container-fluid" style="padding-bottom: 0">
    <form id="updateEmail" style="margin-bottom: -2rem; margin-top: 1rem; display: none">
        <label for="email" style="color: #FC971F; font-weight: bold !important;">
            Adresse email pour ce client à renseigner :
            <input type="email" style="margin: 0 1rem; color: black; font-weight: normal" required>
        </label>
        <button class="boutonAction" type="submit">Valider</button>
        <p id="updateEmailMsg" style="color: #FC971F; font-weight: bold"></p>
    </form>
    <div class="row rubrique">
        <div class="rubrique_titre">
            <span>Communication</span>
        </div>
        {% if app.session.get('featuresAccess')['SEND_PROJECT_TO_CUSTOMER'] %}
            <form id="communicateCustomerForm" method="post" action="{{ path('project_send_documents') }}">
                <input type="hidden" name="projectId" value="{{ project.id }}">
                <div class="col-sm-12 col-md-12 col-lg-12" style="display: flex;flex-wrap: wrap;">
                    <div class="width100Smartphone" style="min-width: 400px">
                        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0">
                            <label for="mailObject" class="control-label">Objet du mail<span
                                        class="asterix">*</span></label>
                            <input required type="text" id="mailObject" name="mailObject" class="form-control">
                            <span id="mailObjectRequired" class="errorMessage" style="display: none;right: 0">
                                Le champ est obligatoire
                            </span>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12"
                             style="padding: 0;margin-top: 10px;display: flex;flex-direction: column;">
                            <label for="mailMessage" class="control-label">Message<span class="asterix">*</span></label>
                            <textarea required id="mailMessage" name="mailMessage" rows="6" cols="65"
                                      style="resize: none;"></textarea>
                            <span id="mailMessageRequired" class="errorMessage"
                                  style="display: none;right: 0;bottom: 0;">
                                Le champ est obligatoire
                            </span>
                        </div>
                        <p style="color: #7F7F7F !important;">
                            Signature : {{ app.user.firstName ~ " " ~ app.user.lastName }} votre technicien conseil de
                            la
                            société {{ app.user.agency.company.name }}
                        </p>
                        <div id="filesSelectedToSendDiv" class="col-sm-12 col-md-12 col-lg-12"
                             style="padding: 0;margin-top: 10px;"></div>
                    </div>
                    <div id="fileCheckboxListDiv" style="min-width: 300px;"
                         class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-sm-2 col-md-2 col-lg-2">
                        <h5 style="margin-top: 0;color: #7F7F7F !important;margin-left: -8%;">Document à joindre</h5>
                        {% set disabled = (app.session.get('featuresAccess')['MANAGE_DOCUMENT'] ? 'style="transform: scale(1.3);cursor: pointer;">' : 'disabled="disabled" style="transform: scale(1.3);cursor: not-allowed;">') %}
                        <input type="checkbox" id="devisAttachment" name="devisAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="devisAttachment">
                            Devis
                        </label>
                        <br>
                        <input type="checkbox" id="productDocAttachment" name="productDocAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="productDocAttachment">
                            Documentation produit
                        </label>
                        <br>
                        <input type="checkbox" id="pictureAttachment" name="pictureAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="pictureAttachment">
                            Photo
                        </label>
                        <br>
                        <input type="checkbox" id="otherAttachment" name="otherAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="otherAttachment">
                            Autre
                        </label>
                        <br>
                        <input type="checkbox" id="customerReportAttachment" class="reportCheck" data-report="customer"
                               data-name="Rapport Client"
                               name="customerReportAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label " for="customerReportAttachment">
                            Rapport Client
                        </label>
                        <br>
                        <input type="checkbox" id="installerReportAttachment" class="reportCheck"
                               data-name="Rapport Installateur"
                               data-report="installer"
                               name="installerReportAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="installerReportAttachment">
                            Rapport Installateur
                        </label>
                        <br>
                        <input type="checkbox" id="auditReportAttachment" class="reportCheck" data-report="audit"
                               data-name="Rapport audit expertise"
                               name="auditReportAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="auditReportAttachment">
                            Rapport audit expertise
                            <smaller style="font-size: 10px;" id="infoWetDry"></smaller>
                        </label>
                        <br>
                        <input type="checkbox" id="deperReportAttachment" class="reportCheck"
                               data-name="Livret déperdition thermique"
                               data-report="deperditionthermique"
                               name="deperReportAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="deperReportAttachment">
                            Livret déperdition thermique
                        </label>
                        <br>
                        <input type="checkbox" id="ramonReportAttachment" class="reportCheck"
                               data-name="Attestation de ramonage"
                               data-report="ramonage"
                               name="ramonReportAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="ramonReportAttachment">
                            Attestation d'entretien / ramonage
                        </label>
                        <select id="ramonSelect" style="display: none" class="form-control select2" name="ramonReports[]" multiple>
                            {% for key,dateReport in ramonageReports %}
                                <option value="{{ key }}">Rapport {{ dateReport }}</option>
                            {% endfor %}
                        </select>
                        <br>
                        <input type="checkbox" id="idConduitReportAttachment" class="reportCheck"
                               data-name="Id conduit"
                               data-report="idconduit"
                               name="idConduitReportAttachment" {{ disabled }}>
                        <label class="labelProjectCommunicate control-label" for="idConduitReportAttachment">
                            Id conduit
                        </label>
                    </div>
                    <div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-sm-2 col-md-2 col-lg-2">
                        <h5 style="margin-top: 0;color: #7F7F7F !important;margin-left: -8%;">Destinataire<span
                                    class="asterix">*</span></h5>
                        <input onclick="$('#otherDestMail').prop('disabled',true);" type="radio" id="customerDest"
                               name="receiver" style="transform: scale(1.3);cursor: pointer;" value="customer">
                        <label for="customerDest" class="control-label labelProjectCommunicate">
                            Client
                        </label>
                        <br>
                        <input onclick="$('#otherDestMail').prop('disabled',false);" type="radio" id="otherDest"
                               name="receiver" style="transform: scale(1.3);cursor: pointer;" value="other">
                        <label for="otherDest" class="control-label labelProjectCommunicate">
                            Autre
                        </label>
                        <input required type="text" id="otherDestMail" name="otherDestMail"
                               style="margin-left: 10%;margin-top: 2%;" disabled>
                        <span id="otherDestMailRequired" class="errorMessage"
                              style="display: none;right: 40px;margin-left: 33%;bottom: 0;white-space: nowrap;">
                            Le champ est obligatoire
                        </span>
                        <span id="otherDestMailInvalidRequired" class="errorMessage"
                              style="display: none;right: 40px;margin-left: 33%;bottom: 0;white-space: nowrap;">
                            L'adresse email est invalide
                        </span>
                        <span id="receiverRequired" class="errorMessage"
                              style="display: none;right: 40px;bottom: -36%;margin-left: 33%;white-space: nowrap;">
                            Vous devez sélectionner un choix au minimum
                        </span>
                        <br><br>
                        <input type="checkbox" id="shouldSendMailCopy" name="shouldSendMailCopy"
                               style="transform: scale(1.3);cursor: pointer;">
                        <label class="labelProjectCommunicate control-label" for="shouldSendMailCopy">
                            Recevoir une copie
                        </label>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <div style="float: right">
                        <button type="button" onclick="processForm()" class="boutonAction">
                            Envoyer
                        </button>
                        <button type="button" onclick="resetForm()" class="boutonRetour" style="float: right">
                            Annuler
                        </button>
                    </div>
                </div>
            </form>
        {% else %}
            {{ include('licence/components/_notAllowedBlock.html.twig') }}
        {% endif %}
    </div>
    {% if customerFollowUps is not empty %}
    <div class="row rubrique">
        <div class="rubrique_titre">
            <span>Historique</span>
        </div>
        <div style="padding: 1rem; overflow: scroll">
            <table style="width: 100%; padding: 1rem">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Destinataire</th>
                    <th>Objet</th>
                    <th>Message</th>
                    <th>Documents</th>
                </tr>
                </thead>
                <tbody>
                {% for followUp in customerFollowUps %}
                    <tr>
                        <td style="padding: 0 1rem">{{ followUp.createdAt ? followUp.createdAt|date('d/m/Y') : 'Non défini' }}</td>
                        <td>{{ followUp.recipient }}</td>
                        <td title="{{ followUp.object }}">{{ followUp.object|slice(0, 60) ~ (followUp.object|length > 60 ? '...' : '') }}</td>
                        {% if followUp.message is defined and followUp.message !== "" %}
                            <td style="padding: 1rem; min-height: 11rem; max-height: 15rem; overflow-y: auto; display: block; text-align: left">
                                    {{ followUp.message }}
                            </td>
                            {% else %}
                                <td>
                                    <em>Pas de message enregistré</em>
                                </td>
                        {% endif %}
                        <td>
                            {% if followUp.documents is not empty %}
                                <div style="text-align: left; padding: .5rem;max-height: 100px; overflow-y: scroll;">
                                    {% for document in followUp.documents %}
                                        <div>- {{ document }}</div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                Aucun document
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="7" class="text-center">Aucun suivi client trouvé</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

    </div>
    {% endif %}
    {% if is_granted('ROLE_DEMO') %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
</div>
{{ include('project/_modal/_iframe_show_file.html.twig') }}
        {{ popup.simple("info", "") }}

<script type="application/javascript">
    let fcEmail;
    $(document).ready(function () {
        initListenerRequired();
        if ($("#otherDest").checked) {
            $('#otherDestMail').prop('disabled', false);
        } else {
            $('#otherDestMail').prop('disabled', true);
        }

        fcEmail = '{{ project.finalCustomer.email }}';
        if (fcEmail === "" || fcEmail === null) {
            $('#updateEmail').show()
            $('#communicateCustomerForm .boutonAction').attr('onclick', '$("#updateEmail button").click()')
            $('#communicateCustomerForm .boutonAction').css('cursor', 'not-allowed')
        } else {
            $('#updateEmail').hide()
            $('#communicateCustomerForm .boutonAction').attr('onclick', 'processForm()')
            $('#communicateCustomerForm .boutonAction').css('cursor', 'pointer')
        }

        // Restaurer les données du formulaire au chargement de la page
        restoreFormData();

        // Sauvegarder les données du formulaire à chaque modification
        $('#communicateCustomerForm input, #communicateCustomerForm textarea').on('input', function() {
            saveFormData();
        });

        // Sauvegarder l'état des checkboxes
        $('#communicateCustomerForm input[type="checkbox"]').on('change', function() {
            saveFormData();
        });

        // Sauvegarder l'état des boutons radio
        $('#communicateCustomerForm input[type="radio"]').on('change', function() {
            saveFormData();
        });
    });
    $('input[name="receiver"]').on('change', function () {
        if (
            $('#otherDest').is(':checked')
            ||
            ($('#customerDest').is(':checked') && fcEmail !== null && fcEmail !== "")
        ) {
            $('#communicateCustomerForm .boutonAction').attr('onclick', 'processForm()')
            $('#communicateCustomerForm .boutonAction').css('cursor', 'pointer')
        } else {
            $('#communicateCustomerForm .boutonAction').attr('onclick', '$("#updateEmail button").click()')
            $('#communicateCustomerForm .boutonAction').css('cursor', 'not-allowed')
        }
    })

    $('#updateEmail').on('submit', function(e) {
        e.preventDefault();

        let emailInput = $(this).find('input[type="email"]');
        let email = emailInput.val();
        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        if (!emailRegex.test(email)) {
            createToast('error', 'Email invalide')
            return;
        }

        let fcId = {{ project.finalCustomer.id }};

        $.ajax({
            url: '{{ path('final_customer_update_email', {id: "00"}) }}'.replace("00", fcId),
            method: 'POST',
            data: {
                email: email
            },
            success: function(response) {
                $('#updateEmail label, #updateEmail button').hide();
                $('#updateEmailMsg').text(`Merci ! Adresse email enregistrée : ${response.email}`)
                fcEmail = response.email;
                $('#communicateCustomerForm .boutonAction').attr('onclick', 'processForm()')
                $('#communicateCustomerForm .boutonAction').css('cursor', 'pointer')
            },
            error: function(xhr, status, error) {
                console.log(error);
                $('#updateEmail label, #updateEmail button').hide();
                $('#updateEmailMsg').text('Une erreur s\'est produite, la page va se rechargez.')
                setTimeout(() => {
                    window.location.reload()
                }, 2000)
            }
        });
    });

    if (isDemo) {
        applyTooltipToDisabledElements('#containerClientDoc textarea, #containerClientDoc input, #containerClientDoc #fileCheckboxListDiv label, #containerClientDoc .labelProjectCommunicate, #containerClientDoc .boutonAction')
        $('textarea').css('background-color', '#F2F2F2')
    }

    const validateEmail = (email) => {
        return email.match(
            /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        );
    };

    const validate = (element) => {
        const email = element.target.value;
        if (email.length === 0) {
            $("#otherDestMailInvalidRequired").hide();
            element.target.classList.remove("borderErrorInput");
        } else {
            if (validateEmail(email)) {
                $("#otherDestMailInvalidRequired").hide();
                element.target.classList.remove("borderErrorInput");
            } else {
                $("#otherDestMailInvalidRequired").show();
                element.target.classList.add("borderErrorInput");
            }
        }
        return false;
    }

    /**
     * Init all listener for requires field
     */
    function initListenerRequired() {
        for (let input of $("#communicateCustomerForm input:visible, textarea:visible")) {
            if (input.required) {
                let spanRequiredId = input.id + "Required";
                input.addEventListener("keyup", function (element) {
                    if (element.target.value === "") {
                        $("#" + spanRequiredId).show();
                        element.target.classList.add("borderErrorInput");
                    } else {
                        $("#" + spanRequiredId).hide();
                        element.target.classList.remove("borderErrorInput");
                    }
                });
            }
        }

        for (let checkboxFile of $("#fileCheckboxListDiv input:checkbox:visible")) {
            checkboxFile.addEventListener("click", function (checkbox) {
                switch (checkbox.target.id) {
                    case "devisAttachment":
                        displayLinkAndFileToSend("devisAttachment", $("span[class^='devis']"), checkbox.target.id);
                        break;
                    case "productDocAttachment":
                        displayLinkAndFileToSend("productDocAttachment", $("span[class^='productdoc']"), checkbox.target.id);
                        break;
                    case "pictureAttachment":
                        displayLinkAndFileToSend("pictureAttachment", $("span[id^='namePicture_']"), checkbox.target.id);
                        break;
                    case "otherAttachment":
                        displayLinkAndFileToSend("otherAttachment", $("span[class^='other']"), checkbox.target.id);
                        break;
                    case "idConduitReportAttachment":
                        displayLinkAndFileToSend("Id conduit", [], checkbox.target.id);
                        break;
                    case "customerReportAttachment":
                        displayLinkAndFileToSend("Rapport Client", [], checkbox.target.id);
                        break;
                    case "installerReportAttachment":
                        displayLinkAndFileToSend("Rapport Installateur", [], checkbox.target.id);
                        break;
                    case "auditReportAttachment":
                        displayLinkAndFileToSend("Rapport audit expertise", [], checkbox.target.id);
                        break;
                    case "deperReportAttachment":
                        displayLinkAndFileToSend("Livret déperdition thermique", [], checkbox.target.id);
                        break;
                    case "ramonReportAttachment":
                        displayLinkAndFileToSend("Attestation d'entretien / ramonage", [], checkbox.target.id);
                        break;
                }
                if (!checkbox.target.checked) {
                    $("." + checkbox.target.id).remove();
                    $(".picto_" + checkbox.target.id).remove();
                    if ($("#fileCheckboxListDiv input:checkbox:visible:checked").length === 0) {
                        $("#filesSelectedToSendDiv").empty();
                    }
                }
            });
        }

        for (let input of $("#communicateCustomerForm input:radio:visible")) {
            input.addEventListener("click", function (element) {
                if (input.checked) {
                    $("#receiverRequired").hide();
                    if (input.id === "customerDest") {
                        $("#otherDestMailInvalidRequired").hide();
                        $("#otherDestMailRequired").hide();
                        $("#otherDestMail").val(null);
                        element.target.classList.remove("borderErrorInput");
                    }
                } else {
                    $("input:radio:visible:checked").length === 0 ? $("#receiverRequired").show() : $("#receiverRequired").hide();
                }
            });
        }
        $('#otherDestMail').on('input', validate);
    }

    function displayLinkAndFileToSend(className, filenameList, checkboxId) {
        let parentDiv = $("#filesSelectedToSendDiv");
        let cssClass = checkboxId || className;

        if (filenameList.length > 0) {
            filenameList.each(function (i, obj) {
                if (obj.dataset.filename !== undefined) {
                    parentDiv.append(
                        $("<p></p>").append(
                            $("<a></a>")
                                .attr("href", obj.dataset.href)
                                .attr("target", "blank")
                                .text(obj.dataset.filename)
                                .css("font-weight", "bold").addClass(cssClass)
                                .append('<i class="fas fa-file-pdf" style="font-size: 15px;color: #ED7D31;margin-left:1%;float: left;"></i>')
                        ).append('<i data-toggle="modal" data-target="#modal-iframe-show-file" onclick="showIframe(\'' + obj.dataset.href + '\')" class="fas fa-search-plus cursorHover picto_' + cssClass + '" style="font-size: 15px;color: black;margin-left: 10px;vertical-align: middle;"></i>')
                    );
                }
            });
        } else {
            parentDiv.append(
                $("<p></p>").append(
                    $("<a></a>")
                        .text(className)
                        .css("font-weight", "bold").addClass(cssClass)
                        .append('<i class="fas fa-file-pdf" style="font-size: 15px;color: #ED7D31;margin-left:1%;float: left;"></i>')
                )
            );
        }
    }

    function showIframe(filepath) {
        $('#iframeElement').attr('src', filepath);
    }

    /**
     * Main function to process the form
     */
    function processForm() {
        if (checkRequiredValues()) {
            if (choiceEmail) {
                let currentUri = $("#communicateCustomerForm").attr('action');
                let url = new URL(currentUri, window.location.origin);
                url.searchParams.set('displayWet', choiceEmail);
                let newUri = url.pathname + url.search;
                $("#communicateCustomerForm").attr('action', newUri);
            }
            $("#communicateCustomerForm").submit();
        }
    }

    /**
     * Check if inputs required is not empty or not checked
     * @returns {boolean}
     */
    function checkRequiredValues() {
        //// OBJECT
        if ($("#mailObject").val().length === 0) {
            $("#mailObjectRequired").show();
            $("#mailObject").addClass("borderErrorInput");
        } else {
            $("#mailObjectRequired").hide();
            $("#mailObject").removeClass("borderErrorInput");
        }

        //// MESSAGE
        if ($("#mailMessage").val().length === 0) {
            $("#mailMessageRequired").show();
            $("#mailMessage").addClass("borderErrorInput");
        } else {
            $("#mailMessageRequired").hide();
            $("#mailMessage").removeClass("borderErrorInput");
        }

        //// CHECKBOX
        if ($("input[type=checkbox]:checked").length === 0) {
            $("#attachmentRequired").show();
        } else {
            $("#attachmentRequired").hide();
        }

        //// RADIO
        if ($("input[type=radio]:checked").length === 0) {
            $("#receiverRequired").show();
        } else {
            $("#receiverRequired").hide();
        }
        if (!$("#otherDestMail").is(':disabled')) {
            if ($("#otherDestMail").val().length === 0) {
                $("#otherDestMailRequired").show();
                $("#mailObject").addClass("borderErrorInput");
            } else {
                $("#otherDestMailRequired").hide();
                $("#otherDestMail").removeClass("borderErrorInput");
            }
        }
        return $('#communicateCustomerForm span[id$="Required"]').filter(':visible').length === 0;
    }

    let useReportURI = "{{ path('report_use_report',{'project':project.id,'slug':"slug"}) }}";
    $('.reportCheck').on('change', function (e) {
        let id = this.id;
        let idChecked = $(this).prop('checked');

        if (!idChecked) {
            $("." + id).remove();
            $(".picto_" + id).remove();
            if (id === 'auditReportAttachment') {
                choiceEmail = null;
                $('#infoWetDry').text('');
            }
            if (id === 'ramonReportAttachment') {
                $('#ramonSelect').hide();
                $('#ramonSelect').val(null).trigger('change');
            }
            return;
        }

        $.ajax({
            url: useReportURI.replace("slug", e.target.dataset.report),
            type: "GET",
            dataType: "JSON",
            success: function (response) {
                if (!response.canUse) {
                    let reportTitle = e.target.dataset.name;
                    let needed = response.serviceNeededMultiple ? "les services suivants " : "le service suivant ";
                    $('#confirm-popup-info .popup-message').text('Vous souhaitez envoyer le ' + reportTitle + '. Or, vous devez réaliser ' + needed + '  afin de le générer : ' + response.servicesNeeded)
                    $('#confirm-popup-info').modal('show');
                    $(e.target).prop("checked", false);
                    $('#ramonSelect').hide();

                    $("." + id).remove();
                    $(".picto_" + id).remove();
                    if (id === 'auditReportAttachment') {
                        choiceEmail = null;
                        $('#infoWetDry').text('');
                    }
                } else if (id === 'auditReportAttachment' && idChecked) {
                    typeWetDry = 'email';
                    if (infoWetDryForCdc !== false) {
                        $('#btnReportAudit').attr('type', 'button').attr('data-dismiss', 'modal');
                        $('#verbReportAudit').text('envoyer');
                        $('#modal-wet-dry').modal();
                    }
                } else if (id === 'ramonReportAttachment' && idChecked) {
                    $('#ramonSelect').show();
                    $('#ramonSelect').select2({
                        placeholder: "-- Sélectionnez vos choix --",
                        allowClear: true
                    });
                }
            }
        });
        if (!idChecked && id === 'auditReportAttachment') {
            choiceEmail = null;
            $('#infoWetDry').text('');
        }
    })

    function resetForm() {
        // Vider le localStorage
        localStorage.removeItem('mailFormData');

        // Réinitialiser tous les champs
        $('#mailObject').val('');
        $('#mailMessage').val('');
        $('#otherDestMail').val('');

        // Décocher tous les checkboxes
        $('#communicateCustomerForm input[type="checkbox"]').prop('checked', false);

        // Décocher les boutons radio
        $('#customerDest').prop('checked', false);
        $('#otherDest').prop('checked', false);

        // Désactiver le champ otherDestMail
        $('#otherDestMail').prop('disabled', true);

        // Vider la div des fichiers sélectionnés
        $('#filesSelectedToSendDiv').empty();

        // Recharger la page
        location.reload();
    }

    function saveFormData() {
        const formData = {
            mailObject: $('#mailObject').val(),
            mailMessage: $('#mailMessage').val(),
            otherDestMail: $('#otherDestMail').val(),
            customerDest: $('#customerDest').prop('checked'),
            otherDest: $('#otherDest').prop('checked'),
            shouldSendMailCopy: $('#shouldSendMailCopy').prop('checked'),
            // Sauvegarder l'état des checkboxes de documents
            devisAttachment: $('#devisAttachment').prop('checked'),
            productDocAttachment: $('#productDocAttachment').prop('checked'),
            pictureAttachment: $('#pictureAttachment').prop('checked'),
            otherAttachment: $('#otherAttachment').prop('checked'),
            customerReportAttachment: $('#customerReportAttachment').prop('checked'),
            installerReportAttachment: $('#installerReportAttachment').prop('checked'),
            auditReportAttachment: $('#auditReportAttachment').prop('checked'),
            deperReportAttachment: $('#deperReportAttachment').prop('checked'),
            ramonReportAttachment: $('#ramonReportAttachment').prop('checked')
        };

        localStorage.setItem('mailFormData', JSON.stringify(formData));
    }

    function restoreFormData() {
        const savedData = localStorage.getItem('mailFormData');
        if (savedData) {
            const formData = JSON.parse(savedData);

            // Restaurer les valeurs des champs
            $('#mailObject').val(formData.mailObject);
            $('#mailMessage').val(formData.mailMessage);
            $('#otherDestMail').val(formData.otherDestMail);

            // Restaurer l'état des boutons radio
            $('#customerDest').prop('checked', formData.customerDest);
            $('#otherDest').prop('checked', formData.otherDest);

            // Restaurer l'état des checkboxes
            $('#shouldSendMailCopy').prop('checked', formData.shouldSendMailCopy);
            $('#devisAttachment').prop('checked', formData.devisAttachment);
            $('#productDocAttachment').prop('checked', formData.productDocAttachment);
            $('#pictureAttachment').prop('checked', formData.pictureAttachment);
            $('#otherAttachment').prop('checked', formData.otherAttachment);
            $('#customerReportAttachment').prop('checked', formData.customerReportAttachment);
            $('#installerReportAttachment').prop('checked', formData.installerReportAttachment);
            $('#auditReportAttachment').prop('checked', formData.auditReportAttachment);
            $('#deperReportAttachment').prop('checked', formData.deperReportAttachment);
            $('#ramonReportAttachment').prop('checked', formData.ramonReportAttachment);

            // Nettoyer le localStorage après restauration
            localStorage.removeItem('mailFormData');

            // Réactiver le champ otherDestMail si nécessaire
            if (formData.otherDest) {
                $('#otherDestMail').prop('disabled', false);
            }
        }
    }
</script>