@extends('layouts.app')

@section('title', 'SFER Formations | Société scientifique de formation en rééducation')

@section('meta_description', 'SFER - Société scientifique de formation en rééducation. Formations professionnelles certifiantes pour kinésithérapeutes, ergothérapeutes et professionnels de la rééducation. Excellence pédagogique et expertise reconnue.')


@section('content')

<!-- Hero Banner -->
@if(isset($push) && $push->count() > 0)
<div class="hero-banner hero-style-1">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="banner-content">
                    <!-- <h1 class="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">Get <span class="color-secondary">2500+</span> <br>Best Online Courses From EduBlink</h1> -->

                    @if($push->translate()->title)
                    <h1 class="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">
                        {!! nl2br(e($push->translate()->title)) !!}
                    </h1>
                    @else
                    <h1 class="title" data-sal-delay="100" data-sal="slide-up" data-sal-duration="1000">
                        Excellence en Formation Rééducation
                    </h1>
                    @endif

                    <p data-sal-delay="200" data-sal="slide-up" data-sal-duration="1000">Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit.</p>
                    <div class="banner-btn" data-sal-delay="400" data-sal="slide-up" data-sal-duration="1000">
                        <a href="course-one.html" class="edu-btn">Find courses <i class="icon-4"></i></a>
                    </div>
                    <ul class="shape-group">
                        <li class="shape-1 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="2" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="banner-thumbnail">
                    <div class="thumbnail" data-sal-delay="500" data-sal="slide-left" data-sal-duration="1000">
                        <img src="{{ $push->image_url }}" alt="">
                    </div>
                    <!-- <div class="instructor-info" data-sal-delay="600" data-sal="slide-up" data-sal-duration="1000">
                                <div class="inner">
                                    <h5 class="title">Instrunctor</h5>
                                    <div class="media">
                                        <div class="thumb">
                                            <img src="assets/images/banner/author-1.png" alt="Images">
                                        </div>
                                        <div class="content">
                                            <span>200+</span> Instactors
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                    <ul class="shape-group">
                        <li class="shape-1" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="1.5" src="{{ asset('assets/images/about/shape-15.png') }}" alt="Shape">
                        </li>
                        <li class="shape-2 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="-1.5" src="{{ asset('assets/images/cta/shape-10.png') }}" alt="Shape">
                        </li>
                        <li class="shape-3 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <span data-depth="3" class="circle-shape"></span>
                        </li>
                        <li class="shape-4" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="-1" src="{{ asset('assets/images/cta/shape-08.png') }}" alt="Shape">
                        </li>
                        <li class="shape-5 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="1.5" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
                        </li>
                        <li class="shape-6 scene" data-sal-delay="1000" data-sal="fade" data-sal-duration="1000">
                            <img data-depth="-2" src="{{ asset('assets/images/about/shape-18.png') }}" alt="Shape">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="shape-7">
        <img src="{{ asset('assets/images/about/h-1-shape-01.png') }}" alt="Shape">
    </div>
</div>
@endif

<div class="features-area-2">
            <div class="container">
                <div class="features-grid-wrap">
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon">
                            <img class="svgInject" src="assets/images/animated-svg-icons/online-class.svg" alt="animated icon">
                        </div>
                        <div class="content">
                            <h5 class="title"><span>3020</span> Online Courses</h5>
                        </div>
                    </div>
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon">
                            <img class="svgInject" src="assets/images/animated-svg-icons/instructor.svg" alt="animated icon">
                        </div>
                        <div class="content">
                            <h5 class="title"><span>Top</span>Instructors</h5>
                        </div>
                    </div>
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon certificate">
                            <img class="svgInject" src="assets/images/animated-svg-icons/certificate.svg" alt="animated icon">
                        </div>
                        <div class="content">
                            <h5 class="title"><span>Online</span>Certifications</h5>
                        </div>
                    </div>
                    <div class="features-box features-style-2 edublink-svg-animate">
                        <div class="icon">
                            <img class="svgInject" src="assets/images/animated-svg-icons/user.svg" alt="animated icon">
                        </div>
                        <div class="content">
                            <h5 class="title"><span>6000</span>Members</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!-- Top Categories -->
@isset($categories)
@if($categories->isNotEmpty())
<div class="edu-categorie-area categorie-area-2 edu-section-gap">
    <div class="container">
        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            <h2 class="title">{{ __('Catégories de formations') }}</h2>
            <span class="shape-line"><i class="icon-19"></i></span>
            <p>{{ __('Découvrez nos formations par domaine de spécialisation') }}</p>
        </div>

        <div class="row g-5">
            @php
            $colorStyles = ['color-primary-style', 'color-secondary-style', 'color-extra01-style', 'color-tertiary-style', 'color-extra02-style', 'color-extra03-style', 'color-extra04-style', 'color-extra05-style', 'color-extra06-style'];
            $icons = ['icon-9', 'icon-10', 'icon-11', 'icon-12', 'icon-13', 'icon-14', 'icon-15', 'icon-16', 'icon-17'];
            $delays = [50, 100, 150];
            @endphp
            @foreach($categories as $index => $category)
            <div class="col-lg-4 col-md-6" data-sal-delay="{{ $delays[$index % 3] }}" data-sal="slide-up" data-sal-duration="800">
                <div class="categorie-grid categorie-style-2 {{ $colorStyles[$index % count($colorStyles)] }} {{ $index === 0 ? 'edublink-svg-animate' : '' }}">
                    <div class="icon">
                        @if($category->image_url)
                        <img src="{{ $category->image_url }}" alt="{{ $category->display_name }}" class="categorie-icon-img">
                        @else
                        <i class="{{ $icons[$index % count($icons)] }}"></i>
                        @endif
                    </div>
                    <div class="content">
                        <a href="{{ route('trainings.index', ['sort' => $category->id]) }}">
                            <h5 class="title">{{ $category->display_name }}</h5>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif
@endisset

<!-- certified workshops -->
<div class="edu-categorie-area categorie-area-5 section-gap-equal">
    <div class="container">
        <div class="edu-cta-banner">
            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="section-title section-center sal-animate" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <h2 class="title">Des formations <span class="color-primary">certifiées</span> </h2>
                        <p>Lorem ipsum dolor sit amet cons etur adipisicing elit sed do eiusm aut tempor incididunt labore dolore magna aliqua quis nostrud ex ertation lamcolab oris aliquip.</p>
                        <a href="{{ route('trainings.index') }}" class="edu-btn">{{ __('home.discover_trainings') }} <i class="icon-4"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Formations à venir prochainement -->
@isset($upcomingSessions)
@if($upcomingSessions->isNotEmpty())
<div class="home-online-art-course edu-course-area section-gap-equal">
    <div class="container edublink-animated-shape">
        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            <span class="pre-title">{{ __('Formations') }}</span>
            <h2 class="title">{{ __('Formations à venir') }}</h2>
            <span class="shape-line"><i class="icon-19"></i></span>
        </div>
        <div class="row g-5">
            @foreach($upcomingSessions as $index => $session)
            @php
            $training = $session->training;
            $delay = ($index + 1) * 100;
            @endphp
            <div class="col-lg-4 col-md-6" data-sal-delay="{{ $delay }}" data-sal="slide-up" data-sal-duration="800">
                <div class="edu-event event-style-1">
                    <div class="inner">
                        <div class="thumbnail">
                            <a href="{{ $training->url }}">
                                @if($training->image_url)
                                <img src="{{ $training->thumbnail_url }}" alt="{{ $training->title }}">
                                @else
                                <img src="{{ asset('assets/images/event/event-01.jpg') }}" alt="{{ $training->title }}">
                                @endif
                            </a>
                            <div class="event-time">
                                <span><i class="icon-33"></i>{{ $session->start_date->locale(app()->getLocale())->translatedFormat('d M Y') }}</span>
                            </div>
                        </div>
                        <div class="content">
                            <div class="event-date">
                                <span class="day">{{ $session->start_date->format('d') }}</span>
                                <span class="month">{{ strtoupper($session->start_date->locale(app()->getLocale())->translatedFormat('M')) }}</span>
                            </div>
                            <h5 class="title"><a href="{{ $training->url }}">{{ $training->title }}</a></h5>
                            <p>{{ Str::limit($training->accroche_first ?: $training->accroche_second ?: '', 100) }}</p>
                            @if($training->location)
                            <ul class="event-meta">
                                <li><i class="icon-40"></i>{{ $training->location->city }}{{ $training->location->country ? ', ' . $training->location->country : '' }}</li>
                            </ul>
                            @endif
                            <div class="read-more-btn">
                                <a class="edu-btn btn-small" href="{{ $training->url }}">{{ __('En savoir plus') }} <i class="icon-4"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="event-view-all-btn sal-animate" data-sal-delay="150" data-sal="slide-up" data-sal-duration="1200">
            <h6 class="view-text">{{ __('Découvrez toutes nos formations à venir.') }} <a href="{{ route('trainings.index') }}" class="btn-transparent">{{ __('Voir toutes les formations') }} <i class="icon-4"></i></a></h6>
        </div>
        <ul class="shape-group">
            <li class="shape-1" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                <img class="rotateit" src="{{ asset('assets/images/about/shape-13.png') }}" alt="Shape">
            </li>
            <li class="shape-2 scene" data-sal-delay="500" data-sal="fade" data-sal-duration="200">
                <span data-depth=".9"></span>
            </li>
        </ul>
    </div>
