@extends('layouts.app')

@section('title', 'News')

@section('content')

<!-- =========================================================
     HERO SLIDER
========================================================= -->

<section
    id="hero-slider"
    class="relative w-full overflow-hidden bg-primary"
>

    @php

        $slides = collect($heroSlides ?? []);

        if ($slides->isEmpty()) {

            $slides = collect([
                [
                    'image' => $settings->hero_image ?? null,

                    'title' =>
                        'Building Excellence. Shaping Future Leaders.',

                    'description' =>
                        $settings->about_summary ??
                        'We nurture young minds through quality education, character development and a safe, inspiring learning environment.',

                    'button_text' =>
                        'Explore Our School',

                    'button_url' =>
                        '/about',

                    'secondary_text' =>
                        'Contact Us',

                    'secondary_url' =>
                        '/contact',
                ]
            ]);

        }

    @endphp


    <div
        id="hero-slides"
        class="relative w-full"
    >

        @foreach($slides as $index => $slide)

            @php

                $slideImage = is_array($slide)
                    ? ($slide['image'] ?? null)
                    : ($slide->image ?? null);

                $slideTitle = is_array($slide)
                    ? (
                        $slide['title']
                        ?? 'Building Excellence. Shaping Future Leaders.'
                    )
                    : (
                        $slide->title
                        ?? 'Building Excellence. Shaping Future Leaders.'
                    );

                $slideDescription = is_array($slide)
                    ? ($slide['description'] ?? '')
                    : ($slide->description ?? '');

                $buttonText = is_array($slide)
                    ? ($slide['button_text'] ?? 'Explore Our School')
                    : ($slide->button_text ?? 'Explore Our School');

                $buttonUrl = is_array($slide)
                    ? ($slide['button_url'] ?? '/about')
                    : ($slide->button_url ?? '/about');

                $secondaryText = is_array($slide)
                    ? ($slide['secondary_text'] ?? 'Contact Us')
                    : ($slide->secondary_text ?? 'Contact Us');

                $secondaryUrl = is_array($slide)
                    ? ($slide['secondary_url'] ?? '/contact')
                    : ($slide->secondary_url ?? '/contact');

                $imageUrl = $slideImage
                    ? asset('storage/' . $slideImage)
                    : 'https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1920';

            @endphp


            <div
                class="hero-slide {{ $index === 0 ? '' : 'hidden' }} relative w-full"
                data-slide="{{ $index }}"
            >

                <img
                    src="{{ $imageUrl }}"
                    alt="{{ $slideTitle }}"
                    class="w-full h-[500px] md:h-[600px] lg:h-[650px] object-cover"
                >


                <!-- DARK OVERLAY -->

                <div
                    class="absolute inset-0 bg-black/40"
                ></div>


                <!-- HERO CONTENT -->

                <div
                    class="absolute inset-0 flex items-center"
                >

                    <div
                        class="container mx-auto px-6 md:px-10 lg:px-16"
                    >

                        <div
                            class="max-w-2xl"
                        >

                            <div
                                class="inline-block bg-primary px-4 py-2 rounded-md text-white font-bold uppercase tracking-widest text-xs md:text-sm mb-5 shadow-md"
                            >

                                {{ $settings->school_name ?? 'Pearl School' }}

                            </div>


                            <h1
                                class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight text-white drop-shadow-lg"
                            >

                                {{ $slideTitle }}

                            </h1>


                            @if($slideDescription)

                                <p
                                    class="mt-6 text-lg md:text-xl leading-relaxed text-white max-w-xl drop-shadow-md"
                                >

                                    {{ $slideDescription }}

                                </p>

                            @endif


                            <div
                                class="mt-8 flex flex-wrap gap-4"
                            >

                                <a
                                    href="{{ $buttonUrl }}"
                                    class="inline-flex items-center gap-3 bg-secondary text-white font-bold px-7 py-4 rounded-lg hover:opacity-90 transition shadow-lg"
                                >

                                    {{ $buttonText }}

                                    <span class="text-xl">
                                        →
                                    </span>

                                </a>


                                <a
                                    href="{{ $secondaryUrl }}"
                                    class="inline-flex items-center gap-3 bg-white text-primary font-bold px-7 py-4 rounded-lg hover:bg-gray-100 transition shadow-lg"
                                >

                                    {{ $secondaryText }}

                                    <span>
                                        →
                                    </span>

                                </a>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        @endforeach


        @if($slides->count() > 1)

            <!-- PREVIOUS -->

            <button
                type="button"
                id="hero-prev"
                class="absolute left-5 md:left-8 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-primary/90 text-white flex items-center justify-center hover:bg-primary transition z-20 shadow-lg"
                aria-label="Previous slide"
            >

                <span class="text-3xl leading-none">
                    ‹
                </span>

            </button>


            <!-- NEXT -->

            <button
                type="button"
                id="hero-next"
                class="absolute right-5 md:right-8 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-primary/90 text-white flex items-center justify-center hover:bg-primary transition z-20 shadow-lg"
                aria-label="Next slide"
            >

                <span class="text-3xl leading-none">
                    ›
                </span>

            </button>


            <!-- DOTS -->

            <div
                id="hero-dots"
                class="absolute bottom-7 left-1/2 -translate-x-1/2 flex gap-3 z-20"
            >

                @foreach($slides as $index => $slide)

                    <button
                        type="button"
                        data-dot="{{ $index }}"
                        class="hero-dot w-3 h-3 rounded-full border-2 border-white transition {{ $index === 0 ? 'bg-secondary' : 'bg-white/50' }}"
                        aria-label="Go to slide {{ $index + 1 }}"
                    ></button>

                @endforeach

            </div>

        @endif

    </div>

