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

@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">
                @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}}<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 -->

    <!-- 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>Bienvenue !</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 Help Step
============================================= -->
    <div class="help-step-area bg-gray default-padding">
        <div class="container">
            <div class="row">
                <div class="row">
                    <div class="site-heading text-center">
                        <div class="col-md-8 col-md-offset-2">
                            <h2>Mot de Bienvenue ! </h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 info">
                    <h5>Monseigneur Raymond Ahoua <br><span style="font-size: 16px; color: #feac05; font-weight: 200">Evêque du Diocèse de Grand-Bassam</span></h5>
                    <p>
                        .............................................................................................................................................................................................................................................
                    </p>
                    <p>
                        ..................................................................................................................................................................................................
                    </p>
                    <a href="{{route('story')}}" class="btn btn-theme effect btn-sm">Découvrir notre histoire</a>
                </div>
                <div class="col-md-6 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>
    <!-- End Help Step -->


    <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('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('diocese')}}">En savoir plus</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- 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 Banner
============================================= -->
    <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">
                        <h1 class="text-uppercase"><strong>Verset du jour</strong></h1>
                        <h3 id="dailyVersesWrapper"></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Banner -->


    <!-- Start Upcomming Event
  ============================================= -->
    <div class="upcomming-event-area carousel-shadow default-padding bg-gray">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Evènement à venir</h2>
                        <p>
                            Restez informé des différents évènements à venir de notre diocèse
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="upcomming-event-list owl-carousel owl-theme">
                        @foreach($events as $event)
                        <div class="item">
                            <div class="date">
                                {{$event->event_at->format('d')}} <span>{{\Carbon\Carbon::parse($event->event_at)->translatedFormat('M')}}</span>
                            </div>
                            <div class="info">
                                <div class="meta">
                                    <ul>
                                        <li><i class="fas fa-clock"></i> {{$event->start_at->format('H:i')}} - {{$event->end_at->format('H:i')}}</li>
                                        <li><i class="fas fa-map-marker-alt"></i>{{$event->location}}</li>
                                    </ul>
                                </div>
                                <h4>{{$event->title}}</h4>
                                <p>{{$event->description}}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Upcomming Event -->



@endsection

@push('javascript')
    <script async defer src="https://dailyverses.net/get/verse.js?language=sg21"></script>
@endpush