@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Asistencia";
        $modulo = "Control Asistencia";
        $vista="Escoja Sección";
    @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 gx-5 gx-xl-10 align-items-stretch">
        <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>Curso Lectivo</b></label>
                            <select class="form-select form-select-sm" id="curso_lectivo_id" name="curso_lectivo_id">
                                @foreach($cursos_lectivos as $curso_lec)
                                    <option value="{{$curso_lec->id}}" {{($curso_lectivo->id==$curso_lec->id)? "selected" : "" }}>{{$curso_lec->curso_lectivo}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        @foreach($seccionesAsignadas as $seccion)
            <div class="col-sm-2 mb-5 mb-xl-10">
                <a href="{{route("profesor::materias.seccion",$seccion)}}">
                    <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">{{$seccion->seccion}}</span><br>
                                <span class="text-gray-400 mt-1 fw-semibold fs-6">{{$seccion->nivel->nivel}}</span>
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
        @endforeach
    </div>

    </div>
@endsection

@section("scripts")

    <script> window.dataTable = "{{ route('admin::secciones.nivel',":nivel") }}";</script>
    @vite('resources/js/app.js')
    <script>
        $(document).ready(function () {
            $(document).on('change', '#curso_lectivo_id', function () {
                let curso_lectivo_id = $(this).val();
                window.location.href = "{{route("profesor::asistencia.misSecciones",":curso_lectivo_id")}}".replace(":curso_lectivo_id", curso_lectivo_id);
            });
        });
    </script>

@endsection