@extends('themes.six.master')

@section('title')
    Home
@endsection

@section('style')
    <style>
       .testimonial-carousel-area {
            background: #f9fafc;
            padding: 80px 0;
        }

        .testimonial-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            padding: 40px 30px;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            transition: all 0.3s ease-in-out;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        }

        .testimonial-content {
            margin-bottom: 30px;
        }

        .testimonial-title {
            font-size: 18px;
            font-weight: 600;
            color: #222;
            margin-top: 15px;
        }

        .testimonial-desc {
            font-size: 16px;
            color: #555;
            line-height: 1.9;
            font-style: italic;
            text-align: justify;
        }

        .testimonial-author {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .author-image {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 12px;
            border: 3px solid #ffb606;
        }

        .author-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .author-info h5 {
            font-size: 17px;
            font-weight: 600;
            color: #222;
            margin-bottom: 4px;
        }

        .author-info span {
            font-size: 14px;
            color: #777;
        }

    </style>
@endsection

@section('content')

    <!--Slider Area Start-->
    @if($banners && $banners->count() > 0)
        <div class="slider-area slider-style-1">
            <div class="preview-2">

                <!-- Nivo Slider Wrapper -->
                <div class="slider-wrapper theme-default">

                    <!-- SLIDER IMAGES -->
                    <div id="nivoslider" class="nivoSlider">
                        @foreach($banners as $index => $banner)
                            <img src="{{ $banner['image'] }}"
                                alt="{{ $banner['title'] ?? 'Banner' }}"
                                title="#slider-caption-{{ $index+1 }}" />
                        @endforeach
                    </div>

                    <!-- CAPTIONS -->
                    @foreach($banners as $index => $banner)
                        <div id="slider-caption-{{ $index+1 }}" class="nivo-html-caption nivo-caption">
                            <div class="banner-content slider-1">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-lg-7 col-md-7">
                                            <div class="text-content {{ $index > 0 ? 'slide-2 hidden-xs' : '' }}">

                                                @if(!empty($banner['title']))
                                                    <h1 class="title1">{{ $banner['title'] }}</h1>
                                                @endif
                                                
                                                @if(!empty($banner['description']))
                                                    <p class="sub-title">{{ strip_tags($banner['description']) }}</p>
                                                @endif

                                                <div class="banner-readmore">
                                                    <a title="Read more" href="{{ url('/contact-us') }}">Enroll your child</a>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    @endif
    <!--End of Slider Area-->

    <!--Activity Area Start-->
    @if($activities && $activities->count() > 0)
        <div class="activity-area">
            <div class="container">
                <div class="row">
                    @foreach($activities as $key => $activity)
                        <div class="col-lg-3 col-md-6 col-sm-6 activity {{ $key > 1 ? 'mrg-res-top-md' : '' }}">
                            <div class="single-activity">
                                
                                {{-- Icon --}}
                                @if(!empty($activity['fa_icon']))
                                    <div class="single-activity-icon">
                                        <i class="{{ $activity['fa_icon'] }}"></i>
                                    </div>
                                @endif
                                
                                {{-- Title --}}
                                @if(!empty($activity['title']))
                                    <h4>{{ $activity['title'] }}</h4>
                                @endif
                                
                                {{-- Description --}}
                                @if(!empty($activity['desc']))
                                    <p>{!! $activity['desc'] !!}</p>
                                @endif
                                
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    <!--End of Activity Area-->

    <!--Advertise Area Start-->
    <div class="advertise-area text-center section-gray">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>How to <span>Enroll Your Child</span> to a <span>Class</span>?</h2>
                    <a href="{{ url('/contact-us') }}">Join Us</a>
                </div>
            </div>
        </div>
    </div>
    <!--End of Advertise Area-->

    <!--Service Area Start-->
    @if($services && $services->count() > 0)
        <div class="service-area section-padding">
            <div class="container">
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-title-wrapper">
                            <div class="section-title">
                                <h3>Our Services</h3>
                                <p>Our best services for your kids</p>
                            </div>
                        </div> 
                    </div>
                </div>

                @php
                    $leftServices = $services->slice(0, ceil($services->count() / 2));
                    $rightServices = $services->slice(ceil($services->count() / 2));
                @endphp

                <div class="row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="single-service-item-wrapper">
                            @foreach($leftServices as $service)
                                <div class="single-service-item">
                                    <div class="single-service-text">
                                        @if(!empty($service['title']))
                                            <h4>{{ $service['title'] }}</h4>
                                        @endif
                                        @if(!empty($service['desc']))
                                            <p>{!! $service['desc'] !!}</p>
                                        @endif
                                    </div>
                                    @if(!empty($service['icon']))
                                        <div class="single-service-icon">
                                            <i class="{{ $service['icon'] }}"></i>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>    
                    </div>

                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="service-image">
                            <img src="{{ asset('assets/themes/six/img/banner/2.jpg') }}" alt="Services">
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="single-service-item-wrapper">
                            @foreach($rightServices as $service)
                                <div class="single-service-item">
                                    @if(!empty($service['icon']))
                                        <div class="single-service-icon">
                                            <i class="{{ $service['icon'] }}"></i>
                                        </div>
                                    @endif
                                    <div class="single-service-text">
                                        @if(!empty($service['title']))
                                            <h4>{{ $service['title'] }}</h4>
                                        @endif
                                        @if(!empty($service['desc']))
                                            <p>{!! $service['desc'] !!}</p>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div> 
                    </div>
                </div>

            </div>
        </div>
    @endif
    <!--End of Service Area-->

    <!--Fun Factor Area Start-->
    @if($counters && $counters->count() > 0)
        <div class="fun-factor-area">
            <div class="container">
                <div class="row">
                    @foreach($counters as $key => $counter)
                        <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                            <div class="single-fun-factor {{ $loop->last ? 'no-margin' : '' }}">
                                
                                @if(!empty($counter['fa_icon']))
                                    <div class="fun-factor-icon">
                                        <i class="{{ $counter['fa_icon'] }}"></i>
                                    </div>
                                @endif

                                @if(!empty($counter['count']))
                                    <h2><span class="counter">{{ $counter['count'] }}</span></h2>
                                @endif
                                
                                @if(!empty($counter['title']))
                                    <span>{{ $counter['title'] }}</span>
                                @endif

                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    <!--End of Fun Factor Area-->

    <!--Teachers Area Start-->
    @if($teachers && $teachers->count() > 0)
        <div class="teachers-area section-margin">
            <div class="container">

                {{-- Section Title --}}
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-title-wrapper">
                            <div class="section-title">
                                <h3>Our Teachers</h3>
                                <p>We are glad to introduce our professional staff</p>
                            </div>
                        </div> 
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="teacher-image" id="teacher-big-image">
                            <img src="{{ $teachers->first()->image }}" alt="{{ $teachers->first()->title ?? 'Teacher' }}">
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="testimonial-image-text-wrapper">

                            <div class="testimonial-image-slider">
                                @foreach($teachers as $teacher)
                                    <div class="sin-testiImage">
                                        <div class="teacher-image-carousel">
                                            <img src="{{ $teacher->image }}" alt="{{ $teacher->title ?? 'Teacher' }}" />
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="testimonial-text-slider">
                                @foreach($teachers as $teacher)
                                    <div class="sin-testiText">
                                        <h2>{{ $teacher->title }}</h2>
                                        @if(!empty($teacher->title2))
                                            <span class="language">{{ $teacher->title2 }}</span>
                                        @endif

                                        <div class="teacher-info-container">
                                            @if(!empty($teacher->qualification))
                                                <p><i class="fa fa-graduation-cap"></i> Degree: {{ $teacher->qualification }}</p>
                                            @endif
                                            @if(!empty($teacher->expirence))
                                                <p><i class="fa fa-star"></i> Experience: {{ $teacher->expirence }}</p>
                                            @endif
                                            @if(!empty($teacher->course))
                                                <p><i class="fa fa-edit"></i> My Courses: {{ $teacher->course }}</p>
                                            @endif
                                        </div>

                                        @if(!empty($teacher->short_desc))
                                            <p>{!! $teacher->short_desc !!}</p>
                                        @elseif(!empty($teacher->desc))
                                            <p>{!! $teacher->desc !!}</p>
                                        @endif

                                        <div class="teacher-links">
                                            @if(!empty($teacher->facebook_url))
                                                <a href="{{ $teacher->facebook_url }}"><i class="fa fa-facebook"></i></a>
                                            @endif
                                            @if(!empty($teacher->google_url))
                                                <a href="{{ $teacher->google_url }}"><i class="fa fa-google-plus"></i></a>
                                            @endif
                                            @if(!empty($teacher->twitter_url))
                                                <a href="{{ $teacher->twitter_url }}"><i class="fa fa-twitter"></i></a>
                                            @endif
                                            @if(!empty($teacher->instagram_url))
                                                <a href="{{ $teacher->instagram_url }}"><i class="fa fa-instagram"></i></a>
                                            @endif
                                        </div>

                                        <a href="{{ url('teacher/'.$teacher->id) }}" class="button-default">View Profile</a>
                                    </div>
                                @endforeach
                            </div>

                        </div>   
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!--End of Teachers Area-->

    <!--Gallery Area Start-->
    @if($galleries && $galleries->count() > 0)
        <div class="gallery-area section-padding-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-title-wrapper">
                            <div class="section-title">
                                <h3>Our Gallery</h3>
                                <p>Discover Our Kindergarten Photo Gallery</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="filter-menu">
                            <ul>
                                <li class="filter" data-filter="all">All</li>
                                @foreach($galleries->pluck('groups')->unique() as $group)
                                    <li class="filter" data-filter=".{{ Str::slug($group) }}">
                                        {{ ucfirst($group) }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="gallery-row">
                    <div class="filter-items row">
                        @foreach($galleries as $gallery)
                            <div class="col-lg-3 col-md-6 col-sm-6 col-12 mb-18 mix single-items {{ Str::slug($gallery['groups']) }} overlay-hover">
                                <div class="overlay-effect">
                                    <a href="#">
                                        <img src="{{ $gallery['image'] }}" alt="{{ $gallery['title'] ?? 'Gallery' }}">
                                    </a>
                                    <div class="gallery-hover-effect">
                                        <a class="gallery-icon venobox" href="{{ $gallery['image'] }}">
                                            <i class="fa fa-image"></i>
                                        </a>
                                        <span class="gallery-text">{{ $gallery['title'] ?? ucfirst($gallery['groups']) }}</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="view-gallery text-center">
                            <h4>See Our Kindergarten <span>Photo Gallery!</span></h4>
                            <a href="{{ url('/gallery') }}" class="button-default">View Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <!--End of Gallery Area-->

    <!--Blog Area Start-->
    @if($blogs && $blogs->count() > 0)
        <div class="blog-area section-padding section-gray">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-title-wrapper">
                            <div class="section-title">
                                <h3>Our Blog</h3>
                                <p>Latest news &amp; events of our school</p>
                            </div>
                        </div> 
                    </div>
                </div>

                @if($blogs->count() > 2)
                    <div class="blog-carousel carousel-style-one owl-carousel">
                        @foreach($blogs as $blog)
                            <div class="single-blog-item overlay-hover">
                                
                                <div class="single-blog-image">
                                    <div class="overlay-effect">
                                        <a href="{{ url('blog-details/'.$blog['id']) }}">
                                            <img src="{{ $blog['image'] }}" alt="{{ $blog['title'] }}">
                                            @if(!empty($blog['date']))
                                                @php
                                                    $date = \Carbon\Carbon::parse($blog['date']);
                                                @endphp
                                                <span class="class-date">
                                                    {{ $date->format('M d') }} <span>{{ $date->format('Y') }}</span>
                                                </span>
                                            @endif
                                        </a>
                                    </div>    
                                </div>

                                <div class="single-blog-text">
                                    <h4>
                                        <a href="{{ url('blog-details/'.$blog['id']) }}">
                                            {{ $blog['title'] }}
                                        </a>
                                    </h4>

                                    <div class="blog-date">
                                        @if(!empty($blog['date']))
                                            <span><i class="fa fa-calendar"></i> {{ \Carbon\Carbon::parse($blog['date'])->format('d M, Y') }}</span>
                                        @endif
                                    </div>

                                    @if(!empty($blog['short_desc']))
                                        <p>{!! Str::limit(strip_tags($blog['short_desc']), 150) !!}</p>
                                    @endif

                                    <a href="{{ url('/blog-details/'.$blog['id']) }}">Read more.</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="row">
                        @foreach($blogs as $blog)
                            <div class="col-lg-4 col-md-6">
                                <div class="single-blog-item overlay-hover">
                                    
                                    <div class="single-blog-image">
                                        <div class="overlay-effect">
                                            <a href="{{ url('blog-details/'.$blog['id']) }}">
                                                <img src="{{ $blog['image'] }}" alt="{{ $blog['title'] }}">
                                                @if(!empty($blog['date']))
                                                    @php
                                                        $date = \Carbon\Carbon::parse($blog['date']);
                                                    @endphp
                                                    <span class="class-date">
                                                        {{ $date->format('M d') }} <span>{{ $date->format('Y') }}</span>
                                                    </span>
                                                @endif
                                            </a>
                                        </div>    
                                    </div>

                                    <div class="single-blog-text">
                                        <h4>
                                            <a href="{{ url('blog-details/'.$blog['id']) }}">
                                                {{ $blog['title'] }}
                                            </a>
                                        </h4>

                                        <div class="blog-date">
                                            @if(!empty($blog['date']))
                                                <span><i class="fa fa-calendar"></i> {{ \Carbon\Carbon::parse($blog['date'])->format('d M, Y') }}</span>
                                            @endif
                                        </div>

                                        @if(!empty($blog['short_desc']))
                                            <p>{!! Str::limit(strip_tags($blog['short_desc']), 150) !!}</p>
                                        @endif

                                        <a href="{{ url('/blog-details/'.$blog['id']) }}">Read more.</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                        @for($i = $blogs->count(); $i < 3; $i++)
                            <div class="col-lg-4 col-md-6"></div>
                        @endfor
                    </div>
                @endif
            </div>
        </div>
    @endif
    <!--End of Blog Area-->

    <!--Testimonial Carousel Area Start-->
    @if($testimonials->isNotEmpty())
        <div class="testimonial-carousel-area section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-title-wrapper title-yellow text-center">
                            <div class="section-title">
                                <h3>{{ $title ?? 'Our Testimonials' }}</h3>
                                <p></p>
                                <!-- <p>{{ $subtitle ?? 'What real people say about Education TechEdu' }}</p> -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="testimonial-carousel carousel-style-one owl-carousel">
                    @foreach($testimonials as $t)
                        <div class="single-testimonial-carousel">
                            <div class="testimonial-card">
                                <div class="testimonial-content">
                                    <h4 class="testimonial-title">{{ $t['title'] }}</h4>
                                    <p class="testimonial-desc">{!! $t['desc'] !!}</p>
                                </div>

                                <div class="testimonial-author">
                                    <div class="author-image">
                                        <img src="{{ $t['image'] }}" alt="{{ $t['name'] }}">
                                    </div>
                                    <div class="author-info">
                                        <h5>{{ $t['name'] }}</h5>
                                        <span>{{ $t['desination'] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    <!--End of Testimonial Carousel Area-->

    <!--Google Map Area Start -->
    @if(isset($setting)  && !empty($setting['embed_url']))
        <div class="google-map-area">
            <div id="contacts" class="map-area">
                <iframe
                    src="{{ $setting['embed_url'] ?? '' }}"
                    width="100%"
                    height="600px"
                    style="border:0;"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    @endif
    <!--End of Google Map Area-->

@endsection

@section('script')

    <script src="{{  asset('assets/themes/six/js/jquery.nivo.slider.pack.min.js') }}"></script>

    <script>
        $(window).on('load', function() {
            $('#nivoslider').nivoSlider({
                effect: 'fade',
                pauseTime: 5000,
                // animSpeed: 600,
                pauseOnHover: true,
                directionNav: true,
                controlNav: false
            });
        });

        $(function () {
            var $carousel = $('.testimonial-carousel');

            if ($carousel.hasClass('owl-loaded')) {
                $carousel.trigger('destroy.owl.carousel');
                // unwrap the structure Owl added
                $carousel.find('.owl-stage-outer').children().unwrap();
                $carousel.removeClass('owl-loaded owl-center owl-text-select-on');
                $carousel.find('.owl-stage, .owl-item').remove();
            }

            var itemCount = $carousel.find('.single-testimonial-carousel').length;
            var single = itemCount <= 1;

            console.log('Testimonial items:', itemCount, 'single?', single);

        
        if (!$carousel.hasClass('owl-loaded')) {
            $carousel.owlCarousel({
                items: 1,
                loop: !single,
                nav: false,
                dots: !single,
                margin: 30,
                autoplay: !single,
                mouseDrag: !single,
                touchDrag: !single,
                pullDrag: !single
            });
        }
    });
    </script>

@endsection