@extends('complementos.dashboard')
@section('contenido')

<div class="container">
    <div class="row">
        <div class="col-md-12" style="color:#000;">
            <h3>Lista de clientes</h3><br>

            <div class="row">
              <div class="col-md-12">
                  <input type="text" id="inputBcliente" onkeyup="myFunctioncliente()" class="form-control buscadores" placeholder="Buscar por cliente..">
              </div>
            </div>

            <div class="table-responsive mt-3">
                <table class="table table-bordered mt-4" id="tablecliente">
                    <tr><th colspan="3" class="text-center titulo-tabla-color">Clientes</th></tr>           
                    <tr class="bg-priamry">
                        <th class="columna">Editar</th>
                        <th class="columna">RFC</th>
                        <th class="columna">Cliente</th>  
                    </tr>
                    @foreach ($clientes as $c)
                        <tr>
                            <td><button data-toggle="modal" data-target="#editCliente{{$c->RFC}}" class="btn btn-primary btn-sm"><i class="icon-pencil"></i></button></td>
                            <td>{{$c->RFC}}</td>
                            <td>{{$c->nombre}}</td>
                        </tr>   
                    @endforeach
                </table>
            </div>
        </div>
    </div>
</div>
@foreach ($clientes as $c)
    @include('clientes.modales.editar.mdl_cliente')
@endforeach
@endsection

<script>
    function myFunctioncliente() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("inputBcliente");
      filter = input.value.toUpperCase();
      table = document.getElementById("tablecliente");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
      }
    }
</script>