</div>
@endif
@endisset

<!-- Témoignages -->
@isset($testimonials)
@if($testimonials->isNotEmpty())
<div class="testimonial-area-8 section-gap-equal">
    <div class="container edublink-animated-shape">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <span class="pre-title">{{ __('Témoignages') }}</span>
                    <h2 class="title">{{ __('Ce que disent nos participants') }}</h2>
                    <span class="shape-line"><i class="icon-19"></i></span>
                </div>
            </div>
        </div>
        <div class="testimonial-activation swiper">
            <div class="swiper-wrapper">
                @foreach($testimonials as $testimonial)
                <div class="swiper-slide">
                    <div class="testimonial-slide">
                        <div class="content">
                            <div class="author-info">

                            </div>
                            <div class="testimonial-content mb-0">@sanitized($testimonial->content)</div>
                            <div class="rating-icon">
                                <i class="icon-23"></i>
                                <i class="icon-23"></i>
                                <i class="icon-23"></i>
                                <i class="icon-23"></i>
                                <i class="icon-23"></i>
                            </div>
                            <div class="info">
                                <h5 class="title">{{ $testimonial->name }}</h5>
                                <span class="subtitle">{{ $testimonial->description }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <ul class="shape-group">
            <li class="shape-3" data-sal-delay="200" data-sal="fade" data-sal-duration="1000">
                <img class="d-block-shape-light" data-depth="2" src="{{ asset('assets/images/others/map-shape-3.png') }}" alt="Shape">
                <img class="d-none-shape-dark" data-depth="2" src="{{ asset('assets/images/others/dark-map-2-shape-3.png') }}" alt="Shape">
            </li>
        </ul>
    </div>
</div>
@endif
@endisset

<!-- Partenaires (défilement automatique) -->
@isset($partners)
@if($partners->isNotEmpty())
<div class="edu-brand-area brand-area-4 section-gap-equal home-partners-block">
    <div class="container edublink-animated-shape">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <span class="pre-title">{{ __('home.partners_pre_title') }}</span>
                    <h2 class="title">{{ __('home.partners_title') }}</h2>
                    <span class="shape-line"><i class="icon-19"></i></span>
                </div>
            </div>
        </div>
        <div class="swiper home-partners-marquee">
            <div class="swiper-wrapper">
                @foreach($partners as $partner)
                <div class="swiper-slide">
                    <div class="home-partner-slide">
                        @if($partner->link)
                        <a href="{{ $partner->link }}" target="_blank" rel="noopener noreferrer" class="home-partner-slide-link">
                            @if($partner->image_url)
                            <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}" class="home-partner-logo" loading="lazy" width="160" height="80">
                            @else
                            <span class="home-partner-name-fallback">{{ $partner->name }}</span>
                            @endif
                        </a>
                        @else
                        <span class="home-partner-slide-link is-static">
                            @if($partner->image_url)
                            <img src="{{ $partner->image_url }}" alt="{{ $partner->name }}" class="home-partner-logo" loading="lazy" width="160" height="80">
                            @else
                            <span class="home-partner-name-fallback">{{ $partner->name }}</span>
                            @endif
                        </span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <ul class="shape-group">
            <li class="shape-3" data-sal-delay="200" data-sal="fade" data-sal-duration="1000">
                <img class="d-block-shape-light" data-depth="2" src="{{ asset('assets/images/others/map-shape-3.png') }}" alt="" aria-hidden="true">
                <img class="d-none-shape-dark" data-depth="2" src="{{ asset('assets/images/others/dark-map-2-shape-3.png') }}" alt="" aria-hidden="true">
            </li>
        </ul>
    </div>
</div>
@endif
@endisset



@endsection