@foreach ($rows as $row)
<div class="row p-4">
    <div class="col">
        <div class="card quik-metrics bg-white m-auto shadow-sm border p-3 h-100 w-100">
            <span class="help-icon" style="position:absolute;top:5px;right:5px;font-size:12px" data-bs-toggle="modal" data-bs-target="#help-impresions"><i class="fa-solid fa-question"></i></span>
            <div class="icon mx-auto"><i class="fa-solid fa-eye"></i></div>
            <div class="text-center">
                <p class="m-0 p-0">Impressões</p>
                <div class="fs-5">{{$row->impressions}}</div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="card quik-metrics bg-white m-auto shadow-sm border p-3 h-100 w-100">
            <span class="help-icon" style="position:absolute;top:5px;right:5px;font-size:12px" data-bs-toggle="modal" data-bs-target="#help-clicks"><i class="fa-solid fa-question"></i></span>
            <div class="icon mx-auto"><i class="fa-solid fa-arrow-pointer"></i></div>
            <div class="text-center">
                <p class="m-0 p-0">Cliques</p>
                <div class="fs-5">{{$row->clicks}}</div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="card quik-metrics bg-white m-auto shadow-sm border p-3 h-100 w-100">
            <span class="help-icon" style="position:absolute;top:5px;right:5px;font-size:12px" data-bs-toggle="modal" data-bs-target="#help-ctr"><i class="fa-solid fa-question"></i></span>
            <div class="icon mx-auto"><i class="fa-solid fa-arrow-pointer"></i>/<i class="fa-solid fa-eye"></i></div>
            <div class="text-center">
                <p class="m-0 p-0">CTR</p>
                <div class="fs-5">{{$row->ctr}}</div>
            </div>
        </div>
    </div>

    <div class="col">
      <div class="card quik-metrics bg-white m-auto shadow-sm border p-3 h-100 w-100">
            <span class="help-icon" style="position:absolute;top:5px;right:5px;font-size:12px" data-bs-toggle="modal" data-bs-target="#help-position"><i class="fa-solid fa-question"></i></span>
            <div class="icon mx-auto"><i class="fa-solid fa-magnifying-glass-plus"></i></div>
            <div class="text-center">
                <p class="m-0 p-0">Posição</p>
                <div class="fs-5">{{$row->position}}</div>
            </div>
        </div>
    </div>
</div>
@endforeach

<div class="modal fade" id="help-impresions" tabindex="-1" aria-labelledby="help-impresions" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="card-title m-0">Impressões</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Indica a frequência com que alguém viu um link para seu site no Google. Dependendo do tipo de resultado, talvez seja necessário rolar a tela ou expandir o link para exibição.</p>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="help-clicks" tabindex="-1" aria-labelledby="help-clicks" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="card-title m-0">Cliques</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Indica quantas vezes alguém clicou em um link para seu site no Google.</p>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="help-ctr" tabindex="-1" aria-labelledby="help-ctr" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="card-title m-0">CTR - Taxa de cliques </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><strong>Taxa de cliques CTR:</strong> é o cálculo de (cliques ÷ impressões).</p>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="help-position" tabindex="-1" aria-labelledby="help-position" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><strong>Posição (média):</strong> é a classificação relativa da posição do seu link no Google, em que a posição 1 é a mais alta, a 2 é a próxima e assim por diante. Exibida somente para resultados da Pesquisa Google.</p>
      </div>
    </div>
  </div>
</div>
<style>
    .help-icon {
        cursor: pointer;
    }
</style>