polizia_frascati/resources/views/components/report/allegati/allegati-modal.blade.php

<div wire:ignore.self class="modal fade" id="allegatiModal" tabindex="-1" aria-labelledby="allegatiModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="allegatiModalLabel">
                    @if($allegatoId > 0)
                        Modifica allegato
                    @else
                        Nuovo allegato
                    @endif
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mt-3">
                    <div class="col-md-4">
                        <label for="allegatoName" class="form-label">Nome</label>
                    </div>
                    <div class="col-md-8">
                        <input class="form-control @error('allegatoName') is-invalid @enderror" type="text" id="allegatoName" placeholder="Nome" wire:model="allegatoName">
                        @error('allegatoName')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-4">
                        <label for="allegatoGallery" class="form-label">Tipologia</label>
                    </div>
                    <div class="col-md-8">
                        <select class="form-control @error('allegatoGallery') is-invalid @enderror" style="width:100%" wire:model="allegatoGallery" id="allegatoGallery">
                            <option value="">Seleziona...</option>
                            @foreach ($allegatiType as $t)
                                <option value="{{ $t->id }}">{{ $t->name }}</option>
                            @endforeach
                        </select>
                        @error('allegatoGallery')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-4">
                        <label for="allegatoFotoSinistri" class="form-label">Foto sinistri</label>
                    </div>
                    <div class="col-md-8">
                        <select class="form-control @error('allegatoFotoSinistri') is-invalid @enderror" style="width:100%" wire:model="allegatoFotoSinistri" id="allegatoFotoSinistri">
                            <option value="">Seleziona...</option>
                            <option value="1">Valore 1</option>
                            <option value="2">Valore 2</option>                            
                        </select>
                        @error('allegatoFotoSinistri')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-4">
                        <label for="allegatoDidascalia" class="form-label">Didascalia</label>
                    </div>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="allegatoDidascalia" placeholder="Didascalia" wire:model="allegatoDidascalia">
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-4">
                        <label for="allegati" class="form-label">Files</label>
                    </div>
                    <div class="col-md-8">

                        <div class="form-group">
                            <input wire:model="allegati" type="file" class="form-control-file" id="allegati" multiple>
                            <span id="fileSize" style="color:red"></span>
                        </div>

                        <div id="files-container" class="mt-2">
                            @if(!empty($allegatiFiles) && count($allegatiFiles) > 0)
                                <div class="card">
                                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                        <strong>File caricati ({{ count($allegatiFiles) }})</strong>
                                    </div>
                                    <div class="card-body p-2">
                                        <ul class="list-group list-group-flush">
                                            @foreach ($allegatiFiles as $a)
                                                <li class="list-group-item d-flex justify-content-between align-items-center py-2">
                                                    <span>{{ $a }}</span>
                                                    <button class="btn btn-sm btn-outline-danger"
                                                        wire:click.prevent="removeFile('{{ $a }}')">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-4">
                        <label for="allegatoVisible" class="form-label">Visibile in stampa</label>
                    </div>
                    <div class="col-md-8">
                        <div class="custom-control custom-switch custom-switch-md">
                            <input type="checkbox" class="custom-control-input" id="allegatoVisible" wire:model="allegatoVisible">
                            <label class="custom-control-label" for="allegatoVisible">&nbsp;</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annulla</button>
                @if (!$this->validated)
                    <button type="button" class="btn btn-primary" wire:click.prevent="saveAllegato()" id="btSaveAllegato">Salva</button>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('livewire:load', function () {
        window.livewire.on('open-allegati-modal', function () {
            $('#allegatiModal').modal('show');
            console.log('Modal opened');
        });

        window.livewire.on('close-modal', function () {
            $('#allegatiModal').modal('hide');
        });

        window.livewire.on('attachments', function (files) {
            console.log('Attachments updated:', files);

            setTimeout(function() {
                window.livewire.emit('refresh');
            }, 200);
        });

        window.livewire.on('fileSize', function (txt) {
            setTimeout(function() {
                if (txt == "")
                {
                    $("#btSaveAllegato").show();
                }
                else
                {
                    $("#btSaveAllegato").hide();
                    $("#fileSize").html(txt);
                }
            }, 200);
        });
    });
</script>
@endpush