iao_team/resources/views/livewire/calendar_remove.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>

    <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">Lezioni da rimuovere</h2>
        </div>
    </header>

    <div class="row">
        <div class="col-12 mb-3">
            <div class="row">
                <div class="col">
                    <h3 class="primary">Lezioni senza iscritti nel calendario</h3>
                </div>
                <div class="col-auto">
                    <span id="deleting" style="display:none">Eliminazione in corso...</span>
                    <input type="button" class="btDelete btn--ui" value="Elimina selezionati">
                </div>
            </div>
        </div>
    </div>
    @foreach ($data as $course => $days)
    <div class="row mb-4">
        <div class="col-12 mb-3">
            <h4 class="primary">{{$course}}</h4>
        </div>
        @foreach ($days as $day => $times)
        <div class="col-1"></div>
        <div class="col-11 mb-4">
            <h5 class="primary text-capitalize">{{Illuminate\Support\Carbon::create()->startOfWeek()->addDays($day - 1)->locale('it')->dayName}}</h5>
            <div class="lessons-hour-grid">
                @foreach ($times as $time)
                    <a onclick="checkAll('{{$time['grp']}}', {{$time['calendar_id']}})" class="btn btn-light bt{{$time['calendar_id']}}">{{$time['hour']}}</a>
                @endforeach
            </div>
            @if ($loop->last)
                <hr>
            @endif
        </div>
        @endforeach
        {{-- <div class="col-12 mb-5">
            <div class="lessons-grid">
                @foreach($groups as $idx => $grp)
                    <a onclick="checkAll('{{$grp}}', {{$idx}})" class="btn btn-light bt{{$idx}}">{{$grp}}</a>
                @endforeach
            </div>
        </div> --}}
    </div>
    @endforeach

    <div class="row">
        <div class="col"></div>
        <div class="col-auto">
            <input type="button" class="btn--ui" onclick="toggleSingleLessons()" value="Visualizza slot singoli">
        </div>
    </div>

    <div class="row" id="single-lessons" style="display: none">
        <div class="col-12 mb-3">
            <h3 class="primary">Slot singoli</h3>
        </div>
        <div class="col-12 mb-5">
            <table class="report-table" id="lessons-table">
                <thead>
                    <tr>
                        <td></td>
                        <td>Data</td>
                        <td>Ora</td>
                        <td>Corso</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    @foreach($records as $record)
                    <tr>
                        <td><input type="checkbox" value="{{$record["id"]}}" class="chk when_{{$record["name"]}}_{{$record["day"]}}_{{str_replace(":", "", $record["hour"])}}"></td>
                        <td>{{$record["date"]}}</td>
                        <td>{{$record["hour"]}}</td>
                        <td>{{$record["name"]}}</td>
                        <td><a href="/presences?calendarId={{$record["id"]}}" target="_blank">Visualizza</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('css')
<link href="/css/presence_report.css" rel="stylesheet" />
<style>
    .report-table {
        width: 100% !important;
    }
</style>
@endpush

@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>
@endpush

@push('scripts')
<script>

    var ids = [];
    var xxx = [];

    $(document).ready(function() {

        $('.chk').change(function() {
            if(this.checked) 
            {
                ids.push($(this).val());
            }
            else
            {
                var index = ids.indexOf($(this).val());
                if (index > -1) 
                {
                    ids.splice(index, 1);
                }
            }
        }); 

        

        $(".btDelete").click(function(){
            $("#deleting").show();
            //$(this).hide();            
            @this.removeSelected(ids);      
        });

    });

    function checkAll(x, idx)
    {

        var checked = true;

        if ($(".bt" + idx).hasClass("btn-primary"))
        {
            $(".bt" + idx).removeClass("btn-primary");     
            $(".bt" + idx).addClass("btn-light");       
            checked = false;
        }
        else
        {
            $(".bt" + idx).removeClass("btn-light"); 
            $(".bt" + idx).addClass("btn-primary");
        }

        /*var index = xxx.indexOf(x);
        if (index > -1) 
        {
            xxx.splice(index, 1);
            checked = false;
        }*/

        x = x.replaceAll(" ", "_");
        x = x.replaceAll(":", "");
        console.log(x);
        var xxx = $(".when_" + x).map(function() {
            console.log("CIAO");
            var val = $(this).val();
            $(this).prop('checked', checked);
            if (checked)
                ids.push(val);
            else
            {
                var index = ids.indexOf(val);
                if (index > -1) 
                {
                    ids.splice(index, 1);
                }
            }
            //return this.innerHTML;
        }).get();
    }
</script>
@endpush

@push('scripts')
<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>

<script>

function toggleSingleLessons() {
    let lessons_wrapper = document.querySelector('#single-lessons');
    if (lessons_wrapper) {
        if (lessons_wrapper.style.display == 'none')
            lessons_wrapper.style.display = 'block';
        else
            lessons_wrapper.style.display = 'none';
    }
}
    
$(document).ready(function() {
    loadDataTable();
});

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

    $('#lessons-table').DataTable({
        fixedHeader: false,
        order: [
            [1, 'asc']
        ],
        layout: {
            topStart : null,
            topEnd : null,
            top1A: null,
            top1B : {
                pageLength: {
                    menu: [[10, 25, 50, 100, 100000], [10, 25, 50, 100, "Tutti"]]
                }
            },
            top1C :'search',
            bottomEnd: {
                paging: {
                    boundaryNumbers: false
                }
            }
        },
        pagingType: 'first_last_numbers',
        language: {
            "url": "/assets/js/Italian.json",
            paginate: {
                first: '<i class="fa-solid fa-angles-left"></i>',
                last: '<i class="fa-solid fa-angles-right"></i>',
            }
        },
    });
}
</script>
@endpush