@php use App\Models\UserManagement\User;use Carbon\Carbon; @endphp
@extends('layouts.frontend.master')

@section('title', 'Committees - BAU 2001–2002 Alumni Association')
@push('css')
    <link rel="stylesheet" href="{{asset('assets/committee/index.css')}}">
    <link rel="stylesheet" href="{{asset('assets/committee/custom.css')}}">
@endpush

@section('content')
    <!-- Committees Section -->
    <section class="bg-gray-50">
        <div id="root">
            <div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events: none;">
                <ol tabindex="-1"
                    class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol>
            </div>
            <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">

                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                    <div class="flex items-center mb-6"><a
                            class="flex items-center text-blue-600 hover:text-blue-700 transition-colors" href="/">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" class="lucide lucide-arrow-left h-4 w-4 mr-1">
                                <path d="m12 19-7-7 7-7"></path>
                                <path d="M19 12H5"></path>
                            </svg>
                            Back to Home</a></div>
                    <div class="text-center mb-12"><h1 class="text-4xl font-bold text-gray-900 mb-4">Alumni
                            Committees</h1>
                        <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-6">Join one of our specialized committees
                            organized by focus areas. Each focus area contains dedicated committees that work together
                            to achieve specific goals and initiatives.</p>
                        <div class="flex justify-center items-center space-x-6 text-sm text-gray-500">
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="lucide lucide-users h-5 w-5 mr-2 text-blue-600">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                <span>{{ $focusAreaInfos->count() }} Focus Areas</span>
                            </div>
                        </div>
                    </div>
                    <div dir="ltr" data-orientation="horizontal" class="w-full">
                        <div class="overflow-x-auto">
                            <div role="tablist" aria-orientation="horizontal"
                                 class="items-center justify-center rounded-md bg-muted text-muted-foreground grid grid-cols-3 lg:grid-cols-6 gap-1 h-auto p-2 mb-8 min-w-max"
                                 tabindex="0" data-orientation="horizontal" style="outline: none;">

                                <!-- Static All Committees Button -->
                                <button type="button" role="tab" aria-selected="true"
                                        aria-controls="radix-:rr:-content-all" data-state="active"
                                        id="radix-:rr:-trigger-all"
                                        class="inline-flex items-center justify-center whitespace-nowrap rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm text-sm px-4 py-2"
                                        tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">All
                                    Committees
                                </button>

                                <!-- Dynamic Focus Areas -->
                                @foreach($focusAreaInfos as $focusArea)
                                    <button type="button" role="tab" aria-selected="false"
                                            aria-controls="radix-:rr:-content-{{ $focusArea->id }}"
                                            data-state="inactive"
                                            id="radix-:rr:-trigger-{{ $focusArea->id }}"
                                            class="inline-flex items-center justify-center rounded-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm text-sm px-4 py-2 whitespace-nowrap"
                                            tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">
                                        {{ $focusArea->name }}
                                    </button>
                                @endforeach

                            </div>
                        </div>

                        <div data-state="active" data-orientation="horizontal" role="tabpanel"
                             aria-labelledby="radix-:rr:-trigger-all" id="radix-:rr:-content-all" tabindex="0"
                             class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-8"
                             style="animation-duration: 0s;">
                            <div class="text-center mb-6"><h2 class="text-2xl font-semibold text-gray-900 mb-2">All
                                    Committees</h2>
                                <p class="text-gray-600">Explore all our committees organized by focus areas.</p></div>
                            @foreach($focusAreaInfos ?? [] as $focusArea)
                                <div class="mb-12">
                                    <div class="text-center mb-6">
                                        <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $focusArea->name }}</h3>
                                        <p class="text-gray-600">{{ $focusArea->description }}</p>
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                        @foreach($focusArea->grouped_committee_members ?? [] as $group)
                                            <div
                                                class="rounded-lg border bg-card text-card-foreground shadow-sm h-full hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                                                <div class="flex flex-col space-y-1.5 p-6 pb-4">
                                                    <div class="flex justify-between items-start mb-2">
                                                        <h3 class="tracking-tight text-lg font-semibold text-gray-900 leading-tight">
                                                            {{ $group['committee_type']->name ?? 'No Name' }}
                                                        </h3>
                                                        <div
                                                            class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">
                                                            Est. {{ $group['committee_type']->established_year ?? '-' }}
                                                        </div>
                                                    </div>
                                                    <p class="text-gray-600 text-sm leading-relaxed">{{ $group['committee_type']->description ?? '-' }}</p>
                                                </div>
                                                <div class="p-6 pt-0">
                                                    <div class="space-y-4">
                                                        <div class="flex items-center justify-between text-sm">
                                                            <div class="flex items-center text-gray-600">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                     height="24"
                                                                     viewBox="0 0 24 24" fill="none"
                                                                     stroke="currentColor"
                                                                     stroke-width="2" stroke-linecap="round"
                                                                     stroke-linejoin="round"
                                                                     class="lucide lucide-users h-4 w-4 mr-2">
                                                                    <path
                                                                        d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                                                    <circle cx="9" cy="7" r="4"></circle>
                                                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                                                </svg>
                                                                <span>{{ count($group['members']) }} members</span>
                                                            </div>
                                                            <div class="flex items-center text-gray-600">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                     height="24"
                                                                     viewBox="0 0 24 24" fill="none"
                                                                     stroke="currentColor"
                                                                     stroke-width="2" stroke-linecap="round"
                                                                     stroke-linejoin="round"
                                                                     class="lucide lucide-clock h-4 w-4 mr-2">
                                                                    <circle cx="12" cy="12" r="10"></circle>
                                                                    <polyline points="12 6 12 12 16 14"></polyline>
                                                                </svg>
                                                                @if(isset($group['committee_type']->schedule_type))
                                                                    {{ config("services.schedule_type.{$group['committee_type']->schedule_type}") ?? '-' }}
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <p class="text-sm font-medium text-gray-700 mb-1">Committee
                                                                Chair:</p>

                                                            @if(isset($focusArea['committeeMembers']) && count($focusArea['committeeMembers']))
                                                                @foreach($focusArea['committeeMembers'] as $committeeMember)
                                                                    @php
                                                                        $displayName = '';
                                                                        $memberType = $committeeMember['member_type'] ?? '';

                                                                        if (
                                                                            $memberType == \App\Models\CommitteeMember::POSITION_PRESIDENT &&
                                                                            !empty($committeeMember['user_id']) &&
                                                                            $committeeMember['committee_type_id'] == ($group['committee_type']->id ?? null)
                                                                        ) {
                                                                            $user = User::find($committeeMember['user_id']);
                                                                            $displayName = $user->name ?? '';
                                                                        }
                                                                    @endphp
                                                                    @if($displayName)
                                                                        <p class="text-sm text-gray-600">{{ $displayName }}</p>
                                                                    @endif
                                                                @endforeach
                                                            @else
                                                                <p class="text-sm text-gray-600">No members found</p>
                                                            @endif
                                                        </div>


                                                        <div>
                                                            <p class="text-sm font-medium text-gray-700 mb-2">Field of
                                                                work:</p>
                                                            <div class="flex flex-wrap gap-1">
                                                                @foreach(json_decode($group['committee_type']->field_of_work ?? '[]') as $field)
                                                                    <div
                                                                        class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">
                                                                        {{ $field }}
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        <div class="pt-2 flex gap-2">
                                                            <button
                                                                class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-primary-foreground h-9 rounded-md px-3 flex-1 bg-blue-600 hover:bg-blue-700">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                     height="24"
                                                                     viewBox="0 0 24 24" fill="none"
                                                                     stroke="currentColor"
                                                                     stroke-width="2" stroke-linecap="round"
                                                                     stroke-linejoin="round"
                                                                     class="lucide lucide-mail h-4 w-4 mr-1">
                                                                    <rect width="20" height="16" x="2" y="4"
                                                                          rx="2"></rect>
                                                                    <path
                                                                        d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                                                                </svg>
                                                                Contact
                                                            </button>
                                                            <!-- Full Committee Button -->
                                                            <button type="button" data-toggle="modal"
                                                                    data-target="#committeeModal-{{ $group['committee_type']->id ?? ''}}"
                                                                    class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 flex-1">
                                                                Full Committee
                                                            </button>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="modal fade"
                                                 id="committeeModal-{{ $group['committee_type']->id ?? '' }}" tabindex="-1"
                                                 role="dialog" aria-hidden="true">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Committee Details</h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>

                                                        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
                                                            <h2 id="radix-:r12:"
                                                                class="font-semibold tracking-tight text-2xl">
                                                                {{ $group['committee_type']->name ?? 'No Name' }}</h2>
                                                        </div>
                                                        <div class="space-y-6 p-2"
                                                             style="max-height: 80vh; overflow-y: auto;">
                                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                                <div
                                                                    class="rounded-lg border bg-card text-card-foreground shadow-sm">
                                                                    <div class="flex flex-col space-y-1.5 p-6 pb-3">
                                                                        <h3 class="font-semibold tracking-tight text-lg flex items-center">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                 width="24" height="24"
                                                                                 viewBox="0 0 24 24"
                                                                                 fill="none" stroke="currentColor"
                                                                                 stroke-width="2" stroke-linecap="round"
                                                                                 stroke-linejoin="round"
                                                                                 class="lucide lucide-clock h-5 w-5 mr-2 text-blue-600">
                                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                                <polyline
                                                                                    points="12 6 12 12 16 14"></polyline>
                                                                            </svg>
                                                                            Meeting Schedule
                                                                        </h3>
                                                                    </div>
                                                                    <div class="p-6 pt-0"><p class="text-gray-600 mb-2">
                                                                            <strong>Frequency:</strong>
                                                                            @if(isset($group['committee_type']->schedule_type))
                                                                                {{ config("services.schedule_type.{$group['committee_type']->schedule_type}") ?? '-' }}
                                                                            @endif
                                                                        </p>

                                                                        @php
                                                                            if(isset($group['committee_type']->schedule_datetime)){
                                                                                 $scheduleTime = $group['committee_type']->schedule_datetime
                                                                                                ? Carbon::parse($group['committee_type']->schedule_datetime)->format('l \a\t h:i A')
                                                                                                : '-';
                                                                            }
                                                                        @endphp

                                                                        <p class="text-gray-600">
                                                                            <strong>Time:</strong> @if(isset($scheduleTime))
                                                                                {{ $scheduleTime }}
                                                                            @endif
                                                                        </p>

                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="rounded-lg border bg-card text-card-foreground shadow-sm">
                                                                    <div class="flex flex-col space-y-1.5 p-6 pb-3">
                                                                        <h3 class="font-semibold tracking-tight text-lg flex items-center">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                 width="24" height="24"
                                                                                 viewBox="0 0 24 24"
                                                                                 fill="none" stroke="currentColor"
                                                                                 stroke-width="2" stroke-linecap="round"
                                                                                 stroke-linejoin="round"
                                                                                 class="lucide lucide-briefcase h-5 w-5 mr-2 text-blue-600">
                                                                                <path
                                                                                    d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                                                                                <rect width="20" height="14" x="2" y="6"
                                                                                      rx="2"></rect>
                                                                            </svg>
                                                                            Job Responsibilities
                                                                        </h3>
                                                                    </div>
                                                                    <div class="p-6 pt-0">
                                                                        <ul class="space-y-2">
                                                                            @foreach(json_decode($group['committee_type']->field_of_work ?? '[]') as $field)
                                                                                <li class="text-sm text-gray-600 flex items-start">
                                                                            <span
                                                                                class="w-2 h-2 bg-blue-600 rounded-full mt-2 mr-2 flex-shrink-0"></span>{{$field}}
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div
                                                                class="rounded-lg border bg-card text-card-foreground shadow-sm p-2">
                                                                <div class="flex flex-col space-y-1.5 p-6">
                                                                    <h3 class="font-semibold tracking-tight text-xl flex items-center">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                             width="24"
                                                                             height="24" viewBox="0 0 24 24" fill="none"
                                                                             stroke="currentColor" stroke-width="2"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"
                                                                             class="lucide lucide-users h-5 w-5 mr-2 text-blue-600">
                                                                            <path
                                                                                d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                                                            <circle cx="9" cy="7" r="4"></circle>
                                                                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                                                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                                                        </svg>
                                                                        Committee Members
                                                                        ({{ count($group['members'] ?? []) }})
                                                                    </h3>
                                                                    <p class="text-sm text-muted-foreground">Meet the
                                                                        dedicated members of the Publication
                                                                        Committee</p>
                                                                </div>
                                                                <div class="custom-grid">
                                                                    @if(count($group['members']))
                                                                        @foreach($group['members'] as $member)
                                                                            @php
                                                                                $user = User::find($member['user_id']);
                                                                            @endphp

                                                                            <div class="card border-primary bg-white"
                                                                                 style="max-height: 320px; overflow-y: auto; padding: 0 !important;">
                                                                                <div class="card-body">
                                                                                    <div class="row">
                                                                                        <!-- Avatar -->
                                                                                        <div class="col-md-4">
                                                                                            <div
                                                                                                class="rounded-circle bg-light d-flex align-items-center justify-content-center"
                                                                                                style="width: 100px; height: 100px;">
                                                                                                <span
                                                                                                    class="text-secondary h4 mb-0">
                                                                                                    {{ strtoupper(substr($user->name ?? 'N', 0, 1)) }}
                                                                                                </span>
                                                                                            </div>
                                                                                        </div>

                                                                                        <!-- User Info -->
                                                                                        <div class="col-md-8"
                                                                                             style="padding-left: 20px;">
                                                                                            @if(!empty($user?->name))
                                                                                                <h5 class="text-muted text-truncate mb-1 font-weight-bold">{{ $user->name }}</h5>
                                                                                            @endif

                                                                                            @if(!empty($user?->phone))
                                                                                                <p class="text-muted mb-1">
                                                                                                    {{ $user->phone }}</p>
                                                                                            @endif

                                                                                            @if(!empty($user?->email))
                                                                                                <p class="text-muted mb-1">
                                                                                                    {{ $user->email }}</p>
                                                                                            @endif

                                                                                            @if(!empty(optional($user->personalInformation)->blood_group))
                                                                                                <p class="text-muted mb-1">
                                                                                                    @php
                                                                                                        $bloodGroupKey = optional($user->personalInformation)->blood_group;
                                                                                                    @endphp

                                                                                                    @if(array_key_exists($bloodGroupKey, \App\Models\PersonalInformation::BLOOD_GROUP))
                                                                                                        {{ \App\Models\PersonalInformation::BLOOD_GROUP[$bloodGroupKey] }}
                                                                                                    @endif
                                                                                            @endif

                                                                                            @if(!empty(optional($user->personalInformation)->company))
                                                                                                <p class="text-muted mb-1"
                                                                                                   title="{{ $user->personalInformation->company }}">
                                                                                                    {{ $user->personalInformation->company }}
                                                                                                </p>
                                                                                            @endif

                                                                                            @if(!empty(optional($user->personalInformation)->job_title))
                                                                                                <p class="text-muted mb-1"
                                                                                                   title="{{ $user->personalInformation->job_title }}">
                                                                                                    {{ $user->personalInformation->job_title }}
                                                                                                </p>
                                                                                            @endif

                                                                                            @if(!empty(optional(optional($user->personalInformation)->faculty)->name))
                                                                                                <p class="text-muted mb-1"
                                                                                                   title="{{ $user->personalInformation->faculty->name }}">
                                                                                                    {{ $user->personalInformation->faculty->name }}
                                                                                                </p>
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- Buttons -->
                                                                                    <div
                                                                                        class="d-flex justify-content-around mt-3">
                                                                                        @if(!empty($user?->phone))
                                                                                            <div class="text-center">
                                                                                                <a href="tel:{{ $user->phone }}"
                                                                                                   class="btn btn-sm btn-light text-success rounded-circle mb-1">
                                                                                                    <i class="fas fa-phone"></i>
                                                                                                </a>
                                                                                                <div
                                                                                                    class="small text-success">
                                                                                                    Call
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="text-center">
                                                                                                <a href="sms:{{ $user->phone }}&body=message"
                                                                                                   class="text-success text-decoration-none">
                                                                                                    <button
                                                                                                        class="btn btn-sm btn-light text-success rounded-circle mb-1">
                                                                                                        <i class="fas fa-comment"></i>
                                                                                                    </button>
                                                                                                    <div
                                                                                                        class="small text-success">
                                                                                                        Message
                                                                                                    </div>
                                                                                                </a>
                                                                                            </div>
                                                                                        @endif

                                                                                        @if(!empty($user?->email))
                                                                                            <div class="text-center">
                                                                                                <a href="mailto:{{ $user->email }}"
                                                                                                   class="text-success text-decoration-none">
                                                                                                    <button
                                                                                                        class="btn btn-sm btn-light text-success rounded-circle mb-1">
                                                                                                        <i class="fas fa-envelope"></i>
                                                                                                    </button>
                                                                                                    <div
                                                                                                        class="small text-success">
                                                                                                        Email
                                                                                                    </div>
                                                                                                </a>
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <p>No members found</p>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach


                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @foreach($focusAreaInfos ?? [] as $focusArea)
                            <div data-state="inactive" data-orientation="horizontal" role="tabpanel"
                                 aria-labelledby="radix-:rr:-trigger-{{ $focusArea->id ?? '' }}"
                                 id="radix-:rr:-content-{{ $focusArea->id ?? '' }}"
                                 tabindex="0"
                                 class="mt-2 space-y-6 hidden">

                                <div class="mb-12">
                                    <div class="text-center mb-6">
                                        <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $focusArea->name }}</h3>
                                        <p class="text-gray-600">{{ $focusArea->description }}</p>
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                                        @foreach($focusArea->grouped_committee_members ?? [] as $group)
                                            <div
                                                class="rounded-lg border bg-card text-card-foreground shadow-sm h-full hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                                                <div class="flex flex-col space-y-1.5 p-6 pb-4">
                                                    <div class="flex justify-between items-start mb-2">
                                                        <h3 class="tracking-tight text-lg font-semibold text-gray-900 leading-tight">
                                                            {{ $group['committee_type']->name ?? 'No Name' }}
                                                        </h3>
                                                        <div
                                                            class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs">
                                                            Est. {{ $group['committee_type']->established_year ?? '-' }}
                                                        </div>
                                                    </div>
                                                    <p class="text-gray-600 text-sm leading-relaxed">{{ $group['committee_type']->description ?? '-' }}</p>
                                                </div>
                                                <div class="p-6 pt-0">
                                                    <div class="space-y-4">
                                                        <div class="flex items-center justify-between text-sm">
                                                            <div class="flex items-center text-gray-600">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                     height="24"
                                                                     viewBox="0 0 24 24" fill="none"
                                                                     stroke="currentColor"
                                                                     stroke-width="2" stroke-linecap="round"
                                                                     stroke-linejoin="round"
                                                                     class="lucide lucide-users h-4 w-4 mr-2">
                                                                    <path
                                                                        d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                                                    <circle cx="9" cy="7" r="4"></circle>
                                                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                                                </svg>
                                                                <span>{{ count($group['members']) }} members</span>
                                                            </div>
                                                            <div class="flex items-center text-gray-600">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                     height="24"
                                                                     viewBox="0 0 24 24" fill="none"
                                                                     stroke="currentColor"
                                                                     stroke-width="2" stroke-linecap="round"
                                                                     stroke-linejoin="round"
                                                                     class="lucide lucide-clock h-4 w-4 mr-2">
                                                                    <circle cx="12" cy="12" r="10"></circle>
                                                                    <polyline points="12 6 12 12 16 14"></polyline>
                                                                </svg>
                                                                @if(isset($group['committee_type']->schedule_type))
                                                                    {{ config("services.schedule_type.{$group['committee_type']->schedule_type}") ?? '-' }}
                                                                @endif
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <p class="text-sm font-medium text-gray-700 mb-1">Committee
                                                                Chair:</p>

                                                            @if(isset($focusArea['committeeMembers']) && count($focusArea['committeeMembers']))
                                                                @foreach($focusArea['committeeMembers'] as $committeeMember)
                                                                    @php
                                                                        $displayName = '';
                                                                        $memberType = $committeeMember['member_type'] ?? '';

                                                                        if (
                                                                            $memberType == \App\Models\CommitteeMember::POSITION_PRESIDENT &&
                                                                            !empty($committeeMember['user_id']) &&
                                                                            $committeeMember['committee_type_id'] == ($group['committee_type']->id ?? null)
                                                                        ) {
                                                                            $user = User::find($committeeMember['user_id']);
                                                                            $displayName = $user->name ?? '';
                                                                        }
                                                                    @endphp
                                                                    @if($displayName)
                                                                        <p class="text-sm text-gray-600">{{ $displayName }}</p>
                                                                    @endif
                                                                @endforeach
                                                            @else
                                                                <p class="text-sm text-gray-600">No members found</p>
                                                            @endif
                                                        </div>


                                                        <div>
                                                            <p class="text-sm font-medium text-gray-700 mb-2">Field of
                                                                work:</p>
                                                            <div class="flex flex-wrap gap-1">
                                                                @foreach(json_decode($group['committee_type']->field_of_work ?? '[]') as $field)
                                                                    <div
                                                                        class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs">
                                                                        {{ $field }}
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        <div class="pt-2 flex gap-2">
                                                            <button
                                                                class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-primary-foreground h-9 rounded-md px-3 flex-1 bg-blue-600 hover:bg-blue-700">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                     height="24"
                                                                     viewBox="0 0 24 24" fill="none"
                                                                     stroke="currentColor"
                                                                     stroke-width="2" stroke-linecap="round"
                                                                     stroke-linejoin="round"
                                                                     class="lucide lucide-mail h-4 w-4 mr-1">
                                                                    <rect width="20" height="16" x="2" y="4"
                                                                          rx="2"></rect>
                                                                    <path
                                                                        d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                                                                </svg>
                                                                Contact
                                                            </button>
                                                            <button type="button" data-toggle="modal"
                                                                    data-target="#focusWisecommitteeModal-{{$focusArea->id ?? ''}}-{{ $group['committee_type']->id ?? ''}}"
                                                                    class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 flex-1">
                                                                Full Committee
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="modal fade"
                                                 id="focusWisecommitteeModal-{{$focusArea->id ?? ''}}-{{ $group['committee_type']->id ?? '' }}"
                                                 tabindex="-1"
                                                 role="dialog" aria-hidden="true">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Committee Details</h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>

                                                        <div class="flex flex-col space-y-1.5 text-center sm:text-left">
                                                            <h2 id="radix-:r12:"
                                                                class="font-semibold tracking-tight text-2xl">
                                                                {{ $group['committee_type']->name ?? 'No Name' }}</h2>
                                                        </div>
                                                        <div class="space-y-6 p-2"
                                                             style="max-height: 80vh; overflow-y: auto;">
                                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                                <div
                                                                    class="rounded-lg border bg-card text-card-foreground shadow-sm">
                                                                    <div class="flex flex-col space-y-1.5 p-6 pb-3">
                                                                        <h3 class="font-semibold tracking-tight text-lg flex items-center">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                 width="24" height="24"
                                                                                 viewBox="0 0 24 24"
                                                                                 fill="none" stroke="currentColor"
                                                                                 stroke-width="2" stroke-linecap="round"
                                                                                 stroke-linejoin="round"
                                                                                 class="lucide lucide-clock h-5 w-5 mr-2 text-blue-600">
                                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                                <polyline
                                                                                    points="12 6 12 12 16 14"></polyline>
                                                                            </svg>
                                                                            Meeting Schedule
                                                                        </h3>
                                                                    </div>
                                                                    <div class="p-6 pt-0">

                                                                        <p class="text-gray-600 mb-2">
                                                                            <strong>Frequency:</strong>
                                                                            @if(isset($group['committee_type']->schedule_type))
                                                                                {{ config("services.schedule_type.{$group['committee_type']->schedule_type}") ?? '-' }}
                                                                            @endif
                                                                        </p>


                                                                        @php
                                                                            if(isset($group['committee_type']->schedule_datetime)){
                                                                                $scheduleTime = $group['committee_type']->schedule_datetime
                                                                                                ? Carbon::parse($group['committee_type']->schedule_datetime)->format('l \a\t h:i A')
                                                                                                : '-';
                                                                                }
                                                                        @endphp

                                                                        <p class="text-gray-600">
                                                                            <strong>Time:</strong>
                                                                            @if(isset($scheduleTime))
                                                                                {{ $scheduleTime }}
                                                                            @endif

                                                                        </p>

                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="rounded-lg border bg-card text-card-foreground shadow-sm">
                                                                    <div class="flex flex-col space-y-1.5 p-6 pb-3">
                                                                        <h3 class="font-semibold tracking-tight text-lg flex items-center">
                                                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                                                 width="24" height="24"
                                                                                 viewBox="0 0 24 24"
                                                                                 fill="none" stroke="currentColor"
                                                                                 stroke-width="2" stroke-linecap="round"
                                                                                 stroke-linejoin="round"
                                                                                 class="lucide lucide-briefcase h-5 w-5 mr-2 text-blue-600">
                                                                                <path
                                                                                    d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                                                                                <rect width="20" height="14" x="2" y="6"
                                                                                      rx="2"></rect>
                                                                            </svg>
                                                                            Job Responsibilities
                                                                        </h3>
                                                                    </div>
                                                                    <div class="p-6 pt-0">
                                                                        <ul class="space-y-2">
                                                                            @foreach(json_decode($group['committee_type']->field_of_work ?? '[]') as $field)
                                                                                <li class="text-sm text-gray-600 flex items-start">
                                                                            <span
                                                                                class="w-2 h-2 bg-blue-600 rounded-full mt-2 mr-2 flex-shrink-0"></span>{{$field}}
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div
                                                                class="rounded-lg border bg-card text-card-foreground shadow-sm p-2">
                                                                <div class="flex flex-col space-y-1.5 p-6">
                                                                    <h3 class="font-semibold tracking-tight text-xl flex items-center">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                             width="24"
                                                                             height="24" viewBox="0 0 24 24" fill="none"
                                                                             stroke="currentColor" stroke-width="2"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"
                                                                             class="lucide lucide-users h-5 w-5 mr-2 text-blue-600">
                                                                            <path
                                                                                d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                                                            <circle cx="9" cy="7" r="4"></circle>
                                                                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                                                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                                                        </svg>
                                                                        Committee Members
                                                                        ({{ count($group['members'] ?? []) }})
                                                                    </h3>
                                                                    <p class="text-sm text-muted-foreground">Meet the
                                                                        dedicated members of the Publication
                                                                        Committee</p>
                                                                </div>

                                                                <div class="custom-grid">
                                                                    @if(count($group['members']))
                                                                        @foreach($group['members'] as $member)
                                                                            @php
                                                                                $user = User::find($member['user_id']);
                                                                            @endphp

                                                                            <div class="card border-primary bg-white"
                                                                                 style="max-height: 320px; overflow-y: auto; padding: 0 !important;">
                                                                                <div class="card-body">
                                                                                    <div class="row">
                                                                                        <!-- Avatar -->
                                                                                        <div class="col-md-4">
                                                                                            <div
                                                                                                class="rounded-circle bg-light d-flex align-items-center justify-content-center"
                                                                                                style="width: 100px; height: 100px;">
                                                                                                <span
                                                                                                    class="text-secondary h4 mb-0">
                                                                                                    {{ strtoupper(substr($user->name ?? 'N', 0, 1)) }}
                                                                                                </span>
                                                                                            </div>
                                                                                        </div>

                                                                                        <!-- User Info -->
                                                                                        <div class="col-md-8"
                                                                                             style="padding-left: 20px;">
                                                                                            @if(!empty($user?->name))
                                                                                                <h5 class="text-muted text-truncate mb-1 font-weight-bold">{{ $user->name }}</h5>
                                                                                            @endif

                                                                                            @if(!empty($user?->phone))
                                                                                                <p class="text-muted mb-1">
                                                                                                    {{ $user->phone }}</p>
                                                                                            @endif

                                                                                            @if(!empty($user?->email))
                                                                                                <p class="text-muted mb-1">
                                                                                                    {{ $user->email }}</p>
                                                                                            @endif

                                                                                            @if(!empty(optional($user->personalInformation)->blood_group))
                                                                                                <p class="text-muted mb-1">
                                                                                                    @php
                                                                                                        $bloodGroupKey = optional($user->personalInformation)->blood_group;
                                                                                                    @endphp

                                                                                                    @if(array_key_exists($bloodGroupKey, \App\Models\PersonalInformation::BLOOD_GROUP))
                                                                                                        {{ \App\Models\PersonalInformation::BLOOD_GROUP[$bloodGroupKey] }}
                                                                                                    @endif
{{--                                                                                                    {{ $user->personalInformation->blood_group }}</p>--}}
                                                                                            @endif

                                                                                            @if(!empty(optional($user->personalInformation)->company))
                                                                                                <p class="text-muted mb-1"
                                                                                                   title="{{ $user->personalInformation->company }}">
                                                                                                    {{ $user->personalInformation->company }}
                                                                                                </p>
                                                                                            @endif

                                                                                            @if(!empty(optional($user->personalInformation)->job_title))
                                                                                                <p class="text-muted mb-1"
                                                                                                   title="{{ $user->personalInformation->job_title }}">
                                                                                                    {{ $user->personalInformation->job_title }}
                                                                                                </p>
                                                                                            @endif

                                                                                            @if(!empty(optional(optional($user->personalInformation)->faculty)->name))
                                                                                                <p class="text-muted mb-1"
                                                                                                   title="{{ $user->personalInformation->faculty->name }}">
                                                                                                    {{ $user->personalInformation->faculty->name }}
                                                                                                </p>
                                                                                            @endif
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- Buttons -->
                                                                                    <div
                                                                                        class="d-flex justify-content-around mt-3">
                                                                                        @if(!empty($user?->phone))
                                                                                            <div class="text-center">
                                                                                                <a href="tel:{{ $user->phone }}"
                                                                                                   class="btn btn-sm btn-light text-success rounded-circle mb-1">
                                                                                                    <i class="fas fa-phone"></i>
                                                                                                </a>
                                                                                                <div
                                                                                                    class="small text-success">
                                                                                                    Call
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="text-center">
                                                                                                <a href="sms:{{ $user->phone }}&body=message"
                                                                                                   class="text-success text-decoration-none">
                                                                                                    <button
                                                                                                        class="btn btn-sm btn-light text-success rounded-circle mb-1">
                                                                                                        <i class="fas fa-comment"></i>
                                                                                                    </button>
                                                                                                    <div
                                                                                                        class="small text-success">
                                                                                                        Message
                                                                                                    </div>
                                                                                                </a>
                                                                                            </div>
                                                                                        @endif

                                                                                        @if(!empty($user?->email))
                                                                                            <div class="text-center">
                                                                                                <a href="mailto:{{ $user->email }}"
                                                                                                   class="text-success text-decoration-none">
                                                                                                    <button
                                                                                                        class="btn btn-sm btn-light text-success rounded-circle mb-1">
                                                                                                        <i class="fas fa-envelope"></i>
                                                                                                    </button>
                                                                                                    <div
                                                                                                        class="small text-success">
                                                                                                        Email
                                                                                                    </div>
                                                                                                </a>
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <p>No members found</p>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach

                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div
                        class="rounded-lg border bg-card shadow-sm mt-12 bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
                        <div class="flex flex-col space-y-1.5 p-6 text-center"><h3
                                class="font-semibold tracking-tight text-2xl mb-2">Ready to Get Involved?</h3>
                            <p class="text-sm text-blue-100">Join a committee today and make a lasting impact on your
                                alma mater</p></div>
                        <div class="p-6 pt-0 text-center"><p class="mb-4 text-blue-100">Contact any committee directly
                                or reach out to our alumni relations team for guidance on finding the right fit.</p>
                            <div class="flex justify-center">
                                <div
                                    class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary hover:bg-secondary/80 text-blue-900">
                                    alumni-relations@university.edu
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a id="lovable-badge" target="_blank"
           href="https://lovable.dev/projects/d1d4797e-2c63-4478-ab7d-a69a756fb6fc?utm_source=lovable-badge"
           style="display: none;">
            <span style="color: #A1A1AA;">Edit with</span>
            <svg width="60" height="12" viewBox="0 0 116 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M109.108 21.115C107.649 21.115 106.381 20.8369 105.306 20.2807C104.23 19.7154 103.391 18.8675 102.789 17.7369C102.196 16.6063 101.9 15.2068 101.9 13.5382C101.9 11.9518 102.21 10.5841 102.83 9.4353C103.45 8.27736 104.307 7.3975 105.401 6.79574C106.495 6.19398 107.74 5.89309 109.135 5.89309C110.475 5.89309 111.665 6.18486 112.705 6.76839C113.744 7.35192 114.551 8.19986 115.125 9.31221C115.709 10.4246 116.001 11.7557 116.001 13.3057C116.001 13.8619 115.996 14.3041 115.987 14.6324H105.087V11.7603H113.347L111.788 12.2937C111.788 11.546 111.679 10.9215 111.46 10.42C111.25 9.90941 110.94 9.52647 110.53 9.27118C110.12 9.01588 109.623 8.88824 109.039 8.88824C108.428 8.88824 107.89 9.03868 107.425 9.33956C106.97 9.63133 106.614 10.069 106.359 10.6525C106.112 11.236 105.989 11.9381 105.989 12.7587V14.1674C105.989 15.0062 106.117 15.7174 106.372 16.3009C106.628 16.8844 106.992 17.3266 107.466 17.6275C107.941 17.9193 108.501 18.0651 109.149 18.0651C109.86 18.0651 110.448 17.8828 110.913 17.5181C111.378 17.1443 111.67 16.62 111.788 15.9453H115.932C115.805 17.0029 115.444 17.9193 114.852 18.6943C114.268 19.4693 113.489 20.0665 112.513 20.4859C111.537 20.9053 110.402 21.115 109.108 21.115Z"
                    fill="#FCFBF8"></path>
                <path d="M96.5167 1.1061H100.661V20.7181H96.5167V1.1061Z" fill="#FCFBF8"></path>
                <path
                    d="M89.4649 21.1148C88.6808 21.1148 87.9788 20.978 87.3588 20.7045C86.7479 20.4309 86.2282 20.0207 85.7996 19.4736C85.3711 18.9174 85.052 18.2336 84.8423 17.4221L85.2799 17.5452V20.7182H81.177V6.28948H85.321V9.51713L84.856 9.59919C85.0657 8.82419 85.3848 8.16316 85.8133 7.6161C86.251 7.05992 86.7844 6.63595 87.4135 6.34419C88.0426 6.04331 88.7492 5.89287 89.5333 5.89287C90.7095 5.89287 91.7307 6.19831 92.5968 6.80919C93.463 7.42007 94.1286 8.29992 94.5936 9.44875C95.0586 10.5885 95.2911 11.9424 95.2911 13.5107C95.2911 15.0698 95.054 16.4237 94.5799 17.5726C94.1058 18.7123 93.4265 19.5876 92.5421 20.1984C91.6668 20.8093 90.6411 21.1148 89.4649 21.1148ZM88.1794 17.9555C88.7994 17.9555 89.3191 17.7732 89.7385 17.4084C90.167 17.0437 90.4861 16.5286 90.6958 15.863C90.9146 15.1974 91.0241 14.4133 91.0241 13.5107C91.0241 12.608 90.9146 11.8239 90.6958 11.1583C90.4861 10.4927 90.167 9.97757 89.7385 9.61286C89.3191 9.23904 88.7994 9.05213 88.1794 9.05213C87.5685 9.05213 87.0442 9.23904 86.6066 9.61286C86.178 9.97757 85.8544 10.4973 85.6355 11.172C85.4167 11.8376 85.3073 12.6171 85.3073 13.5107C85.3073 14.4133 85.4167 15.1974 85.6355 15.863C85.8544 16.5286 86.178 17.0437 86.6066 17.4084C87.0442 17.7732 87.5685 17.9555 88.1794 17.9555ZM81.177 1.1061H85.321V6.28948H81.177V1.1061Z"
                    fill="#FCFBF8"></path>
                <path
                    d="M70.7749 21.115C69.8723 21.115 69.0608 20.9372 68.3405 20.5816C67.6293 20.226 67.0686 19.72 66.6583 19.0635C66.2571 18.3979 66.0565 17.6229 66.0565 16.7385C66.0565 15.3891 66.4531 14.3588 67.2464 13.6476C68.0396 12.9274 69.1839 12.4578 70.6792 12.239L73.182 11.8834C73.6834 11.8104 74.08 11.7193 74.3718 11.6099C74.6636 11.5004 74.8778 11.3546 75.0146 11.1722C75.1514 10.9807 75.2197 10.7391 75.2197 10.4474C75.2197 10.1465 75.1377 9.87294 74.9736 9.62677C74.8186 9.37147 74.5815 9.17088 74.2624 9.025C73.9524 8.87 73.574 8.7925 73.1272 8.7925C72.4161 8.7925 71.8462 8.97941 71.4177 9.35324C70.9892 9.71794 70.7567 10.2194 70.7202 10.8576H66.4395C66.4759 9.89118 66.7677 9.03412 67.3148 8.28647C67.8709 7.52971 68.6414 6.94162 69.6261 6.52221C70.6108 6.1028 71.7505 5.89309 73.0452 5.89309C74.4037 5.89309 75.5525 6.11648 76.4917 6.56324C77.4308 7.00089 78.1374 7.63 78.6115 8.45059C79.0947 9.27118 79.3364 10.2513 79.3364 11.391V17.4087C79.3364 18.056 79.382 18.6578 79.4731 19.214C79.5734 19.761 79.7147 20.1075 79.8971 20.2534V20.7184H75.589C75.4887 20.3263 75.4112 19.8841 75.3565 19.3918C75.3018 18.8994 75.2699 18.3797 75.2608 17.8326L75.9309 17.5454C75.7577 18.1928 75.4386 18.79 74.9736 19.3371C74.5177 19.875 73.9296 20.3081 73.2093 20.6363C72.4981 20.9554 71.6867 21.115 70.7749 21.115ZM72.3067 18.0788C72.8902 18.0788 73.4053 17.9512 73.8521 17.6959C74.2989 17.4315 74.6408 17.0668 74.8778 16.6018C75.124 16.1368 75.2471 15.6079 75.2471 15.0153V13.1279L75.589 13.3194C75.3702 13.6112 75.0967 13.8346 74.7684 13.9896C74.4493 14.1446 74.0162 14.2768 73.4692 14.3862L72.4161 14.5913C71.714 14.7281 71.1852 14.9378 70.8296 15.2204C70.4831 15.5031 70.3099 15.8997 70.3099 16.4103C70.3099 16.9209 70.4968 17.3266 70.8706 17.6275C71.2445 17.9284 71.7231 18.0788 72.3067 18.0788Z"
                    fill="#FCFBF8"></path>
                <path
                    d="M51.962 6.28958H56.3659L60.1542 18.6668H58.8276L62.4656 6.28958H66.7463L61.7544 20.7182H57.1454L51.962 6.28958Z"
                    fill="#FCFBF8"></path>
                <path
                    d="M45.4846 21.115C44.0531 21.115 42.7949 20.805 41.7099 20.185C40.634 19.565 39.7997 18.6806 39.2071 17.5318C38.6236 16.3829 38.3318 15.0381 38.3318 13.4972C38.3318 11.9563 38.6236 10.616 39.2071 9.47633C39.7997 8.3275 40.634 7.44309 41.7099 6.82309C42.7949 6.20309 44.0531 5.89309 45.4846 5.89309C46.916 5.89309 48.1697 6.20309 49.2456 6.82309C50.3215 7.44309 51.1512 8.3275 51.7347 9.47633C52.3274 10.616 52.6237 11.9563 52.6237 13.4972C52.6237 15.0381 52.3274 16.3829 51.7347 17.5318C51.1512 18.6806 50.3215 19.565 49.2456 20.185C48.1697 20.805 46.916 21.115 45.4846 21.115ZM45.4846 17.9421C46.0863 17.9421 46.6015 17.7779 47.03 17.4497C47.4585 17.1123 47.7868 16.6154 48.0147 15.959C48.2427 15.2934 48.3566 14.4728 48.3566 13.4972C48.3566 12.0475 48.1059 10.9488 47.6044 10.2012C47.103 9.44441 46.3963 9.06603 45.4846 9.06603C44.8828 9.06603 44.3631 9.23471 43.9255 9.57206C43.4969 9.9003 43.1687 10.3972 42.9408 11.0628C42.7128 11.7193 42.5988 12.5307 42.5988 13.4972C42.5988 14.4637 42.7128 15.2797 42.9408 15.9453C43.1687 16.6109 43.4969 17.1123 43.9255 17.4497C44.3631 17.7779 44.8828 17.9421 45.4846 17.9421Z"
                    fill="#FCFBF8"></path>
                <path
                    d="M26.2195 1.10631H30.514V17.6623L29.7481 16.7734C29.7481 16.7734 31.8751 16.7734 35.534 16.7734C39.1928 16.7734 38.6925 20.7184 38.6925 20.7184H26.2195V1.10631Z"
                    fill="#FCFBF8"></path>
                <mask id="mask0_19703_15608" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20"
                      height="21">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M5.90405 0.885124C9.16477 0.885124 11.8081 3.53543 11.8081 6.80474V9.05456H13.773C17.0337 9.05456 19.677 11.7049 19.677 14.9742C19.677 18.2435 17.0337 20.8938 13.773 20.8938H0V6.80474C0 3.53543 2.64333 0.885124 5.90405 0.885124Z"
                          fill="url(#paint0_linear_19703_15608)"></path>
                </mask>
                <g mask="url(#mask0_19703_15608)">
                    <g filter="url(#filter0_f_19703_15608)">
                        <circle cx="8.63157" cy="11.5658" r="13.3199" fill="#4B73FF"></circle>
                    </g>
                    <g filter="url(#filter1_f_19703_15608)">
                        <ellipse cx="10.0949" cy="4.25612" rx="17.0591" ry="13.3199" fill="#FF66F4"></ellipse>
                    </g>
                    <g filter="url(#filter2_f_19703_15608)">
                        <ellipse cx="12.8775" cy="1.74957" rx="13.3199" ry="11.6977" fill="#FF0105"></ellipse>
                    </g>
                    <g filter="url(#filter3_f_19703_15608)">
                        <circle cx="10.3319" cy="4.25254" r="8.01052" fill="#FE7B02"></circle>
                    </g>
                </g>
                <defs>
                    <filter id="filter0_f_19703_15608" x="-10.6577" y="-7.72354" width="38.5786" height="38.5786"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                        <feGaussianBlur stdDeviation="2.98472"
                                        result="effect1_foregroundBlur_19703_15608"></feGaussianBlur>
                    </filter>
                    <filter id="filter1_f_19703_15608" x="-12.9337" y="-15.0332" width="46.057" height="38.5786"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                        <feGaussianBlur stdDeviation="2.98472"
                                        result="effect1_foregroundBlur_19703_15608"></feGaussianBlur>
                    </filter>
                    <filter id="filter2_f_19703_15608" x="-6.41182" y="-15.9176" width="38.5786" height="35.3342"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                        <feGaussianBlur stdDeviation="2.98472"
                                        result="effect1_foregroundBlur_19703_15608"></feGaussianBlur>
                    </filter>
                    <filter id="filter3_f_19703_15608" x="-3.64803" y="-9.72742" width="27.9599" height="27.9599"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                        <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                        <feGaussianBlur stdDeviation="2.98472"
                                        result="effect1_foregroundBlur_19703_15608"></feGaussianBlur>
                    </filter>
                    <linearGradient id="paint0_linear_19703_15608" x1="6.62168" y1="4.40129" x2="12.6165" y2="20.8863"
                                    gradientUnits="userSpaceOnUse">
                        <stop offset="0.025" stop-color="#FF8E63"></stop>
                        <stop offset="0.56" stop-color="#FF7EB0"></stop>
                        <stop offset="0.95" stop-color="#4B73FF"></stop>
                    </linearGradient>
                </defs>
            </svg>


            <button id="lovable-badge-close"
                    style="position: absolute; top: -2px; right: 5px; cursor: pointer; font-size: 14px; color: #A1A1AA;">
                ×
            </button>
        </a>


    </section>

