@extends("estudiante.layout.layout")
@section("styles")
    @php
        $titulo = "Pre Matricula";
        $modulo = "PreMatricula";
        $vista="PreMatricular 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-primary ">1 </span> Satélite y módulos a matricular</span>
                    </h3>
                </div>
                <div class="card-body pb-0">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label required" for="nivel_id">Periodo</label>
                            <select name="periodo_id" id="periodo_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="{{$periodo->id}}">{{$periodo->periodo}}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label required" for="satelite_id">Satélite</label>
                            <select name="satelite_id" id="satelite_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($satelites as $satelite)
                                    <option value="{{$satelite->id}}">{{$satelite->satelite}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label required" for="ciclo_id">Ciclo</label>
                            <select name="ciclo_id" id="ciclo_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($ciclos as $ciclo)
                                    <option value="{{$ciclo->id}}">{{$ciclo->ciclo}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label required" for="grupo_id">Grupo</label>
                            <select name="grupo_id" id="grupo_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" required>
                                <option value="">-</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3 ">
                        <div class="col-md-12 table-responsive">
                            <table class="table table-condensed table-hover table-sm" id="tablaMaterias">
                                <thead class="thead-dark">
                                <tr>
                                    <th><b>Código</b></th>
                                    <th><b>Modulo</b></th>
                                    <th><b>Créditos</b></th>
                                    <th><b>Asignatura</b></th>
                                    <th width="10px">
                                        <div class="form-check form-check-success form-check-sm d-flex justify-content-center align-items-center">
                                            <input class="form-check-input form-check-success" type="checkbox" id="ck_all_matricular"/>
                                        </div>
                                        <b class="text-success">Matricular</b>
                                    </th>
                                    <th width="10px">
                                        <div class="form-check form-check-warning form-check-sm d-flex justify-content-center align-items-center">
                                            <input class="form-check-input form-check-success" type="checkbox" id="ck_all_suficiencia"/>
                                        </div>
                                        <b class="text-warning">¿Suficiencia?</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-primary ">2 </span> Otra información <small class="text-info">Esta información será revisada por la dirección.</small>
                    </span>
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($tipos_adecuaciones as $tipo_adecuacion)
                            <div class="col-4">
                                <label class="form-check-image active">

                                    <div class="form-check form-check-custom form-check-solid form-check-warning">
                                        <input class="form-check-input" type="checkbox" name="adecuaciones[]" value="{{$tipo_adecuacion->id}}"/>
                                        <div>
                                            <b>  {{$tipo_adecuacion->tipo_adecuacion}}</b>
                                        </div>
                                    </div>
                                    <div class="form-check">
                                        {{$tipo_adecuacion->descripcion}}
                                    </div>
                                </label>
                            </div>

                        @endforeach
                    </div>
                    <div class="row">
                        <div class="col-md-12 mt-3  ">
                            <label for="observaciones">Observaciones</label>
                            <textarea type="text" name="observaciones" id="observaciones" class="form-control"></textarea>
                        </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-primary">3 </span> Revise y acepte los términos
                    </span>
                    </h3>
                </div>
                <div class="card-body">
                    <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>He revisado todos los antecedentes</b>
                        </label>
                    </div>
                    <div class="form-check form-check-success mt-5">
                        <input class="form-check-input custom-checkbox acepto"  id="check_acepto"  name="check_acepto" type="checkbox" required>
                        <label for="check_acepto"> <b>Presenta 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="btn_submit" class="btn btn-success">Generar matricula</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section("scripts")
    <script>
        window.url_get = "{{ route('estudiante::grupos.get.por.satelite.periodo',["satelite"=>":satelite", "periodo"=>":periodo","ciclo"=>":ciclo"]) }}";
        window.url_get_modulos = "{{ route('estudiante::grupos.get.modulos',":grupo") }}";
    </script>
    @vite(['resources/js/grupos/porSatelitePeriodo.js'])
    @vite(['resources/js/grupos/getModulos.js'])

    <script>
        $(document).ready(function () {
            $("#frm_matricula").on("submit",function(){
                $("#btn_submit").prop("disabled",true);
            });
            //ck_all_matricular
            $("#ck_all_matricular").on("change",function(){
                let checked = $(this).prop("checked");
                $("#tablaMaterias tbody input[type='checkbox'].ck_matricular").prop("checked",checked);
                if(checked) {
                    $("#tablaMaterias tbody input[type='checkbox'].ck_suficiencia").prop("disabled", false);
                }else{
                    $("#tablaMaterias tbody input[type='checkbox'].ck_suficiencia").prop("disabled", true).prop("checked",false);
                }
            });
            $("#ck_all_suficiencia").on("change",function(){
                let checked = $(this).prop("checked");
                $("#tablaMaterias tbody input[type='checkbox'].ck_suficiencia").each(function() {
                    if (!$(this).prop("disabled")) {
                        $(this).prop("checked", checked);
                    }
                });
            });

            $('#tablaMaterias').on('change', '.ck_matricular', function () {
                var fila = $(this).closest('tr');
                var ckSuficiencia = fila.find('.ck_suficiencia');
                if ($(this).is(':checked')) {
                    ckSuficiencia.prop('disabled', false);
                } else {
                    ckSuficiencia.prop('disabled', true).prop('checked', false);
                }
            });
        })

    </script>

@endsection