@inject('estatusCliente', 'App\Http\Controllers\ReporteBalancePendienteController')
<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-1 pr-0 pl-2" style=" font-size: 0.6rem;">Referencia</th>
        <th scope="col" class="col-1 pr-0 pl-3">Monto Reserva</th>
        <th scope="col" class="col-1 pl-3 pr-0">Monto liberar</th>
        <th scope="col" class="col-1 pr-0" style=" padding-left: 1rem;">Monto comisión</th>
        <th scope="col" class="col-1 pr-0" style="padding-left: 1rem;">Opinión</th>
        <th scope="col" class="col-1 pr-0 pl-3">Estatus</th>
        <th scope="col" class="col-2">Cliente</th>
        <th scope="col" class="col-2">Cadian</th>
        <th scope="col" class="col-1 px-0 " style=" font-size: 0.6rem;">Reservación</th>
        <th scope="col" class="col-1 pr-0 pl-3" style=" font-size: 0.6rem;">Acciones</th>
      </tr>
    </thead>
    @if (count($balances) > 0)
    <tbody id="load">
      @foreach($balances as $row)
      <tr class="d-flex">
        <th scope="row" class="col-1">
          <span class="mb-0 text-sm">{{ $row->key_referencia }}</span>
        </th>
        <td scope="row" class="col-1 pr-0 pl-3">
          <span class="mb-0 text-sm">{{ number_format($row->monto, 2) }}</span>
        </td>

        @php
        $monto_a_pagar = $row['monto'] / ( 1 + ( $row['porcentaje_comision'] / 100 ));
        $comision_a_pagar = $row['monto'] - $monto_a_pagar;
        @endphp

        <td scope="row" class="col-1 pr-0 pl-3">
          <span class="mb-0 text-sm">{{ number_format($monto_a_pagar, 2) }}</span>
        </td>
        <td class="col-1" style="padding-right:0;">
          <span class="mb-0 text-sm">{{ number_format($comision_a_pagar,2) }}</span>
        </td>
        <td class="col-1 text-center pr-0 pl-1" style=" padding-left: 0.3rem;">
          <span class="mb-0 text-sm">
            @if ($row->comentario == 1)
            <i class="ni ni-check-bold"></i>
            @elseif ($row->comentario == 0)
            Sin comentario
            @endif
          </span>
        </td>
        <td class="col-1 pr-0 pl-3">
          <span class=" mb-0 text-sm">
            @if ($row->estatus == 1)
            Sin liberar
            @elseif ($row->estatus == 2)
            Liberado
            @elseif ($row->estatus == 3)
            Cancelado
            @endif
          </span>
        </td>
        <td class="col-2">
          <span class="mb-0 text-sm">{{ $row->nombre_cliente .' '. $row->apellidos_cliente }}</span>
        </td>
        <td class="col-2">
          <span class="mb-0 text-sm">{{ $row->nombre_cadian .' '. $row->apellidos_cadian }}</span>
        </td>
        <td class="col-1 px-0">
          <span class="mb-0 " style="    font-size: 0.8rem;">{{ substr($row->fecha_reserva_inicio,0,10) }} - {{ substr($row->fecha_reserva_final,0,10) }}</span>
        </td>

        <td class="text-center col-1">
          @if ($row->estatus == 1)
          <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 class="dropdown-item liberar" data-toggle="modal" data-target="#modal-default" data-id="{{$row->id}}" data-key="{{$row->key_referencia}}" data-accion="liberar_pago" data-estatus="2" href="#">Liberar</a>
              <a class="dropdown-item cancelar" data-toggle="modal" data-target="#modal-default" data-id="{{$row->id}}" data-key="{{$row->key_referencia}}" data-accion="cancelar_pago" data-estatus="3" href="#">Cancelar</a>
            </div>
          </div>
          @endif
        </td>
      </tr>
      @endforeach
    </tbody>
    @endif
  </table>
  @include('ajax.paginacion')
</div>

<script>
  function ejecutarPeticionAjaxBuscar(page) {
    busqueda = $('#busqueda_filtro').val();
    estatus = $('#estatus_filtro').val();

    let formData = new FormData();
    formData.append('busqueda_filtro', busqueda);
    formData.append('estatus_filtro', estatus);
    formData.append('page', page);
    $.ajax({
      url: "reporte-balances-pendientes/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>