<div class="row">
                
  <div class="col-md-2 col-sm-12">
    <input type="hidden" id='filtro_carrera' name="filtro_carrera">
    <input type="search" id='filtro_carrera_nombre' name="filtro_carrera_nombre" list='carreras' class="form-control form-control-sm" placeholder="Carrera">
    <datalist id='carreras'>
      @foreach ($carreras as $c)
        <option data-id='{{ $c->id }}'>{{ $c->nombre }}</option>
      @endforeach
    </datalist>
  </div>

  <div class="col-md-2 col-sm-12">
    <div class="input-group input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text">#</span>
      </div>
      <input type="search" class="form-control" placeholder="No. control / No. Solicitud" id='filtro_numero' name="filtro_numero" />
    </div>
  </div>

  <div class="col-md-2 col-sm-12">
    <div class="input-group input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-search"></i></span>
      </div>
      <input type="search" class="form-control" placeholder="Nombre / Apellidos" id='filtro_nombre' name="filtro_nombre">
    </div>
  </div>

  <div class="col-md-2 col-sm-12">
    <button type="button" class="btn btn-block btn-light btn-sm" data-toggle="modal" data-target="#myModal" style="margin: 0px;">
      Servicios
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          
          <div class="modal-body">
            <h2 class="text-secondary">Servicios</h2>
            <select class="form-control form-control-sm" id='filtro_servicios' name='filtro_servicios' multiple size="20" style="color:#6c6c6c">
              @foreach($servicios as $s)
                <option value="{{ $s->id }}">{{ $s->nombre }} - ${{ number_format($s->costo,2) }}</option>
              @endforeach
            </select>
            <label class="text-secondary">Mantener presionado el botón del teclado ctrl + clic, para seleccionar varios servicios</label>
          </div>

          <div class="modal-footer" style="border-top: 0px; padding-top: 0px;">
            <button type="button" class="btn btn-dark" data-dismiss="modal">Aceptar</button>
          </div>
          
        </div>
      </div>
    </div>

            
  </div>

  <div class="col-md-2 col-sm-12">
    <select class="form-control form-control-sm" id='filtro_alumno' name='filtro_alumno'>
      <option value>.:Todos:.</option>
      <option value="alumno">Alumnos</option>
      <option value="aspirante">Aspirante</option>
    </select>
  </div>

  <div class="col-md-2 col-sm-12 text-center">
    <button class="btn btn-outline-info btn-sm" type="submit" data-toggle="tooltip" data-placement="left" title="Buscar"><i class="fa fa-search"></i></button>
    <button class="btn btn-outline-success btn-sm" type="button" data-toggle="tooltip" data-placement="left" title="Exportar" onclick="pagos_listado_filtro_exportar()"><i class="fa fa-file-excel-o"></i></button>
    <button class="btn btn-outline-light btn-sm" type="reset"><i class="fa fa-undo" data-toggle="tooltip" data-placement="left" title="Limpiar"></i></button>
  </div>

</div>

<div class="row mt-2">

  <div class="col-md-2 col-sm-12">
    <select class="form-control form-control-sm" id='filtro_estado' name='filtro_estado'>
      <option value>.:Estado:.</option>
      @foreach ($estados as $e)
        <option value="{{ $e->id }}">{{ $e->nombre }}</option>
      @endforeach
    </select>
  </div>

  <div class="col-md-2 col-sm-12">
    <select class="form-control form-control-sm" id='filtro_periodo' name='filtro_periodo'>
      <option value>.:Periodo:.</option>
      @foreach ($periodos as $p)
        <option value="{{ $p->id }}">{{ $p->nombre }}</option>
      @endforeach
    </select>
  </div>

  <div class="col-md-2 col-sm-12">
    <select class="form-control form-control-sm" id='filtro_pago' name='filtro_pago'>
      <option value>.:Forma de Pago:.</option>
      @foreach ($pagos as $p)
        <option value="{{ $p->id }}">{{ $p->nombre }}</option>
      @endforeach
    </select>
  </div>

  <div class="col-md-2 col-sm-12">
    <div class="input-group input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text">#</span>
      </div>
      <input type="search" class="form-control" placeholder="Referencia" id='filtro_referencia' name="filtro_referencia">
    </div>
  </div>

  <div class="col-md-2 col-sm-12">
    <div class="input-group input-group-sm">
      <input type="date" class="form-control" id='filtro_fecha_inicio' name="filtro_fecha_inicio">
      <div class="input-group-append">
        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
      </div>
    </div>
  </div>

  <div class="col-md-2 col-sm-12">
    <div class="input-group input-group-sm">
      <input type="date" class="form-control" id='filtro_fecha_termino' name='filtro_fecha_termino'>
      <div class="input-group-append">
        <span class="input-group-text"><i class="fa fa-calendar"></i></span>
      </div>
    </div>
  </div>

</div>