@extends('layouts.admin')
@section('contenido')
@include('admin.soportes.modals')
<section>
  <div class="row">
    <div class="col-md-9-center col-xs-6-center">
      <div class="row">
        <div class="col-sm-12">
          <div class="box-header with-border pull-left">
            <a href="#" class="btn btn-warning" data-toggle="collapse" data-target="#findOption" style="margin-bottom: 15px;">Filtros Avanzados</a>
          </div>
        </div>
      </div>
      <div class="box-body">
        <div class="collapse row" id="findOption" style="margin-bottom: 15px;">
          <div class="col-sm-12">
            <div class="col-xs-12">
              <label>Buscar soportes de los clientes con las siguientes características:</label>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <label>Dominio</label>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="www.ejemplo.com" onkeypress="return soloLetras(event)" name="web" id="web">
                <span class="input-group-addon" style="padding: 0px;"><a class="btn btn-primary" style="border-radius: 0px; border: 0px;" onclick="busqueda();"><i class="fas fa-search" style="color: #fff;"></i></a></span>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <label>Nombre Contacto</label>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Ingrese Nombre del Contacto" onkeypress="return soloLetras(event)" name="nomContacto" id="nomContacto">
                <span class="input-group-addon" style="padding: 0px;"><a class="btn btn-primary" style="border-radius: 0px; border: 0px;" onclick="busqueda();"><i class="fas fa-search" style="color: #fff;"></i></a></span>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <label>Apellido Contacto</label>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Ingrese Nombre del Contacto" onkeypress="return soloLetras(event)" name="apeContacto" id="apeContacto">
                <span class="input-group-addon" style="padding: 0px;"><a class="btn btn-primary" style="border-radius: 0px; border: 0px;" onclick="busqueda();"><i class="fas fa-search" style="color: #fff;"></i></a></span>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <label>Nombre comercial</label>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Ingrese Nombre Comercial" onkeypress="return soloLetras(event)" name="nombreComercial" id="nombreComercial">
                <span class="input-group-addon" style="padding: 0px;"><a class="btn btn-primary" style="border-radius: 0px; border: 0px;" onclick="busqueda();"><i class="fas fa-search" style="color: #fff;"></i></a></span>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <label>Status</label>
              <select class="form-control" onchange="busqueda()" name="status" id="status">
                <option value="">Seleccione...</option>
                <option value="1">Abierto</option>
                <option value="2">Cerrado</option>
              </select>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
              <label>Razón social</label>
              <div class="input-group">
                <input type="text" name="razonSocial" class="form-control" placeholder="Ingrese Razon Social" onkeypress="return soloLetras(event)">
                <span class="input-group-addon" style="padding: 0px;"><a class="btn btn-primary" style="border-radius: 0px; border: 0px;" onclick="busqueda();"><i class="fas fa-search" style="color: #fff;"></i></a></span>
              </div>
            </div>
          </div>
        </div>
        <div id="tabsop" class="table table-responsive scrollx">
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('script')
<script src="{{asset('js/functions.js')}}"></script>
<script src="{{asset('js/soportes.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function(){ busqueda(); });
</script>
@endsection