@extends('template.main')

@section('titulo','Listado de Materias')

@section('contenido')
    <div class="row" style="margin: 5px;">
        <div class="col-lg-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Inicio </a></li>
                    <li class="breadcrumb-item"><a href="{{ route('docentes.index') }}" style="text-decoration: none; color: #1d2124; cursor: default;">Docentes</a></li>
                    <li class="breadcrumb-item"><i class="fas fa-folder-plus"></i> Asignar Materias</li>
                </ol>
            </nav>
            <hr>
        </div>
        <div class="col-lg-6">
            <h3 class="contexto"> <i class="fas fa-chalkboard-teacher"></i> Grupo {{$grupo->nombre}}</h3>
        </div>
        <div class="col-lg-6" style="text-align: right">
            <h5 class="contexto"> Docente {{$docente->nombre}} {{$docente->apellidos}}</h5>
        </div>
        <div class="col-lg-12" style="text-align: right">
            <a href="{{ route('docentes.verAsignado',$docente->id) }}" class="btn btn-info"><i class="fas fa-eye"></i> Ver Grupos Asignados</a>
            <a href="{{ route('horarios.verHDocenteAdmon',$docente->id)}}" class="btn btn-outline-dark" target="_blank"><i class="fas fa-eye"></i> Ver Horario</a>
            <a href="{{ route('docentes.asignar',$docente->id) }}" class="btn btn-warning"><i class="fas fa-undo"></i> Regresar</a>
        </div>
        <div class="col-lg-12">
            <br>
            <form method="post" action="{{ route('docentes.asignar.materias', $grupo->idGrupo) }}" autocomplete="off" enctype="multipart/form-data">
                @csrf

            <div class="col-lg-12">
                <table id="contenedor" style="background: #fff; font-size: 12px" class="table table-hover">
                    <thead>
                    <tr>
                        <th>Asignar</th>

                        <th>Materia</th>
                        <th>Nivel</th>
                        <th>Carrera</th>
                        <th>Grupo</th>
                        <th>Cuatrimestre</th>
                    </tr>
                    </thead>
                    <tbody>

                            @if(count($materias) >= 1)
                                @php $i=0; @endphp
                                @foreach($materias as $mat)
                                    @php $i++; @endphp
                                    <script>
                                        $(document).ready(function () {
                                            var val=document.getElementById('d_{{$i}}').id;
                                            var val2=document.getElementById('h_{{$i}}').id;
                                            var val3=document.getElementById('day_{{$i}}').id;
                                            var iterador = {{$i}};
                                            var materia = {{$mat->id}};
                                            $("#"+val).on('click', function () {
                                                 let ischecked = $(this).is(":checked");
                                                 if (ischecked) {
                                                     $("#"+val2).show();
                                                     $("#"+val3).show();

                                                     $("#dias"+iterador).change(function(){
                                                         var days = [];
                                                         $('#dias'+iterador+' option').each(function(i) {
                                                             if (this.selected == true) {
                                                                 days.push(this.value);
                                                             }
                                                         });
                                                         console.log(days);
                                                         $.ajax({
                                                             dataType: "text",
                                                             data: {"dias": days,"iterador":iterador,"idDocente":{{$docente->id}},"idGrupo":{{$grupo->idGrupo}}  },
                                                             type: "get",
                                                             url: "{{ route('docentes.dias') }}",

                                                             beforeSend: function(){
                                                                 $('#'+val3).html("<center><img src=\"{{ asset('img/loading.gif') }}\" style=\"max-width: 100px\"></center>");
                                                             },

                                                             success: function(response){

                                                                 $('#'+val3).html(response);

                                                             }
                                                         });
                                                     });
                                                }
                                                else {
                                                    $("#"+val2).hide();
                                                    $("#"+val3).hide();
                                                }
                                                })
                                        });
                                    </script>
                                        <tr>
                                                <input type="text" name="idDocente" value="{{$docente->id}}" hidden>

                                                <td><input id="d_{{$i}}" type="checkbox" name="asignar{{$i}}" value="{{$mat->id}}"></td>
                                                
                                                <td>{{ $mat->nombre }}</td>
                                                <td>{{ $grupo->NivelEducativo->tipo }}</td>
                                                <td>{{ $grupo->Carrera->nombre }}</td>
                                                <td>{{ $grupo->nombre}}</td>
                                                <td>{{ $mat->cuatrimestre}}</td>


                                        </tr>
                                        <tr>

                                            <td colspan="2" id="h_{{$i}}" style="display: none">

                                                Seleccione los días que el docente<br> impartira la materia.<br><br>
                                                <select id="dias{{$i}}" name="dias{{$i}}[]" size="7" style="width: 70%" multiple>
                                                    @foreach($dias as $dia)
                                                        <option value="{{$dia->valor}}">{{$dia->dia}}</option>
                                                    @endforeach
                                                </select>
                                            </td> <!-- Dias -->
                                            <td colspan="5" id="day_{{$i}}" style="display: none">

                                            </td> <!-- Horario del dia-->

                                        </tr>

                                @endforeach
                            @else
                                <tr>
                                    <td colspan="5" align="center">No hay materias registradas</td>
                                </tr>
                            @endif


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

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

@endsection