iao_team/resources/views/livewire/email_comunications.blade.php

<div class="col card--ui" id="card--dashboard">

    @if(!$add && !$update)

        <header id="title--section" style="display:none !important" class="d-flex align-items-center justify-content-between">
            <div class="title--section_name d-flex align-items-center justify-content-between">
                <i class="ico--ui title_section utenti me-2"></i>
                <h2 class="primary">@if(!$add && !$update)Email Templates @else Inserimento/modifica template Email @endif</h2>
            </div>

            @if(!$add && !$update)
                <div class="title--section_addButton" wire:click="add()" style="cursor: pointer;">
                    <div class="btn--ui entrata d-flex justify-items-between">
                        <a href="#" wire:click="add()" style="color:white">Aggiungi</a>
                    </div>
                </div>
            @endif

        </header>

        <a class="btn--ui lightGrey" href="/settings?type=comunicazioni"><i class="fa-solid fa-arrow-left"></i></a><br>

        <section id="resume-table">
            <div class="compare--chart_wrapper d-none"></div>

            <table class="table tablesaw tableHead tablesaw-stack" id="tablesaw-350" width="100%">
                <thead>
                    <tr>
                        <th scope="col">Oggetto</th>
                        <th scope="col">Messaggio</th>
                        <th scope="col">Parole</th>
                        <th scope="col">Data Creazione</th>
                        <th scope="col">...</th>
                    </tr>
                </thead>
                <tbody id="checkall-target">
                    @foreach($records as $record)
                    <tr>
                        <td>
                            <strong>{{$record->name}}</strong>
                        </td>
                        <td>
                            {{ Str::limit(strip_tags($record->content), 80) }}
                        </td>
                        <td>
                            @php
                            $wordCount = str_word_count(strip_tags($record->content));
                            $badgeClass = $wordCount > 500 ? 'bg-warning' : 'bg-info';
                            @endphp
                            <span class="badge {{ $badgeClass }}">{{ $wordCount }} parole</span>
                        </td>
                        <td>{{ $record->created_at->format('d/m/Y H:i') }}</td>
                        <td>
                            <button type="button" class="btn" wire:click="sendTemplate({{ $record->id }})" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="bottom" data-bs-content="Invia Email"><i class="fa-solid fa-envelope"></i></button>
                            <button type="button" class="btn" wire:click="edit({{ $record->id }})" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-placement="bottom" data-bs-content="Modifica"><i class="fa-regular fa-pen-to-square"></i></button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </section>

    @else

        <a class="btn--ui lightGrey" href="/email_comunications"><i class="fa-solid fa-arrow-left"></i></a><br>

        <div class="container">

            @if (session()->has('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session()->get('error') }}
                </div>
            @endif

            <div class="row">
                <div class="col">

                    <form action="">

                        @if ($add)
                            {{-- <div class="row mb-4">
                                <div class="col">
                                    <label class="form-label">Destinatari</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="selectAllUsers()">
                                            <i class="fas fa-users me-1"></i>Seleziona Tutti
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-sm ms-2" onclick="deselectAllUsers()">
                                            <i class="fas fa-times me-1"></i>Deseleziona Tutti
                                        </button>
                                    </div>
                                    <div style="max-height: 200px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 10px;">
                                        @foreach($users as $user)
                                            <div class="form-check mb-1">
                                                <input class="form-check-input" type="checkbox" value="{{ $user->id }}" wire:model="selectedRecipients" id="recipient_{{ $user->id }}">
                                                <label class="form-check-label" for="recipient_{{ $user->id }}">
                                                    <strong>{{ $user->name }}</strong>
                                                    @if($user->email)
                                                        <small class="text-muted">({{ $user->email }})</small>
                                                    @else
                                                        <small class="text-danger">(no email)</small>
                                                    @endif
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="form-text">
                                        <small class="text-muted">Selezionati: <span id="selectedCount">{{ count($selectedRecipients) }}</span> utenti</small>
                                    </div>
                                    @error('selectedRecipients')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div> --}}

                            <div class="row mb-4">

                                <div class="col-xs-12">
                                    <div class="showFilter" style="display: none">
                                        <hr size="1">
                                        <div class="row g-3">
                                            <div class="col-md-3">
                                                <div class="row">
                                                    <div class="col-md-12" style="margin-bottom:10px;">
                                                        <b>Età</b>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="row mb-2">
                                                            <div class="col-3"><label class="form-check-label ms-2" >Da</label></div>
                                                            <div class="col-9"><input class="form-control " type="number" name="txtFromYear"></div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="row">
                                                            <div class="col-3"><label class="form-check-label ms-2" >A</label></div>
                                                            <div class="col-9"><input class="form-control " type="number"  name="txtToYear"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row">
                                                    <div class="col-md-12" style="margin-bottom:10px;">
                                                        <b>Tipologia di tesseramento</b>
                                                    </div>
                                                    <div class="col-12">
                                                        <select name="filterCards" class="form-select filterCards">
                                                            <option value="">Tutte
                                                            @foreach(getCards() as $card)
                                                                <option value="{{$card->id}}">{{$card->name}}
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row">
                                                    <div class="col-md-12" style="margin-bottom:10px;">
                                                        <b>Stato tesseramento</b>
                                                    </div>
                                                    <div class="col-12">
                                                        <select name="filterStatus" class="form-select filterStatus" multiple="multiple">
                                                            <option value="2">Attivo
                                                            <option value="1">Sospeso
                                                            <option value="0">Non tesserato
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row">
                                                    <div class="col-md-12" style="margin-bottom:10px;">
                                                        <b>Gruppo di appartenenza</b>
                                                    </div>
                                                    <div class="col-12">
                                                        <select name="filterCategories" class="form-select filterCategories" multiple="multiple">
                                                            <option value="">Tutte</option>
                                                            @foreach($categories as $category)
                                                                <option value="{{$category["id"]}}">
                                                                    {!! str_repeat('&bull; ', $category["indentation"] ?? 0) !!}{{$category["name"]}}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row">
                                                    <div class="col-md-12" style="margin-bottom:10px;">
                                                        <b>Anno di nascita</b>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="row mb-2">
                                                            <div class="col-3"><label class="form-check-label ms-2" >Da</label></div>
                                                            <div class="col-9"><input class="form-control " type="number" name="txtFromYearYear"></div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="row">
                                                            <div class="col-3"><label class="form-check-label ms-2" >A</label></div>
                                                            <div class="col-9"><input class="form-control " type="number"  name="txtToYearYear"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row">
                                                    <div class="col-md-12" style="margin-bottom:10px;">
                                                        <b>Scadenza certificato medico</b>
                                                    </div>
                                                    <div class="col-12">
                                                        <select name="filterScadenza" class="form-select filterScadenza" multiple="multiple">
                                                            <option value="1">Scaduti
                                                            <option value="2">In scadenza
                                                            <option value="3">Non consegnato
                                                            <option value="4">Validi
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="row">
                                                    <div class="col-md-12" style="margin-bottom:10px;">
                                                        <b>Tipologia certificato medico</b>
                                                    </div>
                                                    <div class="col-12">
                                                        <select name="filterCertificateType" class="form-select filterCertificateType" multiple="multiple">
                                                            <option value="">Tutti
                                                            <option value="N">Non agonistico
                                                            <option value="A">Agonistico
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row g-3">
                                            <div class="col-md-12" style="text-align:right">
                                                <button class="btn--ui lightGrey" onclick="resetFilters(event)">Reset</button>
                                                <button class="btn--ui" onclick="loadDataTable(event)">FILTRA</button>
                                            </div>
                                        </div>
                                        <hr size="1">
                                    </div>
                                </div>

                                <div class="col-xs-12">
                                    <table id="recipients-table" class="table tablesaw tableHead tablesaw-stack">
                                        <thead>
                                            <tr>
                                                <th>Cognome</th>
                                                <th>Nome</th>
                                                {{-- <th>Email</th> --}}
                                                <th>Telefono</th>
                                                <th>Età</th>
                                                <th>Anno</th>
                                                <th>Stato</th>
                                                <th>Certificato</th>
                                                {{-- <th>Gruppi di interesse</th>
                                                <th>Corsi</th>
                                                <th>Certificato</th>
                                                <th>Tesseramento</th>
                                                <th>Rresidenza</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        @endif

                        <div class="row mb-4">
                            <div class="col">
                                <div class="form--item">
                                    <label for="subject" class="form-label">Oggetto</label>
                                    <input type="text" class="form-control @error('subject') is-invalid @enderror" id="subject" wire:model="subject" placeholder="Inserisci l'oggetto del template">
                                    @error('subject')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col">
                                <div wire:ignore class="form--item">
                                    <label for="message" class="form-label">Messaggio</label>
                                    {{-- @if(false)
                                    <textarea class="form-control @error('message') is-invalid @enderror" id="message" wire:model="message" rows="10" placeholder="Inserisci il contenuto del messaggio (supporta HTML)"></textarea>
                                    <div class="form-text">
                                        <small class="text-muted">Puoi utilizzare HTML per formattare il messaggio. Parole: <span class="fw-bold">{{ str_word_count(strip_tags($message)) }}</span></small>
                                    </div>
                                    @endif --}}
                                    {{-- <div class="editor-container editor-container_classic-editor editor-container_include-style editor-container_include-block-toolbar" id="editor-container">
                                        <div class="editor-container__editor">
                                            <div id="editor"></div>
                                        </div>
                                    </div> --}}
                                    <textarea wire:model="message" class="form-control required" name="message" id="message"></textarea>
                                    @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        @if($add)
                            <div class="row mb-4">
                                <div class="col">
                                    <label class="form-label">Opzioni di Invio</label>
                                    <div class="d-flex gap-2 comunication-send-options">
                                        <label class="form-check" for="sendNow">
                                            <input class="form-check-input" type="radio" name="sendOption" id="sendNow" wire:model="sendNow" value="1">
                                            <i class="fas fa-envelope me-2"></i>
                                            <span>Invia Immediatamente</span>
                                        </label>
                                        <label class="form-check" for="scheduleFor">
                                            <input class="form-check-input" type="radio" name="sendOption" id="scheduleFor" wire:model="sendNow" value="0">
                                            <i class="fas fa-clock me-2"></i>
                                            <span>Programma per dopo</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            @if(!$sendNow)
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <label for="scheduledDateTime" class="form-label">Data e Ora di Invio</label>
                                        <input type="datetime-local" class="form-control @error('scheduledDateTime') is-invalid @enderror" id="scheduledDateTime" wire:model="scheduledDateTime">
                                        @error('scheduledDateTime')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            @endif
                        @endif

                        <div class="form--item mt-5">
                            <button type="button" class="btn--ui lightGrey" wire:click="cancel()">Annulla</button>
                            @if($add)
                                <button type="submit" class="btn--ui" wire:click.prevent="store()">
                                    @if($sendNow)
                                    Salva e Invia
                                    @else
                                    Salva e Programma
                                    @endif
                                </button>
                            @endif
                            @if($update)
                                <button type="submit" class="btn--ui" wire:click.prevent="update()">Salva</button>
                            @endif
                        </div>

                    </form>
                </div>
            </div>
        </div>

    @endif
</div>

@if (session()->has('success'))
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
    {{ session()->get('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if (session()->has('error'))
<div class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
    {{ session()->get('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@push('scripts')
<link href="/css/datatables.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="/assets/js/datatables.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush

@push('scripts')
<script type="text/javascript">

    $(document).ready(function() {
        loadDataTable();
        loadArchiveDataTable();
    });

    Livewire.on('load-data-table', () => {
        loadDataTable();
        loadArchiveDataTable();
    });

    function loadArchiveDataTable(){
        if ($.fn.DataTable.isDataTable('#tablesaw-350')) {
            $('#tablesaw-350').DataTable().destroy();
        }

        $('#tablesaw-350').DataTable({
            thead: {
            'th': {'background-color': 'blue'}
            },
            layout: {
                topStart : null,
                topEnd : null,
                top1A: {
                    buttons: [
                        {
                            extend: 'collection',
                            text: 'ESPORTA',
                            buttons: [
                                {
                                extend: 'excelHtml5',
                                    title: 'Templates Email',
                                    exportOptions: {
                                        columns: ":not(':last')"
                                    }
                                },
                                {
                                    extend: 'pdfHtml5',
                                    title: 'Templates Email',
                                    exportOptions: {
                                        columns: ":not(':last')"
                                    }
                                },
                                {
                                    extend: 'print',
                                    text: 'Stampa',
                                    title: 'Templates Email',
                                    exportOptions: {
                                        columns: ":not(':last')"
                                    }
                                }
                            ],
                            dropup: true
                        }
                    ]
                },
                top1B : {
                    pageLength: {
                        menu: [[10, 25, 50, 100, 100000], [10, 25, 50, 100, "Tutti"]]
                    }
                },
                top1C :'search',
            },
            pagingType: 'numbers',
            "language": {
                "url": "/assets/js/Italian.json"
            },
            "fnInitComplete": function (oSettings, json) {
                var html = '&nbsp;<a href="#" class="addData btn--ui"><i class="fa-solid fa-plus"></i></a>';
                $(".dt-search").append(html);
            }
        });
        $('#tablesaw-350 thead tr th').addClass('col');
        $('#tablesaw-350 thead tr th').css("background-color", "#f6f8fa");

        $(document).ready(function() {
            $(document).on("click",".addData",function() {
                $(".title--section_addButton").trigger("click")
            });
        });
    }
    
    $(document).ready(function() {
        $(document).on("click",".showHideFilter",function() {
            $(".showFilter").toggle();
            
            $('.filterCards').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
            $('.filterStatus').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
            $('.filterScadenza').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
            $('.filterCertificateType').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
            $('.filterCategories').select2({"language": {"noResults": function(){return "Nessun risultato";}}});
        });
    });

    function resetFilters(event)
    {
        if (event) event.preventDefault();

        $('.filterCards').val('').trigger('change');
        $('.filterStatus').val('').trigger('change');
        $('.filterScadenza').val('-1').trigger('change');
        $('.filterCertificateType').val('-1').trigger('change');
        $('.filterCategories').val('-1').trigger('change');


        $('input[name="txtFromYear"]').val('');
        $('input[name="txtToYear"]').val('');

        $('input[name="txtFromYearYear"]').val('');
        $('input[name="txtToYearYear"]').val('');
        loadDataTable();
    }

    function loadDataTable(event = null) {
        if (event) event.preventDefault();

        if ($.fn.DataTable.isDataTable('#recipients-table')) {
            $('#recipients-table').DataTable().destroy();
        }

        var fromYear = $('input[name="txtFromYear"]').val();
        localStorage.setItem("fromYearMember", fromYear);

        var toYear = $('input[name="txtToYear"]').val();
        localStorage.setItem("toYearMember", toYear);

        var fromYearYear = $('input[name="txtFromYearYear"]').val();
        localStorage.setItem("fromYearYearMember", fromYearYear);

        var toYearYear = $('input[name="txtToYearYear"]').val();
        localStorage.setItem("toYearYearMember", toYearYear);

        var filterCards = $('.filterCards').val();
        localStorage.setItem("filterCardsMember", filterCards);

        var filterStatus = $('.filterStatus').val();
        localStorage.setItem("filterStatusMember", filterStatus);

        var filterScadenza = $('.filterScadenza').val();
        localStorage.setItem("filterScadenzaMember", filterScadenza);

        var filterCertificateType = $('.filterCertificateType').val();
        localStorage.setItem("filterCertificateTypeMember", filterCertificateType);

        var filterCategories = $('.filterCategories').val();
        localStorage.setItem("filterCategoriesMember", filterCategories)

        const pageLength = 10;

        const dataTable = $('#recipients-table').DataTable({
            serverSide: true,
            ajax: '/get_members?cards=' + filterCards + "&filterCategories=" + filterCategories + "&filterCertificateType=" + filterCertificateType + "&filterScadenza=" + filterScadenza + "&filterStatus=" + filterStatus + "&fromYear=" + fromYear + "&toYear=" + toYear + "&fromYearYear=" + fromYearYear + "&toYearYear=" + toYearYear,
            columns: [
                {
                    data: "last_name",
                    render: function (data){
                        const d = data.split("|");
                        var ret = '<a style="cursor:pointer" onclick="showData(' + d[1] + ')">' + d[0] + '</a>';
                        return ret;
                    }
                },
                {
                    data: "first_name",
                    render: function (data){
                        const d = data.split("|");
                        var ret = '<a style="cursor:pointer" onclick="showData(' + d[1] + ')">' + d[0] + '</a>';
                        return ret;
                    }
                },
                { data: "phone"},
                { data: "age", "type": "num", className:"dt-type-numeric"},
                { data: "year", className:"dt-type-numeric"},
                {
                    data: "status",
                    render: function (data){
                        const d = data.split("|");
                        var ret = '<span class="tablesaw-cell-content"><span class="badge tessera-badge ' + d[0] + '">' + d[1] + '</span></span>';
                        return ret;
                    }
                },
                {
                    data: "certificate",
                    render: function (data){
                        var ret = '';
                        if (data != "") {
                            const d = data.split("|");
                            ret += '<span class="tablesaw-cell-content d-flex align-items-center">';
                            if (d[0] == "0") {
                                ret += '<i class="ico--ui check suspended me-2"></i>';
                                ret += 'Scaduto : ';
                            }
                            if (d[0] == "1") {
                                ret += '<i class="ico--ui check due me-2"></i>';
                                ret += 'In scadenza : ';
                            }
                            if (d[0] == "2") {
                                ret += '<i class="ico--ui check active me-2"></i>';
                                ret += 'Scadenza : ';
                            }
                            ret += d[1];
                            ret += '</span>';
                        }
                        if(data == ""){
                            ret += '<span class="tablesaw-cell-content d-flex align-items-center">';
                            ret += '<i class="ico--ui check absent me-2"></i>';
                            ret += 'Non consegnato';
                            ret += '</span>';
                        }
                        return ret;
                    }
                },
            ],
            fixedHeader: false,
            thead: {
                'th': {'background-color': 'blue'}
            },
            layout: {
                topStart : null,
                topEnd : null,
                top1A: null,
                top1B : {
                    pageLength: {
                        menu: [[10, 25, 50, 100, 100000], [10, 25, 50, 100, "Tutti"]]
                    }
                },
                top1C :'search',
            },
            pagingType: 'numbers',
            "language": {
                "url": "/assets/js/Italian.json"
            },
            "fnInitComplete": function (oSettings, json) {
                var html = '&nbsp;<a style="cursor:pointer" class="showHideFilter btn--ui"><i class="fa-solid fa-sliders"></i></a>';
                $(".dt-search").append(html);
            }
        });

        $('#recipients-table thead tr th').addClass('col');
        $('#recipients-table thead tr th').css("background-color", "#f6f8fa");
        $('#recipients-table').on('draw.dt', function() {
            $('[data-bs-toggle="popover"]').popover()
        });
    }
</script>

{{-- CKEditor --}}
<link rel="stylesheet" href="/assets/libraries/ckeditor5/ckeditor5.css" />
<script type="importmap">
    {
        "imports": {
            "ckeditor5": "/assets/libraries/ckeditor5/ckeditor5.js",
            "ckeditor5/": "/assets/libraries/ckeditor5/"
        }
    }
</script>
<script type="module">
    import { ClassicEditor } from "ckeditor5";
        import { editorConfig } from "/assets/libraries/ckeditor5/config.js";

        Livewire.on("load-editor", () => {
            let messageField = document.querySelector('#message');

            if (messageField) {
                if (messageField.ckeditorInstance) messageField.ckeditorInstance.destroy();

                editorConfig.simpleUpload = {
                    uploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token()])}}"
                }

                console.log(editorConfig);

                ClassicEditor
                    .create(messageField, editorConfig)
                    .then(editor => {
                        editor.model.document.on('change:data', () => {
                            @this.set('message', editor.getData());
                        })
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
        });
</script>
{{-- END CKEditor --}}
@endpush