</section>


<!-- =========================================================
     NEWS HEADER
========================================================= -->

<section class="bg-white py-14 md:py-16">

    <div class="container mx-auto px-6">

        <div class="max-w-3xl mx-auto text-center">

            <div
                class="text-secondary font-bold uppercase tracking-wider text-sm"
            >
                School News & Updates
            </div>


            <div
                class="w-12 h-1 bg-secondary mx-auto mt-3 mb-5"
            ></div>


            <h1
                class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-primary"
            >
                News & Updates
            </h1>


            <p
                class="mt-5 text-gray-600 text-base md:text-lg leading-8"
            >

                Stay informed about the latest activities, achievements,
                announcements, events and important updates from
                {{ $settings->school_name ?? 'Pearl Schools' }}.

            </p>

        </div>

    </div>

</section>


<!-- =========================================================
     NEWS ARTICLES
========================================================= -->

<section class="bg-gray-50 py-14 md:py-16">

    <div class="container mx-auto px-6">

        @if($posts->count())

            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-7">

                @foreach($posts as $post)

                    <article
                        class="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-xl transition duration-300"
                    >

                        @if($post->featured_image)

                            <a
                                href="{{ route('news.show', $post->slug) }}"
                                class="block overflow-hidden"
                            >

                                <img
                                    src="{{ asset('storage/' . $post->featured_image) }}"
                                    alt="{{ $post->title }}"
                                    class="w-full h-56 object-cover hover:scale-105 transition duration-500"
                                >

                            </a>

                        @else

                            <div
                                class="w-full h-56 bg-primary flex items-center justify-center"
                            >

                                <span
                                    class="text-white text-lg font-bold"
                                >
                                    {{ $settings->school_name ?? 'Pearl Schools' }}

                                </span>

                            </div>

                        @endif


                        <div class="p-6">

                            @if($post->published_date)

                                <div
                                    class="text-sm text-secondary font-semibold mb-3"
                                >

                                    {{ $post->published_date->format('M d, Y') }}

                                </div>

                            @endif


                            <h2
                                class="text-xl md:text-2xl font-bold text-primary leading-tight"
                            >

                                {{ $post->title }}

                            </h2>


                            <p
                                class="mt-4 text-gray-600 leading-7"
                            >

                                {{ Str::limit(strip_tags($post->content), 150) }}

                            </p>


                            <a
                                href="{{ route('news.show', $post->slug) }}"
                                class="inline-flex items-center gap-2 mt-5 text-secondary font-bold hover:underline"
                            >

                                Read More

                                <span>
                                    →
                                </span>

                            </a>

                        </div>

                    </article>

                @endforeach

            </div>


            <!-- PAGINATION -->

            <div class="mt-12">

                {{ $posts->links() }}

            </div>

        @else

            <div
                class="bg-white rounded-2xl p-12 text-center shadow-sm border border-gray-100"
            >

                <div
                    class="text-5xl mb-5"
                >
                    📰
                </div>


                <h2
                    class="text-2xl font-bold text-primary"
                >
                    No News Yet
                </h2>


                <p
                    class="mt-3 text-gray-600"
                >

                    There are currently no published news articles.
                    Please check back soon.

                </p>

            </div>

        @endif

    </div>

</section>


<!-- =========================================================
     HERO SLIDER JAVASCRIPT
========================================================= -->

@push('scripts')

<script>

document.addEventListener('DOMContentLoaded', function () {

    const slides =
        document.querySelectorAll('.hero-slide');

    const dots =
        document.querySelectorAll('.hero-dot');

    const previousButton =
        document.getElementById('hero-prev');

    const nextButton =
        document.getElementById('hero-next');


    if (!slides.length || slides.length <= 1) {
        return;
    }


    let currentSlide = 0;

    let autoSlide;


    function showSlide(index) {

        if (index < 0) {
            index = slides.length - 1;
        }


        if (index >= slides.length) {
            index = 0;
        }


        slides.forEach(function (slide, slideIndex) {

            if (slideIndex === index) {

                slide.classList.remove('hidden');

            } else {

                slide.classList.add('hidden');

            }

        });


        dots.forEach(function (dot, dotIndex) {

            if (dotIndex === index) {

                dot.classList.remove('bg-white/50');

                dot.classList.add('bg-secondary');

            } else {

                dot.classList.remove('bg-secondary');

                dot.classList.add('bg-white/50');

            }

        });


        currentSlide = index;

    }


    function nextSlide() {

        showSlide(currentSlide + 1);

    }


    function previousSlide() {

        showSlide(currentSlide - 1);

    }


    function startAutoSlide() {

        clearInterval(autoSlide);

        autoSlide = setInterval(
            nextSlide,
            6000
        );

    }


    if (nextButton) {

        nextButton.addEventListener(
            'click',
            function () {

                nextSlide();

                startAutoSlide();

            }
        );

    }


    if (previousButton) {

        previousButton.addEventListener(
            'click',
            function () {

                previousSlide();

                startAutoSlide();

            }
        );

    }


    dots.forEach(function (dot, index) {

        dot.addEventListener(
            'click',
            function () {

                showSlide(index);

                startAutoSlide();

            }
        );

    });


    showSlide(0);

    startAutoSlide();

});

</script>

@endpush

@endsection