@extends('layouts.rapports.layout', [
    'title' => 'Rapport chauffe-eau solaire'
])

@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_solaire.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: 0;">
                                @foreach(config('rapports.rapport_solaire.section') as $index => $section)
                                    <div id="{{ $section['id'] }}" class="tab-pane step-content"
                                         @if($section['id'] == 'step-client') 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" onclick="window.scrollTo(0, 0);"
                                class="btn-shadow btn-wide float-right btn-pill btn-hover-shine btn btn-primary">
                            Étape suivante
                        </button>
                        <button type="button" id="previous_step" data-step="0"
                                onclick="window.scrollTo(0, 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();

            const button_solaire = document.querySelectorAll('.conformite_solaire');
            const text_non_verifiable_solaire = document.getElementById('non_verifiable_solaire');

            show_anomalie(button_solaire, text_non_verifiable_solaire);

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

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

            $('.select2').select2({
                themes: 'bootstrap',
            });

            Dropzone.autoDiscover = false;

            $('.dropzone').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", "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 () {
                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');
            })

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

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

            });

            let steps = [];
            steps[0] = 'step-client';
            steps[1] = 'step-inspection';
            steps[2] = 'step-beneficiaire';
            steps[3] = 'step-entreprise';
            steps[4] = 'step-nature_101';
            steps[5] = 'step-rapport';
            steps[6] = 'step-photos';
            steps[7] = 'step-signature';
            steps[8] = 'step-322';

            const next = document.getElementById('next_step');
            const previous = document.getElementById('previous_step');
            previous.disabled = true;

            $('#next_step').click(function (event) {

                $('#type_pac').children().each(function () {
                    if ($(this).hasClass('active')) {
                        $(this).click();
                    }
                })

                var r = 0;

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

                    if ($(this).is(':visible') && $(this).hasClass('required') && $(this).val().length == 0) {
                        r = r + 1;

                        $(this).addClass('error');
                        $(this).closest('label').addClass('error');
                    }
                })
                var error = 0;

                $('.multiple_check').each(function () {
                    if ($(this).is(':visible')) {
                        var check = 0;
                        var inputs = $(this).find("input");
                        inputs.each(function () {

                            if ($(this).is(":checked")) {
                                check = check + 1;

                            }
                        })
                        if (check == 0) {
                            r = 1;

                            inputs.each(function () {
                                $(this).addClass('error');
                                $(this).closest('label').addClass('error');
                            })
                        }
                    }

                })

                $('.to_check').each(function () {

                    if ($(this).is(':visible')) {
                        var check = 0;
                        var inputs = $(this).find("input");
                        inputs.each(function () {

                            if ($(this).hasClass('required_check') && $(this).closest('label').hasClass('active')) {
                                check = check + 1;

                            }
                        })
                        if (check == 0) {
                            r = 1;

                            inputs.each(function () {
                                $(this).addClass('error');
                                $(this).closest('label').addClass('error');
                            })
                        }
                    }

                })

                if ($('#check_comble').val() == '' && $('#check_comble').is(':visible')) {
                    r = 1;
                }

                if (r == 0) {
                    /*       var index_v = parseInt($('#next_step').data('step'));
                           $('#previous_step').data('step', index_v + 1);
                           $('#next_step').data('step', index_v + 1);

                           if ((index_v + 2) === steps.length) {
                               next.disabled = true;
                           } else {
                               next.disabled = false;
                           }
                           previous.disabled = false;
                           $('#' + steps[index_v]).hide();
                           $('#' + steps[index_v + 1]).show();
                           $('#' + steps[index_v] + '-nav').removeClass('active');
                           $('#' + steps[index_v] + '-nav').addClass('done');
                           $('#' + steps[index_v + 1] + '-nav').addClass('active');
                           steps.forEach((item, key) => {
                               if (key === index_v) {
                                   $('#' + steps[index_v + 1] + '-nav').addClass('active');
                               } else {
                                   $('#' + steps[index_v - 1] + '-nav').removeClass('active');
                               }
                           })*/
                } else {
                    $('body').scrollTo('.error').offset();
                }
            });

            $('#previous_step').click(function (event) {

                /*           var index_v = parseInt($('#previous_step').data('step'));
                           $('#previous_step').data('step', index_v - 1);
                           $('#next_step').data('step', index_v - 1);
                           previous.disabled = false;
                           next.disabled = false;
                           $('#' + steps[index_v]).hide();
                           $('#' + steps[index_v - 1]).show();
                           $('#' + steps[index_v] + '-nav').removeClass('active');
                           $('#' + steps[index_v] + '-nav').addClass('done');
                           $('#' + steps[index_v - 1] + '-nav').addClass('active');
           */
            });

            $('.combles').show();

            function show_anomalie(button, text) {
                button.forEach((item) => {
                    item.parentElement.addEventListener('click', (e) => {
                        if (item.parentElement.innerText.includes('Non vérifiable')) {
                            text.style.display = 'block';
                        } else {
                            text.style.display = 'none';
                        }
                    })
                    if (item.parentElement.innerText.includes('Non vérifiable') && item.parentElement.classList.contains('active')) {
                        text.style.display = 'block';
                    } else {
                        text.style.display = 'none';
                    }
                });
            }
        });

    </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