@extends('layouts.frontend.master')

@section('title', $committeeType->name . ' - BAU 2001–2002 Alumni Association')

@push('css')
{{--    <link rel="stylesheet" href="{{ asset('frontend/css/home.css') }}">--}}
<style>
    .committee-header {
        background: linear-gradient(135deg, #009245, #00c79a);
        color: white;
        padding: 60px 0; /* smaller hero height */
        margin-bottom: 40px; /* reduced spacing */
    }

    .committee-header h1 {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .committee-header p {
        font-size: 1.2rem;
        opacity: 0.9;
        max-width: 800px;
        margin: 0 auto;
    }

    .member-card {
        background: white;
        border-radius: 14px; /* smaller card */
        padding: 20px; /* tighter padding */
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); /* decreased drop shadow */
        transition: all 0.25s ease;
        border: 1px solid #eef2f7;
    }

    .member-card:hover {
        transform: translateY(-4px);
        border-color: #e2f3ea;
        box-shadow: 0 12px 24px rgba(0, 146, 69, 0.08);
    }

    .member-avatar {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #00b07f;
        margin: 0 auto 16px;
        display: block;
    }

    .member-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 8px;
        text-align: center;
    }

    .member-position {
        background: linear-gradient(135deg, #009245, #00cfa3);
        color: white;
        padding: 6px 14px;
        border-radius: 18px;
        font-size: 12px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 14px;
    }

    .member-info {
        text-align: center;
        margin-bottom: 20px;
    }

    .member-info p {
        color: #666;
        margin: 5px 0;
        font-size: 14px;
    }

    .member-info i {
        color: #009245;
        margin-right: 8px;
        width: 16px;
    }

    .position-section {
        margin-top: 28px; /* compact but clear separation */
        margin-bottom: 36px; /* consistent rhythm */
    }

    .position-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 20px;
        text-align: center;
        position: relative;
        padding-bottom: 10px;
    }

    .position-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(135deg, #009245, #00d4aa);
        border-radius: 2px;
    }

    .back-btn {
        background: #f8f9fa;
        color: #009245;
        padding: 12px 24px;
        border-radius: 25px;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        border: 2px solid #009245;
        font-weight: 600;
        margin-bottom: 40px;
    }

    .back-btn:hover {
        background: #009245;
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    }

    .empty-state i {
        font-size: 4rem;
        color: #009245;
        margin-bottom: 20px;
    }

    .empty-state h3 {
        font-size: 1.5rem;
        color: #1a1a1a;
        margin-bottom: 10px;
    }

    .empty-state p {
        color: #666;
    }
</style>
@endpush

@section('content')
    <!-- Committee Header -->
    <section class="committee-header">
        <div class="container mx-auto text-center px-6">
            <h1 class="font-karla">{{ $committeeType->name }}</h1>
            <p class="font-karla">
                {{ $committeeType->description ?? 'Meet the dedicated members who make this committee successful.' }}
            </p>
        </div>
    </section>

    <!-- Committee Details + Members -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <!-- Breadcrumb Navigation -->
            <nav class="flex mb-8" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('home') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-green-600">
                            <i class="fas fa-home mr-2"></i>
                            Home
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <a href="{{ route('member.committees.index') }}" class="text-sm font-medium text-gray-700 hover:text-green-600">
                                Committees
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <span class="text-sm font-medium text-green-600">{{ $committeeType->name }}</span>
                        </div>
                    </li>
                </ol>
            </nav>

            <!-- Back Button -->
            <div class="text-center">
                <a href="{{ route('member.committees.index') }}" class="back-btn">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Committees
                </a>
            </div>

            <!-- Committee Info Card (smaller, precise) -->
            <div class="bg-white rounded-xl shadow-md p-5 mb-7 border border-gray-100">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div>
                        <h2 class="text-xl font-bold text-gray-900 mb-1">{{ $committeeType->name }}</h2>
                        <p class="text-gray-600 text-sm leading-relaxed">{{ $committeeType->description }}</p>
                    </div>
                    <div class="flex items-center gap-3">
                        @if($committeeType->established_year)
                            <span class="px-3 py-1 rounded-full text-xs font-semibold" style="background:#F3F4F6;color:#374151;border:1px solid #E5E7EB">Est. {{ $committeeType->established_year }}</span>
                        @endif
                    </div>
                </div>

                @if($committeeType->focusAreas && $committeeType->focusAreas->count())
                    <div class="mt-2.5">
                        <div class="text-[11px] font-semibold text-gray-700 mb-2 uppercase tracking-wide">Focus Areas</div>
                        <div class="flex flex-wrap gap-2">
                            @foreach($committeeType->focusAreas as $focusArea)
                                <span class="px-1.5 py-0.5 rounded-sm text-[10px] font-bold" style="background-color: {{ $focusArea->color }}14; color: {{ $focusArea->color }}; border:1px solid {{ $focusArea->color }}2e; line-height: 1.2;">
                                    {{ $focusArea->name }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            @if($committeeMembers->isNotEmpty())
                @foreach($groupedMembers as $positionCode => $members)
                    <div class="position-section">
                        <h2 class="position-title font-karla">
                            {{ \App\Models\CommitteeMember::getPositionName($positionCode) }}
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center justify-center">
                            @foreach($members as $member)
                                <div class="member-card mx-auto">
                                    <!-- Member Avatar -->
                                    @if($member->user && $member->user->passportPhotos && $member->user->passportPhotos->count() > 0)
                                        <img src="{{ asset('storage/' . $member->user->passportPhotos->first()->file_path) }}"
                                             alt="{{ $member->user->name }}"
                                             class="member-avatar">
                                    @else
                                        <div class="member-avatar bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center">
                                            <i class="fas fa-user text-white text-3xl"></i>
                                        </div>
                                    @endif

                                    <!-- Member Name -->
                                    <h3 class="member-name font-karla">
                                        {{ $member->user->name ?? 'Unknown Member' }}
                                    </h3>

                                    <!-- Member Position -->
                                    <div class="text-center mb-4">
                                        @php($pos = \App\Models\CommitteeMember::getPositionName($member->member_type))
                                        @if($pos !== 'Unknown Position')
                                            <span class="member-position">{{ $pos }}</span>
                                        @endif
                                    </div>

                                    <!-- Member Information -->
                                    <div class="member-info">
                                        @if($member->user && $member->user->personalInformation)
                                            @if($member->user->personalInformation->faculty)
                                                <p>
                                                    <i class="fas fa-graduation-cap"></i>
                                                    {{ $member->user->personalInformation->faculty->name ?? 'Faculty not specified' }}
                                                </p>
                                            @endif

                                            @if($member->user->personalInformation->student)
                                                <p>
                                                    <i class="fas fa-user-graduate"></i>
                                                    {{ $member->user->personalInformation->student->name ?? 'Student info not specified' }}
                                                </p>
                                            @endif
                                        @endif

                                        @if($member->mobile)
                                            <p>
                                                <i class="fas fa-phone"></i>
                                                {{ $member->mobile }}
                                            </p>
                                        @endif

                                        @if($member->user && $member->user->email)
                                            <p>
                                                <i class="fas fa-envelope"></i>
                                                {{ $member->user->email }}
                                            </p>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            @else
                <div class="empty-state">
                    <i class="fas fa-users"></i>
                    <h3 class="font-karla">No Members Found</h3>
                    <p>This committee currently has no members assigned.</p>
                </div>
            @endif
        </div>
    </section>
@endsection