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

{% block title %}Fila index{% endblock %}

{% block body %}

    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark"><i class="fas fa-clock"></i>
                        {% if fila  %}
                            {{ fila.local.nombre }}&nbsp;|{{ fila.nombre }}&nbsp;|&nbsp;Horarios de reserva
                        {% else %}
                            Horario de reserva
                        {% endif %}
                    </h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                <!--
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Starter Page</li>
                    </ol>-->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <div class="content">
    <div class="container-fluid">

     <div class="row">
            <div class="col-2">
                <form class="form" method="post" action="#" id="frm">
                    <div class="form-group">
                        <label>Fecha</label>
                        <input type="date" class="form-control" name="fecha" id="fecha" placeholder="" value='{{ "now"|date("Y-m-d") }}' min='{{ "now"|date("Y-m-d") }}'>
                    </div>
                     <div class="form-group">
                        <label>Duración del bloque</label>
                        <select class="form-control" name="duracion_slot" id="duracion_slot">
                       
                           <option value="5">5 min.</option>
                           {# <option value="20">20 min.</option>
                           <option value="25">25 min.</option> #}
                        </select>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label>Generar bloques desde las...</label>

                        <select id="bloque_inicio" name="bloque_inicio" class="form-control">
                        </select>
                    </div>
                     <div class="form-group">
                        <label>Hasta las ...</label>
                          <select id="bloque_final" name="bloque_final" class="form-control">
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Cupos</label>
                        <input type="number" class="form-control" name="cupos" id="cupos" min="1" max="100" value="1">
                    </div>
                    
                    <div class="form-group">
                        <label>Aplicar a:</label>
                        <select class="form-control" name="configuracion">
                           <option value="dia">Día seleccionado</option>
                           <option value="semana">Semana seleccionada</option>
                       
                           
                        </select>
                    </div>
                    <div class="form-group">
                        {% if fila  %}
                        <a href="#" id="btn_generar" class="btn btn-primary">Generar bloques</a>
                        {% else %}
                        <button type="button" class="btn btn-success" id="btn_generar_global">Generar bloques ...</button>
                        {% endif %}
                    </div>

                    <div class="modal fade" id="modal-filas-generar">
                        <div class="modal-dialog"  style="max-width:500px">
                            <div class="modal-content" style="padding: 20px;">
                                <div class="modal-header">
                                    <h4 class="modal-title">Seleccione filas: </h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>

                                    <div id="modal-body-filas" class="modal-body-filas">

                                        <table class="table">
                                            {% for local in filas_generar %}
                                                <tr>
                                                    <td>
                                                        <b>{{ local.local_nombre }}</b>
                                                    </td>
                                                </tr>
                                                {% for f in local.filas %}
                                                    <tr>
                                                        <td>
                                                            <input class="input" type="checkbox" value="{{ f.id }}" name="filas_general[]">&nbsp;{{ f.nombre }}</input>
                                                        </td>
                                                    </tr>
                                                {% endfor %}


                                            {% endfor %}
                                        </table>


                                    </div>
                                    <div class="modal-footer justify-content-between">

                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>

                                        <a href="#" id="btn_generar_general" class="btn btn-primary">Generar bloques</a>


                                    </div>

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



                </form>
            </div>
            <div class="col-10" >

                {% if not fila %}
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-2 pull-left">
                                    <label class="control-label">Mostrar calendario de fila : </label>
                                </div>
                                <div class="col-md-10 pull-left">
                                    <select class="form-control" name="select_filas" id="select_filas" style="width:300px">
                                        {% for local in filas_generar %}


                                            <option disabled>{{ local.local_nombre }}</option>

                                            {% for f in local.filas %}


                                                <option value="{{ f.id }}">&nbsp;{{ f.nombre }}</option>
                                            {% endfor %}


                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>



                    </div>

                </div>
                {%  endif %}

                <div id="detalle-reservas">

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

    </div>
    </div>


    <div class="modal" id="modal-cargando">
        <div class="modal-dialog"  style="max-width:300px">
            <div class="modal-content" style="padding: 20px;">

                <div id="modal-body-cargando" class="modal-body-cargando">
                    <p style="text-align: center">
                    <img src="{{ asset('img/pIkfp.gif') }}">
                    </p>
                    <p style="text-align: center">Generando bloques<br> espere un momento ....</p>

                </div>


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

<script>
    $("#btn_generar_global").click(function(){


        $("#modal-filas-generar").modal();
    });

    $("#bloque_inicio").change(function(){
        console.log('CARGANDO BLOQUE..');
        select_bloque();
    });

  function select_bloque(){

       $("#bloque_final").html("<option>"+$("#bloque_inicio").val()+"</option>");
        $.post("{{ path('fila_reservas_bloques')}}",{duracion_slot:$("#duracion_slot").val(),bloque:$("#bloque_inicio").val()},function(data){
            
                $.each(data, function(id,val) {
  
                     $("#bloque_final").append("<option>"+val+"</option>");
                });
               
        });


  }

  $("#select_filas").change(function(){
      load();
  });


  $("#fecha").change(function(){
        load();
  });

  $("#duracion_slot").change(function(){
        load();
  });

  $("#btn_generar").click(function(){
       save();
  });


  $("#btn_generar_general").click(function(){
     // $("#modal-cargando").modal();
      save();
  });

    function load() {

        $("#detalle-reservas").html("Cargando datos....");
        {% if fila %}
        $.post("{{ path('fila_reservas_tabla',{'id': fila.id}) }}?v=1", $("#frm").serialize(), function (data) {

            $("#detalle-reservas").html(data);
            select_bloque();

        });
        {% else %}
        let fila = $("#select_filas").val();

        $.post("/fila/"+fila+"/reservas-tabla?v=1", $("#frm").serialize(), function (data) {



            $("#detalle-reservas").html(data);

            select_bloque();

        });

        {% endif %}

    }


    function save(){


        {% if fila %}
         $.post("{{ path('fila_reservas_generar',{'id': fila.id})}}",$("#frm").serialize(), function (data){

                load();
                
         });
        {% else %}

        $(".modal").modal('hide');
        $("#modal-cargando").modal();
        $.post("{{ path('fila_reservas_generar',{'id': 0 })}}",$("#frm").serialize(), function (data){

            console.log('ocuktar div');
            $("#modal-cargando").modal('hide');
            load();

        });

        {% endif %}

    }

     load();


</script>
{% endblock %}