<?php echo csrf_field(); ?>
        
<div class="accordion" id="accordionExample">
	<!-- Empiezan topicos -->
	@foreach ($modulo as $i => $m)
	
		<div class="card">
	    <div class="card-header p-0" id="heading{{ $m->id }}" >
	      
	      <div class="row">
	      	<div class="col-md-12 col-sm-12">
	      		<button class="btn btn-link btn-link-green btn-block text-left" type="button" data-toggle="collapse" data-target="#modulo_{{ $m->id }}" aria-expanded="true" aria-controls="modulo_{{ $m->id }}" id='btn-{{ $m->id }}'>
		          Tópico {{ $m->nombre }} - {{ $m->descripcion }}
		        </button>
	      	</div>
	      	
	      </div>

	      
	    </div>
			<div id="modulo_{{ $m->id }}" class="collapse {{ $i==0 ? 'show' : '' }}" aria-labelledby="heading{{ $m->id }}" data-parent="#accordionExample">
      	<div class="card-body">
      		@if($m->seccion->count()>0)

						@foreach ($m->seccion as $s)
							<div class="table mt-3">
			          <div class="row encabezado">
			            <div class="col-md-12 col-sm-12 col-12 d-block d-sm-none bg-dark-blue text-white text-center">{{ $s->indicacion }}</div>
			            <div class="col-md-12 col-sm-12 col-12 d-none d-sm-block text-center">{{ $s->indicacion }}</div>
			          </div>
			          
			          @if($s->texto!="")
		              <div class="row encabezado" style="color:#8c8c8c; background:white; font-weight:normal;">
		     
		                <div class="col-md-12 col-sm-12 col-12 text-justify">{{ $s->texto }}</div>
		            	</div> 
		            @endif
		        		
		        		@if($s->audio!="")
		              <div class="row encabezado" style="color:#8c8c8c; background:white; font-weight:normal;">
		              	<div class="col-md-12 col-sm-12 col-12 text-center">
										  <section class="player mb-1" data-id='{{ $s->id }}'>
										    <audio id='audio_{{ $s->id }}'>
										      <source src="https://escolares.itzitacuaro.edu.mx/laravel/storage/audios/{{ $s->audio }}" type="audio/mp3">
										    </audio>
							          <section class="btn-group" role="group" aria-label="Basic example">
							            <button type="button" class="btn btn-dark" onclick="reproducir('{{ 'audio_'.$s->id }}');"><i class="fa fa-play"></i></button>
							            <button type="button" class="btn btn-dark" onclick="pausar('{{ 'audio_'.$s->id }}');"><i class="fa fa-pause"></i></button>
							            <button type="button" class="btn btn-dark" onclick="bajar_volumen('{{ 'audio_'.$s->id }}');"><i class="fa fa-volume-down"></i></button>
							            <button type="button" class="btn btn-dark" onclick="subir_volumen('{{ 'audio_'.$s->id }}');"><i class="fa fa-volume-up"></i></button>
							          </section>
										  </section>
										</div>
		            	</div> 
		      			@endif

		      			@if( count($s->pregunta) > 0 )
		      				@php
		      					$q = count($s->pregunta)/2;
		      					if (count($s->pregunta) % 2 > 0) { $q++; }
		      					$i = 0;
		      				@endphp
				          
				          
					        <div class="row">
					        	@foreach ($s->pregunta->chunk($q) as $chunk)    

					            <div class="col-md-6 col-sm-6 d-none d-sm-block">
					            	
					            	<div class="row encabezado gris">
						            	<div class="col-md-1 col-sm-1 d-none d-sm-block">No.</div>
						            	<div class="col-md-9 col-sm-9 d-none d-sm-block">Pregunta</div>
						            	<div class="col-md-2 col-sm-2 d-none d-sm-block">Acciones</div>
						            </div>

						            <div class="row contenido-700">
						            	@foreach ($chunk as $p)
									          <div class="col-md-12">
									          	<div class="row cuerpo">
								                <div class="col-6 d-block d-sm-none bg-dark-blue text-white text-center">No.</div>
								                <div class="col-md-1 col-sm-1 col-6 d-block d-sm-none bg-dark-blue text-white text-center">{{ $i+1 }}</div>
								                <div class="col-md-1 col-sm-1 col-6 d-none d-sm-block text-center">{{ $i+1 }}</div>
								                
								                <div class="col-6 d-block d-sm-none text-center">Pregunta</div>
								                <div class="col-md-9 col-sm-9 col-6 ">{{ $p->pregunta }}
								                	<ol>
								                		@if($p->resp_1!="")<li>{{ $p->resp_1 }}</li>@endif
								                		@if($p->resp_2!="")<li>{{ $p->resp_2 }}</li>@endif
								                		@if($p->resp_3!="")<li>{{ $p->resp_3 }}</li>@endif
								                		@if($p->resp_4!="")<li>{{ $p->resp_4 }}</li>@endif
								                		@if($p->resp_5!="")<li>{{ $p->resp_5 }}</li>@endif
								                	</ol>
								                </div>

								                <div class="col-6 d-block d-sm-none text-center">Acciones</div>
								                <div class="col-md-2 col-sm-2 col-6 text-center">
								                	<nav class="btn-group btn-group-xs mr-3" role="group" aria-label="..." style="margin: 0px;">
									                  <!--respetar los colores y botones para consultar, modificar y eliminar -->
									                  <button class="btn btn-outline-info"    type="button" onclick="ngl_pregunta_show({{ $p->id }});">
									                  	<i class="fa fa-pencil" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Modificar Pregunta"></i></button>
									                  <button class="btn btn-outline-danger"  type="button" onclick="ngl_pregunta_delete({{ $p->id }});">
									                  	<i class="fa fa-trash-o" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Eliminar Pregunta"></i></button>
									                </nav>
								                </div>
							                
							              	</div> 
							              </div>
								          	<?php $i++; ?>
									        @endforeach
									      </div>
					            </div>
					          
					        	@endforeach
					        </div>

				          
				      	@else
				      		<div class="text-center">Aun no se han registrado ninguna pregunta en esta sección.</div>
				      	@endif
			          
			          
				    	</div>
				    @endforeach
				  @else 
				  	<div class="text-center">Aun no se han registrado secciones.</div>
				  @endif
				</div>
   	 	</div>
		</div>

  @endforeach	
  <!-- Fin de  topicos -->
</div> 


<div class="row mt-3">
	<div class="col"></div>
	<div class="col">
		<button type="button" class="btn btn-outline-dark btn-block" onclick="ngl_consulta_regresar();"><i class="fa fa-times"></i> Regresar</button>
	</div>
	<div class="col"></div>
</div>

				    
				  