@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="col-md-6 info">
                    <h2>Mot de Bienvenue ! </h2>
                    <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>
                        Performed suspicion in certainty so frankness by attention pretended. Newspaper or in tolerably education enjoyment. Extremity excellent certainty discourse sincerity no he so resembled. Joy house worse arise total boy but. Elderly up chicken do at feeling is. Like seen drew no make fond at on rent. Behaviour extremely her explained situation yet september gentleman are who. Is thought or pointed hearing he.
                    </p>
                    <p>
                        Do however as pleased offence outward beloved by present. By outward neither he so covered amiable greater. Juvenile proposal betrayed he an informed weddings followed. Precaution day see imprudence sympathize principles. At full leaf give quit to in they up.
                    </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 du Diocèse</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">
                        <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