@endsection

@push('js')
    <script defer="" src="https://alumni-committee-hub.lovable.app/~flock.js"
            data-proxy-url="https://alumni-committee-hub.lovable.app/~api/analytics"></script>

    <script>
        document.querySelectorAll('[role="tab"]').forEach(tab => {
            tab.addEventListener("click", () => {
                // deactivate all tabs
                document.querySelectorAll('[role="tab"]').forEach(t => {
                    t.setAttribute("aria-selected", "false");
                    t.setAttribute("data-state", "inactive");
                });

                // hide all panels
                document.querySelectorAll('[role="tabpanel"]').forEach(panel => {
                    panel.classList.add("hidden");
                });

                // activate clicked tab
                tab.setAttribute("aria-selected", "true");
                tab.setAttribute("data-state", "active");

                // show corresponding panel
                const panelId = tab.getAttribute("aria-controls");
                document.getElementById(panelId).classList.remove("hidden");
            });
        });

        // document.querySelectorAll('[role="tab"]').forEach(tab => {
        //     tab.addEventListener("click", () => {
        //         // deactivate all tabs
        //         document.querySelectorAll('[role="tab"]').forEach(t => {
        //             t.setAttribute("aria-selected", "false");
        //             t.setAttribute("data-state", "inactive"); // এখানে inactive দিচ্ছি
        //         });
        //
        //         // hide all panels
        //         document.querySelectorAll('[role="tabpanel"]').forEach(panel => {
        //             panel.classList.add("hidden");
        //         });
        //
        //         // activate clicked tab
        //         tab.setAttribute("aria-selected", "true");
        //         tab.setAttribute("data-state", "active"); // clicked tab এ active দিচ্ছি
        //
        //         // show corresponding panel
        //         const panelId = tab.getAttribute("aria-controls");
        //         document.getElementById(panelId).classList.remove("hidden");
        //     });
        // });
    </script>
    <script>
        // Don't show the lovable-badge if the page is in an iframe or if it's being rendered by puppeteer (screenshot service)
        if (window.self !== window.top || navigator.userAgent.includes('puppeteer')) {
            // the page is in an iframe
            var badge = document.getElementById('lovable-badge');
            if (badge) {
                badge.style.display = 'none';
            }
        }

        // Add click event listener to close button
        var closeButton = document.getElementById('lovable-badge-close');
        if (closeButton) {
            closeButton.addEventListener('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                var badge = document.getElementById('lovable-badge');
                if (badge) {
                    badge.style.display = 'none';
                }
            });
        }
    </script>
@endpush