polizia_frascati/resources/views/livewire/report.blade.php

<div class="m-3">

    @include('components.report.nuovo.add')
    @include('components.report.nuovo.add-modal')
    @include('components.report.alerting.alert')

    @if (!$add && !$update)
        @include('components.report.list.verbali')
    @else
            <form>
                @include('components.report.modifica.header')
                @include('components.report.modifica.menu')
                    <div class="tab-content" id="custom-tabs-three-tabContent">
                        @include('components.report.protocollo.protocollo')
                        @include('components.report.parti.parti-accertatori')
                        @include('components.report.segnalazione.segnalazione-page')
                        @include('components.report.campo-sinistro.campo-sinistro')
                        @include('components.report.segnaletica.segnaletica')
                        @include('components.report.testimoni.testimone')
                        @include('components.report.allegati.allegato')
                    </div>
                @include('components.report.modifica.footer')
            </form>

        @include('components.report.anagrafica.anagrafica-modal')

        @include('components.report.veicoli.veicolo-modal')

        @include('components.report.veicoli.veicolo-data-parte')

        @include('components.report.pedoni.pedone-modal')

        @include('components.report.allegati.allegati-modal')

        @include('components.report.accertatori.accertatore-modal')

    @endif

</div>



@push('css')
    <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="/dist/css/app.css">
@endpush

