@extends('frontend.layouts.app')

@section('seo')
<title>Brands | eg APPAREL</title>
<meta property="og:locale"          content="en_US" />
<meta property="og:url"             content="" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Brands | eg APPAREL" />
<meta property="og:description"     content="" />
<meta property="og:site_name"       content="Brands | eg APPAREL" />
<meta property="og:image"           content="{{ asset('resources/web_thumb.jpg') }}" />
<meta property="og:thumbnail"           content="{{ asset('resources/web_thumb.jpg') }}" />
@endsection

@section('content')
{{-- BANNER --}}
<section>
  <div class="position-relative">
    <img src="{{ asset('resources/_Banners/Banner2.jpg') }}" class="img-fluid" alt="">
    <div class="container">
      <div class="position-absolute translate-middle top-50 section-banner">
        <h1 class="fw-bold banner-h1">Brands</h1>
        <h2 class="fs-4">Home / Brands</h2>
      </div>
    </div>
  </div>
</section>

{{-- CONTENT --}}
<section>
  <div class="container-fluid bg-alt py-5">
    <div class="container">
      <div class="row d-flex justify-content-center">
        <div class="col-12 col-md-7 col-xl-8">
          <div class="row g-5">

            @foreach ($brands as $items)
            <div class="col-12 col-md-4 col-xl-4 d-flex justify-content-center">
              <div class="brand-round bg-white px-4 align-middle d-flex align-items-center">
                <button type="button" class="p-0 border-0 bg-white" data-bs-toggle="modal" data-bs-target="#modal{{ $items->id }}">
                  <img src="{{ asset('uploads/brands/' . $items->logo)}}" class="img-fluid" alt="">
                </button>
              </div>
            </div>

            <div class="modal fade" id="modal{{ $items->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                <div class="modal-content">
                  <div class="modal-header border-bottom-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <h1 class="fw-bold mb-5 fs-1">{{ $items->title }}</h1>
                    <p>
                      {!! $items->description !!}
                    </p>
                  </div>
                  <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary bg-black" data-bs-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
            @endforeach

          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header border-bottom-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt aliquam porro 
          ratione perferendis, aut optio alias eum, quaerat pariatur rerum debitis iste error 
          minima totam quia facilis vero assumenda corporis.
        </p>
      </div>
      <div class="modal-footer border-top-0">
        <button type="button" class="btn btn-secondary bg-black" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@endsection

@section('js')
{{-- <script>
  Fancybox.bind("[data-fancybox]", {
      // Your custom options
  });

  var slider = tns({
      container: '.slider',
      loop: false,
      rewind: true,
      slideBy: 'page',
      items: 1,
      edgePadding: -1,
      gutter: 10,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true,
      speed: 1000,
      controlsText: [
          '<i class="fa-solid fa-angle-left fa-2xl text-white"></i>',
          '<i class="fa-solid fa-angle-right fa-2xl text-white"></i>'
      ],
      responsive: {
          0: {
              items: 1,
          },
          767: {
              items: 2,
          },
          991: {
              items: 4,
          }
      }
  });
</script> --}}
@endsection