@extends('frontend.theme1.index', ['title' => 'Program Latihan - Fitness Plus Indonesia', 'count' => $count ?? 0])
@section('css')
    
@endsection
@section('js')

@endsection
@section('content')
    <div class="tentang-page-root">
        <section class="tentang-location" style="background: linear-gradient(180deg, rgba(35, 30, 26, 0.14) 0%, rgba(0, 0, 0, 0.88) 180%),
    url('/themes1/images/hero/latihan.png') no-repeat center center/cover;">
            <div class="container tentang-location-inner">
                <h1 class="hero-title-profile" data-text="Program&#10;Latihan">Program<br>Latihan</h1>
                <a class="tentang-scroll-indicator tentang-scroll-indicator--hint" href="#latihan" aria-label="Scroll for more">
                    <span class="tentang-scroll-indicator-badge" aria-hidden="true">&#8595;</span>
                    <span class="tentang-scroll-indicator-text">Scroll for more</span>
                </a>
            </div>
        </section>

        <section id="latihan" class="latihan-frame-section" aria-label="Galeri Program Latihan">
            <div class="container">
                <h3 class="tentang-section-title">Program Latihan</h3>
                
                <div class="latihan-frame-slider" role="region" aria-label="Slider gambar kelas">
                    <div class="latihan-frame-track">
                        <div class="latihan-frame-group">
                            @for ($frame = 1; $frame <= 13; $frame++)
                                <figure class="latihan-frame-item">
                                    <img src="{{ asset('themes1/images/class/frame' . $frame . '.png') }}"
                                        alt="Program latihan frame {{ $frame }}" loading="lazy" decoding="async">
                                </figure>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="latihan-class-list" aria-label="Daftar kategori kelas">
            <div class="container">
                @php
                    $classItems = collect($class ?? [])
                        ->filter(function ($item) {
                            return !empty(data_get($item, 'name')) || !empty(data_get($item, 'icon_url')) || !empty(data_get($item, 'icon_image'));
                        })
                        ->values();
                @endphp

                @if ($classItems->isNotEmpty())
                    <div class="latihan-class-marquee">
                        @foreach (['is-rtl', 'is-ltr'] as $laneDirection)
                            <div class="latihan-class-lane {{ $laneDirection }}" @if ($loop->last) aria-hidden="true" @endif>
                                <div class="latihan-class-track">
                                    @for ($copy = 0; $copy < 2; $copy++)
                                        <div class="latihan-class-set">
                                            @foreach ($classItems as $item)
                                                @php
                                                    $className = data_get($item, 'name', 'Program Latihan');
                                                    $classIcon = data_get($item, 'icon_url') ?: data_get($item, 'icon_image');
                                                @endphp
                                                <article class="latihan-class-card">
                                                    <figure class="latihan-class-card-image-wrap">
                                                        <img class="latihan-class-card-image"
                                                            src="{{ $classIcon ?: asset('themes1/images/class/latihan.png') }}"
                                                            alt="{{ $className }}" loading="lazy" decoding="async">
                                                    </figure>
                                                    <h4 class="latihan-class-card-title">{{ $className }}</h4>
                                                </article>
                                            @endforeach
                                        </div>
                                    @endfor
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="latihan-class-fallback">
                        <article class="latihan-class-card">
                            <figure class="latihan-class-card-image-wrap">
                                <img class="latihan-class-card-image"
                                    src="{{ asset('themes1/images/class/latihan.png') }}"
                                    alt="Program Latihan" loading="lazy" decoding="async">
                            </figure>
                            <h4 class="latihan-class-card-title">Program Latihan</h4>
                        </article>
                    </div>
                @endif
            </div>
        </section>

    </div>
@endsection