@extends('frontend.layouts.app')
@section('title', 'Sitemap Title')
@section('meta', 'Sitemap Meta Description')
@section('content')
    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px] ">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">
                        Site Map
                    </h3>
                    <div class="flex space-x-2 lg:space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">
                            Home </a>
                        <p class="text-white text-base font-bold">></p>
                        <p class="text-white font-bold">
                            Site Map </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Content Section -->
    <section
        class="min-h-[60vh] flex flex-col py-12 px-4 md:px-8 lg:px-16 mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
        <!-- Heading -->
        <div class="text-center mb-12 max-w-4xl mx-auto">
            <p
                class="inline-block px-4 py-1 mb-4 text-xs sm:text-sm font-semibold tracking-wider uppercase  text-green-700">
                Explore all sections of our website at a glance
            </p>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-green-800 mb-4">
                Site Map
            </h2>
            <p class="text-gray-700 text-base lg:text-lg">
                {{ __('contact-us.contact_form_description') }}
            </p>
        </div>

        <!-- Top-level pages without children -->
        <div class="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 mb-12">
            <a href="/"
                class="group bg-white rounded-xl shadow-sm hover:bg-green-700 group-hover:text-white hover:shadow-lg transition p-6 flex items-center justify-center text-center">
                <span class="text-green-800 group-hover:text-white font-semibold text-lg transition">
                    Home Page
                </span>
            </a>
            @foreach ($menus->where('parent_id', null) as $parent)
                @php
                    $hasChildren = $menus->where('parent_id', $parent->id)->count() > 0;
                @endphp
                @if (!$hasChildren)
                    <a href="{{ url($parent->slug) }}"
                        class="group bg-white rounded-xl shadow-sm hover:bg-green-700 group-hover:text-white hover:shadow-lg transition p-6 flex items-center justify-center text-center">
                        <span class="text-green-800 group-hover:text-white font-semibold text-lg transition">
                            {{ $parent->name_en }}
                        </span>
                    </a>
                @endif
            @endforeach
        </div>

        <!-- Parent pages with children -->
        <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($menus->where('parent_id', null) as $parent)
                @php
                    $hasChildren = $menus->where('parent_id', $parent->id)->count() > 0;
                @endphp

                @if ($hasChildren)
                    <div
                        class="group bg-white rounded-2xl shadow-md hover:shadow-xl border border-gray-100 transition duration-300 p-6">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-xl font-semibold text-green-700">
                                <a href="{{ url($parent->slug) }}" class="hover:text-green-800 transition">
                                    {{ $parent->name_en }}
                                </a>
                            </h3>
                            <span class="text-green-600 group-hover:rotate-90 transition duration-300">
                                ➤
                            </span>
                        </div>

                        {{-- CHILDREN --}}
                        <ul class="space-y-2 ml-2 border-l-2 border-green-100 pl-4 text-start">
                            @foreach ($menus->where('parent_id', $parent->id) as $child)
                                <li>
                                    <a href="{{ url($child->slug) }}"
                                        class="text-gray-700 hover:text-green-700 transition font-medium">
                                        • {{ $child->name_en }}
                                    </a>

                                    {{-- GRANDCHILDREN --}}
                                    @if ($menus->where('parent_id', $child->id)->count() > 0)
                                        <ul class="ml-4 mt-1 space-y-1 border-l border-gray-200 pl-3">
                                            @foreach ($menus->where('parent_id', $child->id) as $grandchild)
                                                <li>
                                                    <a href="{{ url($grandchild->slug) }}"
                                                        class="text-sm text-gray-600 hover:text-green-600 transition">
                                                        → {{ $grandchild->name_en }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            @endforeach
        </div>
    </section>

@endsection

@push('scripts')
@endpush