@extends('layouts.main')

@section('title', 'Home')

@section('content')

<div class="section-inicial">
   <div class="destaques">
      <table class="table-destaque">
         <thead class="title-table">
            <tr>
               <th>Produtos Mais Vendidos</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Produto 1</td>
            </tr>
            <tr>
               <td>Produto 2</td>
            </tr>
            <tr>
               <td>Produto 3</td>
            </tr>
            <tr>
               <td>Produto 4</td>
            </tr>
            <tr>
               <td>Produto 5</td>
            </tr>
            <tr>
               <td>Produto 6</td>
            </tr>
            <tr>
               <td>Produto 7</td>
            </tr>
            <tr>
               <td>Produto 8</td>
            </tr>
            <tr>
               <td>Produto 9</td>
            </tr>
            <tr>
               <td>Produto 10</td>
            </tr>
         </tbody>
      </table>
   </div>
   <div class="slides d-none d-md-block">
  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <a href="#">
          <img src="{{ asset('img/1.webp') }}" alt="Imagem 1" class="d-block w-100">
        </a>
      </div>
      <div class="carousel-item">
        <a href="#">
          <img src="{{ asset('img/2.webp') }}" alt="Imagem 2" class="d-block w-100">
        </a>
      </div>
      <div class="carousel-item">
        <a href="#">
          <img src="{{ asset('img/3.webp') }}" alt="Imagem 3" class="d-block w-100">
        </a>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Anterior</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Próximo</span>
    </button>
  </div>
</div>

</div>
</div>

<div class="section-produtos">

<div class="categorias-produtos">

<div class="container">
  <table class="table" id="table-all-produtos">
    <thead class="thead-table-todos-os-produtos">
      <tr>
        <th class="thead-table-todos-os-produtos" scope="col">Todos os Produtos</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a class="accordion-toggle" data-bs-toggle="collapse" href="#carimbos" role="button" aria-expanded="false" aria-controls="carimbos">Carimbos <ion-icon name="add-circle-outline"></ion-icon> <i class="bi bi-plus-square"></i></a>
          <div class="accordion-collapse collapse" id="carimbos">
            <ul>
              <li>Carimbo 1</li>
              <li>Carimbo 2</li>
              <li>Carimbo 3</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <a class="accordion-toggle" data-bs-toggle="collapse" href="#canetas" role="button" aria-expanded="false" aria-controls="canetas">Canetas <ion-icon name="add-circle-outline"></ion-icon><i class="bi bi-plus-square"></i></a>
          <div class="accordion-collapse collapse" id="canetas">
            <ul>
              <li>Caneta 1</li>
              <li>Caneta 2</li>
              <li>Caneta 3</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <a class="accordion-toggle" data-bs-toggle="collapse" href="#papeis" role="button" aria-expanded="false" aria-controls="papeis">Papéis <ion-icon name="add-circle-outline"></ion-icon><i class="bi bi-plus-square"></i></a>
          <div class="accordion-collapse collapse" id="papeis">
            <ul>
              <li>Papel 1</li>
              <li>Papel 2</li>
              <li>Papel 3</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <a class="accordion-toggle" data-bs-toggle="collapse" href="#cartões" role="button" aria-expanded="false" aria-controls="cartões">Cartões <ion-icon name="add-circle-outline"></ion-icon><i class="bi bi-plus-square"></i></a>
          <div class="accordion-collapse collapse" id="cartões">
            <ul>
              <li>Cartões 1</li>
              <li>Cartões 2</li>
              <li>Cartões 3</li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>



</div>


<div class="row">
  <div class="col-md-2">
  <div class="card">
  <img src="/img/imagem-do-produto1.png" class="card-img-top" alt="Imagem do Produto">
  <div class="card-body">
    <h5 class="card-title">Nome do Produto</h5>
    <p class="card-text">Descrição do Produto</p>
    <a href="#" class="btn btn-primary">Comprar</a>
  </div>
</div>

  </div>
  <div class="col-md-2">
  <div class="card">
  <img src="/img/imagem-do-produto2.png" class="card-img-top" alt="Imagem do Produto">
  <div class="card-body">
    <h5 class="card-title">Nome do Produto</h5>
    <p class="card-text">Descrição do Produto</p>
    <a href="#" class="btn btn-primary">Comprar</a>
  </div>
</div>

  </div>
  <div class="col-md-2">
  <div class="card">
  <img src="/img/imagem-do-produto3.png" class="card-img-top" alt="Imagem do Produto">
  <div class="card-body">
    <h5 class="card-title">Nome do Produto</h5>
    <p class="card-text">Descrição do Produto</p>
    <a href="#" class="btn btn-primary">Comprar</a>
  </div>
</div>

  </div>
  <div class="col-md-2">
  <div class="card">
  <img src="/img/imagem-do-produto4.png" class="card-img-top" alt="Imagem do Produto">
  <div class="card-body">
    <h5 class="card-title">Nome do Produto</h5>
    <p class="card-text">Descrição do Produto</p>
    <a href="#" class="btn btn-primary">Comprar</a>
  </div>
</div>

  </div>
  <div class="col-md-2">
  <div class="card">
  <img src="/img/imagem-do-produto5.png" class="card-img-top" alt="Imagem do Produto">
  <div class="card-body">
    <h5 class="card-title">Nome do Produto</h5>
    <p class="card-text">Descrição do Produto</p>
    <a href="#" class="btn btn-primary">Comprar</a>
  </div>
</div>

  </div>
  <div class="col-md-2">
  <div class="card">
  <img src="/img/imagem-do-produto6.png" class="card-img-top" alt="Imagem do Produto">
  <div class="card-body">
    <h5 class="card-title">Nome do Produto</h5>
    <p class="card-text">Descrição do Produto</p>
    <a href="#" class="btn btn-primary">Comprar</a>
  </div>
</div>

  </div>
</div>


</div>


</div>

@endsection