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

@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_calo.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_calo.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();

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

                let x = "<tr id=\"line_" + $('#count_murs').val() + "\" class=\"line_table\">" +
                    "<td style=\"width:40%;font-weight:800\">" +
                    "<div><input class=\"form-control\" value=\"\" type=\"text\"" +
                    "name=\"diametre_tuyauterie[]\" placeholder=\"Donnez un diamètre\"></div></td>" +
                    "<td style=\"width:40%;font-weight:800\">" +
                    "<div><input class=\"form-control\" value=\"\" type=\"text\"" +
                    "name=\"epaisseur_tuyauterie[]\" placeholder=\"Donnez une épaisseur\"></div></td>" +
                    "<td style=\"width:40%;font-weight:800\">" +
                    "<div><input class=\"form-control\" value=\"\" type=\"text\"" +
                    "name=\"longueur_tuyauterie[]\" placeholder=\"Donnez une longueur\"></div></td>" +
                    "<td style=\"width:20%;border:none;\"><a class=\"btn btn-danger del_epaisseur\" " +
                    "data-id=\"" + $('#count_murs').val() + "\">-</a></td>" +
                    "</tr>";

                $('#table_epaisseur').one().append(x);

                for (i = 0; i < $(".row_mur").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) + "][]");
                    }
                });

                $('.add_ouverture').click(function (event) {
                    event.stopPropagation();
                    event.stopImmediatePropagation();
                    var id = $(this).data('id');
                    var id_minus = parseInt(parseInt(id) - 1);
                    var 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 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();

                    });

                });

            });

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

                let x = "<tr id=\"line_" + $('#count_murs').val() + "\" class=\"line_table_2\">" +
                    "<td style=\"width:40%;font-weight:800\">" +
                    "<div><input class=\"form-control\" value=\"\" type=\"text\"" +
                    "name=\"diametre_tuyauterie_sanitaire[]\" placeholder=\"Donnez un diamètre\"></div></td>" +
                    "<td style=\"width:40%;font-weight:800\">" +
                    "<div><input class=\"form-control\" value=\"\" type=\"text\"" +
                    "name=\"epaisseur_tuyauterie_sanitaire[]\" placeholder=\"Donnez une épaisseur\"></div></td>" +
                    "<td style=\"width:40%;font-weight:800\">" +
                    "<div><input class=\"form-control\" value=\"\" type=\"text\"" +
                    "name=\"longueur_tuyauterie_sanitaire[]\" placeholder=\"Donnez une longueur\"></div></td>" +
                    "<td style=\"width:20%;border:none;\"><a class=\"btn btn-danger del_epaisseur\" " +
                    "data-id=\"" + $('#count_murs').val() + "\">-</a></td>" +
                    "</tr>";

                $('#table_epaisseur_2').one().append(x);

                for (i = 0; i < $(".row_mur").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) + "][]");
                    }
                });

                $('.add_ouverture').click(function (event) {
                    event.stopPropagation();
                    event.stopImmediatePropagation();
                    var id = $(this).data('id');
                    var id_minus = parseInt(parseInt(id) - 1);
                    var 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 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();

                    });
                });

            });

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

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

            })

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

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

            // GESTION DES MATERIAUX
            let materiel = document.getElementById('choose_materiel_id');
            let text_materiel = document.getElementById('marque_isolation_chauffage');

            materiel.addEventListener('change', () => {
                let element = materiel.selectedOptions;
                let index = materiel.value;

                text_materiel.value = element[0].innerText;

                axios.get('/api/materiaux/' + index, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                }).then(axiosResponse => {
                    const val = document.getElementsByName('longueur_tuyauterie[]');
                    let array_values = {};
                    const data = axiosResponse.data;

                    val.forEach((item, pos) => {
                        if (item.value != 0) {
                            array_values[pos] = item.value;
                        }
                    });
                    document.querySelectorAll('.line_table').forEach(e => e.remove());

                    data.forEach((item, key) => {
                        let value = item.split(';');

                        let el = "<tr id=\"line_" + key + "\" class=\"line_table\">" +
                            "<td style=\"width:40%;font-weight:800\">" +
                            "<div><input class=\"form-control\" value=\"" + value[0] + "\" type=\"text\"" +
                            "name=\"diametre_tuyauterie[]\" placeholder=\"Donnez un diamètre\"></div></td>" +
                            "<td style=\"width:40%;font-weight:800\">" +
                            "<div><input class=\"form-control\" value=\"" + value[1] + "\" type=\"text\"" +
                            "name=\"epaisseur_tuyauterie[]\" placeholder=\"Donnez une épaisseur\"></div></td>" +
                            "<td style=\"width:40%;font-weight:800\">" +
                            "<div><input class=\"form-control\" value=\"" + (array_values[key] !== undefined ? array_values[key] : '') + "\" type=\"text\"" +
                            "name=\"longueur_tuyauterie[]\" placeholder=\"Donnez une longueur\"></div></td>" +
                            "<td style=\"width:20%;border:none;\"><a class=\"btn btn-danger del_epaisseur\" " +
                            "data-id=\"" + key + "\">-</a></td>" +
                            "</tr>";

                        $('#table_epaisseur').append(el);

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

                        const cells = document.getElementsByName('longueur_tuyauterie[]');
                        sumsTable(cells, 'longueur_realisee_chauffage');
                    })
                })
            });

            let materiel_sanitaire = document.getElementById('choose_materiel_id_sanitaire');
            let text_materiel_sanitaire = document.getElementById('marque_isolation_eau');

            materiel_sanitaire.addEventListener('change', (event) => {
                let element = materiel_sanitaire.selectedOptions;
                let index = materiel_sanitaire.value;

                text_materiel_sanitaire.value = element[0].innerText;

                axios.get('/api/materiaux/' + index, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                }).then(axiosResponse => {
                    const val = document.getElementsByName('longueur_tuyauterie_sanitaire[]');
                    let array_values = {};
                    const data = axiosResponse.data;

                    val.forEach((item, pos) => {
                        if (item.value !== 0) {
                            array_values[pos] = item.value;
                        }
                    });
                    document.querySelectorAll('.line_table_2').forEach(e => e.remove());

                    data.forEach((item, key) => {
                        let value = item.split(';');

                        let el = "<tr id=\"line_" + key + "_2\" class=\"line_table_2\">" +
                            "<td style=\"width:40%;font-weight:800\">" +
                            "<div><input class=\"form-control\" value=\"" + value[0] + "\" type=\"text\"" +
                            "name=\"diametre_tuyauterie_sanitaire[]\" placeholder=\"Donnez un diamètre\"></div></td>" +
                            "<td style=\"width:40%;font-weight:800\">" +
                            "<div><input class=\"form-control\" value=\"" + value[1] + "\" type=\"text\"" +
                            "name=\"epaisseur_tuyauterie_sanitaire[]\" placeholder=\"Donnez une épaisseur\"></div></td>" +
                            "<td style=\"width:40%;font-weight:800\">" +
                            "<div><input class=\"form-control\" value=\"" + (array_values[key] !== undefined ? array_values[key] : '') + "\" type=\"text\"" +
                            "name=\"longueur_tuyauterie_sanitaire[]\" placeholder=\"Donnez une longueur\"></div></td>" +
                            "<td style=\"width:20%;border:none;\"><a class=\"btn btn-danger del_epaisseur\" " +
                            "data-id=\"" + key + "\">-</a></td>" +
                            "</tr>";

                        $('#table_epaisseur_2').append(el);
                        $('.del_epaisseur').click(function () {
                            $(this).closest('tr').remove();
                        });

                        const cells_sanitaire = document.getElementsByName('longueur_tuyauterie_sanitaire[]');
                        sumsTable(cells_sanitaire, 'longueur_realisee_eau');
                    })
                })
            });

            const cells = document.getElementsByName('longueur_tuyauterie[]');
            sumsTable(cells, 'longueur_realisee_chauffage');

            const cells_sanitaire = document.getElementsByName('longueur_tuyauterie_sanitaire[]');
            sumsTable(cells_sanitaire, 'longueur_realisee_eau');

            function sumsTable(cells, dest) {
                cells.forEach((item, key) => {
                    item.addEventListener('keyup', event => {
                        event.preventDefault();
                        let filtered = Array.from(cells).filter(function (el, k) {
                            return k !== key;
                        });
                        let sums = parseInt(item.value);

                        filtered.forEach((i) => {
                            if (!isNaN(parseInt(i.value))) {
                                sums += parseInt(i.value);
                            }
                        })

                        document.getElementById(dest).value = sums;
                    })
                });
            }
        });
    </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