@extends('layouts.rapports.layout', [
    'title' => 'Rapport Point singulier Tertiaire'
])

@section('content')
    <div class="btn-group" style="position: fixed; left: 5%; top: 10%; z-index: 100000000">
        <button type="button" aria-haspopup="true" aria-expanded="false" {{-- data-toggle="dropdown"--}}
        class="btn-wide mb-2 mr-2 dropdown-toggle btn btn-primary">
            Afficher les matelas
        </button>
        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu"
             style="min-width: 15rem">
            @if($reperage_interne)
                @foreach ($reperage_interne as $i => $value)
                    <a class="dropdown-item" href="#matelas_{{ $i }}">Matelas N°{{ $value }}</a>
                @endforeach
            @endif
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane tabs-animation fade active show" id="tab-content-2" role="tabpanel">
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <div id="smartwizard3" class="forms-wizard-vertical sw-main sw-theme-default">
                        <ul class="forms-wizard nav nav-tabs step-anchor">
                            @foreach(config('rapports.rapport_points.section') as $index => $section)
                                <li class="nav-item {{ $index == 1 ? 'active' : '' }}"
                                    id="{{ $section['id'] }}-nav">
                                    <a class="nav-link">
                                        <em>{{ $index }}</em><span>{{ $section['title'] }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        <form method="post"
                              action="{{ '/rapports/'.$rapport->rapport_id }}"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="form-wizard-content sw-container tab-content"
                                 style="min-height: 0px;">
                                @foreach(config('rapports.rapport_points.section') as $index => $section)
                                    <div id="step-{{ $index-1 }}" class="tab-pane step-content"
                                         @if($index==1) style="display: block;" @endif>
                                        <div class="card-body">
                                            @include('layouts.rapports.generation_rapport')
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </form>

                    </div>
                    <div class="divider"></div>
                    <div class="clearfix">

                        <button type="button" id="next_step" data-step="0"
                                class="btn-shadow btn-wide float-right btn-pill btn-hover-shine btn btn-primary">
                            Etape suivante
                        </button>
                        <button type="button" id="previous_step" data-step="0"
                                class="btn-shadow float-right btn-wide btn-pill mr-3 btn btn-outline-secondary">
                            Précédent
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <style type="text/css">
        .error span {
            /* background: red; */
            color: red;
            border: 1px solid red;
        }

        .sub_step_title {
            text-align: center;
            font-size: x-large;
            font-weight: 800;
            color: white;
        }

        span.anomalie.btn.btn-danger.error {
            /* background: white!important; */
            /* color: red!important; */
            border-width: 5px;
            border-color: red !important;
            background: white !important;
            color: red !important;
        }

        .error {
            border-color: red;
            background: #ff00000d;
        }

        .label-radiocharm.error {
            border: red 1px solid !important;
        }

        label.control.nature_travaux.error span {
            border: 1px solid red !important;
            /* border-radius: 10px; */
            background: #ff00000f !important;
        }

        /*
        * Radiocharm jQuery Plugin
        *
        * @file: jquery-radiocharm.css
        * @author: Mark Coyne
        * @site: www.coynem.com
        * @license: MIT License
    */

        /*-----------------------------------------------------------------
        RADIOCHARM
    -----------------------------------------------------------------*/
        span.anomalie.btn.btn-danger {
            width: 100%;
            margin-bottom: 5px;
        }

        label.label-radiocharm {
            background: #efefef;
            color: #888;
            cursor: pointer;
            display: inline-block;
            font-size: 12px;
            margin: 0 -3px 0 0;
            padding: 10px 15px;

            text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);

            transition: all 0.33s;
            -moz-transition: all 0.33s;
            -webkit-transition: all 0.33s;
            -o-transition: all 0.33s;
        }

        label.label-radiocharm.radiocharm-block {
            display: block;
            margin: 5px 0;
        }

        label.label-radiocharm:first-of-type {
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-bottom-left-radius: 5px;
            border-bottom-left-radius: 5px;
            -webkit-border-top-left-radius: 5px;
            -moz-border-top-left-radius: 5px;
            border-top-left-radius: 5px;
        }

        label.label-radiocharm:last-of-type {
            -webkit-border-bottom-right-radius: 5px;
            -moz-border-bottom-right-radius: 5px;
            border-bottom-right-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-top-right-radius: 5px;
            border-top-right-radius: 5px;
        }

        label.label-radiocharm:hover {
            background: #ddd;
        }

        label.label-radiocharm.active {
            background: #00dee1;
            color: #fff;

            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
        }

        label.label-radiocharm em {
            margin-right: 5px;
        }

        label.label-radiocharm em.active,
        label.label-radiocharm.active em.inactive {
            display: none;
        }

        label.label-radiocharm.active em.active {
            display: inline-block;
        }

        label.label-radiocharm input {
            display: none !important;
        }

        div#upload_photos {
            min-height: 200px;
            border: 1px solid #ccc;
            background: #3ac47d;
            color: white;
            text-align: center;
            padding-top: 0px;
            border-radius: 15px;
            cursor: pointer;
            line-height: 200px;
            font-size: 19px;
        }

        .btn.btn-pill.btn-wide, .btn.btn-pill {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .step-content {
            min-height: 650px;
        }

        a.btn.btn-danger {
            color: white;
        }

        .app-theme-white.app-container {
            background: transparent;
        }

        .step_title {
            background: #3ac47d;
            color: white;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 14px;
        }

        .position-relative.form-group {
            margin-bottom: 52px;
        }

        .fixed-sidebar .app-main .app-main__outer {
            z-index: 9;
            padding-left: 0;
        }

        .position-relative.form-group.tiers {
            display: inline-block;
            min-width: 30%;
            max-width: 30%;
            margin-right: 2%;
            vertical-align: top;
        }

        .position-relative.form-group.tiers label, .position-relative.form-group.tiers .form-control {
            display: block;
            width: 100%;
            margin-bottom: -13px;
            font-weight: 600;
        }

        .position-relative.form-group.quarter {
            display: inline-block;
            min-width: 22%;
            max-width: 22%;
            margin-right: 2%;
            vertical-align: top;
        }

        .position-relative.form-group.quarter label, .position-relative.form-group.quarter .form-control {
            display: block;
            width: 100%;
            margin-bottom: -13px;
            font-weight: 600;
        }

        .position-relative.form-group.half {
            display: inline-block;
            min-width: 46%;
            max-width: 46%;
            margin-right: 2%;
            vertical-align: top;
        }

        .position-relative.form-group.half label, .position-relative.form-group.half .form-control {
            display: block;
            width: 100%;
            margin-bottom: -13px;
            font-weight: 600;
        }

        label.label-radiocharm em {
            margin-right: 5px;
            display: block;
        }

        .label-radiocharm {
            min-width: 120px;
            min-height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: 600;
            margin-right: 20px !important;
            border-radius: 10px !important;
        }

        .control {
            display: inline-flex;
            position: relative;
            margin: 5px;
            cursor: pointer;
            border-radius: 99em;
        }

        .control input {
            position: absolute;
            opacity: 0;
            z-index: -1;
        }

        .control svg {
            margin-right: 6px;
            border-radius: 50%;
            box-shadow: 3px 3px 16px rgba(0, 0, 0, .2)
        }

        .control__content {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            font-size: 20px;
            line-height: 32px;
            color: rgba(0, 0, 0, .55);
            background-color: rgba(0, 0, 0, .05);
            border-radius: 99em;
        }

        .control:hover .control__content {
            background-color: rgba(0, 0, 0, .1);
        }

        /*.control input:focus ~ .control__content {
      box-shadow: 0 0 0 .25rem rgba(12, 242, 143, .2);
      background-color: rgba(0, 0, 0, .1);
    }*/

        .control input:checked ~ .control__content {
            background-color: rgba(12, 242, 143, .2);
        }

        .control input:checked ~ .control__content {
            background-color: #3498DB;
            color: white;
            /* font-size: 16px; */
        }

        .control {
            display: inline-flex;
            position: relative;
            margin: 0px;
            cursor: pointer;
            /* border-radius: 99em; */
        }

        .control__content {
            display: block;
            align-items: center;
            padding: 6px 12px;
            font-size: 20px;
            line-height: 32px;
            color: rgba(0, 0, 0, .55);
            background-color: rgba(0, 0, 0, .05);
            border-radius: 10px;
            min-height: 80px;
            min-width: 120px;
            margin: auto;
            text-align: center;
            line-height: 80px;
            min-width: 120px;
            min-height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: 600;
            margin-right: 20px !important;
            border-radius: 10px !important;
            font-size: 12px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        /*input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }*/

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        input:checked + .slider:before {
            content: "OUI";
            left: 13px;

        }

        input:not(:checked) + .slider:before {
            content: "NON";

        }

        .slider {
            width: 85px;
            height: 50px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 42px;
            width: 42px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            line-height: 41px;
            padding-left: 0px;
            font-weight: 600;
            text-align: center;
        }

        @media screen and (max-width: 990px) {
            .forms-wizard-vertical .forms-wizard {

                width: 100%;

            }

            .forms-wizard-vertical .form-wizard-content {
                width: 100%;
                overflow: auto;
            }

            .label-radiocharm {

                width: 100%;
                min-width: 100%;
                margin-bottom: 10px !important;
            }

            label.control {
                width: 100%;
                margin-bottom: 10px;
            }

            .position-relative.form-group {
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                display: block;
            }

            .thumb {
                display: inline-block;
                vertical-align: top;
                max-width: 46% !important;
                margin-right: 4% !important;
                /* width: 8%; */
                margin-bottom: 34px;
                border: 1px solid #ccc;
                padding: 0px;
            }

            .thumb a.btn.btn-danger {
                max-width: 60%;
                font-size: 8px;
                content: "X";
                color: white;
            }
        }

        .dropzone.dz-clickable {
            background: #3f6ad8;
            max-width: 100%;
            color: white;
            padding: 5px;
            border-radius: 10px;
            margin-bottom: 24px;
            margin: auto;
            margin-bottom: 24px;
            text-align: center;
        }
    </style>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {

            $('input:radio').radiocharm();

            let delList = document.querySelectorAll('.del_img');

            delList.forEach((item) => {
                item.addEventListener('click', () => {
                    axios.delete('/upload/delete', {
                        params: {
                            _token: CSRF_TOKEN,
                            path: item.dataset.path,
                            singulier: true,
                            from: 'rapport',
                        },
                    }).then(() => {
                        // $('#'+result+'').remove();
                        $(item).parent('.thumb').remove();
                        $(item).closest('.thumb').remove();
                    });
                });
            });

            $('.add_matelas').click(function (event) {
                event.stopPropagation();
                event.stopImmediatePropagation();
                $('#count_matelas').val($(".row_matelas").length + 1);

                let x = '<tr id="matelas_row_' + $('#count_matelas').val() + '" class="row_matelas">' +
                    '<td style="width:20%;"><input name="nb_house[]" class="form-control" value=""></td>' +
                    '<td style="width:20%;"><input name="nominal[]" class="form-control" value=""></td>' +
                    '<td style="width:20%;"><input name="marque[]" class="form-control" value=""></td>' +
                    '<td style="width:20%;"><input name="reference[]" class="form-control" value=""></td>' +
                    '<td style="width:20%;"><input name="ecart[]" type="checkbox" value="1" class="">Oui/Non</td>' +
                    '<td style="width:20%;"><a class="btn btn-danger del_epaisseur" data-id="' + $('#count_matelas').val() + '">-</a></td>' +
                    '</table></td></tr>';
                $('#table_matelas').one().append(x);

                for (let i = 0; i < $(".row_matelas").length; i++) {
                    $(".num_mur").each(function (i) {
                        $(this).html(i + 1);
                    });
                }

                $('.del_epaisseur').click(function (event) {
                    event.stopPropagation();
                    event.stopImmediatePropagation();

                    $('#append_ouverture_' + $(this).data('id')).remove();

                    $(this).closest('tr').remove();

                    $('#count_murs').val($(".row_mur").length);

                    for (i = 0; i < $(".row_mur").length; i++) {
                        $(".num_mur").each(function (i) {
                            $(this).html(i + 1);
                        });

                        $(".add_ouverture").each(function (i) {

                            $(this).attr("data-id", i + 1);
                        });

                        $(".del_epaisseur").each(function (i) {

                            $(this).attr("data-id", i + 1);
                        });

                        $(".append_ouverture").each(function (i) {

                            $(this).attr("id", "append_ouverture_" + (i + 1));
                        });

                        $(".input_ouverture_" + $(this).data('id')).attr("name", "surface_ouverture[" + (i) + "][]");

                    }

                });

            });

            $('.del_epaisseur').click(function (event) {
                event.stopPropagation();
                event.stopImmediatePropagation();

                $('#append_ouverture_' + $(this).data('id')).remove();

                $(this).closest('tr').remove();

                $('#count_murs').val($(".row_mur").length);

                for (i = 0; i < $(".row_mur").length; i++) {
                    $(".num_mur").each(function (i) {
                        $(this).html(i + 1);
                    });

                    $(".add_ouverture").each(function (i) {

                        $(this).attr("data-id", i + 1);
                    });

                    $(".del_epaisseur").each(function (i) {

                        $(this).attr("data-id", i + 1);
                    });

                    $(".append_ouverture").each(function (i) {

                        $(this).attr("id", "append_ouverture_" + (i + 1));
                    });

                    $(".input_ouverture_" + $(this).data('id')).attr("name", "surface_ouverture[" + (i) + "][]");

                }

            });

            // $('input:radio').radiocharm();

            $('#rapport_form').submit(function () {

                if ($('#signature_client') == '') {
                    alert('Veuillez signer le rapport');
                    return false;
                } else {
                    return true;
                }

            })

            $('#choose_client').change(function () {
                $.ajax({
                    url: 'get/get_client_by_id.php',
                    type: 'GET',
                    data: {

                        client_id: $(this).val(),

                    },
                    type: 'get',

                    success: function (response) {
                        $.each(JSON.parse(response), function (i, user) {
                            $("input[name*='entreprise_travaux']").val(user._billing_last_name);
                            $("input[name*='entreprise_siren']").val(user.siren);
                            $("input[name*='entreprise_adresse']").val(user._billing_address_1);
                            $("input[name*='entreprise_cp']").val(user._billing_postcode);
                            $("input[name*='entreprise_ville']").val(user._billing_city);

                        });
                    },
                });

            });

            Dropzone.autoDiscover = false;
            $(".dropzone").dropzone({
                url: '/upload',
                maxFiles: 10,
                dictDefaultMessage: "Cliquez ici pour charger des images ou déposez les à cet emplacement",
                /*     params: {
                         dir: 'rapports',
                         sub_dir: 'rapport_{{ $rapport->rapport_id }}/singuliers',
                id:{{ $rapport->rapport_id }},
                // doc_dest:$(this).data('dest'),

            },*/
                success: function (data, textStatus, XMLHttpRequest) {

                },
                init: function () {
                    myDropzone = this;
                    this.on("sending", function (file, xhr, formData) {
                        formData.append("_token", CSRF_TOKEN);
                        formData.append("from", "singuliers");
                        formData.append("path", $(this.element).attr('data-link'));
                        formData.append("id", {{ $rapport->rapport_id }});
                    });
                    this.on("success", function (file, responseText) {

                    });

                }
            });

            $('#label-radiocharm-non_verifiable_combles').on('click', function () {

                if ($("#radiocharm-non_verifiable_combles").is(':checked')) {
                } else {
                }
                $('#motifs_combles').show();
            });

            $('.predef').on('change', function () {
                var datadest = $(this).data('dest');
                var optionsText = this.options[this.selectedIndex].text;
                if ($(this).val() != '') {
                    // $('#obs_combles').append(optionsText);
                    $('#' + datadest).append(optionsText + '\n\n');
                }
            });
            $('.predef_textarea').on('change', function () {
                var datadest = $(this).data('dest');
                var optionsText = this.options[this.selectedIndex].text;
                var val = $(this).val();
                if (val != '' | val != 0) {
                    // $('#obs_combles').append(optionsText);
                    $('#' + datadest).append(optionsText + '\n\n');
                }

            });

            $('input[type=text]').keyup(function () {

                $(this).removeClass('error');

            })

            $("#preuve_facture").change(function () {
                if ($(this).is(':checked')) {
                    $("input[name='reference_facture']").addClass('required');
                } else {
                    $("input[name='reference_facture']").removeClass('required');
                }

            });

     
            $('.del_epaisseur').click(function () {

                $(this).closest('tr').remove();
            });

            $('#append_singulier').click(function () {

                let elems = document.querySelectorAll(".matelas");
                let index = elems.length;
                if (document.getElementById('matelas_' + index) !== undefined && document.getElementById('matelas_' + index) !== null) {
                    do {
                        index++;
                    } while (document.getElementById('matelas_' + index) !== undefined && document.getElementById('matelas_' + index) !== null)
                }

                var a = '';
                a += '<div id="matelas_' + index + '" class="matelas">';
                a += '<div class="step_title sub_step_title">Matelas Inspecté</div>';
                a += '<a class="btn btn-danger" onclick="$(\'#matelas_' + index + '\').remove();" style="position: relative;top: -32px;left: 0;float: right;">Supprimer</a>';
                a += '<div class="card-body" id="" style="display:block">';
                a += '<div >';

                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Repérage interne</label><br/>';

                a += '<input class="form-control required" type="text" name="reperage_interne[' + index + ']" value="">';

                a += '</div>';

                a += '<label for="exampleEmail6">RÉSULTAT DE LA VERIFICATION </label><br/>';

                a += '<div class=\"position-relative form-group tiers\">'
                a += '<input type="checkbox" class="form-check mx-1" id="' + index + '_1" name="conformite_matelas[' + index + ']" value="conforme">'
                a += 'Conforme'
                a += '</div>'

                a += '<div class=\"position-relative form-group tiers\">'
                a += '<input type="checkbox" class="form-check mx-1" id="' + index + '_2" name="conformite_matelas[' + index + ']" value="non_conforme">'
                a += 'Non conforme'
                a += '</div>'

                a += '</div>';

                a += '<div >';
                a += '<label for="exampleEmail6">TYPE DE POINT SINGULIER ISOLE </label><br/>';

                a += '<div class=\"position-relative form-group tiers\">'
                a += '<input type="hidden" name="point_singulier_isole[' + index + ']" value="non_renseigne">';
                a += '<input type="checkbox" class="form-check mx-1" id="' + index + '_echangeur_1" name="point_singulier_isole[' + index + ']" value="hors_echangeur">'
                a += 'Hors Echangeur à Plaque'
                a += '</div>'

                a += '<div class=\"position-relative form-group tiers\">'
                a += '<input type="checkbox" class="form-check mx-1" id="' + index + '_echangeur_2" name="point_singulier_isole[' + index + ']" value="echangeur">'
                a += 'Echangeur à plaques'
                a += '</div>'

                a += '</div>';

                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Type de point singulier isolé</label><br/>';

                a += '<input class="form-control " type="text" name="type_point_singulier[' + index + ']" value="">';

                a += '</div>';

                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">Les conditions d\'éligibilité ne sont pas respectées. Seules les pièces de type vanne, réducteur, robinet, clapet, filtre, séparateur, compteur, détendeur, manchette, purgeur, pompe peuvent prétendent aux conditions d\'éligibilité de la fiche d\'opération standardisée prise en référence de la vérification.</span>';

                a += '</div>';

                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Diamètre nominal de la canalisation</label><br/>';

                a += '<input class="form-control required" type="text" name="diametre_nominal[' + index + ']" value="">';

                a += '</div>';
                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">Le matelas ou la housse isolante n\'est pas adapté au diamètre nominal de la canalisation.</span>';

                a += '</div>';

                a += '<div >';

                a += '<label for="exampleEmail6">Constitution du matelas souple </label><br/>';

                a += '<div class="position-relative form-group tiers">';

                a += '<label class="switch">';

                a += '<input type="hidden" name="matelas_souple[' + index + ']" value="0">';

                a += '<input type="checkbox" id="matelas_souple" name="matelas_souple[' + index + ']" value="1" >';

                a += '<span class="slider round"></span>';

                a += '</label>';

                a += '</div>';

                a += '</div>';

                a += '<div >';

                a += '<label for="exampleEmail6">Constitution du matelas démontable </label><br/>';

                a += '<div class="position-relative form-group tiers">';

                a += '<label class="switch">';

                a += '<input type="hidden" name="matelas_demontable[' + index + ']" value="0">';

                a += '<input type="checkbox" id="matelas_demontable" name="matelas_demontable[' + index + ']" value="1" >';

                a += '<span class="slider round"></span>';

                a += '</label>';

                a += '</div>';

                a += '</div>';

                a += '<div >';

                a += '<label for="exampleEmail6">Constitution du matelas équipé d\'un système de fermeture </label><br/>';

                a += '<div class="position-relative form-group tiers">';

                a += '<label class="switch">';

                a += '<input type="hidden" name="matelas_fermeture[' + index + ']" value="0">';

                a += '<input type="checkbox" id="matelas_fermeture" name="matelas_fermeture[' + index + ']" value="1" >';

                a += '<span class="slider round"></span>';

                a += '</label>';

                a += '</div>';

                a += '</div>';
                a += '<div>';

                a += '<label for="exampleEmail6">La vérification des points singuliers isolés a été faite par démontage et remise en place des housses isolantes</label><br/>';

                a += '<div class="position-relative form-group tiers">';

                a += '<label class="switch">';

                a += '<input type="hidden" name="matelas_demontage[' + index + ']" value="0">';

                a += '<input type="checkbox" id="matelas_demontage" name="matelas_demontage[' + index + ']" value="1">';

                a += '<span class="slider round"></span>';

                a += '</label>';

                a += '</div>';

                a += '</div>';
                a += '<div class="position-relative form-group tiers anomalies_resistance_combles">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">Le matelas ou la housse isolante n\'est pas constitué d’une enveloppe souple garnie d\'une âme isolante qui est maintenue en place par un système de fermeture intégré à la housse (sangles, bandes auto-agrippantes, crochets…) permettant d\'isoler complètement le point singulier.</span>';

                a += '</div>';
                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Marque/Modèle du matelas</label><br/>';

                a += '<input class="form-control required" type="text" name="marque_matelas[' + index + ']" value="">';

                a += '</div>';
                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">La marque / modèle du matelas ou de la housse isolante ne correspond pas celle déclarée par le professionnel en charge des travaux d\'isolation dans son état récapitulatif.</span>';

                a += '</div>';
                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Référence du matelas</label><br/>';

                a += '<input class="form-control required" type="text" name="reference_matelas[' + index + ']" value="">';

                a += '</div>';
                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">La référence du matelas ou de la housse isolante ne correspond pas celle déclarée par le professionnel en charge des travaux d\'isolation dans son état récapitulatif.</span>';

                a += '</div>';
                a += '<div >';

                a += '<label for="exampleEmail6">Nature de l\'isolant à base de laine minérale </label><br/>';

                a += '<div class="position-relative form-group tiers">';

                a += '<label class="switch">';

                a += '<input type="hidden" name="nappe_fibre[' + index + ']" value="0">';

                a += '<input type="checkbox" id="nappe_fibre" name="nappe_fibre[' + index + ']" value="1">';

                a += '<span class="slider round"></span>';

                a += '</label>';

                a += '</div>';
                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">Le matelas, ou la housse isolante n\'est constituée d’un isolant à base de laine minérale.</span>';

                a += '</div>';
                a += '</div>';

                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Température du fluide caloporteur</label><br/>';

                a += '<input class="form-control required" type="text" name="temperature_fluide[' + index + ']" value="">';

                a += '</div>';
                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">Les caractéristiques du matelas ou de la housse isolante ne sont pas adaptés pas à la température du fluide caloporteur mesurée.</span>';
                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">La température du fluide caloporteur mesurée ne correspond pas à celle déclarée par le professionnel en charge des travaux d\'isolation dans son état récapitulatif.</span>';

                a += '</div>';

                a += '<div >';

                a += '<label for="exampleEmail6">Température maximale de service >=200°C </label><br/>';

                a += '<div class="position-relative form-group tiers">';

                a += '<label class="switch">';

                a += '<input type="hidden" name="temp_max_200[' + index + ']" value="0">';

                a += '<input type="checkbox" id="temp_max_200" name="temp_max_200[' + index + ']" value="1" >';

                a += '<span class="slider round"></span>';

                a += '</label>';

                a += '</div>';
                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">La température maximale de service de du matelas ou de la housse isolante est inférieure à 200°C.</span>';
                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">En l\'absence d\'information portée à notre connaissance, la température maximale de service du matelas ou de la housse isolante n\'a pu être vérifiée.</span>';

                a += '</div>';
                a += '</div>';

                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Résistance thermique de l\'isolant à 50°C</label><br/>';

                a += '<input class="form-control required" type="text" name="resistance_thermique[' + index + ']" value="">';

                a += '</div>';
                a += '<div class="position-relative form-group ">';

                a += '<label for="exampleEmail6">Résistance thermique de l\'isolant à 100°C</label><br/>';

                a += '<input class="form-control required" type="text" name="resistance_thermique2[' + index + ']" value="">';

                a += '</div>';

                a += '<div class="position-relative form-group tiers anomalies_resistance_combles" style="top: -29px;">';

                a += '<label for="exampleEmail6">Ajouter aux observations</label><br/>';

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_tertiaire_' + index + '">La résistance thermique de l’isolant du matelas ou de la housse isolante est inférieure à : • 1,5 m2.K/W à une température moyenne de 50°C, et/ou• 1,0 m2.K/W à une température moyenne de 100°C.</span>';

                a += '</div>';
                a += '<div class="position-relative form-group">';
                a += '<label for="exampleEmail6">OBSERVATIONS SUR LA SURFACE </label><br/>';
                a += '<textarea  readonly name="observations_singulier_tertiaire[' + index + ']" id="observations_singulier_tertiaire_' + index + '" class="obs form-control " style="height:auto;min-height:100px"></textarea>';

                a += '</div>';

                a += '</div>';

                a += '<div style="cursor:pointer" id="dropzone' + index + '" class="dropzone"  data-dest="singulier" data-link="/rapports/rapport_{{ $rapport->rapport_id }}" onclick="$(\'#photo_id\').val(\'{{ $rapport->rapport_id . '_' }}' + index + '\')">Cliquez ici ou déposez vos fichiers</div>';
                a += '</div>';

                $('#singuliers').append(a);

                $('.anomalie').on('click', function () {
                    var datadest = $(this).data('dest');

                    if ($('#' + datadest).val().indexOf($(this).html()) != -1) {
                        $(this).removeClass('active');
                        $(this).removeClass('error');
                        $('#' + datadest).text($('#' + datadest).text().replace($(this).html() + '\n\n', ''));
                        $(this).css('background-color', '#ad1e40');
                        $(this).css('border-color', '#ad1e40');
                        document.getElementById(datadest).style.overflow = 'hidden';
                        document.getElementById(datadest).style.height = 0;
                        document.getElementById(datadest).style.height = document.getElementById(datadest).scrollHeight + 'px';

                    } else {

                        $('#' + datadest).append($(this).html() + '\n\n');
                        $(this).addClass('active');
                        $(this).removeClass('error');
                        $('#label-radiocharm-' + datadest + '_non_conforme').click();

                        $(this).css('background-color', '#3498DB');
                        $(this).css('border-color', '#3498DB');
                        document.getElementById(datadest).style.overflow = 'hidden';
                        document.getElementById(datadest).style.height = 0;
                        document.getElementById(datadest).style.height = document.getElementById(datadest).scrollHeight + 'px';
                    }
                });
                Dropzone.autoDiscover = false;
                $("#dropzone" + index).dropzone({
                    url: '/upload',
                    maxFiles: 10,
                    dictDefaultMessage: "Cliquez ici pour charger des images ou déposez les à cet emplacement",

                    success: function (data, textStatus, XMLHttpRequest) {

                    },
                    init: function () {
                        myDropzone = this;
                        this.on("sending", function (file, xhr, formData) {
                            formData.append("_token", CSRF_TOKEN);
                            formData.append("from", "singuliers");
                            formData.append("path", $(this.element).attr('data-link'));
                            formData.append("id", {{ $rapport->rapport_id }});
                        });
                        this.on("success", function (file, responseText) {

                        });

                    }
                });
            });

        });
    </script>
@endsection