@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Asistencia";
        $modulo = "Control Asistencia";
        $vista="Escoja Grupo";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
    <style>
        .custom-table tbody tr:hover {
            background-color: #6ec2ff; /* Cambia este color al que desees */
            transition: background-color 0.3s ease; /* Agrega transición para suavizar el cambio */
        }
    </style>
@endsection

@section("contenido")
    <div class="row my-2">
        <div class="card">
            <div class="card-body my-0 py-2">
                <div class="row">
                    <div class="col-md-2">
                        <label for="curso_lectivo_id"><b>Periodo</b></label>
                        <select class="form-select form-select-sm" id="periodo_id" name="periodo_id">
                            @foreach($periodos as $periodo_m)
                                <option value="{{$periodo_m->id}}" {{($periodo->id==$periodo_m->id)? "selected" : "" }}>{{$periodo_m->periodo}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row gx-5 gx-xl-10 align-items-stretch">
       @foreach($gruposAsignados as $grupo)
            <div class="col-sm-2 mb-5 mb-xl-10">
                <a href="{{route("profesor::modulos.grupo",$grupo)}}">
                    <div class="card card-rounded h-lg-100">
                        <div class="card-body py-5">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-primary">{{$grupo->grupo}}</span><br>
                                <span class="text-gray-400 mt-1 fw-semibold fs-6">{{$grupo->ciclo->ciclo}}</span>
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
       @endforeach

    </div>
@endsection

@section("scripts")
    @vite('resources/js/app.js')
    <script>
        $(document).ready(function () {
            $(document).on('change', '#periodo_id', function () {
                let periodo_id = $(this).val();
                window.location.href = "{{route("profesor::asistencia.misGrupos",":periodo_id")}}".replace(":periodo_id", periodo_id);
            });
        });
    </script>

@endsection