@extends('frontend::layouts.app')

@section('title', 'Academics - WBU - World Buddhist University')

@section('content')
    <section class="gradient-green" id="page-title">
        <div class="container">
            <div class="page-title">
                <h1>{{ $data['academy']['title'] ?? '' }}</h1>
            </div>
            <div class="breadcrumb">
                <ul>
                    <li><a href="{{ mwz_route('frontend.index') }}">{{ __('frontend::common.home') }}</a></li>
                    <li class="active">{{ $data['academy']['name'] ?? '' }}</li>
                </ul>
            </div>
        </div>
    </section>

    <div class="bg-wrapper" style="background: url('{{ asset('assets/frontend/images/bg-dots.jpg') }}') center top; background-size: contain;">
        @foreach ($data['academics']['list'] as $key => $academic)
            <section class="py-16 md:py-24 sect-academics-{{ $key + 1 }}">
                <div class="mx-auto max-w-7xl px-6 lg:px-8">
                    <div class="grid md:grid-cols-2 gap-12 items-center academic-row">
                        @if ($key % 2 == 0)
                            <div class="relative h-[300px] md:h-[400px] bg-accent rounded-lg overflow-hidden academic-image-wrap">
                                <img class="object-cover w-full h-full" src="{{ $academic['image'] ?? '' }}" alt="{{ $academic['title'] ?? '' }}">
                            </div>
                        @endif
                        <div class="academic-content">
                            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">{{ $academic['name'] ?? '' }}</h2>
                            <p>{{ $academic['desc'] ?? '' }}</p>
                            <a class="a-btn btn-bg" href="{{ $academic['url'] ?? '#' }}" aria-label="Learn more about the connection ">
                                <span class="a-btn__text">{{ __('frontend::common.view_more') }}</span>
                            </a>
                        </div>
                        @if ($key % 2 == 1)
                            <div class="relative h-[300px] md:h-[400px] bg-accent rounded-lg overflow-hidden academic-image-wrap">
                                <img class="object-cover w-full h-full" src="{{ $academic['image'] ?? '' }}" alt="{{ $academic['title'] ?? '' }}">
                            </div>
                        @endif
                    </div>
                    <div class="hr-title"></div>
                </div>
            </section>
        @endforeach
    </div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const scrollContainer = document.getElementById('programs-scroll');
        const prevBtn = document.getElementById('programs-prev');
        const nextBtn = document.getElementById('programs-next');

        function checkScroll() {
            if (!scrollContainer) return;
            const {
                scrollLeft,
                scrollWidth,
                clientWidth
            } = scrollContainer;
            if (prevBtn) {
                prevBtn.disabled = scrollLeft <= 0;
            }
            if (nextBtn) {
                nextBtn.disabled = scrollLeft >= scrollWidth - clientWidth - 10;
            }
        }

        function scroll(direction) {
            if (!scrollContainer) return;
            const scrollAmount = 320;
            scrollContainer.scrollBy({
                left: direction === 'left' ? -scrollAmount : scrollAmount,
                behavior: 'smooth'
            });
            setTimeout(checkScroll, 300);
        }
        if (scrollContainer) {
            scrollContainer.addEventListener('scroll', checkScroll);
            checkScroll();
        }
        if (prevBtn) {
            prevBtn.addEventListener('click', () => scroll('left'));
        }
        if (nextBtn) {
            nextBtn.addEventListener('click', () => scroll('right'));
        }
    });
</script>

<style>
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
</style>