@extends('layouts.site')

@section('content')
  <section class="portfolio-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <x-block keycode="WORK-HEADER"></x-block>
        </div> <!-- end .col-lg-12 -->
      </div> <!-- end .row -->
      <div class="row">
        <div class="col-lg-12">
          <div class="portfolio-filter">
            <button class="active" data-filter="all">{{ trans('fp.ALL') }}</button>
            @foreach($categories as $category)
              <button data-filter="{{ $category['filter'] }}">{{ $category['title'] }}</button>
            @endforeach
          </div>
          <div class="portfolio-projects">
            @forelse(collect($artworks)->sortBy('sort_order')->values() as $artwork)
              @php
                $subline = $artwork['subline'] ?? null;
                $subtitle = $artwork['subtitle'] ?? null;
                $thumbnail = $artwork['thumbnail'] ?? ['type' => 'image', 'url' => $artwork['image'] ?? null];
              @endphp
              <div class="project-card {{ implode(' ', $artwork['filters']) }}" data-order="{{ $artwork['sort_order'] ?? 0 }}" style="order: {{ $artwork['sort_order'] ?? 0 }};">
                <a href="{{ $artwork['url'] }}">
                <div class="project-img-wrapper">
                  @if(($thumbnail['type'] ?? 'image') === 'bunny' && !empty($thumbnail['embedUrl']))
                  <iframe class="project-slot__iframe" 
                          src="{!! $thumbnail['embedUrl'] !!}" 
                          frameborder="0" 
                          style="width: 100%; aspect-ratio: 587/673;pointer-events:none;" 
                          allow="autoplay; fullscreen; picture-in-picture" 
                          allowfullscreen="">
                  </iframe>
                  @else
                    <img src="{{ $thumbnail['url'] ?? $artwork['image'] }}" alt="{{ $artwork['title'] }}" loading="lazy">
                  @endif
                </div></a>
                <div class="portfolio-info">
                  <h4>{{ $artwork['title'] }}</h4>
                  @if($subline || $subtitle)
                    <span>{{ $subline ?: $subtitle }}</span>
                  @endif
                </div> <!-- end .portfolio-info -->
              </div> <!-- end .project-card -->
            @empty
              <div class="mt-4 text-center">
              <p class="text-center">{{ trans('fp.NO_PUBLISHED_PROJECTS_YET') }}</p>
              </div> <!-- end .mt-4 -->
            @endforelse
          </div> <!-- end .portfolio-projects -->
        </div> <!-- end .col-lg-12 -->
      </div> <!-- end .row -->
    </div> <!-- end .container -->
  </section> <!-- end .portfolio-area -->
@endsection

@push('scripts')
  <script>
    gsap.registerPlugin(ScrollTrigger);

    document.fonts.ready.then(() => {
      gsap.set('.portfolio-filter button', { opacity: 1 });

      gsap.fromTo(
        '.portfolio-filter button',
        {
          y: '-=50',
          opacity: 0,
          rotation: 'random(-30,30)'
        },
        {
          y: '0',
          opacity: 1,
          rotation: 0,
          duration: 0.8,
          ease: 'back.out(1.5)',
          stagger: 0.15,
          scrollTrigger: {
            trigger: '.portfolio-filter',
            start: 'top 80%',
            toggleActions: 'play none none none'
          }
        }
      );
    });
  </script>
@endpush

@push('scripts')
  <script>
    gsap.registerPlugin(ScrollTrigger);

    document.fonts.ready.then(() => {
      gsap.set('.portfolio-filter button', { opacity: 1 });

      gsap.fromTo(
        '.portfolio-filter button',
        {
          y: '-=50',
          opacity: 0,
          rotation: 'random(-30,30)'
        },
        {
          y: '0',
          opacity: 1,
          rotation: 0,
          duration: 0.8,
          ease: 'back.out(1.5)',
          stagger: 0.15,
          scrollTrigger: {
            trigger: '.portfolio-filter',
            start: 'top 80%',
            toggleActions: 'play none none none'
          }
        }
      );
    });
  </script>
@endpush