@extends('frontend.layouts.app')
@section('title', 'Major Activities')
@section('meta', 'Major Activities')
@section('content')


    <section class="relative mt-10 pt-[120px]">
        <div class="relative h-40 lg:h-52 w-full">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="w-full h-full object-cover rounded-none">


            <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-black/30"></div>


            <div class="absolute inset-0 flex items-center px-6 lg:px-10">
                <div>
                    <h3 class="text-2xl lg:text-3xl font-extrabold text-white">
                        {{ __('major-activities.major_activities') }}
                    </h3>

                    <div class="flex items-center space-x-2 text-white mt-2">
                        <a href="{{ route('homepage') }}" class="font-semibold hover:text-primary transition">
                            {{ __('major-activities.home') }}
                        </a>
                        <span class="font-bold">/</span>
                        <span class="font-semibold">
                            {{ __('major-activities.major_activities') }} </span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Content Section -->
    <section class="min-h-[60vh] py-16">
        <div class="mb-18 text-center mx-auto md:mb-12 max-w-8xl pt-8">
            <!-- Subtitle -->
            <p
                class="inline-block px-3 py-1 mb-4 text-xs sm:text-sm font-semibold tracking-wider text-primary uppercase rounded-full">
                {{ __('major-activities.key_initiatives') }}
            </p>

            <!-- Main Title -->
            <h2 class="mb-6 text-2xl sm:text-3xl md:text-4xl font-extrabold text-center text-primary leading-tight">
                <span class="relative text-[#007300]">
                    <svg viewBox="0 0 52 24" fill="currentColor"
                        class="absolute top-0 left-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:block">
                        <defs>
                            <pattern id="field-activities-pattern" x="0" y="0" width=".135" height=".30">
                                <circle cx="1" cy="1" r=".7"></circle>
                            </pattern>
                        </defs>
                        <rect fill="url(#field-activities-pattern)" width="52" height="24"></rect>
                    </svg>
                    <span class="relative">{{ __('major-activities.major_activities') }}</span>
                </span>
            </h2>

            <!-- Description -->
            <p class="text-gray-700 text-base lg:text-lg max-w-4xl mx-auto leading-relaxed">
                {{ __('major-activities.major_activities_description') }}
            </p>
        </div>

        <!-- Activities Section -->
        <div class="flex flex-wrap justify-center gap-6">
            @foreach ($majorActivities as $activity)
                <div
                    class="bg-white shadow-md rounded-lg p-6 flex flex-col sm:flex-row items-start gap-4 w-full sm:w-[400px] md:w-[460px] lg:w-[480px]">
                    <!-- Order Circle -->
                    <div
                        class="flex items-center justify-center w-12 h-12 bg-[#007300] text-white font-bold rounded-full text-base flex-shrink-0">
                        {{ $activity->display_order }}
                    </div>

                    <!-- Description with Read More / Read Less -->
                    <div class="flex-1">
                        @php
                            $desc = app()->getLocale() == 'np' ? $activity->description_np : $activity->description_en;
                            $limit = 120;
                            $shortDesc =
                                strlen(strip_tags($desc)) > $limit
                                    ? substr(strip_tags($desc), 0, $limit) . '...'
                                    : strip_tags($desc);
                        @endphp

                        <div class="text-gray-700 text-justify font-medium text-base leading-relaxed">
                            <span class="short-desc">{!! $shortDesc !!}</span>
                            @if (strlen(strip_tags($desc)) > $limit)
                                <span class="full-desc hidden">{!! $desc !!}</span><br>
                                <button class="read-more-btn text-primary font-semibold mt-1 hover:underline">Read
                                    More</button>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('.read-more-btn');
            buttons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const container = btn.parentElement;
                    const shortDesc = container.querySelector('.short-desc');
                    const fullDesc = container.querySelector('.full-desc');

                    if (fullDesc.classList.contains('hidden')) {
                        fullDesc.classList.remove('hidden');
                        shortDesc.classList.add('hidden');
                        btn.textContent = 'Read Less';
                    } else {
                        fullDesc.classList.add('hidden');
                        shortDesc.classList.remove('hidden');
                        btn.textContent = 'Read More';
                    }
                });
            });
        });
    </script>
@endpush