@extends('layouts.app',['ver' => 1])

@section('content')
<style>
.carousel-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-caption {

    z-index: 2; /* Ensures caption is above video */
}

.carousel-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers the entire area */
    z-index: 1; /* Places the video behind the caption */
}
/* Navigation arrows */
.carousel-control-prev,
.carousel-control-next {
    z-index: 5; /* Ensures arrows are above video and caption */
}

</style>
        <!-- header-area end -->        
        <!-- banner area start hare -->
        <section class="banner-area">
            <div class="container-fluid p-0">
            <div class="banner-wapper">
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            @forelse($slides as $index => $slide)
                                <button 
                                    type="button" 
                                    data-bs-target="#carouselExampleIndicators" 
                                    data-bs-slide-to="{{ $index }}" 
                                    class="@if($loop->first) active @endif" 
                                    @if($loop->first) aria-current="true" @endif 
                                    aria-label="Slide {{ $index + 1 }}">
                                </button>
                            @empty
                                <!-- Optional: Provide a fallback -->
                            @endforelse
                        </div>
                            <div class="carousel-inner">
                                @forelse($slides as $slide)
                                    <div 
                                        class="carousel-item @if($loop->first) active @endif" 
                                        style="background-image: url('{{ $slide->image }}'); background-size: cover; background-position: center;">
                                        @if($slide->video)
                                            <video autoplay muted loop class="carousel-video" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">
                                                <source src="{{ $slide->video }}" type="video/mp4">
                                            </video>
                                        @endif
                                        <div class="carousel-caption custom-caption d-flex flex-column justify-content-center align-items-center">
                                            <h2>{{ $slide->title }}</h2>
                                            <h3>{{ $slide->dec }}</h3>
                                            <div class="button-group mt-4 d-flex align-items-center justify-content-center gap-5">
                                                <a href="{{ route('masterclass.showall') }}">En savoir plus</a>
                                                @if (!optional(auth()->user())->hasActiveSubscription())
                                                    <a href="{{ route('login') }}">Nous rejoindre</a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="carousel-item active">
                                        <div class="carousel-caption">
                                            <h2>Aucune slide disponible</h2>
                                        </div>
                                    </div>
                                @endforelse
                            </div>

                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

            </div>
        </section>
        <!-- banner area end hare  -->
        <!-- Continuity  area start hare  -->
        <section class="continuity-area">
            <div class="flex-box d-flex">
                <div class="col-lg-6 p-0">
                    <div class="continuity-content-box">
                        <h3>La continuité du programme Sufi Heritage</h3>
                        <h4>des MASTERCLASS en Ligne !</h4>
                        <p>Reconnue pour son expertise en matière de  préservation de la culture soufie, la plateforme SUFI  HERITAGE est un outil de transmission de la culture soufie à  tous les pubTlics à travers le monde, sous forme de  formations et de masterclass, principalement numériques  et en présentiel.</p>
                        <p>Elle est la première plateforme numérique à proposer un  enseignement de niveau académique entièrement consacré  à la transmission du patrimoine de la culture soufie, de ses  œuvres, de ses arts et des métiers dans l’esprit de la  Futuwah, la chevalerie spirituelle.</p>
                        <p>SUFI HERITAGE est ainsi un espace unique qui permet aux  plus grands spécialistes mondiaux de transmettre leur savoir,  leur discipline, leur art.</p>
                        <div class="action-btn mt-4">
                          
                            @if (!optional(auth()->user())->hasActiveSubscription())
                                   @if (optional(auth()->user())->hasExpiredSubscription())
                                     <li class="nav-item">
                                          <a class="nav-link" href="{{ route('subscribe.show',['action' => 'renew']) }}">Inscription</a>
                                     </li>
                                  @else
                                     <li class="nav-item">
                                          <a class="nav-link" href="{{ route('subscribe.show') }}">Inscription</a>
                                     </li>
                                  @endif
                                
                             @endif
                        </div>
                        <div class="continuity-bg">
                            <img src="{{ asset('public_assets/images/continuity-pattern.png')}}" alt="">
                        </div>
                    </div>
                </div>
                 <div class="col-lg-6 p-0 mt-5 mt-lg-0">
                    <div class="continuity-images-box">
                        <div class="row g-0">
                            <!-- First Image -->
                            <div class="col-md-4 col-sm-5 continuity-image">
                                <div class="countinuity-img-item">
                                    <img src="{{ asset('public_assets/images/calque-img-1.png') }}" alt="">
                                </div>
                            </div>
                            <!-- Second Image -->
                            <div class="col-md-8 col-sm-7 continuity-image hide-on-mobile">
                                <div class="countinuity-img-item lerge-img ps-0 mt-4 mt-sm-0 ps-sm-3 ps-md-4">
                                    <img src="{{ asset('public_assets/images/calque-img-2.png') }}" alt="">
                                </div>
                            </div>
                            <!-- Third Image -->
                            <div class="col-md-8 mt-4 col-sm-7 continuity-image ">
                                <div class="countinuity-img-item pe-0 mt-4 mt-sm-0 pe-sm-3 pe-md-4">
                                    <img src="{{ asset('public_assets/images/calque-img-3.png') }}" alt="">
                                </div>
                            </div>
                            <!-- Fourth Image -->
                            <div class="col-md-4 mt-4 col-sm-5 continuity-image hide-on-mobile">
                                <div class="countinuity-img-item mt-4 mt-sm-0">
                                    <img src="{{ asset('public_assets/images/calque-img-4.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <!-- countinuity area end hare  -->
        <!-- upcoming events area start hare  -->
        <section class="upcoming-event">
            <div class="container">
                <div class="event-wapper text-center">
                    <h3>Les événements à venir</h3>
                    <span>Cher(e)s ami(e)s de la Plateforme Sufi Heritage,</span>
                    <p>Cette année sera pour nous l’occasion de lancer notre programme de Masterclass à travers la Plateforme Sufi Heritage. 
                        Un programme riche comportant près de 50 nouvelles Masterclass .
                        Avec l’intervention de spécialistes de divers aspects de la culture soufie... <br>
                        Chacun des conférenciers abordant des thèmes propres à leurs domaines de recherche et d’enseignement. Nous serions heureux de vous compter parmi nous et de partager ensemble ces moments de ressourcement culturel et spirituel.
                    </p>
                   @php
                        // Get the current date
                        $currentDate = \Carbon\Carbon::now();
                    
                        // Determine the semester (Spring or Fall)
                        if ($currentDate->month >= 1 && $currentDate->month <= 6) {
                            // First Semester (Spring)
                            $semesterName = 'Premier Semestre';
                        } else {
                            // Second Semester (Fall)
                            $semesterName = 'Deuxième Semestre';
                        }
                    
                        // Get the current year
                        $currentYear = $currentDate->year;
                    @endphp
                    
                    <div class="action-btn mt-4">
                        <a href="{{ route('generateProgramme') }}">
                            <i class="bi bi-download"></i> Programme {{ $semesterName }} {{ $currentYear }} ici
                        </a>
                    </div>

                </div>
            </div>
        </section>
        <!-- upcoming events area end hare  -->
        <!-- zoom area start hare  -->
        <section class="zoom-area">
            <div class="overly-zoom">
                <div class="container">
                    <div class="zoom-wapper">
                        <div class="row">
                            <div class="col-lg-6 order-2 order-lg-1">
                                <div class="zoom-img">
                                    <img src="{{$evenement->presentateur->photo}}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2">
                                <div class="zoom-content text-center">
                                    <span>Cher(e)s ami(e)s et Membres,</span>
                                    <p>Veuillez installer sur votre smartphone ou ordinateur l’application Zoom avant de cliquer sur le lien
                                        de la Masterclass afin de nous rejoindre en direct.
                                        Merci de votre compréhension.
                                    </p>
                                    <img src="{{ asset('public_assets/images/zoom-effect-img.png')}}" alt="">
                                    {!!$evenement->description !!}
                                    <div class="action-btn btn-two mb-4">
                                            <a href="{{route('redirectEvenement',['evenement_id' => $evenement->id]) }}">
                                                Rejoignez-nous
                                            </a>
                                    </div>
                                    <div class="bttm-cnt pb-5">
                                        <img src="{{ asset('public_assets/images/dubble-arrow-icon.png')}}" alt="">
                                        <a href="{{route('redirectEvenement',['evenement_id' => $evenement->id]) }}"><img src="{{ asset('public_assets/images/' . strtolower($evenement->plateforme) . '.png')}}" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- zoom area end hare  -->
        <!-- contexte area start hare  -->
        <section class="contexte-area">
            <div class="top-content text-center">
                <h3>LE CONTEXTE DE LA PLATEFORME</h3>
                <p>Mettre les plus hautes technologies au service de la culture soufie</p>
            </div>
            <div class="context-carousel-area pt-5">
                <div class="contexte-carousel owl-theme owl-carousel">
                    <div class="carousel-items">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="images">
                                    <img src="{{ asset('public_assets/images/calque-img-3.png')}}" alt="">
                                </div>
                            </div>
                            <div class="col-md-6 mt-5 mt-md-0">
                                <div class="contexte-content ps-2 ps-md-4">
                                    <h4>Un espace <br>
                                        culturel <br> 
                                        soufi
                                    </h4>
                                    <ul>
                                        <li>L’espace culturel soufi représente un grand nombre de pays et de cultures à travers le monde.</li>
                                        <li>Le Festival de Fès de la Culture Soufie et la ville de Fès représentent un pôle majeur dans cet espace, grâce à une contribution culturelle qui remonte à plus de douze siècles.</li>
                                        <li>Une population jeune où la demande de contenus culturels est en augmentation constante.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- carousel item 2  -->
                    <div class="carousel-items">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="images">
                                    <img src="{{ asset('public_assets/images/calque-img-3.png')}}" alt="">
                                </div>
                            </div>
                            <div class="col-md-6 mt-5 mt-md-0">
                                <div class="contexte-content ps-2 ps-md-4">
                                    <h4>Un espacebr <br>
                                        culturel <br>
                                        soufi
                                    </h4>
                                    <ul>
                                        <li>L’espace culturel soufi représente un grand nombre de pays et de cultures à travers le monde.</li>
                                        <li>Le Festival de Fès de la Culture Soufie et la ville de Fès représentent un pôle majeur dans cet espace, grâce à une contribution culturelle qui remonte à plus de douze siècles.</li>
                                        <li>Une population jeune où la demande de contenus culturels est en augmentation constante.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- contexte area start hare  -->
        <!-- enseignants area start hare  -->
        <section class="enseignants-area">
            <div class="top-content text-center pb-5">
                <h3>Nos enseignants Sufi Heritage</h3>
                <p>De la culture soufie, aux sagesses universelles..</p>
            </div>
            <div class="image-grid">
                 @forelse($presentateurs as $presentateur)
                    <div class="card card-2" data-bs-toggle="modal" data-bs-target="#popbox{{$presentateur->id}}">
                        <img src="{{ $presentateur->photo}}" alt="">
                        <h3>{{$presentateur->nom}} {{$presentateur->prenom}}</h3>
                     </div>

                      <!-- Modal -->
                        <div class="modal galley-modal fade" id="popbox{{$presentateur->id}}" tabindex="-1" aria-labelledby="popboxLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="btn-close-ca" data-bs-dismiss="modal" aria-label="Close"><i class="bi bi-x-circle"></i></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="modal-cnt-wapper">
                                            <div class="modal-carousel owl-carousel owl-theme">
                                                <div class="modal-carousel-items">
                                                    <div class="inner-images">
                                                        <img src="{{ $presentateur->photo}}" alt="">
                                                    </div>
                                                    <div class="carousel-content pt-4 text-center">
                                                        <h3>{{$presentateur->nom}} {{$presentateur->prenom}}</h3>
                                                        <p>{{$presentateur->biographie}}.</p>
                                                    </div>
                                                </div>
                                                <!-- cousel items 2  -->
                                                <div class="modal-carousel-items">
                                                    <div class="inner-images">
                                                        <img src="{{ asset('public_assets/images/gallery-img-2.png')}}" alt="">
                                                    </div>
                                                    <div class="carousel-content pt-4 text-center">
                                                        <h3>{{$presentateur->nom}} {{$presentateur->prenom}}</h3>
                                                       <p>{{$presentateur->biographie}}}.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                 @empty

                 @endforelse
              
              
            </div>
        </section>
       
        <!-- enseignants area end hare  -->
        <!-- section fastival start hare  -->
        <section class="fastive-area">
            <div class="fastive-content-box">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-4  col-md-4 col-6 order-2 order-md-1">
                            <div class="masterclass-box">
                                <h4>Rediffusion</h4>
                                <h4>des Masterclass</h4>
                                <div class="action-btn  text-md-end mt-5 btn-white">
                                    <a href="{{route('masterclass.showall') }}">en savoir plus</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4  col-md-4 mb-4 mb-md-0 order-1 order-md-2">
                            <div class="fastive-img">
                                <img src="{{ asset('public_assets/images/fastive-img.png')}}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-6 order-3">
                            <div class="Festival-box">
                                <h4>Festival</h4>
                                <h4>de culture soufie</h4>
                                <div class="action-btn text-end text-md-start mt-5 btn-white">
                                    <a href="https://festivalculturesoufie.com/">en savoir plus</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="brands-logos mt-5 d-flex justify-content-center gap-5">
                <div class="barands items-1">
                   <a href="https://douniaproductions.com/" target="_blank"> <img src="{{ asset('public_assets/images/dounia.png')}}" alt="" style="height:120px; "></a>
                </div>
                <div class="barands items-2">
                   <a href="https://www.lastartupfactory.co/" target="_blank"> <img src="{{ asset('public_assets/images/startupfactory.png')}}" alt="" style="height:120px; "></a>
                </div>
                <div class="barands items-3">
                    <a href="https://www.tamwilcom.ma/" target="_blank"><img src="{{ asset('public_assets/images/ccg.png')}}" alt="" style="height:120px;"></a>
                </div>
            </div>
        </section>
        <!-- section fastival end hare  -->
       
@push('scripts')

@endpush
@endsection