{% extends 'base_turnoweb.html.twig' %}

{% block title %}Turnomate{% endblock %}

{% block body %}



<div class="container">

              <div class="card-body box-profile">
                <div class="text-center">
                  <img src="/img/logo-solutions.png" class="main-logo" alt="logo" id="main_logo">
                </div>

                <hr>
                
                <div id="formulario" style="display:none">
                <form  id="frm_ticket" method="post" action="{{ path('turno_web_get_ticket')}}">
                <div class="input-group mb-3">
                  <span style="font-size: 24px;padding-right: 10px;">+56 9</span>
                  <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fa fa-mobile"></i></span>
                  </div>
                  <input type="text" required pattern="[0-9]{8}" maxlength="8" id="celular" name="celular" class="form-control form-control-lg" placeholder="Ingresa tu número de celular">
                 
                  <input type="hidden" id="id_fila" name="id_fila">
                </div>

                <button type="submit" class="btn btn-block btn-outline-primary btn-lg">Solicitar turno</button>
                </form>
                <div id="validationMessage"></div>
                </div>

                <div id="box-list">
                {% for fila in filas %}
                <div class="small-box bg-warning">
                    <div class="inner">
                   

                      
                      <div class="row">
                        <div class="col-sm">
                           <p style="font-size:40px;color:white;font-weight: bold;">{{ fila.nombre }}</p>
                        </div>
                        <div class="col-sm">
                          <div class="row">
                              
                              <div id="turnocol_{{ fila.id }}" class="col" style="text-align:center;font-weight: bold; color:white;">
                                      <b>Tu Turno</b>
                                      <h1 id="turnolabel_{{ fila.id }}"></h1>
                              </div>
                              <div class="col" style="text-align:center">
                                      Atendiendo al:
                                      <h1>{{ fila.turnoActual}}</h1>
                              </div>

                          </div>
                           
                        </div>
                     
                      </div>
                      <hr>
                      <div class="row">
                        <div class="col-sm">
                          <p style="margin: 0px;"><b>{{ fila.personasEnFila}}</b> personas en la fila </p>
                        </div>
                        <div class="col-sm">
                          <p class="text-center"  style="margin: 0px;"><b>X</b> tiempo promedio de espera </p>
                        </div>
                      </div>
                      
                    </div>
                    
                    <div class="icon">
                      <i class="ion ion-person-add"></i>
                    </div>
                    <a href="#" id="obtener_{{ fila.id }}" class="small-box-footer" style="padding:15px;" onClick="solicitar({{ fila.id }})">Obtener turno&nbsp;<i class="fas fa-arrow-circle-right"></i></a>
                    <a href="#" id="cancelar_{{ fila.id }}" class="small-box-footer" style="padding:15px; display:none" onClick="cancelar({{ fila.id }})">Cancelar turno&nbsp;<i class="fas fa-arrow-circle-right"></i></a>
                    
                </div>
                
                {% endfor %}
                </div>

              <a href="{{ path('turno_web',{})}}" class="btn btn-block btn-outline-primary" style="padding:15px;">Volver&nbsp;&nbsp;<i class="fas fa-arrow-circle-left"></i></a>
              </div>
              <!-- /.card-body -->






</div>              

<script type="text/javascript">


    function solicitar(id_fila){
                var celular = $("#celular").val();

                $("#id_fila").val(id_fila);
                $("#formulario").show();
                $("#box-list").hide();
    }


    function cancelar(id_fila){

      miStorage = window.localStorage;
      miStorage.clear();
      document.location.reload();

    }

    $(document).ready(function() {

        miStorage = window.localStorage;
        turno = miStorage.getItem('turno');
        turno = JSON.parse(turno);

        $("#turnolabel_"+turno.fila).html(turno.turno);
        $("#cancelar_"+turno.fila).show();
        $("#obtener_"+turno.fila).hide();

       // setInterval(function(){ document.location.reload();}, 5000);
        console.log(turno);
        

    });

</script>



{% endblock %}