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

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

    {{-- <a class="btn--ui lightGrey" href="/settings?type=corsi"><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">Presenze</h2>
        </div>
    </header>

    <br>

    <div class="row">
        <div class="col-auto d-flex gap-2">
            <div class="datepicker--btn">
                <a class="btn--ui btn-primary" style="cursor:pointer;" onclick="showDatePicker(this.parentElement)"><i class="far fa-calendar"></i></a></a>
                <input type="date" wire:model='date'>
            </div>
            <a class="btn--ui btn-primary" style="cursor:pointer;" wire:click="today()">Oggi</a>
        </div>
        <div class="col d-flex justify-content-center align-items-center gap-4">
            <a style="cursor:pointer;" wire:click="prev()">
                <i class="fa-solid fa-chevron-left"></i>
            </a>
            @php
                $date_title = \Illuminate\Support\Carbon::parse($date)->locale('it-IT')->translatedFormat("j F Y");
            @endphp
            <h4 class="text-uppercase m-0">{{$date_title}}</h4>
            <a style="cursor:pointer;" wire:click="next()">
                <i class="fa-solid fa-chevron-right"></i>
            </a>
        </div>
        <div class="col-auto">
            <a class="btn--ui btn-primary" style="cursor:pointer;" href='/absence_reports'>Alert assenze</a>
        </div>
    </div>

    <br><br>

    <div class="row justify-content-between">
        <div class="col-lg-3 col-md-12 d-flex gap-3 align-items-center mb-3">
            <label class="form-label fw-medium text-uppercase mb-0" for="course_id">Corso</label>
            <select wire:model="course_name" id="course_name" class="form-select">
                <option value=""></option>
                @foreach($courses as $course)
                <option value="{{$course}}">{{$course}}
                @endforeach
            </select>
        </div>
            <div class="col-auto d-flex gap-3 align-items-center mb-3">
                <label for="from" class="form-label fw-medium text-uppercase mb-0" style="white-space:nowrap;">Ora inizio</label>
                <select wire:model="from" class="form-select" id="from" style="width: fit-content">
                    <option value=""></option>
                    @for($c=6;$c<=23;$c++)
                        <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00:00">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00</option>
                        <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30:00">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30</option>
                    @endfor
                </select>
            </div>
        @if(false)
            <div class="col-auto d-flex gap-3 align-items-center mb-3">
                <label for="to" class="form-label fw-medium text-uppercase mb-0" style="white-space:nowrap;">Ora fine</label>
                <select wire:model="to" class="form-select" id="to" style="width: fit-content">
                    <option value=""></option>
                    @for($c=6;$c<=23;$c++)
                        <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00:59">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:00</option>
                        <option value="{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30:59">{{str_pad($c, 2, "0", STR_PAD_LEFT)}}:30</option>
                    @endfor
                </select>
            </div>
        @endif
        <div class="col-lg-2 col-md-12 d-flex gap-3 align-items-center mb-3">
            <label class="form-label fw-medium text-uppercase mb-0" for="court_id">Campo</label>
            <select wire:model="court_id" id="court_id" class="form-select">
                <option value=""></option>
                @foreach($courts as $court)
                <option value="{{$court->id}}">{{$court->name}}
                @endforeach
            </select>
        </div>
        <div class="col-lg-3 col-md-12 d-flex gap-3 align-items-center mb-3">
            <label class="form-label fw-medium text-uppercase mb-0" for="instructor_id">Istruttore</label>
            <select wire:model="instructor_id" id="instructor_id" class="form-select">
                <option value=""></option>
                @foreach($instructors as $instructor)
                <option value="{{$instructor->id}}">{{$instructor->name}}
                @endforeach
            </select>
        </div>

        <div class="col-lg-9 col-md-12"></div>
        <div class="col-lg-3 col-md-12 d-flex gap-3 align-items-center mt-5 mb-3">
            <label class="form-label fw-medium text-uppercase mb-0" for="search">Cerca</label>
            <input wire:model="search" type="search" class="form-control form-control-sm" id="search" />
        </div>
    </div>

    @forelse($records as $course => $records)
    <div class="row mb-5">
        <div class="col-12 mb-3">
            <h3 class="primary">{{$course}}</h3>
        </div>
        @foreach($records as $time => $presences)
        <div class="col-12 mb-4">
            <div class="row">
                <div class="col-1 align-items-center d-flex fs-5 fw-bold justify-content-center">{{$time}}</div>
                <div class="col-11">
                    <table class="report-table">
                        <thead>
                            <tr>
                                <td>Livello</td>
                                <td>Cognome</td>
                                <td>Nome</td>
                                <td>Campo</td>
                                <td>Istruttore</td>
                                <td>Stato</td>
                                <td>Motivazione</td>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $last_level = "";
                                $index = 0;
                            @endphp
                            @foreach($presences as $presence)
                            @php
                                if ($last_level != $presence["course_level"]) {
                                    $index++;
                                }
                                $last_level = $presence["course_level"];
                            @endphp
                            <tr @if ($index % 2 == 0) style="background-color: rgba(12 97 151 / 0.15)" @endif>
                                <td>{{$presence["course_level"]}}</td>
                                <td>{{$presence["last_name"]}}</td>
                                <td>{{$presence["first_name"]}}</td>
                                <td>{{$presence["court"]}}</td>
                                <td>{{$presence["instructor"]}}</td>
                                <td>{!!$presence["status"]!!}</td>
                                <td>{{$presence["motivation"]}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @empty
    <hr>
    <div class="row">
        <div class="col text-center text-black-50">Nessun dato presente</div>
    </div>
    <hr>
    @endforelse

</div>

@push('css')
<link href="/css/presence_report.css" rel="stylesheet" />
@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>
<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>
@endpush

@push('scripts')
<script>
    function showDatePicker(el) {
        let datepicker = el.querySelector("input[type='date']");
        datepicker.showPicker();
    }
</script>
@endpush