@extends('layouts.frontend.master')

@section('title', 'BAU 2001–2002 Alumni Association')

@section('content')
    <div class="container bg-white mx-auto mt-8 p-4 max-w-10xl">
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200">
            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500">
                <li class="mr-2">
                    <button class="tab-button inline-block p-4 border-b-2 rounded-t-lg" data-tab-target="#personal-info" aria-selected="true">
                        Personal Information
                    </button>
                </li>
                <li class="mr-2">
                    <button class="tab-button inline-block p-4 border-b-2 rounded-t-lg" data-tab-target="#attachment">
                        Photo Upload/Attachment
                    </button>
                </li>
                <li class="mr-2">
                    <button class="tab-button inline-block p-4 border-b-2 rounded-t-lg" data-tab-target="#education">
                        Educational Qualification
                    </button>
                </li>
                <li class="mr-2">
                    <button class="tab-button inline-block p-4 border-b-2 rounded-t-lg" data-tab-target="#address">
                        Address
                    </button>
                </li>
                <li class="mr-2">
                    <button class="tab-button inline-block p-4 border-b-2 rounded-t-lg" data-tab-target="#family">
                        Family Information
                    </button>
                </li>
            </ul>
        </div>

        <!-- Tab Content -->
        <div class="space-y-4 mt-4">
            <div id="personal-info" class="tab-content">
                @include('User.personal_information')
            </div>
            <div id="education" class="tab-content hidden">
                @include('User.education')
            </div>
            <div id="address" class="tab-content hidden">
                @include('User.address')
            </div>
            <div id="family" class="tab-content hidden">
                @include('User.family-information')
            </div>
            <div id="attachment" class="tab-content hidden">
                @include('User.attachment')
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', () => {
                // Get the target tab content
                const targetId = button.getAttribute('data-tab-target');

                // Remove active states from all buttons
                document.querySelectorAll('.tab-button').forEach(btn => {
                    btn.classList.remove('text-blue-600', 'border-blue-600');
                    btn.classList.add('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
                    btn.setAttribute('aria-selected', 'false');
                });

                // Add active state to clicked button
                button.classList.remove('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
                button.classList.add('text-blue-600', 'border-blue-600');
                button.setAttribute('aria-selected', 'true');

                // Hide all tab contents
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.add('hidden');
                });

                // Show selected tab content
                const targetContent = document.querySelector(targetId);
                targetContent.classList.remove('hidden');
            });
        });
    </script>
@endpush