fix select2 issues modal

resources/views/livewire/report.blade.php

@@ -19,14 +19,15 @@
     @endif
     <div>
         @if (session()->has('error'))
-        <div class="alert alert-danger alert-dismissible fade show position-fixed" role="alert" style="top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000;">
-            {{ session('error') }}
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-             </button>
-             </div>
+            <div class="alert alert-danger alert-dismissible fade show position-fixed" role="alert"
+                style="top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000;">
+                {{ session('error') }}
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
         @endif
-     </div>
+    </div>
     @if (count($errors) > 0)
         <div class="alert alert-danger">
             @foreach ($errors->all() as $e)
@@ -2974,7 +2975,7 @@
                                         legale</label>
                                 </div>
                                 <div class="col-md-8">
-                                    <input class="form-control" type="text" id="anag_foreign_residence_city"
+                                    <input class="form-control" type="text" id="anag_foreign_residence_city_legal"
                                         wire:model="anag_foreign_residence_city">
                                 </div>
                             </div>
@@ -3393,7 +3394,9 @@
                                                                 <div class="col-md-12">
                                                                     <div class="form-group">
                                                                         <label>Numero Polizza *</label>
-                                                                        <input type="text" class="form-control polizza_num" wire:model.debounce.500ms="polizza_num" required>
+                                                                        <input type="text" class="form-control polizza_num"
+                                                                            wire:model.debounce.500ms="polizza_num"
+                                                                            required>
 
                                                                     </div>
                                                                 </div>
@@ -5301,9 +5304,8 @@
             }
         }
 
