@extends('layouts.app')

@section('title', 'Member Directory Hierarchy - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">HIERARCHY</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">District Member <span style="color: var(--gold-light);">Directory</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Tree structure -->
<section class="section-pad" style="background: var(--white);">
    <div class="container" style="max-width: 900px;">
        <p style="text-align: center; color: var(--gray-500); margin-bottom: 40px; font-size: 1rem; line-height: 1.6;">Browse active members, coaches, and clubs across the 12 districts of Lumbini Province.</p>

        <div style="display: flex; flex-direction: column; gap: 16px;">
            @foreach($districts as $district)
            <div style="border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; background: var(--off-white);">
                <!-- District Header Accordion Trigger -->
                <button onclick="toggleTreeAccordion('district-{{ $district->id }}', this)" style="width: 100%; border: none; background: linear-gradient(90deg, var(--blue), var(--blue-mid)); color: white; padding: 18px 24px; text-align: left; font-family: 'Oswald', sans-serif; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: var(--transition);">
                    <span><i class="fas fa-map-marker-alt" style="color: var(--gold-light); margin-right: 10px;"></i> {{ $district->name }} District</span>
                    <span style="font-size: 0.85rem; background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: 50px; display: flex; align-items: center; gap: 6px;">
                        {{ $district->clubs->count() }} Clubs <i class="fas fa-chevron-down"></i>
                    </span>
                </button>
                
                <!-- Collapsible body -->
                <div id="district-{{ $district->id }}" style="display: none; padding: 20px 24px; border-top: 1px solid var(--gray-200); background: white;">
                    @if($district->clubs->count() > 0)
                        @foreach($district->clubs as $club)
                        <div style="border-left: 2px dashed var(--gray-200); padding-left: 20px; margin-bottom: 24px; position: relative;">
                            <!-- Dojo title -->
                            <h4 style="font-family: 'Oswald', sans-serif; font-size: 1.05rem; color: var(--blue); margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
                                <i class="fas fa-door-open" style="color: var(--red);"></i> {{ $club->name }}
                            </h4>
                            <p style="font-size: 0.8rem; color: var(--gray-500); margin-bottom: 12px;"><i class="fas fa-map-marker-alt"></i> Address: {{ $club->address ?? 'N/A' }}</p>

                            <!-- Coaches list -->
                            <div style="margin-bottom: 10px;">
                                <span style="font-size: 0.72rem; color: var(--gray-500); font-weight: 700; text-transform: uppercase;">Coaches:</span>
                                @if($club->coaches->count() > 0)
                                    <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;">
                                        @foreach($club->coaches as $coach)
                                        <span class="badge badge-red" style="font-size: 0.7rem; padding: 6px 12px;"><i class="fas fa-user-tie"></i> {{ $coach->name }} ({{ $coach->qualification }})</span>
                                        @endforeach
                                    </div>
                                @else
                                    <span style="font-size: 0.78rem; color: var(--gray-500); font-style: italic; display: block; margin-top: 2px;">No coaches registered for this club.</span>
                                @endif
                            </div>

                            <!-- Members list -->
                            <div>
                                <span style="font-size: 0.72rem; color: var(--gray-500); font-weight: 700; text-transform: uppercase;">Active Athletes:</span>
                                @if($club->members->count() > 0)
                                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px;">
                                        @foreach($club->members as $m)
                                        <div style="background: var(--off-white); border: 1px solid var(--gray-200); border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between;">
                                            <span style="font-size: 0.85rem; font-weight: 600; color: var(--blue);">{{ $m->full_name }}</span>
                                            <span style="font-size: 0.75rem; color: var(--gray-500); background: var(--gray-200); padding: 2px 8px; border-radius: 4px;">{{ $m->belt_rank }}</span>
                                        </div>
                                        @endforeach
                                    </div>
                                @else
                                    <span style="font-size: 0.78rem; color: var(--gray-500); font-style: italic; display: block; margin-top: 2px;">No active members registered.</span>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    @else
                        <p style="font-size: 0.88rem; color: var(--gray-500); text-align: center; padding: 12px;">No clubs registered in this district.</p>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<script>
function toggleTreeAccordion(id, btn) {
    const el = document.getElementById(id);
    const arrow = btn.querySelector('.fa-chevron-down, .fa-chevron-up');
    
    if (el.style.display === 'none' || el.style.display === '') {
        el.style.display = 'block';
        if (arrow) {
            arrow.classList.remove('fa-chevron-down');
            arrow.classList.add('fa-chevron-up');
        }
    } else {
        el.style.display = 'none';
        if (arrow) {
            arrow.classList.remove('fa-chevron-up');
            arrow.classList.add('fa-chevron-down');
        }
    }
}

// Auto-expand district accordion on page load from URL hash (e.g. #district-3)
window.addEventListener('DOMContentLoaded', () => {
    const hash = window.location.hash;
    if (hash && hash.startsWith('#district-')) {
        const id = hash.substring(1);
        const el = document.getElementById(id);
        if (el) {
            el.style.display = 'block';
            const btn = el.previousElementSibling;
            if (btn && btn.tagName === 'BUTTON') {
                const arrow = btn.querySelector('.fa-chevron-down, .fa-chevron-up');
                if (arrow) {
                    arrow.classList.remove('fa-chevron-down');
                    arrow.classList.add('fa-chevron-up');
                }
            }
            setTimeout(() => {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 300);
        }
    }
});
</script>

@endsection