@extends('admin.template.layout')

@section("_title", 'Início')

@section('content')
  <div class="container-fluid py-4">
    <div class="row justify-content-center">
      <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
          <div class="card-body p-3">
            <div class="row">
              <div class="col-8">
                <div class="numbers">
                  <p class="text-sm mb-0 text-uppercase font-weight-bold">Produtos</p>
                  <h5 class="font-weight-bolder">
                    {{ isset($produtos_ativos) ? sizeof($produtos_ativos) : '0' }}
                  </h5>
                  <p class="mb-0 small">
                    {{-- <span class="text-success text-sm font-weight-bolder">+55%</span> --}}
                    apenas ativos
                  </p>
                </div>
              </div>
              <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                  <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
          <div class="card-body p-3">
            <div class="row">
              <div class="col-8">
                <div class="numbers">
                  <p class="text-sm mb-0 text-uppercase font-weight-bold">Visitantes hoje</p>
                  <h5 class="font-weight-bolder">
                    {{ sizeof($acessos['list'][0]) }}
                  </h5>
                  <p class="mb-0 small">
                    <span class="{{ $acessos['percent'] < 0 ? 'text-danger' : 'text-success' }} text-sm font-weight-bolder">{{ ($acessos['percent'] > 0 ? '+' : '') . $acessos['percent'] }}%</span>
                    comparado a ontem <small>({{ sizeof($acessos['list'][1]) }})</small>
                  </p>
                </div>
              </div>
              <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                  <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
        <div class="card">
          <div class="card-body p-3">
            <div class="row">
              <div class="col-8">
                <div class="numbers">
                  <p class="text-sm mb-0 text-uppercase font-weight-bold">Contatos hoje</p>
                  <h5 class="font-weight-bolder">
                    {{ sizeof($contatos['list'][0]) }}
                  </h5>
                  <p class="mb-0 small">
                    <span class="{{ $contatos['percent'] < 0 ? 'text-danger' : 'text-success' }} text-sm font-weight-bolder">{{ ($contatos['percent'] > 0 ? '+' : '') . $contatos['percent'] }}%</span>
                    comparado a ontem <small>({{ sizeof($contatos['list'][1]) }})</small>
                  </p>
                </div>
              </div>
              <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                  <i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {{-- <div class="col-xl-3 col-sm-6">
        <div class="card">
          <div class="card-body p-3">
            <div class="row">
              <div class="col-8">
                <div class="numbers">
                  <p class="text-sm mb-0 text-uppercase font-weight-bold">Sales</p>
                  <h5 class="font-weight-bolder">
                    $103,430
                  </h5>
                  <p class="mb-0">
                    <span class="text-success text-sm font-weight-bolder">+5%</span> than last month
                  </p>
                </div>
              </div>
              <div class="col-4 text-end">
                <div class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                  <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> --}}
    </div>
    <div class="row mt-4">
      <div class="col-lg-7 mb-lg-0 mb-4">
        <div class="card z-index-2 h-100">
          <div class="card-header pb-0 pt-3 bg-transparent">
            <h6 class="">Gráfico de acessos</h6>
            <p class="text-sm mb-0">
              <i class="fas fa-clock text-success"></i>
              Última atualização às <span class="font-weight-bold">{{ date('H:i:s') }}</span> 
            </p>
          </div>
          <div class="card-body p-3">
            <div class="chart">
              <canvas id="chart-line" class="chart-canvas" height="300"></canvas>
            </div>
          </div>
        </div>
      </div>
      @if (isset($noticias) && is_array($noticias) && sizeof($noticias) > 0)
        <div class="col-lg-5">
          <div class="card card-carousel overflow-hidden h-100 p-0">
            <div id="noticiasDash" class="carousel slide h-100" data-bs-ride="carousel">
              <div class="carousel-inner border-radius-lg h-100">
                @foreach ($noticias['items'] as $count => $noticia)
                  <a href="{{ $noticia['link'] }}" target="_blank" class="carousel-item h-100 {{ $count == 0 ? 'active' : '' }}" style="background-image: url('{{ $noticia['imagem'] }}'); background-size: cover;">
                    <div class="carousel-caption d-none d-md-block bottom-0 text-start start-0 ms-5">
                      <div href="#" class="icon icon-shape icon-sm bg-white text-center border-radius-md mb-3">
                        <i class="fas fa-link text-dark opacity-10"></i>
                      </div>
                      <h5 class="text-white mb-1">{{ $noticia['titulo'] }}</h5>
                      <p>{{ $noticia['conteudo'] }}</p>
                    </div>
                  </a>
                @endforeach
              </div>
              <button class="carousel-control-prev w-5 me-3" type="button" data-bs-target="#noticiasDash" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next w-5 me-3" type="button" data-bs-target="#noticiasDash" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
            </div>
          </div>
        </div>
      @endif
    </div>
    <div class="row mt-4">
      <div class="col-lg-7 mb-lg-0 mb-4">
        <div class="card ">
          <div class="card-header pb-0 p-3">
            <div class="d-flex justify-content-between">
              <h6 class="mb-2">Produtos mais visualizados</h6>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table native align-items-center ">
              <tbody>
                @if (isset($produtos) && is_array($produtos) && sizeof($produtos) > 0)
                  @foreach ($produtos as $count => $produto)
                    <tr>
                      <td class="w-30">
                        <h6 class="text-sm mb-0 ms-4">{{ $produto['nome'] }}</h6>
                      </td>
                      <td>
                        <div class="text-center">
                          <p class="text-xs font-weight-bold mb-0">{{ $produto['marca'] }}</p>
                        </div>
                      </td>
                      <td>
                        <div class="text-center">
                          <p class="text-xs font-weight-bold mb-0">Visualizações:</p>
                          <h6 class="text-sm mb-0">{{ $produto['views'] }}</h6>
                        </div>
                      </td>
                      <td class="align-middle text-sm">
                        <div class="col text-center">
                          <p class="text-xs font-weight-bold mb-0">Última visualização:</p>
                          <h6 class="text-sm mb-0">{{ Helper::format_datetime($produto['updated_at']) }}</h6>
                        </div>
                      </td>
                    </tr>

                    @if ($count == 4)
                      @break
                    @endif
                  @endforeach
                @endif
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="card">
          <div class="card-header pb-0 p-3">
            <h6 class="mb-0">Categorias</h6>
          </div>
          <div class="card-body p-3">
            <ul class="list-group">
              @if (isset($categorias) && is_array($categorias) && sizeof($categorias) > 0)
                @foreach ($categorias as $count => $categoria)
                  <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
                    <div class="d-flex align-items-center">
                      <div class="icon icon-shape icon-sm me-3 bg-gradient-dark shadow d-flex justify-content-center align-items-center small">
                        <span class="text-white">{{ substr($categoria['nome'], 0, 1) }}</span>
                      </div>
                      <div class="d-flex flex-column">
                        <h6 class="mb-1 text-dark text-sm">{{ $categoria['nome'] }}</h6>
                        <span class="text-xs">{{ $categoria['count'] }} produtos</span>
                      </div>
                    </div>
                    {{-- <div class="d-flex">
                      <button class="btn btn-link btn-icon-only btn-rounded btn-sm text-dark icon-move-right my-auto"><i class="ni ni-bold-right" aria-hidden="true"></i></button>
                    </div> --}}
                  </li>
                  @if ($count == 4)
                    @break
                  @endif
                @endforeach
              @endif
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('_foot')
  <script>
    var ctx1 = document.getElementById("chart-line").getContext("2d");

    var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);

    gradientStroke1.addColorStop(1, 'rgba(94, 114, 228, 0.2)');
    gradientStroke1.addColorStop(0.2, 'rgba(94, 114, 228, 0.0)');
    gradientStroke1.addColorStop(0, 'rgba(94, 114, 228, 0)');
    new Chart(ctx1, {
      type: "line",
      data: {
        labels: JSON.parse(`@php echo json_encode($grafico['datas']) @endphp`),
        datasets: [{
          label: "Acessos",
          tension: 0.4,
          borderWidth: 0,
          pointRadius: 0,
          borderColor: "#5e72e4",
          backgroundColor: gradientStroke1,
          borderWidth: 3,
          fill: true,
          data: JSON.parse(`@php echo json_encode($grafico['acessos']) @endphp`),
          maxBarThickness: 6

        }],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        interaction: {
          intersect: false,
          mode: 'index',
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
              display: true,
              drawOnChartArea: true,
              drawTicks: false,
              borderDash: [5, 5]
            },
            ticks: {
              display: true,
              padding: 10,
              color: '#fbfbfb',
              font: {
                size: 11,
                family: "Open Sans",
                style: 'normal',
                lineHeight: 2
              },
            }
          },
          x: {
            grid: {
              drawBorder: false,
              display: false,
              drawOnChartArea: false,
              drawTicks: false,
              borderDash: [5, 5]
            },
            ticks: {
              display: true,
              color: '#ccc',
              padding: 20,
              font: {
                size: 11,
                family: "Open Sans",
                style: 'normal',
                lineHeight: 2
              },
            }
          },
        },
      },
    });
  </script>
@endsection