<x-portal-layout>

    <section id="hero">
        <div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">

            <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

            <div class="carousel-inner" role="listbox">
                
                @foreach($slides as $slide)
                <div class="carousel-item @if($loop->first) active @endif" style="background-image: url({{ asset('assets/portal/img/slide/' . $slide['image']) }})">
                    <div class="carousel-container">
                        <div class="container">
                            <h2 class="animate__animated animate__fadeInDown">{{ $slide['title'] }}</h2>
                            <p class="animate__animated animate__fadeInUp">{{ $slide['subtitle'] }}</p>
                            <!--a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a-->
                        </div>
                    </div>
                </div>
                @endforeach

            </div>

            <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
            </a>

            <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
            </a>

        </div>
    </section>

    <section id="ministre" class="ministre">
        <div class="container">
  
            <div class="row content">
                <div class="col-lg-6">
                    <div class="card" style="background-image: url({{ asset('assets/portal/img/ministre.jpg') }});">
                        <div class="card-body">
                            <small>Les mots de bienvenue du Ministre d'État, </small><br> <h2>Abdoulaye Bio Tchane</h2>
                            <div class="read-more"><a href="{{ route('portal.pages', 'ministre') }}"><i class="bi bi-arrow-right"></i> Lire la suite</a></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 pt-4 pt-lg-0 services">

                    <div class="section-title">
                        <h2>Prochain</h2>
                        <p>Evenements</p>
                    </div>

                    @foreach ($events as $event)
                    <div class="col-md-12">
                        <div class="icon-box">
                            <i class="bi bi-briefcase"></i>
                            <h4>
                                {{ $event->formatted_started_at }} - 
                                {{ $event->formatted_finished_at }}
                            </h4>
                            <p><a href="{{ route('portal.events.show', $event) }}">{!! $event->title !!}</a></p>
                        </div>
                    </div>
                    @endforeach
                    
                </div>
            </div>
  
        </div>
    </section>
    
    <section id="testimonials" class="testimonials">
        <div class="container position-relative">
            <div class="testimonial-item">
                @if($forum)
                    <h4>Forum {{ $forum->annee }}</h4>
                    <h3><a href="{{ route('portal.forums.show', $forum) }}">{{ $forum->thematique }}</a></h3>
                @else
                    <h3>Pas de forum en cours</h3>
                @endif
            </div>
        </div>
    </section>
    
    <section id="values" class="values">
        <div class="container">

            <div class="section-title">
                <h2>Notre</h2>
                <p>Actualités</p>
            </div>

            <div class="row">
                @foreach($articles as $article)
                <div class="col-md-6 d-flex align-items-stretch" data-aos="fade-up">
                    <div class="card" style="background-image: url({{ asset('storage/articles/' . $article->filename) }});">
                        <div class="card-body">
                            <h5 class="card-title"><a href="{{ route('portal.articles.show', $article) }}">{{ $article->title }}</a></h5>
                            <p class="card-text">{{ $article->chapo }}</p>
                            <div class="read-more"><a href="{{ route('portal.articles.show', $article) }}"><i class="bi bi-arrow-right"></i> Lire la suite</a></div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div> 
    </section>

    <section id="clients" class="clients section-bg">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <p>Les 17 ODD</p>
            </div>

            <div class="clients-slider swiper" data-aos="fade-up" data-aos-delay="100">
                <div class="swiper-wrapper align-items-center">
                @foreach($goals as $goal)
                    <div class="swiper-slide">
                        <a href="{{ route('portal.goals.show', $goal) }}">
                            <img src="{{ asset('images/goals/goal-'.$goal->code.'.png') }}" class="img-fluid" alt="">
                        </a>
                    </div>
                @endforeach
                </div>
               
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </section>
  
</x-portal-layout>
