@extends("profesor.layout.layout")

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

        .compact-table input[type="number"] {
            width: 70px !important;
            height: 30px !important;
            padding: 2px 4px;
        }

        thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f1f1f1;
        }
    </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 }}"
                                    {{ $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($grupos 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 class="col-md-1 ms-auto text-end">
                        <button id="btnConfig" class="btn btn-sm btn-dark d-none" title="Configuración" data-bs-toggle="tooltip">
                            <i class="ki-solid ki-setting-2"></i>
                        </button>
                    </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" style="min-height: 40px;justify-content:flex-end;">
                <div class=" flex-wrap justify-content-center gap-2 my-2 d-none" id="divBtnDescargar">
                    <button id="btnPdf" class="btn btn-sm btn-light-danger" title="PDF {{ $modulo }}" data-bs-toggle="tooltip" data-url="{{route("profesor::instrumentos.exportarPdf", ["tipo" => $tipo])}}">
                        <i class="fas fa-file-pdf pe-2"></i>PDF
                    </button>
                    <button id="btnWord" class="btn btn-sm btn-light-primary" title="WORD {{ $modulo }}" data-bs-toggle="tooltip" data-url="{{route("profesor::instrumentos.exportarWord", ["tipo" => $tipo])}}">
                        <i class="fas fa-file-word pe-2"></i>Word
                    </button>
                    <button id="btnExcel" class="btn btn-sm btn-light-success" title="EXCEL {{ $modulo }}" data-bs-toggle="tooltip" data-url="{{route("profesor::instrumentos.exportarExcel", ["tipo" => $tipo])}}">
                        <i class="fas fa-file-excel pe-2"></i>Excel
                    </button>
                </div>
            </div>

            <div class="card-body table-responsive" style="max-height: 70vh; overflow: auto;">
                <table id="tabla-estudiantes" class="table table-bordered table-hover table-sm compact-table">
                    <thead>
                    <tr id="header-nombre"><th rowspan="3">Estudiantes</th></tr>
                    <tr id="header-puntos" class="bg-secondary"></tr>
                    <tr id="header-labels" class="bg-secondary"></tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    @include("profesor.notas_instrumentos.modal.config_modal")
@endsection

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