@extends("estudiante.layout.layout")
@section("styles")
    @php
        $titulo = "Pre Matrícula";
        $modulo = "Pre Matrícula";
        $vista="Pre Matricular ahora";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
    <style>
        .custom-checkbox:disabled {
            opacity: 1; /* Restaurar la opacidad normal */
            cursor: not-allowed; /* Cambiar el cursor a 'not-allowed' */
        }
    </style>
@endsection

@section("contenido")
    <!--begin::Row-->
    @include("estudiante.perfil.components.header")

    <div class="row g-5">
        <form action="{{route("estudiante::matricula.insertar")}}" method="post" id="frm_matricula" enctype="multipart/form-data" >
            @csrf
            <div class="card mb-5">
                <div class="card-header">
                    <h3 class="card-title">
                    <span class="fw-bolder text-gray-800 fs-6 ml-4">
                        <span class="badge badge-circle badge-warning ">1 </span>
                        Escoge el nivel a matricular</span>
                    </h3>
                </div>
                <div class="card-body pb-0">
                    <h4>Según normas reguladoras de la promoción y repitencia dentro del Sistema Educativo Público Costarricense (adelantamiento), de Noveno a Décimo no se puede adelantar.</h4>

                    <p class="text-info my-4">
                        <i class="fas fa-info-circle"></i>
                        Cualquier materia a adelantar debe informarse al momento de ratificar la matrícula en la institución.
                    </p>
                    <div class="row">
                        <div class="col-md-2">
                            <label class="form-label required" for="nivel_id">Nivel a matricular</label>
                            <select name="nivel_id" id="nivel_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true" required>
                                <option value="">-</option>
                                @foreach($niveles as $nivel)
                                    <option value="{{$nivel->id}}">{{$nivel->nivel}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-7">
                            <table class="table table-condensed table-sm" id="tablaMaterias">
                                <thead>
                                <tr>
                                    <th width="5px"><b>Matricular</b></th>
                                    <th><b>Materia</b></th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-5">
                <div class="card-header">
                    <h3 class="card-title">
                    <span class="fw-bolder text-gray-800 fs-6 ml-4">
                        <span class="badge badge-circle badge-warning ">2 </span>
                        Adjunte los documentos requeridos
                    </span>
                    </h3>
                </div>
                <div class="card-body">
                    <p class="text-info">
                        <i class="fas fa-info-circle"></i>
                        Adjunte los documentos requeridos para la matrícula, estos serán verificados por la institución.
                    </p>
                    <p class="text-info">
                        <i class="fas fa-triangle"></i>
                        Se requiere que las certificaciones adjuntas tengan una antigüedad máxima de 3 meses. Certificaciones más antiguas no serán aceptadas.
                    </p>
                    <div class="row mt-10">
                        <div class="row" id="divRequisitos">

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

            <div class="card mb-5">
                <div class="card-header">
                    <h3 class="card-title">
                    <span class="fw-bolder text-gray-800 fs-6 ml-4">
                        <span class="badge badge-circle badge-warning ">3 </span>
                        Otra información
                    </span>
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                       <div class="col-md-6">
                           <label for="procedencia">¿Procede de otro colegio? o ¿De qué escuela para matricular de sétimo?.</label>
                           <input type="text" name="procedencia" id="procedencia" class="form-control">
                       </div>

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


            <div class="card mb-5">
                <div class="card-body">
                    <div class="form-check form-check-success">
                        <input class="form-check-input custom-checkbox acepto"  id="check_acepto"  name="check_acepto" type="checkbox" required>
                        <label for="check_acepto"> <b>Acepto, conozco, respeto y acato las normas establecidas en el Reglamento Interno y el Reglamento de Evaluación
                                de los Aprendizajes; los cuales rigen las normas de esta institución educativa y me responsabilizo por
                                el fiel cumplimiento de las mismas.</b>
                        </label>
                    </div>

                    <div class="form-check form-check-success mt-5">
                        <input class="form-check-input custom-checkbox acepto"  id="check_entiendo"  name="check_entiendo" type="checkbox" required>
                        <label for="check_entiendo"> <b>Entiendo que el presente formulario no representa una matrícula efectiva y que se debe ratificar presencialmente en la institución.</b>
                        </label>
                    </div>

                    <div class="form-check form-check-success mt-5">
                        <input class="form-check-input custom-checkbox acepto"  id="check_conozco"  name="check_conozco" type="checkbox" required>
                        <label for="check_conozco"> <b>Conozco que debo presentar copia y original de todos los documentos adjuntados en este formulario digital.</b>
                        </label>
                    </div>

                    <div class="row mt-10">
                        <div class="d-flex justify-content-center my-5">
                            <button type="submit" id="bnt_submit" class="btn btn-primary">Generar pre matricula</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section("scripts")
    <script> window.url_get = "{{ route('estudiante::nivel.materias.get',":id") }}";</script>

    @vite(['resources/js/materias-nivel/get.js'])
    @vite(['resources/js/matriculas/insertar.js'])

@endsection