-        // Function to initialize column visibility based on data
         function initializeDamageColumns() {
-            // Start from column 2 since column 1 is always visible
+
             for (let i = 2; i <= maxDamageColumns; i++) {
                 if (hasColumnValues(i)) {
                     var column = document.getElementById('damage-column-' + i);
@@ -5655,208 +5657,95 @@
         });
 
         Livewire.on('load-select-modal', () => {
-            // Destroy existing Select2 instances
-            $('#veicoloDataParte .select2').each(function () {
-                if ($(this).data('select2')) {
-                    $(this).select2('destroy');
-                }
-            });
+
+            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_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"
             ];
 
-            function modalsSelect(value) {
-                $('.' + value).select2({
-                    dropdownParent: $("#veicoloDataParte"),
+            function initializeSelect2(element, url = '/anagrafica') {
+                return $(element).select2({
+                    dropdownParent: document.body,
                     theme: 'bootstrap4',
                     ajax: {
-                        url: '/anagrafica',
+                        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)) {
-
-                    $('#' + value + "_cinture").hide();
-                    $('.' + value + "_edit").hide();
-                    $('.' + value + "_remove").hide();
-                    $('.' + value + "_add").hide();
-
-                    const currentVal = $('.' + value).val();
-                    if (currentVal > 0) {
-                        $('.' + value + "_edit").show();
-                        $('.' + value + "_remove").show();
-                        $('.' + value + "_add").hide();
-                        $('#' + value + "_cinture").show();
-                    } else {
-                        $('.' + value + "_add").show();
-                    }
+                    initializeRelatedElements(value, $select.val());
                 }
 
-                $('.' + value).on('change', function (e) {
+                $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)) {
-
-                        $('#' + value + "_cinture").hide();
-                        $('.' + value + "_edit").hide();
-                        $('.' + value + "_remove").hide();
-                        $('.' + value + "_add").hide();
-
-                        if (data > 0) {
-                            $('.' + value + "_edit").show();
-                            $('.' + value + "_remove").show();
-                            $('.' + value + "_add").hide();
-                            $('#' + value + "_cinture").show();
-                        } else {
-                            $('.' + value + "_add").show();
-                        }
+                        initializeRelatedElements(value, data);
                     }
                 });
 
-                const currentValue = $('.' + value).val();
-                const currentText = $('.' + value).find('option:selected').text();
+                const currentValue = $select.val();
+                const currentText = $select.find('option:selected').text();
                 if (currentValue) {
                     const option = new Option(currentText, currentValue, true, true);
-                    $('.' + value).append(option).trigger('change');
+                    $select.append(option).trigger('change');
                 }
             }
 
-            modals.forEach(modalsSelect);
-
-            $(document).ready(function () {
-                $('.data_polizze').select2({
-                    dropdownParent: $("#veicoloDataParte"),
-                    theme: 'bootstrap4',
-                    ajax: {
-                        url: '/polizze',
-                        dataType: 'json'
-                    }
-                });
-            });
-
-            $('.data_polizze').on('change', function (e) {
-                var data = $(this).val();
-                @this.set('data_polizze', data);
+            $('#veicoloDataParte select').each(function () {
+                if ($(this).data('select2')) {
+                    $(this).select2('destroy');
+                }
             });
 
-            const selectInf = ["data_infortunato", "data_infortunato_0", "data_infortunato_1", "data_infortunato_2",
-                "data_infortunato_3", "data_alcool_test", "data_drug_test"
-            ];
-            selectInf.forEach(selectInfSelect);
-
-            function selectInfSelect(value) {
-                var x = $("#" + value).val();
-                if (x == "1")
-                    $("#" + value + "_select").show();
-                else
-                    $("#" + value + "_select").hide();
-                $("#" + value).change(function () {
-                    var val = this.value;
-                    if (val == "1")
-                        $("#" + value + "_select").show();
-                    else
-                        $("#" + value + "_select").hide();
-                });
-            }
-
-            const selectGen = ["data_generalizzato", "generalizzato"];
-            selectGen.forEach(selectGenSelect);
+            modals.forEach(modalsSelect);
 
-            function selectGenSelect(value) {
-                var x = $("#" + value).val();
-                if (x == "3")
-                    $("#" + value + "_select").show();
-                else
-                    $("#" + value + "_select").hide();
-                $("#" + value).change(function () {
-                    var val = this.value;
-                    if (val == "3")
-                        $("#" + value + "_select").show();
-                    else
-                        $("#" + value + "_select").hide();
+            $('.data_polizze').each(function () {
+                if ($(this).data('select2')) {
+                    $(this).select2('destroy');
+                }
+                initializeSelect2(this, '/polizze').on('change', function (e) {
+                    @this.set('data_polizze', $(this).val());
                 });
-            }
-
-            var x = $("#data_casco_conducente").val();
-            if (x == "1")
-                $("#data_casco_conducente_select").show();
-            else
-                $("#data_casco_conducente_select").hide();
-            $("#data_casco_conducente").change(function () {
-                var val = this.value;
-                if (val == "1")
-                    $("#data_casco_conducente_select").show();
-                else
-                    $("#data_casco_conducente_select").hide();
             });
 
-            var x = $("#data_casco_passeggero").val();
-            if (x == "1")
-                $("#data_casco_passeggero_select").show();
-            else
-                $("#data_casco_passeggero_select").hide();
-            $("#data_casco_passeggero").change(function () {
-                var val = this.value;
-                if (val == "1")
-                    $("#data_casco_passeggero_select").show();
-                else
-                    $("#data_casco_passeggero_select").hide();
-            });
-
-            var x = $("#data_destinazione_veicolo").val();
-            $("#data_destinazione_veicolo_select_0").hide();
-            $("#data_destinazione_veicolo_select_1").hide();
-            $("#data_destinazione_veicolo_select_2").hide();
-            $("#data_destinazione_veicolo_select_3").hide();
-            $("#data_destinazione_veicolo_select_4").hide();
-            if (x == "1") {
-                $("#data_destinazione_veicolo_select_0").show();
-            }
-            if (x == "4") {
-                $("#data_destinazione_veicolo_select_1").show();
-            }
-            if (x == "5" || x == "6") {
-                $("#data_destinazione_veicolo_select_2").show();
-                $("#data_destinazione_veicolo_select_3").show();
-                $("#data_destinazione_veicolo_select_4").show();
-            }
-
-            $("#data_destinazione_veicolo").change(function () {
-                var val = this.value;
-                $("#data_destinazione_veicolo_select_0").hide();
-                $("#data_destinazione_veicolo_select_1").hide();
-                $("#data_destinazione_veicolo_select_2").hide();
-                $("#data_destinazione_veicolo_select_3").hide();
-                $("#data_destinazione_veicolo_select_4").hide();
-                if (val == "1") {
-                    $("#data_destinazione_veicolo_select_0").show();
-                }
-                if (val == "4") {
-                    $("#data_destinazione_veicolo_select_1").show();
-                }
-                if (val == "5" || val == "6") {
-                    $("#data_destinazione_veicolo_select_2").show();
-                    $("#data_destinazione_veicolo_select_3").show();
-                    $("#data_destinazione_veicolo_select_4").show();
-                }
+            $('#veicoloDataParte').on('hidden.bs.modal', function () {
+                $('#veicoloDataParte select').each(function () {
+                    if ($(this).data('select2')) {
+                        $(this).select2('destroy');
+                    }
+                });
             });
         });
         Livewire.on('load-select-pedone', () => {
@@ -5999,7 +5888,7 @@
             });
 
             $('.anagrafica_id').select2({
-                dropdownParent: $('#polizzaParte'),
+                dropdownParent: $('#polizzaParte .modal-content'),
                 theme: 'bootstrap4',
                 ajax: {
                     url: '/anagrafica',
@@ -6010,9 +5899,8 @@
                 @this.set('anagrafica_id', $(this).val());
             });
 
-            // Initialize Select2 for compagnia_id
             $('.compagnia_id').select2({
-                dropdownParent: $('#polizzaParte'),
+                dropdownParent: $('#polizzaParte .modal-content'),
                 theme: 'bootstrap4',
                 ajax: {
                     url: '/compagnie',
@@ -6023,9 +5911,8 @@
                 @this.set('compagnia_id', $(this).val());
             });
 
-            // Initialize Select2 for agenzia
             $('.agenzia').select2({
-                dropdownParent: $('#polizzaParte'),
+                dropdownParent: $('#polizzaParte .modal-content'),
                 theme: 'bootstrap4',
                 ajax: {
                     url: '/polizze/agenzie',
@@ -6036,16 +5923,22 @@
                 @this.set('agenzia', $(this).val());
             });
 
-            // Show modal event
             window.addEventListener('show-polizza-modal', event => {
                 $('#polizzaParte').modal('show');
             });
 
-            // Hide modal event
-            window.addEventListener('hide-polizza-modal', event => {
+            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');
@@ -6053,18 +5946,48 @@
         });
 
         Livewire.on('updatePolizzaSelects', data => {
-            // Update anagrafica select
             if (data.anagrafica) {
                 let option = new Option(data.anagrafica.text, data.anagrafica.id, true, true);
                 $('.anagrafica_id').append(option).trigger('change');
             }
 
-            // Update compagnia select
             if (data.compagnia) {
                 let option = new Option(data.compagnia.text, data.compagnia.id, true, true);
                 $('.compagnia_id').append(option).trigger('change');
             }
         });
 
+        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"
+            ];
+
+            modals.forEach(value => {
+                $('.' + value).select2({
+                    dropdownParent: document.body,
+                    theme: 'bootstrap4',
+                    ajax: {
+                        url: '/anagrafica',
+                        dataType: 'json'
+                    },
+                    width: '100%'
+                });
+            });
+
+            $('.data_polizze').select2({
+                dropdownParent: document.body,
+                theme: 'bootstrap4',
+                ajax: {
+                    url: '/polizze',
+                    dataType: 'json'
+                },
+                width: '100%'
+            });
+        }
+
     </script>
 @endpush