@extends('frontend.layouts.app')

@section('title')
Home | Grupo Alegria
@endsection

@section('seo')
<meta property="og:locale"          content="en_US" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Home | Grupo Alegria" />
<meta property="og:url"             content="{{ url('/') }}" />
<meta property="og:site_name"       content="Grupo Alegria" />
<meta property="og:image"           content="{{ asset('resources/web_thumbnail.jpg') }}" />
<meta property="og:thumbnail"       content="{{ asset('resources/web_thumbnail.jpg') }}" />
@endsection

@section('content')
  <div class="position-relative">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">

      <div class="carousel-inner">
        @foreach ($banners as $key => $items)
        <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
          @if (strpos($items->file_type, 'image') !== false)
          <img src="{{ asset('main-banners/' . $items->image)}}" class="img-fluid" alt="...">
          @elseif (strpos($items->file_type, 'video') !== false)
          <video class="media overflow-hidden" muted autoplay loop src="{{ asset('main-banners/' . $items->image) }}"></video>
          @endif
        </div>
        @endforeach

      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <div class="position-absolute top-0 w-100 h-100"></div>
  </div>
@endsection

@section('style')
  <style>
    .d-flex.flex-column{
        height: 100svh;
    }
  
    footer {
      margin-top: 20px;
    }

    .media {
      width: 100%;
      height: 60svh;
      object-fit: cover;
      object-position: center;
    }
    img{
      width: 100%;
      height: 60svh;
    }

    @media screen and (max-width: 991px) {
      .media {
        height: auto;
      }
    }
  </style>
@endsection