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

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

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

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

        <div class="row">
            <div class="col-md-6">
                <h3>{{$calendar->course ? $calendar->course->name : $calendar->name}}</h3>
            </div>
            <div class="col-md-6">
                <h3>{{date("l d F", strtotime($calendar->from))}}, ora inizio {{date("H:i", strtotime($calendar->from))}}</h3>
            </div>

            <div class="col-md-6">
                <label for="court_id" class="form-label">Campo</label>
                <select class="form-select form-select-lg me-1 " wire:model="court_id">
                    <option value="">
                    @foreach($courts as $c)
                        <option value="{{$c["id"]}}">{{$c["name"]}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label for="instructor_id" class="form-label">Istruttore</label>
                <select class="form-select form-select-lg me-1 " wire:model="instructor_id">
                    <option value="">
                    @foreach($instructors as $i)
                        <option value="{{$i["id"]}}">{{$i["name"]}}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-12 mt-3">
                <input class="form-control" id="note" placeholder="Note" wire:model="note"></input>
            </div>

            @if($calendar->status == 0)
                <div class="col-md-6">
                    <label for="member_id" class="form-label">Aggiunge una persona</label>
                    <select name="member_id" class="form-select memberClass" aria-label="Seleziona una persona" wire:model="member_id">
                        <option value="">--Seleziona--
                        @foreach($members as $member)
                            <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}} ({{$member->fiscal_code}})
                        @endforeach
                    </select>
                </div>
            @endif

        </div>    
        
        <section id="resume-table" class="mt-3">
            <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">#</th>
                        <th scope="col">Cognome</th>
                        <th scope="col">Nome</th>
                        <th scope="col">Certificato</th>
                        <th scope="col">Presenza</th>
                    </tr>
                </thead>
                <tbody id="checkall-target">
                    @foreach($records as $idx => $record)
                        <tr>
                            <td>{{$idx}}</td>
                            <td>{{$record["first_name"]}}</td>
                            <td>{{$record["last_name"]}}</td>
                            <td>
                                <span class="tablesaw-cell-content d-flex align-items-center">
                                    @php
                                    list($status, $date) = explode("|", $record["certificate"]);
                                    @endphp
                                    @if($status == 0)
                                        <i class="ico--ui check suspended me-2"></i>Scaduto
                                    @endif
                                    @if($status == 1)
                                        <i class="ico--ui check due me-2"></i>In scadenza
                                    @endif
                                    @if($status == 2)
                                        <i class="ico--ui check active me-2"></i> Scadenza
                                    @endif
                                    {{$date}}
                                </span>
                            <td>
                                @if ($record["status"] != 99)
                                    @if ($record["presence"])
                                        @if ($record["my_presence"])
                                            <input class="member" type="checkbox" value="{{$record["id"]}}" {{$record["presence"] ? 'checked' : ''}}>
                                        @else
                                            V
                                        @endif
                                    @else
                                        <input class="member" type="checkbox" value="{{$record["id"]}}" {{$record["presence"] ? 'checked' : ''}}>
                                    @endif
                                @else
                                    Annullata
                                @endif
                            </td>
                        </tr>
                    @endforeach

                </tbody>
            </table>

        </section>

        <div class="row">
            <div class="col-md-6">
                <label for="motivation_id" class="form-label">Motivazione annullamento</label>
                <select class="form-select form-select-lg me-1 " wire:model="motivation_id">
                    <option value="">
                    @foreach($motivations as $m)
                        <option value="{{$m["id"]}}">{{$m["name"]}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="row mt-3">
            @if($calendar->status == 0)
                <div class="col-md-6">
                    <button type="button" class="btn--ui " style="background-color:red !important" wire:click="cancelCalendar()">Annulla Lezione</button>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn--ui" style="background-color:red !important" onclick="cancel()">Annulla lezione selezionati</button>
                    <button type="button" class="btn--ui" onclick="save()">Salva</button>             
                </div>
            @else
                LEZIONE ANNULLATA
            @endif
        </div>

    </section>


</div>

@push('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        table.tableHead thead {
        /* Important */
            position: sticky;
            z-index: 100;
            top: 0;
        }
        .select2-container--default .select2-selection--single{
            background-color: #E9F0F5;
            border: 0.0625rem solid #DFE5EB;
            font-size: 0.75rem;
        }
        .select2-selection
        {
            height: 38px !important;
        }
        .select2-selection__rendered
        {
            padding-top:3px;
        }
        .select2 {
            width:100% !important;
        }
        .page-link.active, .active > .page-link {
            background-color:#006099 !important;
        }

        .select2-selection--multiple{
            overflow: hidden !important;
            height: auto !important;
        }
        .select2-container {
            box-sizing: border-box;
            display: inline-block;
            margin: 0;
            position: relative;
            vertical-align: middle;
        }
        .select2-container .select2-selection--single {
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            height: 38px;
            user-select: none;
            -webkit-user-select: none;
        }
        .select2-container .select2-selection--single .select2-selection__rendered {
            display: block;
            padding-left: 8px;
            padding-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* .total.primary
        {
            font-size:38px !important;
        } */
        /* .total.primary.comp
        {
            font-size:32px !important;
        } */
    </style>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endpush

@push('scripts')
    <script>

        $(document).ready(function() {
            
            setTimeout(() => {
                $('.memberClass').select2({
                    tags: false
                });
                $('.memberClass').on('change', function (e) {
                    var data = $('.memberClass').select2("val");
                    console.log(data);
                    @this.addMember(data);
                });                
            }, 100);

        } );

        Livewire.on('reload', () => {
            setTimeout(() => {
                $('.memberClass').select2({
                    tags: false
                });
                $('.memberClass').on('change', function (e) {
                    var data = $('.memberClass').select2("val");
                    console.log(data);
                    @this.addMember(data);
                });                
            }, 100);
        });

        function save()
        {
            var ids = [];
            $('input[type=checkbox]').each(function () {
                if ($(this).is(":checked")) 
                {
                    var val = $(this).val();
                    ids.push(val);
                }
            });

            @this.save(ids);
        }

        function cancel()
        {
            var ids = [];
            $('input[type=checkbox]').each(function () {
                if ($(this).is(":checked")) 
                {
                    var val = $(this).val();
                    ids.push(val);
                }
            });
            @this.cancel(ids);
        }
        
    </script>
@endpush