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

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

    <header id="title--section" 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">Pagamento corsi</h2>
        </div>

    </header>

    <section id="subheader" class="d-flex align-items-center ">
        <form action="" class="group--action d-flex align-items-center">
            <select class="form-select form-select-lg me-1" wire:model='courseId'>
                @foreach($courses as $c)
                    <option value="{{$c->id}}">{{$c->name}}
                @endforeach
            </select>
        </form>

    </section>

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

        <table class="table tablesaw tablesaw-stack" id="tablesaw-350">
            <thead>
                <tr>
                    <th scope="col"></th>
                    @foreach($months as $m)
                        <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;{{$m}}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody id="checkall-target">
                @foreach($records as $record)
                    <tr>
                        @php
                        list($id, $name) = explode("§", $record[0]);
                        @endphp
                        <td><a href="/members?member_detail={{$id}}">{{$name}}</a></td>
                        @for($x=1; $x<=12; $x++)
                            <td><a class="{{$record[$x]}}">&nbsp;</a></td>
                        @endfor
                    </tr>
                @endforeach

            </tbody>
        </table>

    </section>

</div>

@push('scripts')
    <style>
        a.grey
        {
            display: flex;
            margin-right:10px;
            float:left;
            height: 2.5rem !important;
            width:50px;
            align-items: center;
            justify-content: center;
            color: #006099;
            background-color: #d3dce1 !important;
            padding: 0 1.25rem;
            font-size: 0.875rem;
            font-family: greycliff-cf, sans-serif;
            border-radius: 1.875rem !important;
            -webkit-border-radius: 1.875rem !important;
            -moz-border-radius: 1.875rem !important;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            border: none;
        }
        a.blue
        {
            display: flex;
            margin-right:10px;
            float:left;
            height: 2.5rem !important;
            width:50px;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: #006099 !important;
            padding: 0 1.25rem;
            font-size: 0.875rem;
            font-family: greycliff-cf, sans-serif;
            border-radius: 1.875rem !important;
            -webkit-border-radius: 1.875rem !important;
            -moz-border-radius: 1.875rem !important;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            border: none;
        }
        a.yellow
        {
            display: flex;
            margin-right:10px;
            float:left;
            height: 2.5rem !important;
            width:50px;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: #ffe238;
            padding: 0 1.25rem;
            font-size: 0.875rem;
            font-family: greycliff-cf, sans-serif;
            border-radius: 1.875rem !important;
            -webkit-border-radius: 1.875rem !important;
            -moz-border-radius: 1.875rem !important;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            border: none;
        }
        a.orange
        {
            display: flex;
            margin-right:10px;
            float:left;
            height: 2.5rem !important;
            width:50px;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: #FF7E38;
            padding: 0 1.25rem;
            font-size: 0.875rem;
            font-family: greycliff-cf, sans-serif;
            border-radius: 1.875rem !important;
            -webkit-border-radius: 1.875rem !important;
            -moz-border-radius: 1.875rem !important;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            border: none;
        }
        a.green
        {
            display: flex;
            margin-right:10px;
            float:left;
            height: 2.5rem !important;
            width:50px;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: green;
            padding: 0 1.25rem;
            font-size: 0.875rem;
            font-family: greycliff-cf, sans-serif;
            border-radius: 1.875rem !important;
            -webkit-border-radius: 1.875rem !important;
            -moz-border-radius: 1.875rem !important;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            border: none;
        }
    </style>
@endpush