@extends('front.layouts.app')
@section('title','Accueil')

@section('content')

    <!-- Start Banner
    ============================================= -->
    <div class="banner-area">
        <div id="bootcarousel" class="carousel slide item-bg animate_text" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner text-light carousel-zoom">
                <!-- Première slide : vidéo Vimeo -->
{{--                <div class="item active">--}}
{{--                    <div class="slider-thumb bg-fixed" style="background-color: #000;">--}}
{{--                        <div class="video-wrapper" style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">--}}
{{--                            <iframe--}}
{{--                                    id="video"--}}
{{--                                    src="https://player.vimeo.com/video/1134828027?title=0&byline=0&portrait=0&badge=0&autopause=0&autoplay=1&loop=1&muted=1&background=1"--}}
{{--                                    frameborder="0"--}}
{{--                                    allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"--}}
{{--                                    referrerpolicy="strict-origin-when-cross-origin"--}}
{{--                                    style="position:absolute; top:0; left:0; width:100%; height:100%;"--}}
{{--                                    title="Festi-Eclat 2025 - Diocèse de Grand Bassam">--}}
{{--                            </iframe>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}

                @foreach($slides as $slide)
                    <div class="item {{$slide->status == 1 ? 'active':''}} ">
                        <div class="slider-thumb bg-fixed" style="background-image: url({{asset($slide->getFirstMediaUrl('slide'))}});"></div>
                        <div class="box-table">
                            <div class="box-cell shadow dark">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="content" data-animation="animated slideInRight">
                                                <h1>{{$slide->title}}<br><span>{{$slide->span}}</span></h1>
                                                <p>
                                                    {{$slide->description}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- End Wrapper for slides -->

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#bootcarousel" data-slide="prev">
                <i class="fa fa-angle-left"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#bootcarousel" data-slide="next">
                <i class="fa fa-angle-right"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- End Banner -->




    <!-- Début de la section Help Step -->
    <div class="help-step-area bg-gray default-padding">
        <div class="container">
            <div class="site-heading text-center">
                <div class="col-md-12">
                    @php
                        use Illuminate\Support\Carbon;

                        $now = Carbon::now();
                        $startYear = $now->month >= 10 ? $now->year : $now->year - 1;
                        $endYear = $startYear + 1;
                    @endphp
                    <h2>Mot de l'eveque pour l'année {{ $startYear }} - {{ $endYear }} ! </h2>
                </div>
            </div>
            <div class="row flex-container">

                <!-- Colonne de texte (bouton placé hors de .info) -->
                <div class="col-md-6 col-sm-12">
                    <div class="info">
                        <h5 class="sticky-header">
                            Monseigneur Raymond Ahoua <br>
                            <span style="font-size: 16px; color: #feac05; font-weight: 200">
                              Evêque du Diocèse de Grand-Bassam
                            </span>
                        </h5>
                        {!! $message->content !!}
                    </div>
                    <!-- Bouton placé en dehors de .info pour qu'il reste visible -->
                    <a href="{{route('home.all.story')}}" class="btn btn-theme effect btn-sm" style="margin-top: 15px;">
                        Découvrir notre histoire
                    </a>
                </div>
                <!-- Colonne d'image -->
                <div class="col-md-6 col-sm-12 items">
                    <div class="row">
                        <div class="item col-md-12 col-sm-12">
                            <div class="content">
                                <div class="thumb">
                                    <img src="{{asset('assets/img/team/eveque.jpg')}}" alt="Thumb">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Fin de la section Help Step -->



    <!-- Start daily think
============================================= -->
    <div class="video-bg-live barber bg-fixed text-light padding-xl" style="background-image: url({{asset('assets/img/banner/jesus.png')}});">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                    <div class="info">
                        @if($think != null)
                            <h3><strong>365 JOURS A L'OMBRE SPIRITUELLE DE MONSEIGNEUR RAYMOND AHOUA</strong></h3>
                            <hr>
                            <br>
                            <h3>{{$think->description}}</h3>
                            <p><strong>Pensées extraites de : <i>"Confiance, on avance"</i></strong></p>
                        @else
                            <h3><strong>VERSET DU JOUR</strong></h3>
                            <hr>
                            <br>
                            <h3 id="dailyVersesWrapper"></h3>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End daily think  -->

    <!-- Start Team Members
============================================= -->
    <div class="team-members-area item-white bg-gray default-padding">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Agenda Mensuel de l'Evêque</h2>
                        <p>
                            Consultez notre agenda mensuel
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 team-member-info">
                    <div class="team-carousel-items owl-carousel owl-theme">
                        <div class="item">
                            <div class="col-md-6 thumb">
                                <img src="{{asset('assets/img/banner/agenda.jpg')}}" alt="Team">
                            </div>
                            <div class="col-md-6 info title">
                                <h1 class="text-uppercase text-center">Mois - {{\Carbon\Carbon::now()->translatedFormat('F')}} </h1>
                                <h5 class="text-center">Programme</h5>
                                <a class="btn btn-theme effect btn-sm btn-block" href="{{route('schedule')}}">Consulter l'agenda</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Team Members -->

    <!-- Start Our Mission
   ============================================= -->
    <div class="our-mission default-padding">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Quelques chiffres !</h2>
                        <p>
                            Nous sommes très heureux de vous accueillir sur le site du Diocèse de Grand-Bassam. <br> Découvrez ci-dessous la composition de notre diocèse.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="mission-items owl-carousel owl-theme text-center">
                        @foreach($metrics as $metric)
                            <div class="item">
                                <i class="flaticon-solidarity"></i>
                                <h1 class="timer" data-to="{{$metric->number}}" data-speed="2000" style="font-weight: bold"></h1>
                                <h3 class="medium">{{$metric->name}}</h3>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End  Our Mission -->

    <!-- Start Team Members
============================================= -->
    <div class="team-members-area item-white bg-gray default-padding">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Affectation du Diocèse</h2>
                        <p>
                            Consultez les affectations annuels
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 team-member-info">
                    <div class="team-carousel-items owl-carousel owl-theme">
                        <div class="item">
                            <div class="col-md-6 info title">
                                <h1 class="text-uppercase text-center">AFFECTATION DU DIOCESE</h1>
                                <h5 class="text-center">Affectation diocésain</h5>
                                <a class="btn btn-theme effect btn-sm btn-block" href="{{$affectation}}">Télécharger</a>
                            </div>
                            <div class="col-md-6 thumb">
                                <img src="{{asset('assets/img/affectation.jpeg')}}" alt="Affectation">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Team Members -->




    <section class="about-area cell-items">
        <div class="container-full">
            <div class="row">
                <div class="col-md-8 thumb bg-cover" style="background-image: url({{asset('assets/img/banner/marie.jpg')}});"></div>
                <div class="col-md-4 info">
                    <div class="joining-way">
                        <div class="item">
                            <div class="icon">
                                <i class="flaticon-heart"></i>
                            </div>
                            <div class="content">
                                <br>
                                <h4>Notre Clergé</h4>
                                <a href="{{route('clergy')}}">En savoir plus</a>
                            </div>
                        </div>
                        <div class="item">
                            <div class="icon">
                                <i class="flaticon-help"></i>
                            </div>
                            <div class="content">
                                <br>
                                <h4>Nos Paroisses</h4>
                                <a href="{{route('home.all.church')}}">En savoir plus</a>
                            </div>
                        </div>
                        <div class="item">
                            <div class="icon">
                                <i class="flaticon-scholarship"></i>
                            </div>
                            <div class="content">
                                <br>
                                <h4>Gouvernement du diocèse</h4>
                                <a href="{{route('church.diocese')}}">En savoir plus</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="blog-area bg-gray default-padding">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Notre Actualité</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach($posts as $post)
                    <div class="col-md-3">
                        <section class="cards-wrapper-blog">
                            <div class="card-grid-space-blog">
                                <a class="card-blog" href="{{route('actuality.show',$post->id)}}" style="--bg-img: url({{asset($post->getFirstMediaUrl('cover'))}})">
                                    <div>
                                        <h1 style="font-size: 0.6em ">{{$post->title}}</h1>
                                        <p></p>
                                        <div class="date">{{$post->created_at->format('d M Y')}}</div>
                                        <div class="tags">
                                            <div class="tag">{{$post->category->name}}</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </section>
                    </div>
                @endforeach
            </div>
        </div>
    </div>





@endsection

@push('javascript')
    <script async defer src="https://dailyverses.net/get/verse.js?language=sg21"></script>
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
        const iframe = document.getElementById('video');
        const player = new Vimeo.Player(iframe);

        // Dès que l'utilisateur clique quelque part, on active le son
        document.addEventListener('click', () => {
            player.setMuted(false);
        }, { once: true });
    </script>

@endpush