@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-home fa-xs"></i> {{ __('Unidades') }}</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">Unidades</li>
        <li class="breadcrumb-item active">Editar Unidad</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-6">

                <!-- jquery validation -->
                <div class="card card-primary">

                  <div class="card-header">
                    <h3 class="card-title">Editando {{ $unidad->numero }}</h3>
                  </div>
                  <!-- /.card-header -->

                  <!-- form start -->
                    <form id="editForm" class="form-horizontal" action="{{ route('unidades.update', $unidad->id) }}" method="POST" novalidate="novalidate">
                    @method('PUT')
                    @csrf
                    <div class="card-body">

                        <div class="form-group row">
                          <label for="descripcion" class="col-sm-2 col-form-label">Bloque</label>
                          <div class="col-sm-5">
                            <select name="bloque_id" id="bloque_id" class="form-control" required>
                                <option value="0" selected>Seleccione el bloque</option>
                                @foreach($bloques as $bloque )
                                  <option value="{{ $bloque->id }}" @selected($bloque->id === $unidad->bloque_id)>{{ $bloque->descripcion }}</option>
                                @endforeach
                            </select>
                            <span id="bloque_id-error" class="error invalid-feedback"></span>
                          </div>
                          <div class="col-sm-1">
                            <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-bloque-add" title="Agregar nuevo bloque" style="cursor:pointer;">
                                <i class="fas fa-plus-square"></i>
                              </a>
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="numero" class="col-sm-2 col-form-label">Número</label>
                          <div class="col-sm-5">
                            <input type="number" name="numero" class="form-control @error('numero') is-invalid @enderror" id="numero" placeholder="Número de la unidad" value="{{ $unidad->numero }}">
                            <span id="numero-error" class="error invalid-feedback"></span>
                            @error('numero')
                                <span class="error invalid-feedback is-invalid" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                          </div>
                        </div>

                        <div class="form-group row">
                          <label for="cantidad_habitaciones" class="col-sm-2 col-form-label">Habitaciones</label>
                          <div class="col-sm-5">
                            <input type="number" name="cantidad_habitaciones" class="form-control @error('cantidad_habitaciones') is-invalid @enderror" id="cantidad_habitaciones" placeholder="Cantidad de habitaciones" value="{{ $unidad->cantidad_habitaciones }}">
                            <span id="cantidad_habitaciones-error" class="error invalid-feedback"></span>
                            @error('cantidad_habitaciones')
                                <span class="error invalid-feedback is-invalid" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                          </div>
                        </div>
                        
                        <div class="form-group row">
                            <label for="estado_id" class="col-sm-2 col-form-label">Estado</label>
                            <div class="col-sm-5">
                              <select name="estado_id" id="estado_id" class="form-control" required>                              
                                @foreach(App\Enums\UnidadEstadoEnum::cases() as $estado)
                                  <option value="{{ $estado->value }}"  @selected(($unidad->estado_id === $estado))>
                                    {{ $estado->label() }}
                                </option>
                                @endforeach
                              </select>                            
                              <span id="estado_id-error" class="error invalid-feedback"></span>
                            </div>
                          </div>

                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer text-right">
                      <a href="{{ route('unidades.index') }}" class="btn btn-default">Cancelar</a> &nbsp;
                      <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                    <!-- /.card-footer -->

                  </form>

                </div>
                <!-- /.card -->

            </div>
            <!-- /.col -->

            <div class="col-md-6">

              <div class="card">

                <div class="card-header p-2">
                  @if(!@empty(session('message')))
                      <hr class="hr hr-blurry" />
                      @switch(session('type'))
                          @case('OK')
                            <div class="alert alert-success alert-dismissible">
                              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                              <h5><i class="icon fas fa-check"></i> Listo!</h5>
                              {{ session('message') }}
                            </div>
                              @break
                          @default
                            <div class="alert alert-warning alert-dismissible">
                              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                              <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
                              {{ session('message') }}
                            </div>
                      @endswitch
                  @endif
                  <ul class="nav nav-pills">
                    {{-- <li class="nav-item"><a class="nav-link active" href="#nucleo" data-toggle="tab"><i class="nav-icon fas fa-users fa-xs"></i> &nbsp;Núcleo familiar</a></li> --}}
                    <li class="nav-item"><a class="nav-link" href="#servicios" data-toggle="tab"><i class="nav-icon fas fa-building fa-xs"></i> &nbsp;Servicios asociados</a></li>
                    {{-- <li class="nav-item"><a class="nav-link" href="#movimientos" data-toggle="tab"><i class="nav-icon fas fa-dollar-sign fa-xs"></i> &nbsp;Últimos movimientos</a></li> --}}
                    {{-- <li class="nav-item"><a class="nav-link" href="#unidades" data-toggle="tab">Unidades asociadas</a></li> --}}
                  </ul>
                </div><!-- /.card-header -->

                <div class="card-body">

                  <div class="tab-content">     

                    {{-- <div class="tab-pane" id="nucleo">

                      <a class="btn btn-warning btn-sm link-button float-right" data-toggle="modal" data-target="#modal-nucleo" data-form-action="{{ route('socio-nucleos.store') }}" title="Agregar integrante" style="cursor:pointer;"><i class="fas fa-users"></i> Agregar integrante</a><br><br>
                      
                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th class="text-center">ID</th>
                            <th>Apellidos</th>
                            <th>Nombres</th>
                            <th class="text-center">Documento</th>
                            <th class="text-center">Parentesco</th>
                            <th>Nota</th>
                            <th class="text-center">Acciones</th>
                          </tr>
                        </thead>
                        <tbody>
                          @if (empty($unidad->nucleo) || count($unidad->nucleo) == 0)
                                <tr>
                                  <td colspan="7" class="text-center">No existen integrantes del núcleo familiar registrados.</td>
                                </tr>
                            @endif
                            @foreach($unidad->nucleo as $integrante)
                            <tr>
                                <td class="text-center align-middle">{{ $integrante->id }}</td>
                                <td class="align-middle">{{ $integrante->apellidos }}</td>
                                <td class="align-middle">{{ $integrante->nombres }}</td>
                                <td class="text-center align-middle">{{ $integrante->documento_identidad }}</td>
                                <td class="text-center align-middle">{{ $integrante->parentesco_id->label() }}</td>
                                <td class="align-middle">{{ $integrante->nota }}</td>
                                <td class="text-center align-middle">
                                  <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-nucleo-editar" data-form-action="{{ route('socio-nucleos.update', $integrante->id) }}" data-socio-id="{{ $integrante->unidad_id }}" data-nombres="{{ $integrante->nombres }}" data-apellidos="{{ $integrante->apellidos }}" data-documento-identidad="{{ $integrante->documento_identidad }}" data-parentesco-id="{{ $integrante->parentesco_id }}" data-nota="{{ $integrante->nota }}" title="Editar Integrante">
                                    <i class="fas fa-edit"></i> Editar
                                  </a> 
                                  <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-nucleo-delete" data-form-action="{{ route('socio-nucleos.destroy', $integrante->id) }}" title="Eliminar Integrante">
                                    <i class="fas fa-trash-alt"></i> Borrar
                                  </a>   
                                </td>
                            </tr>                          
                            @endforeach
                        </tbody>
                      </table>

                    </div> --}}
                    <!-- /.tab-pane -->

                    <div class="tab-pane active" id="servicios">

                      <a class="btn btn-warning btn-sm link-button float-right" data-toggle="modal" data-target="#modal-servicio" data-form-action="{{ route('unidad-servicios.store') }}" title="Agregar servicio" style="cursor:pointer;"><i class="fas fa-building"></i> Agregar servicio</a><br><br>

                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th class="text-center">ID</th>
                            <th>Rubro</th>
                            <th>Identificador</th>
                            <th class="text-center">Estado</th>
                            <th class="text-center">Acciones</th>
                          </tr>
                        </thead>
                        <tbody>
                          @if (empty($unidad->servicios) || count($unidad->servicios) == 0)
                                <tr>
                                  <td colspan="5" class="text-center">No existen servicios registrados.</td>
                                </tr>
                            @endif
                            @foreach($unidad->servicios as $servicio)
                            <tr>
                                <td class="align-middle">{{ $servicio->id }}</td>
                                <td class="align-middle">{{ $servicio->concepto->descripcion }}</td>
                                <td class="align-middle">{{ $servicio->identificador }}</td>
                                <td class="text-center align-middle">
                                  @if ($servicio->estado_id == 1)
                                  Activo
                                  @else
                                  Inactivo
                                  @endif
                                </td>
                                <td class="text-center align-middle">
                                  <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-servicio-editar" data-form-action="{{ route('unidad-servicios.update', $servicio->id) }}" data-unidad-id="{{ $servicio->unidad_id }}" data-concepto-id="{{ $servicio->concepto_id }}" data-identificador="{{ $servicio->identificador }}" data-estado-id="{{ $servicio->estado_id }}" title="Editar Servicio">
                                    <i class="fas fa-edit"></i> Editar
                                  </a> 
                                  <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-servicio-delete" data-form-action="{{ route('unidad-servicios.destroy', $servicio->id) }}" title="Eliminar Servicio">
                                    <i class="fas fa-trash-alt"></i> Borrar
                                  </a>   
                                </td>
                            </tr>                          
                            @endforeach
                        </tbody>
                      </table>
                      
                    </div>
                    <!-- /.tab-pane -->

                    {{-- <div class="tab-pane" id="movimientos">

                      <table class="table table-hover text-nowrap">
                        <thead>
                          <tr>
                            <th class="text-center">ID</th>
                            <th>Descripción</th>
                            <th>Rubro</th>
                            <th>Importe</th>
                            <th class="text-center">Fecha venc.</th>
                            <th class="text-center">Estado</th>
                          </tr>
                        </thead>
                        <tbody>
                          @if (empty($unidad->movimientos) || count($unidad->movimientos) == 0)
                                <tr>
                                  <td colspan="6" class="text-center">No existen movimientos registrados.</td>
                                </tr>
                            @endif
                            @foreach($unidad->movimientos as $movimiento)
                            <tr>
                                <td class="text-center align-middle">{{ $movimiento->id }}</td>
                                <td class="align-middle">{{ $movimiento->descripcion }}</td>
                                <td class="align-middle">{{ $movimiento->concepto->descripcion }}</td>
                                <td class="text-right align-middle">{{ $movimiento->moneda->simbolo }} {{ number_format($movimiento->importe, 2) }}</td>
                                <td class="text-center align-middle">{{ $movimiento->fecha_vencimiento?->format('d/m/Y') }}</td>
                                <td class="text-center align-middle">{{ $movimiento->estado_id->label() }}</td>
                            </tr>                          
                            @endforeach
                        </tbody>
                      </table>
                      
                    </div> --}}
                    <!-- /.tab-pane -->

                    {{-- <div class="tab-pane" id="unidades">
                      
                    </div> --}}
                    <!-- /.tab-pane -->
                  </div>
                  <!-- /.tab-content -->
                </div><!-- /.card-body -->

              </div>
              <!-- /.card -->

            </div>
            <!-- /.col -->

        </div>
        <!-- /.row -->

    </div>
    <!-- /.container-fluid -->

  </section>
  <!-- /.content -->

  <div class="modal fade" id="modal-bloque-add" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <form id="bloque-add-form" action="" method="POST">
          @csrf
          @method('POST')

          <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin"></i>
          </div>
          <div class="modal-header">
            <h4 class="modal-title">Registrar nuevo Bloque</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body p-0">
                    <div class="form-group row">
                      <label for="bloque_descripcion" class="col-sm-2 col-form-label">Descripción</label>
                      <div class="col-sm-10">
                        <input type="text" name="bloque_descripcion" class="form-control" id="bloque_descripcion" placeholder="Identificador del bloque">
                        <span id="bloque_descripcion-error" class="error invalid-feedback"></span>
                      </div>
                    </div>
                    <input type="hidden" name="bloque_estado_id" id="bloque-estado_id" value="1">
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="submit" id="bloque-submit" class="btn btn-primary">Crear</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-servicio" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="servicio-form" action="" method="POST">
          @csrf
          @method('POST')
          <input type="hidden" name="unidad_id" value="{{ $unidad->id }}">
          <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin"></i>
          </div>
          <div class="modal-header">
            <h4 class="modal-title"><i class="fas fa-users"></i> Agregar servicio</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body p-0">                    
                    <div class="form-group row">
                      <label for="concepto_id" class="col-sm-3 col-form-label">Rubro</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el rubro" name="concepto_id" id="concepto-list-dropdown"></select>
                        <span id="concepto_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>                    
                    <div class="form-group row">
                      <label for="identificador" class="col-sm-3 col-form-label">Identificador</label>
                      <div class="col-sm-9">
                        <input type="text" name="identificador" class="form-control" id="identificador" placeholder="identificador">
                        <span id="identificador-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <div class="offset-sm-3 col-sm-9">
                        <div class="form-check custom-control custom-checkbox">
                            <input type="checkbox" name="estado_id" class="custom-control-input" id="estado_id">
                            <label class="custom-control-label" for="estado_id"> ¿Activo?</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>              
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-primary">Agregar</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-servicio-editar" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="editar-servicio-form" action="" method="POST">
          @method('PUT')
          @csrf
          <input type="hidden" name="unidad_id" id="unidad_id_ed">
          <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin"></i>
          </div>
          <div class="modal-header">
            <h4 class="modal-title"><i class="fas fa-users"></i> Editar integrante</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body p-0">                    
                    <div class="form-group row">
                      <label for="concepto_id" class="col-sm-3 col-form-label">Rubro</label>
                      <div class="col-sm-9">
                        <select class="select2bs4" data-placeholder="Seleccione el rubro" name="concepto_id" id="concepto-list-dropdown-ed"></select>
                        <span id="concepto_id-error" class="error invalid-feedback"></span>
                      </div>
                    </div>                    
                    <div class="form-group row">
                      <label for="identificador" class="col-sm-3 col-form-label">Identificador</label>
                      <div class="col-sm-9">
                        <input type="text" name="identificador" class="form-control" id="identificador_ed" placeholder="identificador">
                        <span id="identificador-error" class="error invalid-feedback"></span>
                      </div>
                    </div> 
                    <div class="form-group row">
                      <div class="offset-sm-3 col-sm-9">
                        <div class="form-check custom-control custom-checkbox">
                            <input type="checkbox" name="estado_id" class="custom-control-input" id="estado_id_ed">
                            <label class="custom-control-label" for="estado_id"> ¿Activo?</label>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
              </div>              
            </div>
          </div>
          <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-primary">Editar</button>
          </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div class="modal fade" id="modal-servicio-delete" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="delete-servicio-form" action="" method="POST">
          @csrf
          @method('DELETE')
        <div class="modal-header">
          <h4 class="modal-title">Eliminar</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>¿Confirmas eliminar el servicio?</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Eliminar</button>
        </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>  

