<p class="text-center">{{ $seccion->indicacion }}</p>
<p>{{ $seccion->texto }}</p>
@if ($seccion->audio!=null)

  <div class="player">
    <audio id='mi_musica'>
      <source src="https://escolares.itzitacuaro.edu.mx/laravel/public/storage/audios_ingles/{{ $seccion->audio }}" type="audio/mp3">
      <!--<source src="https://escolares.itzitacuaro.edu.mx/laravel/storage/audios/confi_{{ $seccion->modulo->configuracion_id }}/{{ $seccion->audio }}" type="audio/mp3">-->
    </audio>
    <div class="container" style="margin-top: 15px;">
      <div class="row">
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12"></div>
        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12 text-center">
          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-dark" onclick="reproducir();"><span class="fa fa-play"></span></button>
            <button type="button" class="btn btn-dark" onclick="pausar();"><span class="fa fa-pause"></span></button>
            <button type="button" class="btn btn-dark" onclick="subir_volumen();"><span class="fa fa-volume-down"></span></button>
            <button type="button" class="btn btn-dark" onclick="bajar_volumen();"><span class="fa fa-volume-up"></span></button>
          </div>
        </div>
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12"></div>
      </div>
      <div class="row" style="margin-top: 5px;">
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12"></div>
        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
          <div class="progress barra_audio" style="height: 5px; width: 100px; margin: auto;">
            <div class="progress-bar barra_audio_interna bg-info" style="width: 0%; background: #e0e0e1;" ></div>
          </div>  
        </div>
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12"></div>
      </div>
    </div>
      
  </div>

@endif

<div class="row" style="margin-top: 30px;">
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">&nbsp;</div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <button class="btn btn-nicee btn-block" onclick="javascript:pregunta({{ $seccion->id }});">OK</button>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">&nbsp;</div>
</div>
  
<input type="hidden" value="{{ $fin }}" id='fin' name="fin">
<input type="hidden" value="{{ $seccion->modulo->nombre }}" id='topico' name="topico">
<input type="hidden" value="{{ $total }}" id='total' name="total">