@extends("profesor.layout.layout")

@section("styles")
    @php
        $modulo = "Notas";
        $vista = "Maestro de Notas";

    @endphp
    <title>{{ getenv("APP_NAME") }} | {{ $vista }}</title>
    <style>
        .compact-table td,
        .compact-table th {
            padding: 4px 6px !important;
            white-space: nowrap;
            font-size: 13px;
            vertical-align: middle;
        }


        .table-responsive thead th {
            position: sticky;
            top: -30px;
            z-index: 10;
            background: #fff;
        }

        /* Estilos base sin restricción de ancho */
        .sticky-col,
        .nombre-columna {
            white-space: normal !important;
            word-break: break-word;
            overflow-wrap: break-word;
            vertical-align: middle;
            background-color: white;
            padding: 0.25rem 0.5rem;
            position: sticky;
            left: 0;
            z-index: 2;
        }

        /* Solo en móviles: limitar el ancho */
        @media (max-width: 768px) {
            .sticky-col,
            .nombre-columna {
                min-width: 150px !important;
                max-width: 200px;
            }
        }

        .compact-table input[type="number"] {
            width: 55px !important;
            height: 10px !important;
            padding: 2px 2px;
            font-size: 10px !important;
        }

        .has-error {
            background-color: #ffe1e1 !important;
        }

    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        <div class="card">
            <div class="card-body py-2">
                <div class="row mt-1 align-items-end">
                    <div class="col-md-3">
                        <label for="periodo_id" class="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 }}" data-numero="{{ $periodo->numero }}"
                                    {{ $periodo->id == $periodo_actual->id ? 'selected' : '' }}>
                                    {{ $periodo->periodo }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="grupo_id" class="required">Grupo</label>
                        <select name="grupo_id" id="grupo_id" class="form-select form-select-sm">
                            <option value="">-</option>
                            @foreach($secciones as $grupo)
                                <option value="{{ $grupo->id }}">{{ $grupo->grupo }} - {{$grupo->satelite->satelite}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="modulo_id" class="required">Modulo</label>
                        <select name="modulo_id" id="modulo_id" class="form-select form-select-sm">
                            <option value="">-</option>
                        </select>
                    </div>

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

    <div class="row gx-5 gx-xl-10 align-items-stretch mt-2">
        <div class="card">
            <div class="card-header" id="cardHeader" style="min-height: 40px;justify-content:center;">
            </div>
            <div class="card-body table-responsive px-0" style="max-height: 70vh; overflow: auto;">
                <table id="tabla-estudiantes" class="table table-bordered table-hover table-sm compact-table limpiable">
                </table>
            </div>
        </div>
    </div>

    @include("profesor.notas.modal.ampliacion_modal")
    @include("profesor.notas.modal.ampliacion_historial_modal")
    @include("profesor.notas.modal.importar_modal")

@endsection

@section("scripts")
    <script>
        window.routesInstrumento = @json($routes);
    </script>
    @vite(['resources/js/notas/maestro/maestro.js'])
@endsection