@push('scripts')
    <script src="/plugins/select2/js/select2.min.js"></script>
    <script src="/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <script>
        var maxDamageColumns = 4;
        var displayedDamageColumns = 1;

        function hasColumnValues(columnNumber) {
            const selectors = [
                `data_tipo_danno_${columnNumber}`,
                `data_entita_danno_${columnNumber}`,
                `data_effetto_danno_${columnNumber}`,
                `data_parte_macchina_${columnNumber}`
            ];

            return selectors.some(selector => {
                const element = document.querySelector(`[wire\\:model="${selector}"]`);
                return element && element.value;
            });
        }

        function showNextDamageColumn() {
            if (displayedDamageColumns < maxDamageColumns) {
                displayedDamageColumns++;
                var nextColumn = document.getElementById('damage-column-' + displayedDamageColumns);
                if (nextColumn) {
                    nextColumn.style.display = 'block';
                }
                if (displayedDamageColumns >= maxDamageColumns) {
                    document.getElementById('add-damage-btn').style.display = 'none';
                }
                window.Livewire.rescan();
            }
        }

        function initializeDamageColumns() {

            for (let i = 2; i <= maxDamageColumns; i++) {
                if (hasColumnValues(i)) {
                    var column = document.getElementById('damage-column-' + i);
                    if (column) {
                        column.style.display = 'block';
                        displayedDamageColumns = i;
                    }
                }
            }

            if (displayedDamageColumns >= maxDamageColumns) {
                document.getElementById('add-damage-btn').style.display = 'none';
            }
        }

        document.addEventListener('DOMContentLoaded', initializeDamageColumns);

        document.addEventListener('livewire:load', function () {
            Livewire.hook('message.processed', () => {
                initializeDamageColumns();
            });
        });

        Livewire.on('load-check', () => {

            $("input[data-bootstrap-switch]").each(function () {
                $(this).bootstrapSwitch({
                    onSwitchChange: function (e, state) {
                        @this.set($(this).prop('id'), state);
                    }
                });
            });

        });

        Livewire.on('load-select', () => {
            const stradario = [
                "localita_due", "intersezione_con", "segnaletica_verticale_1_via",
                "segnaletica_verticale_2_via", "segnaletica_orizzontale_1_via",
                "segnaletica_orizzontale_2_via", "segnaletica_verticale_3_via",
                "segnaletica_verticale_4_via", "segnaletica_orizzontale_3_via",
                "segnaletica_orizzontale_4_via", "vei_carta_circolazione_rilasciata_da_di"
            ];

            stradario.forEach(stradarioSelect);

            function stradarioSelect(value) {
                const ajaxUrl = (value === "vei_carta_circolazione_rilasciata_da_di") ?
                    '/localita' :
                    '/stradario_api';

                $('.' + value).select2({
                    theme: 'bootstrap4',
                    ajax: {
                        url: ajaxUrl,
                        dataType: 'json'
                    }
                });

                $('.' + value).on('change', function (e) {
                    var data = $('.' + value).select2("val");
                    @this.set(value, data);
                });
            }

            $('.anagraficaClass').select2({
                theme: 'bootstrap4',
                ajax: {
                    url: '/anagrafica',
                    dataType: 'json'
                }
            });

            $('.anagraficaClass').on('change', function (e) {
                var data = $(e.currentTarget).val();
                var progressive = $(e.currentTarget).data("progressive");
                @this.updateAnagraficaParteCoinvolta(data, progressive);
            });

            const anagrafiche = ["richiestaAnagrafica", "data_testi_oculari_0", "data_testi_oculari_1",
                "data_testi_oculari_2", "data_testi_oculari_3"
            ];
            anagrafiche.forEach(anagraficheSelect);

            function anagraficheSelect(value) {
                $('.' + value).select2({
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/anagrafica',
                        dataType: 'json'
                    }
                });

                $('.' + value).on('change', function (e) {
                    var data = $('.' + value).select2("val");
                    @this.set(value, data);
                });

            }

            const accertatori = ["accertatore_1", "accertatore_2", "accertatore_3", "accertatore_4",
                "accertatore_5"
            ];
            accertatori.forEach(accertatoreSelect);

            function accertatoreSelect(value) {
                $('.' + value).select2({
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/accertatori',
                        dataType: 'json'
                    }
                });
                $('.' + value).on('change', function (e) {
                    var data = $('.' + value).select2("val");
                    @this.set(value, data);
                });
            }

            $('.veicoliClass').select2({
                theme: 'bootstrap4',
                ajax: {
                    url: '/veicoli',
                    dataType: 'json'
                }
            });

            $('.veicoliClass').on('change', function (e) {
                var data = $(e.currentTarget).val();
                var progressive = $(e.currentTarget).data("progressive");
                @this.updateVeicoloParteCoinvolta(data, progressive);
            });

            $('.localita_uno').select2({
                theme: 'bootstrap4',
                ajax: {
                    url: '/localita',
                    dataType: 'json'
                }
            });
            $('.localita_uno').on('change', function (e) {
                var data = $('.localita_uno').select2("val");
                @this.set('localita_uno', data);
            });

            const multiple = ["tipo_urto", "tipo_segnalazione", "segnalazione_pervenuta_da", "materiale_recuperato",
                "ausilio_altri_enti", "condizioni_luce", "tipo_strada", "segnaletica_verticale_1",
                "segnaletica_verticale_2", "segnaletica_verticale_3", "segnaletica_verticale_4",
                "segnaletica_orizzontale_1", "segnaletica_orizzontale_2", "segnaletica_orizzontale_3",
                "segnaletica_orizzontale_4"
            ];
            multiple.forEach(multipleSelect);

            function multipleSelect(value) {
                $('.' + value).select2({
                    theme: 'bootstrap4'
                });
                $('.' + value).on('change', function (e) {
                    var data = $('.' + value).select2("val");
                    @this.set(value, data);
                });
            }
        });
        Livewire.on('load-anagrafica-modal', () => {
            const modalsAnag = [
                "anag_birth_town_id",
                "anag_residenza_town_id",
                "anag_documento_rilasciato_da_di_foreign_localita",
                "anag_sede_legale_town_id",
                "anag_foreign_birth_country",
                "anag_foreign_residence_country",
                "anag_pg_foreign_residence_country"
            ];

            const countryFields = [
                "anag_foreign_birth_country",
                "anag_foreign_residence_country"
            ];

            function modalsAnagSelect(value) {
                $('.' + value).select2({
                    dropdownParent: $("#anagraficaParte .modal-content"),
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/localita',
                        dataType: 'json'
                    },
                    width: '100%'
                }).on('change', function (e) {
                    var data = $('.' + value).select2("val");
                    @this.set(value, data);
                });

                const currentValue = $('.' + value).val();
                const currentText = $('.' + value).find('option:selected').text();
                if (currentValue) {
                    let option = new Option(currentText, currentValue, true, true);
                    $('.' + value).append(option).trigger('change');
                }
            }

            function initializeCountrySelects(value) {
                $('.' + value).select2({
                    dropdownParent: $("#anagraficaParte .modal-content"),
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/countries',
                        dataType: 'json'
                    },
                    width: '100%'
                }).on('change', function (e) {
                    var data = $('.' + value).select2("val");
                    @this.set(value, data);
                });

                const currentValue = $('.' + value).val();
                const currentText = $('.' + value).find('option:selected').text();
                if (currentValue) {
                    let option = new Option(currentText, currentValue, true, true);
                    $('.' + value).append(option).trigger('change');
                }
            }

            function initializeModalState() {
                const currentType = $('input[name="anag_type"]:checked').val();
                if (currentType == 0 || !currentType) {
                    $("#boxPersonaFisica").show();
                    $("#boxPersonaGiuridica").hide();

                    const isStraniera = $('select[wire\\:model="anag_nazionalita"]').val() === "1";
                    $("#foreignBirthCountry")[isStraniera ? 'show' : 'hide']();
                    $("#foreignBirthCity")[isStraniera ? 'show' : 'hide']();
                    $("#foreignResidenceCountry")[isStraniera ? 'show' : 'hide']();
                    $("#foreignResidenceCity")[isStraniera ? 'show' : 'hide']();
                    if (isStraniera) {
                        $("#pippo").hide();
                        $(".anag_residenza_town_id").closest('.row').hide();
                    }
                } else {
                    $("#boxPersonaFisica").hide();
                    $("#boxPersonaGiuridica").show();

                    const isPGStraniera = $('select[wire\\:model="nazionalita"]').val() === "1";
                    $("#foreignPGResidenceCountry")[isPGStraniera ? 'show' : 'hide']();
                    $("#foreignPGResidenceCity")[isPGStraniera ? 'show' : 'hide']();

                    if (isPGStraniera) {
                        $(".anag_sede_legale_town_id").closest('.row').hide();
                        $(".anag_sede_legale_cap").closest('.row').hide();
                        $(".anag_sede_legale_prov_id").closest('.row').hide();
                    } else {
                        $(".anag_sede_legale_town_id").closest('.row').show();
                        $(".anag_sede_legale_cap").closest('.row').show();
                        $(".anag_sede_legale_prov_id").closest('.row').show();
                    }
                }

                setTimeout(() => {
                    modalsAnag.forEach(modalsAnagSelect);
                }, 100);

                setTimeout(() => {
                    countryFields.forEach(initializeCountrySelects);
                }, 100);
            }

            $('select[wire\\:model="anag_nazionalita"]').change(function () {
                const isStraniera = $(this).val() === "1";
                $("#foreignBirthCountry")[isStraniera ? 'show' : 'hide']();
                $("#foreignBirthCity")[isStraniera ? 'show' : 'hide']();
                $("#foreignResidenceCountry")[isStraniera ? 'show' : 'hide']();
                $("#foreignResidenceCity")[isStraniera ? 'show' : 'hide']();

                if (isStraniera) {
                    $("#pippo").hide();
                    $(".anag_residenza_town_id").closest('.row').hide();
                    $(".anag_documento_rilasciato_da_di_foreign_localita").closest('.row').hide();
                } else {
                    $("#pippo").show();
                    $(".anag_residenza_town_id").closest('.row').show();
                    @this.set('anag_foreign_birth_country', '');
                    @this.set('anag_foreign_birth_city', '');
                    @this.set('anag_foreign_residence_country', '');
                    @this.set('anag_foreign_residence_city', '');
                }
            });

            initializeModalState();

            $('input[name="anag_type"]').change(function () {
                var x = $('input[name="anag_type"]:checked').val();
                if (x == 0) {
                    $("#boxPersonaFisica").show();
                    $("#boxPersonaGiuridica").hide();
                    @this.changeAnagType(0);
                } else {
                    $("#boxPersonaFisica").hide();
                    $("#boxPersonaGiuridica").show();
                    setTimeout(() => {
                        modalsAnag.forEach(modalsAnagSelect);
                    }, 100);
                    @this.changeAnagType(1);
                }
            });

            Livewire.on('change-visualization', (type) => {
                $('input:radio[name="anag_type"]').filter('[value="' + type + '"]').prop('checked', true);
                if (type == 0) {
                    $("#boxPersonaFisica").show();
                    $("#boxPersonaGiuridica").hide();
                } else {
                    $("#boxPersonaFisica").hide();
                    $("#boxPersonaGiuridica").show();
                    setTimeout(() => {
                        modalsAnag.forEach(modalsAnagSelect);
                    }, 100);
                }
            });

            $('select[wire\\:model="nazionalita"]').change(function () {
                const isPGStraniera = $(this).val() === "1";
                $("#foreignPGResidenceCountry")[isPGStraniera ? 'show' : 'hide']();
                $("#foreignPGResidenceCity")[isPGStraniera ? 'show' : 'hide']();

                if (isPGStraniera) {
                    $(".anag_sede_legale_town_id").closest('.row').hide();
                    $(".anag_sede_legale_cap").closest('.row').hide();
                    $(".anag_sede_legale_prov_id").closest('.row').hide();
                } else {
                    $(".anag_sede_legale_town_id").closest('.row').show();
                    $(".anag_sede_legale_cap").closest('.row').show();
                    $(".anag_sede_legale_prov_id").closest('.row').show();
                    @this.set('anag_foreign_residence_country', '');
                    @this.set('anag_foreign_residence_city', '');
                }
            });

            $('#anagraficaParte').on('show.bs.modal', function () {
                initializeModalState();
            });

            $('#anagraficaParte').on('hidden.bs.modal', function () {
                modalsAnag.forEach(value => {
                    if ($('.' + value).data('select2')) {
                        $('.' + value).select2('destroy');
                    }
                });
            });
        });

        Livewire.on('load-select-modal', () => {

            initializeSelect2Controls();

            const modals = [
                "data_proprietari", "data_coproprietari", "data_conducenti",
                "data_passeggero_0", "data_passeggero_1", "data_passeggero_2", "data_passeggero_3",
                "data_infortunato_extra_0", "data_infortunato_extra_1", "data_infortunato_extra_2",
                "data_infortunato_extra_3","anagrafica_id"
            ];

            function initializeSelect2(element, url = '/anagrafica') {
                return $(element).select2({
                    dropdownParent: document.body,
                    theme: 'bootstrap4',
                    ajax: {
                        url: url,
                        dataType: 'json'
                    },
                    width: '100%'
                });
            }

            function initializeRelatedElements(value, data) {
                $('#' + value + "_cinture").hide();
                $('.' + value + "_edit").hide();
                $('.' + value + "_remove").hide();
                $('.' + value + "_add").hide();

                if (data > 0) {
                    $('.' + value + "_edit").show();
                    $('.' + value + "_remove").show();
                    $('#' + value + "_cinture").show();
                } else {
                    $('.' + value + "_add").show();
                }
            }

            function modalsSelect(value) {
                const $select = $('.' + value);
                initializeSelect2($select);

                if (["data_proprietari", "data_coproprietari", "data_conducenti", "data_passeggero_0",
                    "data_passeggero_1", "data_passeggero_2", "data_passeggero_3"
                ].includes(value)) {
                    initializeRelatedElements(value, $select.val());
                }

                $select.on('change', function (e) {
                    const data = $(this).val();
                    @this.set(value, data);

                    if (["data_proprietari", "data_coproprietari", "data_conducenti", "data_passeggero_0",
                        "data_passeggero_1", "data_passeggero_2", "data_passeggero_3"
                    ].includes(value)) {
                        initializeRelatedElements(value, data);
                    }
                });

                const currentValue = $select.val();
                const currentText = $select.find('option:selected').text();
                if (currentValue) {
                    const option = new Option(currentText, currentValue, true, true);
                    $select.append(option).trigger('change');
                }
            }

            $('#veicoloDataParte select').each(function () {
                if ($(this).data('select2')) {
                    $(this).select2('destroy');
                }
            });

            modals.forEach(modalsSelect);

            $('.data_polizze').each(function () {
                if ($(this).data('select2')) {
                    $(this).select2('destroy');
                }
                initializeSelect2(this, '/polizze').on('change', function (e) {
                    @this.set('data_polizze', $(this).val());
                });
            });

            $('#veicoloDataParte').on('hidden.bs.modal', function () {
                $('#veicoloDataParte select').each(function () {
                    if ($(this).data('select2')) {
                        $(this).select2('destroy');
                    }
                });
            });

            $('.compagnia_id').each(function() {
                if ($(this).data('select2')) {
                    $(this).select2('destroy');
                }
                    const currentValue = $(this).val();
                const currentText = $(this).find('option:selected').text();

                $(this).select2({
                    dropdownParent: document.body,
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/compagnie',
                        dataType: 'json'
                    },
                    width: '100%'
                }).on('change', function(e) {
                    @this.set('compagnia_id', $(this).val());
                });

                if (currentValue && currentText) {
                    const option = new Option(currentText, currentValue, true, true);
                    $(this).append(option).trigger('change');
                }
            });

            $('.agenzia').each(function() {
                if ($(this).data('select2')) {
                    $(this).select2('destroy');
                }
                const currentValue = $(this).val();
                const currentText = $(this).find('option:selected').text();

                $(this).select2({
                    dropdownParent: document.body,
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/polizze/agenzie',
                        dataType: 'json'
                    },
                    width: '100%'
                }).on('change', function(e) {
                    @this.set('agenzia', $(this).val());
                });

                if (currentValue && currentText) {
                    const option = new Option(currentText, currentValue, true, true);
                    $(this).append(option).trigger('change');
                }
            });

            $('.valida_dal').on('change', function(e) {
                @this.set('valida_dal', $(this).val());
            });

            $('.valida_al').on('change', function(e) {
                @this.set('valida_al', $(this).val());
            });

            $('.polizza_num').on('input', function(e) {
                @this.set('polizza_num', $(this).val());
            });


        });

        Livewire.on('updatePolizzaSelects', data => {
            // Initialize anagrafica_id select2
            const $anagrafica = $('.anagrafica_id');
            if ($anagrafica.data('select2')) {
                $anagrafica.select2('destroy');
            }
            $anagrafica.select2({
                dropdownParent: document.body,
                theme: 'bootstrap4',
                ajax: {
                    url: '/anagrafica',
                    dataType: 'json'
                },
                width: '100%'
            }).on('change', function(e) {
                @this.set('anagrafica_id', $(this).val());
            });

            // Set anagrafica value if exists
            if (data.anagrafica) {
                const option = new Option(data.anagrafica.text, data.anagrafica.id, true, true);
                $anagrafica.append(option).trigger('change');
            }

            // Initialize compagnia_id select2
            const $compagnia = $('.compagnia_id');
            if ($compagnia.data('select2')) {
                $compagnia.select2('destroy');
            }
            $compagnia.select2({
                dropdownParent: document.body,
                theme: 'bootstrap4',
                ajax: {
                    url: '/compagnie',
                    dataType: 'json'
                },
                width: '100%'
            }).on('change', function(e) {
                @this.set('compagnia_id', $(this).val());
            });

            // Set compagnia value if exists
            if (data.compagnia) {
                const option = new Option(data.compagnia.text, data.compagnia.id, true, true);
                $compagnia.append(option).trigger('change');
            }

            // Initialize agenzia select2
            const $agenzia = $('.agenzia');
            if ($agenzia.data('select2')) {
                $agenzia.select2('destroy');
            }
            $agenzia.select2({
                dropdownParent: document.body,
                theme: 'bootstrap4',
                ajax: {
                    url: '/polizze/agenzie',
                    dataType: 'json'
                },
                width: '100%'
            }).on('change', function(e) {
                @this.set('agenzia', $(this).val());
            });

            // Set agenzia value if exists
            if (data.agenzia) {
                const option = new Option(data.agenzia, data.agenzia, true, true);
                $agenzia.append(option).trigger('change');
            }
        });

        Livewire.on('load-select-pedone', () => {

            var x = $("#generalizzato").val();
            if (x == "3")
                $("#generalizzato_select").show();
            else
                $("#generalizzato_select").hide();
            $("#generalizzato").change(function () {
                var val = this.value;
                if (val == "3")
                    $("#generalizzato_select").show();
                else
                    $("#generalizzato_select").hide();
            });

            var x = $("#infortunato").val();
            if (x == "1")
                $("#infortunato_select").show();
            else
                $("#infortunato_select").hide();
            $("#infortunato").change(function () {
                var val = this.value;
                if (val == "1")
                    $("#infortunato_select").show();
                else
                    $("#infortunato_select").hide();
            });

        });

        Livewire.on('load-pedone', (value) => {
            $(".pedone").html(value);
        });

        Livewire.on('set-default-value', (id, text, element) => {

            $('.' + element).select2("val", $('.' + element + " option:contains('" + text + "')").val());

        });
        Livewire.on('add-default-value', (id, text, element) => {
            var newOption = new Option(text, id, false, false);
            $('.' + element).append(newOption).val(id).trigger('change');

            if (element == "data_conducenti" || element == "data_passeggero_0" || element == "data_passeggero_1" ||
                element == "data_passeggero_2" || element == "data_passeggero_3") {
                $('#' + element + "_cinture").hide();
                $('.' + element + "_edit").hide();
                $('.' + element + "_remove").hide();
                $('.' + element + "_add").hide();
                if (id > 0) {
                    $('.' + element + "_edit").show();
                    $('.' + element + "_remove").show();
                    $('.' + element + "_add").hide();
                    $('#' + element + "_cinture").show();
                } else
                    $('.' + element + "_add").show();

            }

        });

        Livewire.on('close-modal', () => {

            $("#anagraficaParte").modal('hide');
            $("#veicoloParte").modal('hide');
            $("#pedoneModal").modal('hide');
            $("#accertatoriModal").modal('hide');
            $("#allegatiModal").modal('hide');
        });

        Livewire.on('close-modal-parte-comune', () => {
            const selectFields = [
                'data_polizze',
                'data_proprietari',
                'data_conducenti',
                'data_passeggero_0',
                'data_passeggero_1',
                'data_passeggero_2',
                'data_passeggero_3',
                'data_infortunato_extra_0',
                'data_infortunato_extra_1',
                'data_infortunato_extra_2',
                'data_infortunato_extra_3'
            ];

            selectFields.forEach(field => {
                if ($(`.${field}`).length) {
                    $(`.${field}`).val(null).trigger('change');
                    if ($(`.${field}`).data('select2')) {
                        $(`.${field}`).select2('destroy');
                    }
                }
            });

            $("#veicoloDataParte").modal('hide');
        });
        $(document).on('click', '[data-dismiss="modal"]', function (e) {
            const modalId = $(this).closest('.modal').attr('id');
            if (modalId === 'veicoloDataParte') {
                e.preventDefault();
                Livewire.emit('closeAndResetModal');
            }
        });

        Livewire.on('attachments', (allegati) => {
            $("#attachments").html('');
            allegati.split("|").forEach(function (item) {
                $("#attachments").append(item + "<br>");
            });
        });

        Livewire.on('updateAnagrafica', (data, progressive) => {
            @this.updateAnagraficaParteCoinvolta(data, progressive);
        });


        Livewire.on('showLoading', (cls) => {
            $("." + cls).hide();
            $("." + cls + "Text").show();
        });

        Livewire.on('hideLoading', (cls) => {
            $("." + cls).show();
            $("." + cls + "Text").hide();
        });

        function initializeSelect2Controls() {
            console.log("initializeSelect2Controls");
            const modals = [
                "data_proprietari", "data_coproprietari", "data_conducenti",
                "data_passeggero_0", "data_passeggero_1", "data_passeggero_2", "data_passeggero_3",
                "data_infortunato_extra_0", "data_infortunato_extra_1", "data_infortunato_extra_2",
                "data_infortunato_extra_3","anagrafica_id"
            ];

            modals.forEach(value => {
                $('.' + value).select2({
                    dropdownParent: document.body,
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/anagrafica',
                        dataType: 'json'
                    },
                    width: '100%'
                });
            });
        }

    </script>
@endpush