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

        Livewire.on('load-polizza-modal', () => {
            $('.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());
            });

            $('.anagrafica_id').select2({
                dropdownParent: $('#polizzaParte .modal-content'),
                theme: 'bootstrap4',
                ajax: {
                    url: '/anagrafica',
                    dataType: 'json'
                },
                width: '100%'
            }).on('change', function (e) {
                @this.set('anagrafica_id', $(this).val());
            });

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

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

            window.addEventListener('show-polizza-modal', event => {
                $('#polizzaParte').modal('show');
            });

            Livewire.on('hide-polizza-modal', () => {
                $('#polizzaParte').modal('hide');
                Livewire.emit('load-select');
            });

            $('#polizzaParte').on('hidden.bs.modal', () => {
                $('#polizzaParte').modal('hide');
                setTimeout(() => {
                    Livewire.emit('load-select-modal');
                }, 200);
            });

            Livewire.on('polizza-saved', (polizzaId, polizzaText) => {
                let $select = $('.data_polizze');
                $select.append(new Option(polizzaText, polizzaId, true, true)).trigger('change');
            });
        });

        Livewire.on('updatePolizzaSelects', data => {
            if (data.anagrafica) {
                let option = new Option(data.anagrafica.text, data.anagrafica.id, true, true);
                $('.anagrafica_id').append(option).trigger('change');
            }

            if (data.compagnia) {
                let option = new Option(data.compagnia.text, data.compagnia.id, true, true);
                $('.compagnia_id').append(option).trigger('change');
            }
        });

        Livewire.on('initializeVehicleAccordion', () => {
            console.log('initializeVehicleAccordion');
            $('.accordion').on('show.bs.collapse', function(e) {
                // Prevent Bootstrap's default behavior
                e.preventDefault();
                e.stopPropagation();

                const progressive = $(this).attr('id').replace('vehicleAccordion', '');
                const collapseElement = $(this).find('.collapse');

                // Let Livewire load the data first
                Livewire.emit('editVeicoloData', progressive);

                // Show the collapse after a brief delay to ensure data is loaded
                setTimeout(() => {
                    collapseElement.collapse('show');
                }, 50);
            });

            $('.accordion').on('hide.bs.collapse', function(e) {
                const progressive = $(this).attr('id').replace('vehicleAccordion', '');

                // Clean up select2 instances
                $(`#vehicleAccordion${progressive} select`).each(function() {
                    if ($(this).data('select2')) {
                        $(this).select2('destroy');
                    }
                });

                Livewire.emit('closeAndResetModal');
            });
        });

        // Initialize controls when data is loaded
        Livewire.on('load-select-modal', () => {
            const openAccordion = $('.collapse.show');
            if (openAccordion.length) {
                const progressive = openAccordion.closest('.accordion').attr('id').replace('vehicleAccordion', '');
                initializeSelect2Controls(progressive);
            }
        });

        function initializeSelect2Controls(progressive) {


            // Initialize polizze select2
            const polizzeSelector = `#data_polizze_${progressive}`;
            if ($(polizzeSelector).length && !$(polizzeSelector).data('select2')) {
                $(polizzeSelector).select2({
                    theme: 'bootstrap4',
                    ajax: {
                        url: '/polizze',
                        dataType: 'json'
                    },
                    width: '100%'
                }).on('change', function(e) {
                    @this.set('data_polizze', $(this).val());
                });
            }
        }

    </script>
@endpush