@extends('layouts.front')
@push('styles')
<style>
    .card-clickable:hover {
        cursor: pointer;
        border: 1px solid limegreen;
    }
</style>
@section('content')

{{-- Hero Section --}}
<div class="hero-wrapper hero-1" id="hero">
    <div class="global-carousel" id="heroSlider1" data-fade="true" data-slide-show="1" data-lg-slide-show="1" data-md-slide-show="1" data-sm-slide-show="1" data-xs-slide-show="1" data-arrows="true" data-xl-arrows="true" data-ml-arrows="true">
        <div class="hero-slider" data-bg-src="{{ asset('front_assets/img/main.png') }}">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-6 col-lg-7 col-md-9">
                        <div class="hero-style1">
                            <span class="hero-subtitle" data-ani="slideinup" data-ani-delay="0s">
                                Workouts, meal plans, and progress tracking—all in one place.
                            </span>
                            <h1 class="hero-title text-white" data-ani="slideinup" data-ani-delay="0.1s">
                                Your Ultimate Fitness Platform – Anytime, Anywhere
                            </h1>
                            <div class="btn-group" data-ani="slideinup" data-ani-delay="0.2s">
                                <a href="{{ url('courses') }}" class="btn btn-primary style2">Select a course</a>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    </div>  
</div>

{{-- Bestsellers Section --}}
<div class="space">
    <div class="container-fluid">
        <h1 class="section-title text-center">BESTSELLERS 2025</h1>
        <div class="feature-area">
            <div class="row gx-2">
                {{-- Repeat similar blocks --}}
                @foreach($courses as $course)
        <div class="col-lg-4">
            <div class="feature-card card-clickable" data-id="{{ $course->id }}" style="cursor: pointer;">
                <div class="row">
                    <div class="col-md-4">
                        <div class="feature-card_icon">
                            <img src="{{ asset('storage/' . $course->image_url) }}" alt="img">
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="context">
                            <h6 class="feature-card_subtitle">{{ $course->title }}</h6>
                            <p class="feature-card_text">
                                {{ $course->description }}
                            </p>
                        </div>
                        <a href="#" class="style2">Amount : {{ $course->price }} AED</a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach

                <a href="#" class="best-seller-link">View All bestsellers</a>
            </div>
        </div>
    </div>
</div>

{{-- Courses and Marathon --}}
<div class="container-fluid">
    <div class="feature-area">
        <div class="row">
            <div class="col-lg-12 course-row">
                <div class="row">
                    <div class="col-md-4">
                        <h2>Courses</h2>
                    </div>
                    <div class="col-md-6">
                        <p>Nullified training programs for any level of training...</p>
                    </div>
                    <div class="col-md-2">
                        <a href="{{ url('courses') }}"><i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
           
        </div>
    </div>
</div>

{{-- IRNBY Test CTA --}}
<div class="row">
    <div class="col-lg-12">
        <div class="conver-img-sec">
            <img src="{{ asset('front_assets/img/test.webp') }}" alt=""> 
            <div class="info">
                <div class="row">
                    <div class="col-md-10">
                        <h4>A UNIQUE APPROACH TO YOU</h4>
                        <p>Find out what the <strong>IRNBY TRAINING CLUB</strong> program is right for you.</p>
                    </div>
                    <div class="col-md-2">
                        <a href="#">Pass the Test</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- What Awaits You Section --}}
<div class="space">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <h1 class="styles_title">What awaits you with us?</h1>
            </div>
            <div class="col-lg-6">
                <div class="row">
                    {{-- Training --}}
                    <div class="col-lg-6 styles_block">
                        <div class="styles_block__line"><div class="styles_index">(01)</div><div class="styles_line"></div></div>
                        <h3>TRAINING</h3>
                        <p>Training programs for any level... video of the accompanying for each exercise.</p>
                    </div>
                    {{-- Food --}}
                    <div class="col-lg-6 styles_block">
                        <div class="styles_block__line"><div class="styles_index">(02)</div><div class="styles_line"></div></div>
                        <h3>Food</h3>
                        <p>Flexible nutrition plans... gluten and lactose.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="row">
                    {{-- Support --}}
                    <div class="col-lg-3 styles_block">
                        <div class="styles_block__line"><div class="styles_index">(03)</div><div class="styles_line"></div></div>
                        <h3>Support</h3>
                        <p>A team of professional trainers... support every day!</p>
                    </div>
                    {{-- Result --}}
                    <div class="col-lg-2 styles_block">
                        <div class="styles_block__line"><div class="styles_index">(04)</div><div class="styles_line"></div></div>
                        <h3>The result</h3>
                        <p>The set of these three factors... long time!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Results CTA --}}
<div class="row">
    <div class="col-lg-12">
        <div class="conver-img-sec-2">
            <img src="{{ asset('front_assets/img/result.webp') }}" alt="">
            <div class="info">
                <a href="{{ url('results') }}">results of participants</a>
            </div>
        </div>
    </div>
</div>

@push('scripts') 
<script>
    document.querySelectorAll('.card-clickable').forEach(card => {
        card.addEventListener('click', function () {
            const courseId = this.getAttribute('data-id');
            const url = "{{ route('courses.details', ':id') }}".replace(':id', courseId);
            window.location.href = url;
        });
    });
</script>
@endpush

@endsection