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

@section('content')
    <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_industriel.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_industriel.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();
                    });
                });
            });
            $('input:radio').radiocharm();

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

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

            })

            $('.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) + "][]");

                }

            });

            $('#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",
                /*transformFile: function (file, done) {
                    const imageCompressor = new ImageCompressor();

                    imageCompressor.compress(file, {
                        // I assume the output image won't have the meta data anymore
                        checkOrientation: true,
                        // Limit output image width & height
                        // For controllable file size & avoid blank output image
                        // https://github.com/xkeshi/image-compressor#maxwidth
                        maxWidth: 81920,
                        maxHeight: 81920,
                        // 0.8 is the default and already good enough
                        // https://github.com/xkeshi/image-compressor#quality
                        quality: 0.6,
                        // Convert ALL PNG images to JPEG
                        convertSize: 0,
                    })
                        .then((result) => {
                            // Handle the compressed image file.
                            done(result)
                        })
                        .catch((err) => {
                            // Handle the error
                            throw err
                        })
                },*/
                /*     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');
                }

            });

            $('#check_comble').val($('#trigger_procede').val()).change();

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

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

            })

            check_nature();

            function check_nature() {
                if ($('#ite_bas_check').prop('checked')) {
                    $('#isolation_des_ite').show();
                } else {
                    $('#isolation_des_ite').hide();
                }
                if ($('#comble_perdu_check').prop('checked')) {

                    $('#isolation_des_combles').show();
                    $('.isolation_des_combles').show();

                    $('#check_comble').val($('#trigger_procede').val()).change();

                } else {
                    $('#isolation_des_combles').hide();
                    $('.isolation_des_combles').hide();

                }
                if ($('#rampant_toiture_check').prop('checked')) {
                    $('#isolation_des_murs_interieurs').show();
                } else {
                    $('#isolation_des_murs_interieurs').hide();
                }
            }

            $('.check_nature').click(function (event) {

                check_nature();

            });

            $("input[name='conformite_combles']").change(function () {

                if ($(this).val() == 'non_verifiable') {
                    $('#non_verifiable_combles_group').show();
                } else {
                    $('#non_verifiable_combles_group').hide();
                }

            });

            $("input[name='conformite_murs_interieurs']").change(function () {

                if ($(this).val() == 'non_verifiable') {
                    $('#non_verifiable_murs_interieurs_group').show();
                } else {
                    $('#non_verifiable_murs_interieurs_group').hide();
                }

            });

            $("input[name='conformite_ite']").change(function () {

                if ($(this).val() == 'non_verifiable') {
                    $('#non_verifiable_ite_group').show();
                } else {
                    $('#non_verifiable_ite_group').hide();
                }

            });


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

            });


            function check_inputs() {
                var r = 0;
                $('input[type=text]').each(function () {

                    if ($(this).hasClass('required') && $(this).is(':visible')) {
                        var r = r + 1;
                        alert($(this).val());
                        $(this).addClass('error');
                        $(this).closest('label').addClass('error');
                    }

                })
                alert(r);
                return r;
            }

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

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

            $('#check_comble').change(function () {

                if ($(this).val() != '') {

                    $('.combles_form').show();

                    if ($(this).val() == 1) {
                        $('.').show();
                        $('.deroule').hide();
                        $('.').show();

                    }
                    if ($(this).val() == 2) {
                        $('.deroule').show();
                        $('.').hide();
                        $('.deroule').show();
                    }

                } else {
                    $('.').hide();
                    $('.deroule').hide();
                }

            });

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

                let elems = document.querySelectorAll(".matelas");
                let index = elems.length;

                var a = '';
                a += '<div id="matelas_' + index + '">';
                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 += '<div class="position-relative form-group ">';

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

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

                a += '</div>';

                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_industriel_' + 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 >';

                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" style="top: -29px;">';

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

                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_industriel_' + index + '">Le matelas isolant n\'est pas constitué d\'une enveloppe démontable et équipé d\'un système de fermeture.</span>';
                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_industriel_' + index + '">Le matelas isolant n\'est pas adapté au diamètre nominal de la canalisation.</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_industriel_' + 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_industriel_' + 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">Nappe de laine de verre (>=35kg/m2) </label><br/>';

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

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

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

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

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

                a += '</label>';

                a += '</div>';

                a += '</div>';

                a += '<div >';

                a += '<label for="exampleEmail6">Nappe de laine de verre (>=70kg/m2) </label><br/>';

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

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

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

                a += '<input type="checkbox" id="nappe_70" name="nappe_70[' + 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_industriel_' + index + '">Le matelas isolant n\'est pas constitué de nappes de laine de verre de masse volumique supérieure ou égale à 35 kg/m³</span>';
                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_industriel_' + index + '">Le matelas isolant n\'est pas constitué de nappes de fibres de roche de masse volumique supérieure ou égale à 70 kg/m³</span>';
                a += '<span class="anomalie btn btn-danger" data-dest="observations_singulier_industriel_' + index + '">Les caractéristiques de la nappe constituant l\'isolant du matelas ne nous ont pas été communiqués.</span>';

                a += '</div>';

                a += '</div>';

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

                a += '<label for="exampleEmail6">Résistance thermique de l\'isolant à 70°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 à 90°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 ">';

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

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

                a += '</div>';

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

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

                a += '<input class="form-control required" type="text" name="resistance_thermique4[' + 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_industriel_' + index + '">La résistance thermique du matelas isolant est inférieure à :• 1,5 m².K/W à une température moyenne de 70°C pour un réseau d’eau chaude ou de retour de condensats • 1,2 m².K/W à une température moyenne de 90°C pour un réseau d’eau surchauffée • 1 m².K/W à une température moyenne de 110°C pour un réseau de vapeur • 1 m².K/W à une température moyenne de 120°C pour un réseau de fluide organique.</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_industriel[' + index + ']" id="observations_singulier_industriel_' + 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="{{ $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",
                    /*     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) {

                        });

                    }
                });
            });

        });
    </script>
@endsection