@inject('estatusCadian', 'App\Http\Controllers\EstatusCadianController')
<div class="table-responsive">
  <table class="table align-items-center table-flush">
    <thead class="thead-light">
      <tr class="d-flex">
        <th scope="col" class="col-2">Nombre</th>
        <th scope="col" class="col-2">Correo</th>
        <th scope="col" class="col-2">Fecha registro</th>
        <th scope="col" class="col-1">Ciudad</th>
        <th scope="col" class="col-2">Verificación pagada</th>
        <th scope="col" class="col-1">Estatus</th>
        <th scope="col" class="col-1">Acciones</th>
      </tr>
    </thead>
    @if (count($data) > 0)
    <tbody id="load">
      @foreach($data as $row)
      <tr class="d-flex">
        <th scope="row" class="col-2">
          <span class="mb-0 text-sm">{{ $row->nombre }}</span>
        </th>
        <td scope="row" class="col-2">
          <span class="mb-0 text-sm">{{ $row->correo }}</span>
        </td>
        <td scope="row " class="col-2">
          <span class="mb-0 text-sm">{{ $row->fecha_crea }}</span>
        </td>
        <td scope="row" class="col-1" style="padding-right: 0;">
          Ciudad
        </td>
        <td scope="row" class="col-2">
          {!! $estatusCadian->showVerificacion($row->verificacion_pagada) !!}
        </td>
        <td scope="row" class="col-1" style="    padding-right: 0;">
          {!! $estatusCadian->showEstatus($row->estatus) !!}
          @if ($row->estatus == 2 && $row->key_tipo_cadian == 1)
          (Verificar)
          @endif
        </td>
        <td class="text-left" scope="row" class="col-1">
          @if ($row->estatus == 1 || $row->estatus == 2)
          <div class="dropdown">
            <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-ellipsis-v"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
              @if ($row->estatus == 2)
              @if ($row->key_tipo_cadian == 1)
              <a class="dropdown-item doctos" data-toggle="modal" data-target="#modal-default" data-id="{{$row->id_cadian}}" data-accion="verificar" href="#">Verificar</a>
              @else
              <a class="dropdown-item doctos" data-toggle="modal" data-target="#modal-default" data-id="{{$row->id_cadian}}" data-accion="revisar" href="#">Revisar</a>
              @endif
              @elseif ($row->estatus == 1)
              <a class="dropdown-item suspender" data-id="{{$row->id_cadian}}" data-estatus="3" href="#">Suspender</a>
              <a class="dropdown-item cancelar" data-id="{{$row->id_cadian}}" data-estatus="4" href="#">Cancelar</a>
              @endif
            </div>
          </div>
          @elseif ($row->estatus == 5)
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a id="send_verify_email" data-email="{{ $row->correo }}" class="dropdown-item" style="cursor: pointer;">Reenviar correo de registro</a>
              </div>
            </div>
          @else
            ...
          @endif
        </td>
      </tr>
      @endforeach
    </tbody>
    @endif
  </table>

  @include('ajax.paginacion')
</div>

<script>
  function ejecutarPeticionAjaxBuscar(page) {

    let busqueda = $('#cadian_buscar').val();
    estatus = $('#estatus_filter').val();

    let formData = new FormData();
    formData.append('busqueda', busqueda);
    formData.append('estatus', estatus);
    formData.append('page', page);
    $.ajax({
      url: "estatus-cadians/buscar",
      data: formData,
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      method: "POST",
      processData: false,
      contentType: false,
      success: function(data) {

        $('#table_data').html(data);


      }
    });
    //});
  }
</script>