@extends('frontend.layouts.app')

@section('content')
    <section class="hero">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 no-gutters">
                    <div class="hero-wrapper">
                        <div class="hero-head">
                            <div class="hero-stars mb-4">
                                <i class="fas fa-star" data-aos="fade-right" data-aos-duration="1500"></i>
                                <i class="fas fa-star big"></i>
                                <i class="fas fa-star" data-aos="fade-right" data-aos-duration="1500"></i>
                            </div>

                            <h1 data-aos="fade-right">{{$siteConfig->hero_banner_title}}</h1>

                            {{--                        <span>DEDICATED CIVIL SERVANT</span>--}}
                            <p>
                                {{$siteConfig->hero_banner_subtitle}}
                            </p>
                        </div>
                        <div class="hero-head-btn mt-4 mb-4">
                            <a class="main-btn" href="{{$siteConfig->button_link}}">{{$siteConfig->button_title}}</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 no-gutters">
                    <div class="hero-slider owl-carousel owl-theme">
                        @foreach($imageSliders as $imageSlider)
                            <div class="item">
                                <img src="{{asset('/image-slider').'/'.$imageSlider->banner_image}}" alt=""/>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if(!empty($aboutus))
        <section class="intro section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="left-intro">
                        <img src="{{$aboutus->media[0]->getFullUrl()}}" alt=""/>
                    </div>
                    <div class="desc-box">
                        <i class="fas fa-quote-left"></i>

                        <h3>{{$aboutus->quote}}</h3>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="right-intro">
                        <div class="intro-head">
                            {{--                        <span>A Brief Introduction to us</span>--}}
                            <h1>{{$aboutus->title}}</h1>

                            <p>
                                {!! $aboutus->content !!}
                            </p>
                        </div>

                        <div class="intro-btn mt-3">
                            <a class="main-btn" href="{{route('frontend.about_us')}}">Learn more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    @if(!empty($homepageFirstSection))
    @if(!$homepageFirstSection->category->categoryItems->isEmpty())
        <section class="speech section-padding mt-5">
        <div class="container">
            <div class="heading text-center mb-3">
{{--                <span>Listen to my speeches</span>--}}
                <h1 data-aos="fade-right">{{$homepageFirstSection->category->name}}</h1>
                <div class="hero-stars mb-4">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star big"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>

            <div class="row">
                @foreach($homepageFirstSection->category->categoryItems->take(3) as $categoryItem)
                    <div class="col-lg-4 col-md-6">
                        <div class="speech-wrap">
                            <div class="speech-head">
                                <span>{{date('d M Y', strtotime($categoryItem->created_at))}}</span>
                            </div>
                            <div class="speech-img">
                                <img src="{{$categoryItem->media[0]->getFullUrl()}}" alt=""/>
                                <!-- <a href="https://www.youtube.com/watch?v=K1iTqjGDmbE" data-fancybox="images"><i class="far fa-play-circle play-btn button"></i></a> -->
                                @if($homepageFirstSection->category->slug == 'speeches')
                                    <a href="{{$categoryItem->youtube_link}}" data-fancybox="images"
                                       class="video-play-button" href="#">
                                        <span></span>
                                    </a>
                                @endif

                            </div>

                            <div class="speech-desc">
                                <a href="{{route('frontend.category_item.show', [$categoryItem->category->slug, $categoryItem->id])}}">
                                    <h2>{{$categoryItem->title}}</h2>
                                    <p>{!! $categoryItem->description !!}</p>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="news-btn-main  text-right">
                <a href="{{route('frontend.speech.index', $homepageFirstSection->category->slug)}}">view more</a> <i class="fas fa-long-arrow-alt-right"></i>
            </div>
        </div>
    </section>
    @endif
    @endif
    @if(!empty($homepageSecondSection))
    @if(!$homepageSecondSection->category->categoryItems->isEmpty())
        <section class="news section-padding">
        <div class="container">
            <div class="heading text-center mb-3">
{{--                <span>Latest News & Events</span>--}}
                <h1 data-aos="fade-right">{{$homepageSecondSection->category->name}}</h1>
                <div class="hero-stars mb-4">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star big"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>

            <div class="row">
                @foreach($homepageSecondSection->category->categoryItems->take(2) as $categoryItem)
                    <div class="col-lg-6 col-md-6">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div class="news-img">
                                    <img src="{{$categoryItem->media[0]->getFullUrl()}}" alt=""/>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <div class="news-desc">
                                    <div class="news-date">
                                        <div class="date-box">
                                            <span><i class="fas fa-calendar-alt"></i>{{date('d M Y', strtotime($categoryItem->created_at))}}</span>
                                        </div>
                                    </div>

                                    <div class="news-head">
                                        <h1>{{$categoryItem->title}}</h1>
                                        <p>
                                            {{$categoryItem->description}}
                                        </p>
                                    </div>

                                    <div class="news-btn ">
                                        <a class="main-btn"
                                           href="{{route('frontend.category_item.show', [$categoryItem->category->slug, $categoryItem->id])}}">Read
                                            More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="news-btn-main  text-right">
                <a href="{{route('frontend.speech.index', $homepageSecondSection->category->slug)}}">view more</a> <i class="fas fa-long-arrow-alt-right"></i>
            </div>
        </div>
    </section>
    @endif
    @endif
    @if(!$mediaCoverages->isEmpty())
        <section class="media section-padding">
        <div class="container">
            <div class="heading text-center mb-3">
                <span>Recognition from the different media</span>
                <h1 data-aos="fade-right"> Media Coverage</h1>
                <div class="hero-stars mb-4">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star big"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="media-slider owl-carousel owl-theme">
                        @foreach($mediaCoverages as $media)
                            <div class="item">
                                <a href="{{$media->source_link}}">
                                    <div class="media-wrapper">
                                        <!-- <div class="media-logo">
                                            <img src="assets/images/logos.jpg" alt="" />
                                        </div> -->
                                        <div class="media-img">
                                            <img src="{{$media->media[0]->getFullUrl()}}" alt=""/>
                                        </div>

                                        <div class="media-time mt-2"><i class="fas fa-calendar-alt"></i><span
                                                    class="ml-2">{{date('Y-M-d', strtotime($media->created_at)) }}</span>
                                        </div>

                                        <div class="media-desc mt-2">
                                            <h4>{{$media->title}}</h4>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    @if(!$galleries->isEmpty())
        <section class="gallery section-padding">
        <div class="container">
            <div class="heading text-center mb-3">
                <span>Check our gallery</span>

                <h1 data-aos="fade-right">Photo Gallery</h1>
                <div class="hero-stars mb-4">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star big"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>

            <div class="row">
                @foreach($galleries as $gallery)
                    <div class="col-lg-4 col-md-6">
                        <div class="gallery-wrapper">
                            <a href="{{route('frontend.gallerys.single', $gallery->id)}}">
                                <div class="photo-stack">
                                    @foreach($gallery->upload as $k => $u)
                                        @if($k < 3)
                                            <img src="{{asset('/').$u->filebasepath.'/'.$u->filepath.'/'.$u->filename}}"
                                                 alt="{{$u->filename}}">
                                        @endif
                                    @endforeach
                                </div>

                                <div class="gallery-title">
                                    <h5>{{$gallery->title}}</h5>

                                </div>
                            </a>


                        </div>
                    </div>
                @endforeach
            </div>
            <div class="news-btn-main  text-right">
                <a href="{{route('frontend.galleries')}}">view more</a> <i class="fas fa-long-arrow-alt-right"></i>
            </div>

        </div>
    </section>
    @endif
    <section class="letter">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="left-letter">
                        <span>Get Our News</span>
                        <h2>Subscribe to our newsletter!</h2>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="input-group mb-3 mt-4">
                        <input type="text" class="form-control" placeholder="Your e-mail"
                               aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn" type="button">Subscribe</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="scroll-top"></div>

@endsection