@extends('layouts.rapports.layout', [
    'title' => 'Rapport appareil indépendant de chauffage au bois'
])

@section('content')
    @if(auth()->user()->user_type < 5)
        <div class="btn-group">
            <button type="button" aria-haspopup="true" aria-expanded="false" {{-- data-toggle="dropdown"--}}
            class="btn-wide mb-2 mr-2 dropdown-toggle btn btn-primary">
            </button>
            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu"
                 style="min-width: 30rem">
                @if(isset($photos) && count($photos) > 0)
                    @foreach($photos as $photo)
                        <img class="dropdown-item" src="{{ $photo['url'] }}" alt="">
                    @endforeach
                @endif
            </div>
        </div>
    @endif
    <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"
                            @if(auth()->user()->fonction_id === 8) style="display: none" @endif>
                            @foreach (config('rapports.rapport_ite.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="{{ isset($new) ? '/rapports/new' : '/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_ite.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">
                                            @if(isset($section['multiple']))
                                                @include('layouts.rapports.generation_rapport_multiple')
                                            @else
                                                @include('layouts.rapports.generation_rapport')
                                            @endif
                                        </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')
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            $('input:radio').radiocharm();

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

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

            });

            $('.add_mur').click(function (event) {
                event.stopPropagation();
                event.stopImmediatePropagation();
                $('#count_murs').val($(".row_mur").length + 1);

                let x = '<tr id="mur_row_' + $('#count_murs').val() + '" class="row_mur">' +
                    '<td style="width:40%;font-weight:800">Mur ' +
                    '<span class="num_mur">' + $('#count_murs').val() + '</span>' +
                    '<div>' +
                    '<input class="form-control" value="" type="text" name="nom_mur[]" placeholder="Donnez un nom au mur">' +
                    '</div>' +
                    '</td>' +
                    '<td style="width:40%;padding-top:44px">' +
                    '<input  name="surface_mur[]" class="form-control surface_mur" value="">' +
                    '</td>' +
                    '<td style="width:20%;border:none;;padding-top:44px">' +
                    '<a class="btn btn-danger del_epaisseur" data-id="' + $('#count_murs').val() + '">-</a>' +
                    '</td>' +
                    '<td style="width:20%;padding-top:44px">' +
                    '<a class="btn btn-warning add_ouverture " data-id="' + $('#count_murs').val() + '">Ajouter une ouverture</a>' +
                    '</td>' +
                    '</tr>' +
                    '<tr><td  colspan="4"><table style="width:100%" class="append_ouverture" id="append_ouverture_' + $('#count_murs').val() + '"><tr><td colspan="4"></td></tr></table></td></tr>';
                $('#table_epaisseur').one().append(x);

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

                $('.surface_mur').blur(function () {
                    calculate();
                });

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

                $('.add_ouverture').click(function (event) {
                    event.stopPropagation();
                    event.stopImmediatePropagation();
                    let id = $(this).data('id');
                    let id_minus = parseInt(parseInt(id) - 1);
                    let newrow = '<tr class="white ouverture_mur_"><td style="width:40%;text-align: right;    padding-right: 13px;">Ouverture <div><input class="form-control"  type="text" name="nom_ouverture[' + id_minus + '][]" style="    max-width: 38%;    float: right;" placeholder="Donnez un nom"></div></td><td style="width:40%"  class="white"><input  name="surface_ouverture[' + id_minus + '][]" class="form-control surface_ouverture input_ouverture" value=""></td><td style="width:20%" ><a class="btn btn-danger del_ouverture">-</a></td><td style="width:20%" ></td></tr>';

                    $("#append_ouverture_" + id).append(newrow);

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

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

                    });

                    calculate();
                });
            });

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

                }
                calculate();
            });

            $('.add_ouverture').click(function (event) {
                event.stopPropagation();
                event.stopImmediatePropagation();
                let id = $(this).data('id');
                let id_minus = parseInt(parseInt(id) - 1);
                let newrow = '<tr class="white ouverture_mur_"><td style="width:40%;text-align: right; padding-right: 13px;">Ouverture <div><input class="form-control"  type="text" name="nom_ouverture[' + id_minus + '][]" style="    max-width: 38%;    float: right;" placeholder="Donnez un nom"></div></td><td style="width:40%"  class="white"><input  name="surface_ouverture[' + id_minus + '][]" class="form-control surface_ouverture input_ouverture_' + id_minus + '" value=""></td><td style="width:20%" ><a class="btn btn-danger del_ouverture">-</a></td><td style="width:20%" ></td></tr>';

                $("#append_ouverture_" + id).append(newrow);

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

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

                });

                calculate();
            });

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

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

            })

            $('#choose_client').change(function () {
                $.ajax({
                    url: '/api/client/' + $(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);
                        });
                    },
                });

            });

            $('.surface_mur').blur(function () {
                calculate();
            });

            $('.surface_ouverture').blur(function () {
                calculate();
            });

            function calculate() {

                let surface_totale = 0;
                document.querySelectorAll('.surface_mur').forEach((item) => {
                    surface_totale += parseFloat(item.value.replace(',', '.'))
                })

                document.querySelectorAll('.surface_ouverture').forEach((item) => {
                    surface_totale -= parseFloat(item.value.replace(',', '.'))
                })

                document.getElementById('surface_realisee_ite').value = parseFloat(surface_totale).toFixed(2);
                // parseFloat($('#surface_realisee_ite').val()).toFixed(2);
            }

            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
                        })
                },*/
                success: function (data, textStatus, XMLHttpRequest) {
                },
                init: function () {
                    this.on("sending", function (file, xhr, formData) {
                        formData.append("_token", CSRF_TOKEN);
                        formData.append("from", "rapport_id");
                        formData.append("path", "/rapports/rapport_{{ $rapport->rapport_id }}");
                        formData.append("id", {{ $rapport->rapport_id }});
                    });
                    this.on("success", function (file, responseText) {

                    });
                }
            });

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

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

            });

            $('input[type=text]').keyup(function () {
                $(this).removeClass('error');
            })

            const resultat = document.getElementsByClassName('conformite_ite');

            for (let item of resultat) {
                item.parentNode.addEventListener('click', function () {
                    if (item.value === 'non_verifiable') {
                        $('#obs_ite_line').show();
                    } else {
                        $('#obs_ite_line').hide();
                    }
                });
            }

            $('#obs_ite_line').hide();

            // check_nature();

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

            // $('.check_nature').click(function (event) {
            //     check_nature();
            // });

            $("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');
                }

            });




            $('.del_epaisseur').click(function () {
                $(this).closest('tr').remove();
            });

            let select = document.querySelector('.choose_materiel_id');
            select.addEventListener('change', (event) => {
                let element = select.selectedOptions;
                let index = select.value;

                if (index !== undefined && index !== '') {
                    axios.get('/api/materiaux/' + index + '/iso', {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                    }).then(response => {
                        document.querySelector('input[name="nature_isolation_' + select.dataset.dest + '"]').value = response.data.type;
                        document.querySelector('input[name="marque_isolation_' + select.dataset.dest + '"]').value = element[0].innerText;
                        document.querySelector('input[name="epaisseur_isolation_' + select.dataset.dest + '"]').value = response.data.epaisseur;
                    })
                }
            });

        });
    </script>
    @if(auth()->user()->fonction_id === 8)
        <style>
            .tab-content > .tab-pane {
                display: block !important;
            }

            .card-body {
                display: block;
            }

            .form-wizard-content {
                width: 100% !important;
            }
        </style>
    @endif
@endsection