@endsection

@section('custom-scripts')
  <!-- Select2 -->
  <script src="/plugins/select2/js/select2.full.min.js"></script>
  <!-- jquery-validation -->
  <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
  <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
  <script>  

  $('#modal-bloque-add').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    $('.overlay').css("display", "none");
  });

  $("#bloque-submit").click(function() {
    // createBloque();
  });

  $('#modal-servicio').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);    
    $('#servicio-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  });

  $('#modal-servicio-editar').on('show.bs.modal', function (event) {    

    var button = $(event.relatedTarget);    

    $('#editar-servicio-form').attr('action', button.data('form-action'));

    $('#unidad_id_ed').val(button.data('unidad-id')); 
    $('#concepto-list-dropdown-ed').val(button.data('concepto-id')).trigger('change');
    $('#identificador_ed').val(button.data('identificador')); 
    $('#estado_id_ed').prop('checked', button.data('estado-id') == "1" ? true : false);

    $('.overlay').css("display", "none");

  });

  $('#modal-servicio-delete').on('show.bs.modal', function (event) {    
    var button = $(event.relatedTarget);
    $('#delete-servicio-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  });     

  function createBloque() {

    var $dropdown = $("#bloque_id");
    var $descripcion = $('#bloque_descripcion').val();
    var $estado_id = $('#bloque_estado_id').val();
    // $dropdown.append($("<option />").val(0).text(''));

    var parameters = {descripcion:$descripcion, estado_id:$estado_id};

    $('.overlay').css("display", "flex");

    $.ajax({
        url:'{{route("bloques.storeJSON")}}',
        type: 'POST',
        headers:{
          "content-type" : "application/json",
          "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        data: JSON.stringify(parameters),
        success: function(response) {
          console.log(response);
          $dropdown.append($("<option />").val(response.id).text(response.descripcion));
          $dropdown.val(response.id);
          $('.overlay').css("display", "none");
          $('#modal-bloque-add').modal('hide');
          $('#bloque_descripcion').val('');
        },
        error: function(error) {
          $('.overlay').css("display", "none");
          console.error('Error fetching data:', error);
        }
    });            

  }

  function populateConceptoDropDown(dropdown, tipo)
  {

    dropdown.append($("<option />").val(0).text(''));

    var filtroTipo = typeof tipo !== "undefined" ? '/' + tipo : ''
    // var parameters = {apellidos:$apellidos};
    console.log(filtroTipo);

    $('.overlay').css("display", "flex");

    $.ajax({
        url:'/conceptos/obtener-por-tipo' + filtroTipo,
        type: 'GET',
        headers:{"content-type" : "application/json"},
        // data: JSON.stringify(parameters),
        success: function(response) {
        
          $.each(response, function(index, item) {
            dropdown.append($("<option />").val(item.id).text(item.descripcion));
          });

          $('.overlay').css("display", "none");
        },
        error: function(error) {
          $('.overlay').css("display", "none");
          console.error('Error fetching data:', error);
        }
    });            

  }

$(function () {
    
  //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })

    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg !== value;
    }, "Value must not equal arg.");
    
    $('#editForm').validate({
      rules: {
          bloque_id:{
              valueNotEquals: "0"
          },
        numero: {
          required: true,
        },
        cantidad_habitaciones: {
          required: true,
        },
        estado_id:{
              valueNotEquals: "0"
          },
      },
      messages: {
          bloque_id:{
              valueNotEquals: "Por favor indica el Bloque",
          },
          numero: {
              required: "Por favor ingresa el número de la Unidad",
          },
          cantidad_habitaciones: {
              required: "Por favor ingresa la cantidad de habitaciones de la Unidad",
          },
          bloque_id:{
              valueNotEquals: "Por favor indica el Estado",
          },
      },
      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.col-sm-10').append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      },
      submitHandler: function(form) {
          form.submit();
      }
    });

    $('#bloque-add-form').validate({
      rules: {
        bloque_descripcion: {
          required: true,
          maxlength: 10,
        },
      },
      messages: {
          bloque_descripcion: {
          required: "Por favor ingresa el identificador del bloque",
          maxlength: "El largo máximo es de 10",
        },
      },
      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.col-sm-10').append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      },
      submitHandler: function(form) {
          createBloque();
      }
    });

    populateConceptoDropDown($("#concepto-list-dropdown"), 2);
    populateConceptoDropDown($("#concepto-list-dropdown-ed"), 2);
    console.log("TODO: parametrizar tipo de Concepto");

});

  </script>
@endsection