@extends('layouts.site')

@section('title', 'Auctions Ontario - Home')

@section('content')
  <section class="ct_hero_slider">
    <div class="ct_banner_item">
      <div class="ct_banner_overlay"></div>

      <div class="container">
        <div class="ct_banner_content">
          <h1 style="max-width: 590px">
            Ontario's Trusted Marketplace for Auctions, Buying, Selling &
            Advertising
          </h1>

          <p class="ct_banner_text">
            Browse upcoming auctions, discover unique items, connect with
            auctioneers, find dealers and liquidators, and promote your
            business across Ontario.
          </p>

          <div class="ct_banner_btn_group">
            <a href="{{ route('auctions.index') }}" class="ct_btn_orange">
              Browse Auctions
            </a>

            <a href="{{ route('advertise') }}" class="ct_btn_outline">Post an Ad</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2 class="at-contact-title text-center mb-5">BROWSE BY CATEGORY</h2>

          <div class="position-relative">
            <div class="owl-carousel at-category-slider">
              @foreach ($categories as $index => $category)
                <div class="item">
                  <a href="{{ route('auctions.index') }}" class="at-category-card">
                    <div class="at-category-img">
                      <img src="{{ asset('assets/img/category_'.(($index % 6) + 1).'.png') }}" alt="{{ $category->name }}" />
                    </div>
                    <h6>{{ $category->name }}</h6>
                  </a>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="py-5" style="background-color: rgba(244, 244, 244, 1)">
    <div class="container">
      <h2 class="at-contact-title text-center mb-5">TRENDING AUCTIONS</h2>

      <div class="row">
        @if ($trendingAuctions->isNotEmpty())
          <div class="col-lg-6 mb-4 mb-lg-0">
            <a href="{{ route('auctions.show', $trendingAuctions->first()) }}" class="at-trending-feature d-block text-decoration-none">
              <div class="at-auction-logo">
                <img src="{{ asset($trendingAuctions->first()->cover_image ?? 'assets/img/trending_big.png') }}" alt="" />

                <div class="ct_overlay_auc">
                  <i class="fa-regular fa-calendar me-2"></i>
                  {{ optional($trendingAuctions->first()->starts_at)->format('D. M j') }}

                  <p>{{ $trendingAuctions->first()->location }}</p>
                </div>
              </div>

              <div class="pt-3">
                <h4 class="at-trending-title">{{ $trendingAuctions->first()->title }}</h4>

                <span class="at-trending-label">Auctioneer</span>

                <p class="at-trending-company">{{ $trendingAuctions->first()->auctioneer->name }}</p>
              </div>
            </a>
          </div>

          <div class="col-lg-6 mb-4 mb-lg-0">
            <div class="row">
              @foreach ($trendingAuctions->skip(1)->take(4) as $auction)
                <div class="col-6 mb-4">
                  <a href="{{ route('auctions.show', $auction) }}" class="at-trending-card d-block text-decoration-none">
                    <div class="at-auction-logo">
                      <img src="{{ asset($auction->cover_image ?? 'assets/img/trending_small_1.png') }}" alt="" />

                      <div class="ct_overlay_auc">
                        <i class="fa-regular fa-calendar me-2"></i>
                        {{ optional($auction->starts_at)->format('D. M j') }}

                        <p>{{ $auction->location }}</p>
                      </div>
                    </div>

                    <div class="pt-2">
                      <h5 class="at-auction-title">{{ $auction->title }}</h5>

                      <span class="at-trending-label">Auctioneer</span>

                      <p class="at-trending-company">{{ $auction->auctioneer->name }}</p>
                    </div>
                  </a>
                </div>
              @endforeach
            </div>
          </div>
        @else
          <p class="text-center">No auctions have been posted yet. Check back soon.</p>
        @endif
      </div>

      <div class="text-center mt-3">
        <a href="{{ route('auctions.index') }}" class="ct_orange_btn">VIEW ALL AUCTIONS</a>
      </div>
    </div>
  </section>
@endsection