@extends('front.layout.app')
@section('content')
    <style>
        .background[data-item="one"] {
            background: url("{{ asset('admin/images/' . ($data['bImage1'] ?? '')) }}") center/cover;
        }

        .background[data-item="two"] {
            background: url("{{ asset('admin/images/' . ($data['bImage2'] ?? '')) }}") center/cover;
        }

        .background[data-item="three"] {
            background: url("{{ asset('admin/images/' . ($data['bImage3'] ?? '')) }}") center/cover;
        }
    </style>


    <section class="mainSlider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slideOne" data-content="one">
                        <span>{{$data['title1'] ?? ''}}</span>
                        <!-- <h1>shine bright</h1> -->
                        <img src="{{asset('admin/images/'.($data['image1'] ?? ' '))}}" alt="image"
                             class="img-fluid mainSlider__logo">
                        <p>
                            {{$data['description1'] ?? ''}}
                        </p>
                        <a href="{{route('front.membership')}}" class="themeBtn themeBtn1">Become a Member</a>
                    </div>
                    <div class="background" data-item="one"></div>
                </div>
                <div class="swiper-slide">
                    <div class="slideOne" data-content="two">
                        <span>{{$data['title2'] ?? ''}}</span>
                        <!-- <h1>shine bright</h1> -->
                        <img src="{{asset('admin/images/'.($data['image2'] ?? ' '))}}" alt="image"
                             class="img-fluid mainSlider__logo">
                        <p>
                            {{$data['description2'] ?? ''}}
                        </p>
                        <a href="{{route('front.membership')}}" class="themeBtn themeBtn1">Become a Member</a>
                        </p>
                    </div>
                    <div class="background" data-item="two"></div>
                </div>
                <div class="swiper-slide">
                    <div class="slideOne" data-content="three">
                        <span>{{$data['title3'] ?? ''}}</span>
                        <!-- <h1>shine bright</h1> -->
                        <img src="{{asset('admin/images/'.($data['image3'] ?? ' '))}}" alt="image"
                             class="img-fluid mainSlider__logo">
                        <p>
                            {{$data['description3'] ?? ''}}
                        </p>
                        <a href="{{route('front.membership')}}" class="themeBtn themeBtn1">Become a Member</a>
                        </p>
                    </div>
                    <div class="background" data-item="three"></div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>

    <section class="aboutSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5">
                    <div class="aboutImg reveal">
                        <img src="{{asset('admin/mission-images/'.($data['aImage1'] ?? ''))}}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="aboutContent">
                        <h2 class="secHeading" data-aos="fade-up">{{$data['title2'] ?? ''}}</h2>
                        <p data-aos="fade-up">{{$data['description1'] ?? ''}}</p>
                        <div class="yearWraps">
                            <div class="yearBox" data-aos="fade-up">
                                <img src="{{asset('images/icon1.webp')}}" class="img-fluid" alt="">
                                <h3 class="secHeading">{{$data['year'] ?? ''}}+</h3>
                                <h4>Years Of
                                    Experience</h4>
                            </div>
                            <div class="missionText">
                                <h5 data-aos="fade-up">{{$data['title3'] ?? ''}}</h5>
                                <p data-aos="fade-up"> {{$data['description2'] ?? ''}}</p>
                            </div>
                        </div>
                        <p class="mision-para" data-aos="fade-up">{{$data['description3'] ?? ''}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="serviceSec">
        <div class="container">
            <div class="row">
                <div class="row">
                    @foreach($programs as $program)
                        <div class="col-md-4">
                            <div class="serviceWrap" data-aos="fade-up">
                                <figure class="reveal">
                                    <img src="{{asset('admin/program-images/'.($program->image ?? ''))}}"
                                         class="img-fluid"
                                         alt="">
                                </figure>
                                <div class="serviceContent">
                                    <div class="serviceIcon">
                                        <img src="{{asset('images/srvicon1.webp')}}" class="img-fluid" alt="">
                                    </div>
                                    <div class="srvBox">
                                        <h3>{{$program->title ?? ''}}</h3>
                                        <p>
                                            {{$program->description ?? ''}}
                                        </p>
                                        <a href="#"><i class="fas fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                {{--                <div class="col-md-4">--}}
                {{--                    <div class="serviceWrap" data-aos="fade-up">--}}
                {{--                        <figure class="reveal">--}}
                {{--                            <img src="{{asset('images/service1.webp')}}" class="img-fluid" alt="">--}}
                {{--                        </figure>--}}
                {{--                        <div class="serviceContent">--}}
                {{--                            <div class="serviceIcon">--}}
                {{--                                <img src="{{asset('images/srvicon1.webp')}}" class="img-fluid" alt="">--}}
                {{--                            </div>--}}
                {{--                            <div class="srvBox">--}}
                {{--                                <h3>free resources</h3>--}}
                {{--                                <p>View growing collection of content. Subscribe to Shine Bright for tips and--}}
                {{--                                    inspiration sent to you weekly.--}}
                {{--                                </p>--}}
                {{--                                <a href="#"><i class="fas fa-arrow-right"></i></a>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
                {{--                <div class="col-md-4">--}}
                {{--                    <div class="serviceWrap" data-aos="fade-up">--}}
                {{--                        <figure class="reveal">--}}
                {{--                            <img src="{{asset('images/service2.webp')}}" class="img-fluid" alt="">--}}
                {{--                        </figure>--}}
                {{--                        <div class="serviceContent">--}}
                {{--                            <div class="serviceIcon">--}}
                {{--                                <img src="{{asset('images/srvicon1.webp')}}" class="img-fluid" alt="">--}}
                {{--                            </div>--}}
                {{--                            <div class="srvBox">--}}
                {{--                                <h3>consulting community.</h3>--}}
                {{--                                <p>Join our community for expert guidance on starting, marketing, and achieving success--}}
                {{--                                    in pharmacy consulting. Get access to educational resources and weekly Zoom--}}
                {{--                                    sessions. Join us on the Bright Side!--}}
                {{--                                </p>--}}
                {{--                                <a href="{{route('front.membership')}}"><i class="fas fa-arrow-right"></i></a>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                </div>--}}

                {{--                <div class="col-md-4">--}}
                {{--                    <div class="serviceWrap" data-aos="fade-up">--}}
                {{--                        <figure class="reveal">--}}
                {{--                            <img src="{{asset('images/service3.webp')}}" class="img-fluid" alt="">--}}
                {{--                        </figure>--}}
                {{--                        <div class="serviceContent">--}}
                {{--                            <div class="serviceIcon">--}}
                {{--                                <img src="{{asset('images/srvicon3.webp')}}" class="img-fluid" alt="">--}}
                {{--                            </div>--}}
                {{--                            <div class="srvBox">--}}
                {{--                                <h3>self-study courses</h3>--}}
                {{--                                <p>Self-study programs to get you started consulting today.--}}
                {{--                                </p>--}}
                {{--                                <a href="{{route('front.programs')}}"><i class="fas fa-arrow-right"></i></a>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
            </div>
        </div>
    </section>

    <section class="shineSec">
        <h2 class="secHeading text-center" data-aos="fade-up">you can shine bright now.</h2>
        <div class="swiper shineSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="shineWrap">
                        <figure>
                            <img src="{{asset('admin/images/'.($data['bImage5'] ?? ' '))}}" class="img-fluid" alt="">
                        </figure>
                        <a href="{{$data['url1'] ?? ''}}" data-fancybox=""
                           class="youtubeBtn"><img src="{{asset('images/youtube.webp')}}" class="img-fluid" alt=""></a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="shineWrap">
                        <figure>
                            <img src="{{asset('admin/images/'.($data['bImage6'] ?? ' '))}}" class="img-fluid" alt="">
                        </figure>
                        <a href="{{$data['url2'] ?? ''}}" data-fancybox=""
                           class="youtubeBtn"><img src="{{asset('images/youtube.webp')}}" class="img-fluid" alt=""></a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="shineWrap">
                        <figure>
                            <img src="{{asset('admin/images/'.($data['bImage7'] ?? ' '))}}" class="img-fluid" alt="">
                        </figure>
                        <a href="{{$data['url3'] ?? ''}}" data-fancybox=""
                           class="youtubeBtn"><img src="{{asset('images/youtube.webp')}}" class="img-fluid" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="blogSec">
        <div class="container">
            <h2 class="secHeading text-center" data-aos="fade-up">shine bright newsletter</h2>
            <div class="row">
                @foreach($blogs as $blog)
                    <div class="col-md-4">
                        <div class="blogWrap" data-aos="fade-up">
                            <figure>
                                <img src="{{asset('admin/blog-images/'.($blog->image ?? ''))}}" class="img-fluid" alt="">
                            </figure>
                           @php
                               $day = $blog->created_at->format('d');
                               $month = $blog->created_at->format('M');
                           @endphp
                            <div class="blogBox">
                                <div class="blogDate">
                                    <h4>{{$day ?? ''}}</h4>
                                    <span>{{$month ?? ''}}</span>
                                </div>
                                <div class="blogContent">
                                    <h3>{{$blog->title ?? ''}}</h3>
                                    <p>{{$blog->description ?? ''}}</p>
                                </div>
                                <div class="blogIcons">
                                    <ul>
                                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                    </ul>
                                    <a href="{{route('front.blog')}}">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="newsSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="newsHeading" data-aos="fade-up">
                        <h2 class="secHeading text-white">subscribe to <br>
                            newsletter</h2>
                    </div>
                </div>
                <div class="col-md-6">
                    <form class="newsForm" data-aos="fade-up">
                        <input type="text" class="form-control" placeholder="Search here for items...….">
                        <button class="themeBtn">Subscribe Now</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection