{% extends '::base.html.twig' %}
{% block menuTop %}

{%endblock %}


{% block dashboard -%}

    <style>
        #menuTop {
            margin-top: 20px;
        }
        /* pager wrapper, div */
        .pager {
            padding: 5px;
        }
        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }
        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }
        /* pager output text */
        .pager .pagedisplay {
            font-size: 11px;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

        /*** loading ajax indeterminate progress indicator ***/
        #tablesorterPagerLoading {
            background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
            position: absolute;
            z-index: 1000;
        }

        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }
        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }
        .tablesorter-header-inner{
            height: 30px;
        }

        .create{
            padding: 0;
        }

        .modal-content{
            border-radius: 6px;
        }
        .modal-header{
            background-color: #337ab7;
            color: white;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            min-height: 16.43px;
            padding: 15px;
            border-bottom: 1px solid #e5e5e5;
        }
    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script>

        $(function () {

          $(".js-example-basic-single").select2({
              placeholder: "Elegir...",
              allowClear: true
          });

          $('#addProducto').click(function(){
              var repuesto = $('#repuesto').val();
              var categoria = $('#categorias').val();
              var codigo = $('#codigoRepuesto').val();
              var tipo = $('#tipo').val();
              var costo = $('#costo').val(); parseFloat($('#costo').val());
              var unidad = $('#unidad').val();
              var stock = $('#stock').val(); parseFloat($('#stock').val());
              var precio = $('#precio').val(); parseFloat($('#precio').val());
              //var region = $('#region').val();

              unidad = unidad.trim();

              if(repuesto==''){
                  $('#repuesto').focus();
                  alert('Debe completar el campo Repuesto');
                  return false;
              }

              if(tipo==''){
                  $('#tipo').focus();
                  alert('Debe completar el campo TIPO');
                  return false;
              }

              if(categoria==''){
                  $('#categorias').focus();
                  alert('Debe completar el campo CATEGORIA');
                  return false;
              }
              
              if (categoria == 59) {
                if(codigo==''){
                    $('#codigoRepuesto').focus();
                    alert('Debe completar el campo CODIGO');
                    return false;
                }
              }              

              if(costo==''){
                  $('#costo').focus();
                  alert('Debe completar el campo COSTO con un valor mayor o igual a 1');
                  return false;
              }

              if(stock==''){
                  $('#stock').focus();
                  alert('Debe completar el campo STOCK con un valor mayor o igual a 1');
                  return false;
              }    
              
              if(precio==''){
                  $('#precio').focus();
                  alert('Debe completar el campo PRECIO con un valor mayor o igual a 1');
                  return false;
              }               
                
              var costo = parseFloat($('#costo').val());
              var stock = parseFloat($('#stock').val());
              var precio = parseFloat($('#precio').val());
              
              $.confirm({
                  title: 'Agregar Repuesto!',
                  icon: 'fa fa-spinner fa-spin',
                  content:'Esta creando el siguiente Repuesto:<br>' +
                  '<p><b>REPUESTO</b>: ' + repuesto + '<br>' +
                  '<p><b>TIPO</b>: ' + $('#tipo option[value=' + $('#tipo').val() + ']').text() + '<br>' +
                  '<p><b>CATEGORIA</b>: ' + $('#categorias option[value=' + $('#categorias').val() + ']').text() + '<br>' +
                  '<b>CODIGO</b>: ' + codigo + '<br>' +
                  '<b>COSTO</b>: ' + costo + '<br>' +
                  '<b>UNIDAD</b>: ' + unidad + '<br>' +
                  '<b>STOCK</b>: ' + stock + '<br>' +
                  '<b>PRECIO</b>: ' + precio + '<br>' +
                  //'<b>REGION</b>: ' + $('#region option[value=' + $('#region').val() + ']').text() + '<br>' +
                  '</p>' +
                  '<center>¿Desea continuar?</center>',
                  confirmButton: 'Continuar',
                  cancelButton: 'Cancelar',
                  animation: 'top',
                  closeAnimation: 'scale',
                  theme: 'bootstrap',
                  confirm: function(){
                      $("#cargar").css('display', '');
                      $.ajax({
                          url: '{{ path('crearRepuestoProyecto', {'idproyectos':idproyectos}) }}',
                          type: 'POST',
                          data: {
                              $repuesto: repuesto,
                              $idCategoria: $('#categorias').val(),
                              $codigo: codigo,
                              $tipo: tipo,
                              $costo: costo,
                              $unidad: unidad,
                              $stock: stock,
                              $precio: precio
                              //$idregion: region
                          }
                      }).done(function(res){

                      });
                      swal(
                              'Bien !',
                              'Se creo el repuesto con exito',
                              'success'
                      )
                      $('#mProductos').modal('hide');
                      location.reload();
                  },
                  cancel: function(){
                  }
              });
          });

          $('#tRepuestos .actualizar').click(function(){
              var id = new String($(this).attr('id'));
              if(id!=''){
                  id = id.replace('btn', '');
                  var idR = $('#idRepuesto' + id).val();
                  var idPr = $('#idPr' + id).val();
                  var idP = $('#id' + id).val();
                  var item = $('#item' + id).val();
                  var categoria = $('#categoria' + id).val();
                  var costo = $('#costo' + id).val();
                  var precio = $('#precio' + id).val();
                  //var region = $('#region' + id).val();
                  //codigo = codigo.trim();
                  //nombre = nombre.trim();
                  if(item==''){
                      $('#item' + id).focus();
                      alert('Debe completar el campo ITEM');
                      return false;
                  }

                  if(categoria==''){
                      $('#categoria' + id).focus();
                      alert('Debe completar el campo CATEGORIA');
                      return false;
                  }
                  

                  if(costo==''){
                      $('#costo' + id).focus();
                      alert('Debe completar el campo COSTO');
                      return false;
                  }
                  if(precio==''){
                      $('#precio' + id).focus();
                      alert('Debe completar el campo PRECIO');
                      return false;
                  }

                  $.confirm({
                      title: 'Editar Repuesto!',
                      icon: 'fa fa-spinner fa-spin',
                      content:'Esta editando el siguiente Repuesto:<br>' +
                      '<b>ITEM</b>: ' + item + '<br>' +
                      '<p><b>CATEGORIA</b>: ' + $('#categoria' + id + ' option[value=' + $('#categoria' + id).val() + ']').text() + '<br>' +
                      '<b>COSTO</b>: ' + costo + '<br>' +
                      '<b>PRECIO</b>: ' + precio + '<br>' +
                      //'<b>REGION</b>: ' + $('#region' + id + ' option[value=' + $('#region' + id).val() + ']').text() + '<br>' +
                      //'<b>ID REPUESTO</b>: ' + idR + '<br>' +
                      //'<b>ID PROYECTO REPUESTO</b>: ' + idPr + '<br>' +
                      '</p>' +
                      '<center>¿Desea continuar?</center>',
                      confirmButton: 'Continuar',
                      cancelButton: 'Cancelar',
                      animation: 'top',
                      closeAnimation: 'scale',
                      theme: 'bootstrap',
                      confirm: function(){
                          $("#cargar").css('display', '');
                          $.ajax({
                              url: '{{ path('editarRepuesto', {'idproyectos':idproyectos}) }}',
                              type: 'POST',
                              data: {
                                  $idCategoria: $('#categorias').val(),
                                  $idR: idR,
                                  $idPr: idPr,
                                  $item: item,
                                  $categoria: categoria,
                                  $costo: costo,
                                  $precio: precio
                                  //$region: region
                              }
                          }).done(function(res){
                          });
                          swal(
                                  'Bien !',
                                  'Se actualizo el repuesto con exito',
                                  'success'
                          )
                          location.reload();
                      },
                      cancel: function(){
                      }
                  });
              }
          });

          ////////////////////////Alert codigoRepuestoExiste /////////////////////
            $("#codigoRepuesto").change(function(){
                var codigo = $('#codigoRepuesto').val();
                //var codi = $("#produc").val();
                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('CodigoRepuestoExiste',{'idproyectos':idproyectos})}}?codigo="+codigo
                }).done(function (msj){
                    if (msj == 'existe'){
                        swal({title: "", text: "Ya existe un repuesto con este código, ingrese un código diferente", type: "warning"});
                        $("#codigoRepuesto").val('');
                    }
                });

            });
          ////////////////////////////////////////////////////////////////////////

            var pagerOptions = {
                // target the pager markup - see the HTML block below
                container: $(".pager"),
                // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
                // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                // table row set to a height to compensate; default is false
                fixedHeight: false,
                // remove rows from the table to speed up the sort of large tables.
                // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                removeRows: true,
                // go to page selector - select dropdown that sets the current page
                cssGoto: '.gotoPage'
            };
            // initial sort set using sortList option
            $(".table1").tablesorter({
                theme: 'blue',
                // sort on the first column and second column in ascending order
                sortList: [],
                widgets: ["zebra", "filter"],
                widgetOptions: {
                    // extra css class applied to the table row containing the filters & the inputs within that row
                    filter_cssFilter: '',
                    // If there are child rows in the table (rows with class name from "cssChildRow" option)
                    // and this option is true and a match is found anywhere in the child row, then it will make that row
                    // visible; default is false
                    filter_childRows: false,
                    // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                    // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                    filter_hideFilters: false,
                    // Set this option to false to make the searches case sensitive
                    filter_ignoreCase: true,
                    // jQuery selector string of an element used to reset the filters
                    filter_reset: '.reset',
                    // Use the $.tablesorter.storage utility to save the most recent filters
                    filter_saveFilters: true
                }
            }).tablesorterPager(pagerOptions);
            // initial sort set using data-sortlist attribute (see HTML below)


            $(".parent,.child").live('click',function(){

                var href = $(this).attr('href');
                var modal = $(this).hasClass('parent') ? 'parent':'child';
                console.log(modal);
                $.ajax({
                    url : href,
                    type: 'GET'
                }).done(function(data){


                    $("#" + modal + " .modal-body").empty().append(data);

                    $(".numeric").numeric();
                    if(modal == 'parent') $(".js-example-basic-single").select2();
                    $("#"+ modal).modal();
                });

                return false;

            });

            $('.ajaxForm').live('submit',function() {
                // inside event callbacks 'this' is the DOM element so we first
                // wrap it in a jQuery object and then invoke ajaxSubmit
                $(this).ajaxSubmit({


                    success: function(){

                        swal({title: "The information was saved", text: "", type: "success"},
                                function () {
                                    $(".parent,.child").modal('hide');

                                    location.reload();

                                });
                    }

                });

                // !!! Important !!!
                // always return false to prevent standard browser submit and page navigation
                return false;
            });
        });

    </script>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">
                <img id="logo" src="{{ asset('images/ericsson.png')  }}"  width="1500" height="50" >

            </div>

        </div>

        <!--<div class="col-lg-1 pull-right create">
            <a class="btn btn-default parent pull-right"title="Create New Entry" href="{{ path('proyectorepuesto_new',{'idproyectos':idproyectos,'idmodule':idmodule}) }}"  aria-label="Left Align">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            </a>
        </div>-->

        <div class="row">
            <div class="col-md-12 text-right">
                <button id="btnProducos" class="btn-primary btn btn-success btn-md" data-toggle="modal" data-target="#mProductos"><span class="glyphicon glyphicon-plus"></span><span> CREAR REPUESTO </span></button>
            </div>
        </div>


        <table class="table-bordered table-hover table-striped tablesorter table1 col-xs-12 col-lg-12 tablesorter-blue" id="tRepuestos">
            <thead>
            <tr>
                <th>ID</th>
                <th>ITEM</th>
                <th>CATEGORY</th>
                <th>COST</th>
                <th>PRICE</th>
                <!--<th>REGION</th>-->
                <th>ACTIONS</th>
            </tr>
            </thead>
            <tbody>
            {% set id = 0 %}
            {% for entity in entities %}
                <tr>
                    <!--<td><a href="{{ path('proyectorepuesto_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>-->
                    <td style="font-size: 0px;">
                      <input id="idRepuesto{{ id }}" name="idRepuesto" type="hidden" value="{{ entity.idRepuesto }}"/>
                      <input id="idPr{{ id }}" name="idPr" type="hidden" value="{{ entity.id }}"/>
                      <input type="text" readOnly = "true" class="form-control" value="{{ entity.id }}" />
                      {{ entity.id }}
                    </td>
                    <td style="font-size: 0px;">
                        <input type="text" id="item{{ id }}" class="form-control" value="{{ entity.ITEM }}" />
                        {{ entity.ITEM }}
                    </td>
                    <!--<td>{{ entity.CATEGORY }}</td>-->
                    <td style="font-size: 0px;">
                        <select id="categoria{{ id }}"  class="js-example-basic-single">
                            <option></option>
                            {% for categoria in categorias %}
                                <option value="{{ categoria.id }}" {% if categoria.descripcion == entity.CATEGORY %} {{ 'selected="selected"' }} {% endif %}>{{ categoria.descripcion }}</option>
                            {% endfor %}
                        </select>
                    </td>
                    <!--<td>{{ entity.costo }}</td>-->
                    <td style="font-size: 0px;">
                        <input type="number" id="costo{{ id }}" min="0" step="any" class="form-control" value="{{ entity.costo }}" />
                        {{ entity.costo }}
                    </td>
                    <!--<td>{{ entity.precio }}</td>-->
                    <td style="font-size: 0px;">
                        <input type="number" id="precio{{ id }}" min="0" step="any" class="form-control" value="{{ entity.precio }}" />
                        {{ entity.precio }}
                    </td>
                    <!--<td>{{ entity.region }}</td>-->
                    <!--<td style="font-size: 0px;">
                        <select id="region{{ id }}"  class="js-example-basic-single">
                            <option></option>
                            {% for region in regiones %}
                                <option value="{{ region.idregion }}" {% if region.region == entity.region %} {{ 'selected="selected"' }} {% endif %}>{{ region.region }}</option>
                            {% endfor %}
                        </select>
                    </td>-->
                    <td class="text-center">
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                Action
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a id="btn{{ id }}" class="actualizar">{{'user.update' | trans}}</a></li>
                                <!--<li><a id="btn{{ id }}" class="configuracion" data-toggle="modal" data-target="#mEtiquetas">Configuracion</a></li>-->
                            </ul>
                        </div>
                    </td>
                    <!--<td>
                        <div class="btn-group" role="group" aria-label="...">

                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Action
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a class="parent" href="{{ path('proyectorepuesto_show', { 'id': entity.id }) }}">Show</a></li>
                                    <li><a class="parent" href="{{ path('proyectorepuesto_edit', { 'id': entity.id }) }}">Edit</a></li>
                                </ul>
                            </div>
                        </div>
                    </td>-->
                </tr>
              {% set id = id + 1 %}
            {% endfor %}
            </tbody>
        </table>


        <div id="pager" class="pager">
            <form>
                <img src="{{asset('tablesorter-master/addons/pager/icons/first.png')}}" class="first"/>
                <img src="{{asset('tablesorter-master/addons/pager/icons/prev.png')}}" class="prev"/>
                <span class="pagedisplay"></span>
                <img src="{{asset('tablesorter-master/addons/pager/icons/next.png')}}" class="next"/>
                <img src="{{asset('tablesorter-master/addons/pager/icons/last.png')}}" class="last"/>
                <select class="pagesize" title="Select page size">
                    <option  value="25">25</option>
                    <option selected="selected" value="50">50</option>
                    <option value="100">100</option>
                </select>
            </form>
        </div>

    </div>


    <div class="modal fade" id="parent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel">Windows Modal</h2>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="child" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel">Windows Modal</h2>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mProductos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><B>CREACIÓN DE REPUESTO</B></h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-12" style="float: none;">
                      <div class="row">
                          <div class="col-md-2"><label>Repuesto:</label></div>
                          <div class="col-md-8"><input type="text" class="form-control" id="repuesto" placeholder="Repuesto" /></div>
                      </div>
                        <div class="row">
                            <div class="col-md-2"><label>Tipo:</label></div>
                            <div class="col-md-8">
                                <select id="tipo" class="js-example-basic-single">
                                  <option></option>
                                  {% for tipo in tipos %}
                                      <option value="{{ tipo.id }}">{{ tipo.descripcion }}</option>
                                  {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>Categoria:</label></div>
                            <div class="col-md-8">
                                <select id="categorias" class="js-example-basic-single">
                                    <option></option>
                                    {% for categoria in categorias %}
                                        <option value="{{ categoria.id }}">{{ categoria.descripcion }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>Codigo:</label></div>
                            <div class="col-md-8"><input type="text" class="form-control" id="codigoRepuesto" placeholder="Codigo Repuesto" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>Costo:</label></div>
                            <div class="col-md-8"><input type="number" class="form-control" id="costo" placeholder="Costo Producto" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>Unidad de Medida:</label></div>
                            <div class="col-md-8"><input type="text" class="form-control" id="unidad" placeholder="Unidad de Medida" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>Stock:</label></div>
                            <div class="col-md-8"><input type="number" class="form-control" id="stock" placeholder="Stock" /></div>
                        </div>
                        <div class="row">
                            <div class="col-md-2"><label>Precio:</label></div>
                            <div class="col-md-8"><input type="number" class="form-control" id="precio" placeholder="Precio" /></div>
                            <div class="col-md-2">
                                <a id="addProducto" class="btn btn-success btn-sm">
                                    <span>{{'inbox.add' | trans}}</span>
                                </a>
                            </div>
                        </div>
                        <!--<div class="row">
                            <div class="col-md-2"><label>Region:</label></div>
                            <div class="col-md-8">
                                <select id="region" class="js-example-basic-single">
                                  <option></option>
                                  {% for region in regiones %}
                                      <option value="{{ region.idregion }}">{{ region.region }}</option>
                                  {% endfor %}
                                </select>
                            </div>
                        </div>-->
                        <div/>
                        <div class="row">
                            <div class="col-md-12" id="divProductos"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}