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

        th, td {
            padding: 5px;
        }
    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        <div class="card shadow-sm border mb-5">
            <div class="card-body">
                <div class="row row-cols-1 row-cols-md-6 g-3 align-items-end">

                    <div class="col">
                        <label for="periodo_id" class="form-label required">Periodo</label>
                        <select name="periodo_id" id="periodo_id" class="form-select form-select-sm">
                            @foreach($periodos as $periodo)
                                <option data-curso_lectivo_id="{{ $periodo->curso_lectivo_id }}" value="{{ $periodo->id }}"
                                    {{ $periodo->id == $periodo_actual->id ? 'selected' : '' }}>
                                    {{ $periodo->periodo }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col">
                        <label for="grupo_id" class="form-label required">Grupo</label>
                        <select name="grupo_id" id="grupo_id" class="form-select form-select-sm">
                            <option value="">-</option>
                            @foreach($grupos as $grupo)
                                <option value="{{ $grupo->id }}">{{ $grupo->grupo }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label for="modulo_id" class="form-label required">Modulo</label>
                        <select name="modulo_id" id="modulo_id" class="form-select form-select-sm"></select>
                    </div>

                </div>
            </div>
        </div>



        <div class="card">
            <div class="card-body">
                <div class="row table-responsive">
                    <table id="tabla" class="table custom-table table-condensed table-striped  table-bordered table-sm "></table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
    <script>
        window.routesInstrumento = @json($routes);
    </script>
    <script> window.dataTable = "{{ route('profesor::notas.getNotasCondicionData') }}";</script>
    <script> window.pdfIndividual = "{{ route("profesor::reportes.individualPDF",":payload") }}";</script>
    @vite('resources/js/reportes/estudiante/individual.js')

@endsection