@extends("profesor.layout.layout")

@section("styles")
    @php
        $modulo = "Asistencia";
        $vista = "Pasar Lista"

    @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;
        }

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

        .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: 30px !important;
            height: 20px !important;
            padding: 2px 2px;
        }


        .fecha-selector {
            padding-bottom: 6px;
        }

        .fecha-item {
            min-width: 70px;
            padding: 8px 6px;
            border-radius: 10px;
            background-color: #f1f5f9;
            text-align: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }

        .fecha-item .fs-4 {
            line-height: 1;
        }

        .fecha-item.active {
            background-color: #0d9488; /* verde azulado */
            color: white;
        }

        .fecha-item.active .text-muted,
        .fecha-item.active .text-danger {
            color: white !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 }}"
                                    {{ $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-5">
                        <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 p-4">
            <div class="d-flex gap-2 overflow-auto flex-nowrap fecha-selector limpiable"></div>
        </div>
    </div>

    <div class="row gx-5 gx-xl-10 align-items-stretch mt-2">
        <div class="card p-4">
            <div class="d-flex gap-2 overflow-auto flex-nowrap asistencias-list-fecha limpiable"></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>
            <div class="row mt-3" id="info-asistencia" style="display: none;">
                <div class="col-md-4">
                    <label class="form-label fw-bold">Grupo / Modulo</label>
                    <div id="info-seccion-materia" class="form-control-plaintext text-dark"></div>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">Lecciones</label>
                    <input type="number" id="inputLecciones" name="lecciones" class="form-control form-check-sm" min="1" value="2">
                </div>
            </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">
                    <!-- El contenido se genera por JavaScript -->
                </table>
            </div>
            <div id="contenedor-botones-asistencia" class="mt-3"></div>

        </div>
    </div>

@endsection

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