@extends('layouts.frontend.master')

@section('title', 'Committees Grid View - BAU 2001–2002 Alumni Association')

@push('css')
{{--    <link rel="stylesheet" href="{{ asset('frontend/css/home.css') }}">--}}
<style>
    .committee-card {
        transition: all 0.3s ease;
        border: 1px solid #eef2f7;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    }

    .gradient-bg {
        background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
    }

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

    .committee-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .committee-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0;
        line-height: 1.2;
    }

    .established-badge {
        background: #f3f4f6;
        color: #6b7280;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        margin-left: 12px;
    }

    .committee-description {
        color: #6b7280;
        margin-bottom: 20px;
        line-height: 1.6;
        flex-grow: 1;
    }

    .committee-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        font-size: 0.875rem;
        color: #6b7280;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .meta-item i {
        color: #009245;
    }

    .committee-chairman {
        margin-bottom: 20px;
    }

    .chairman-label {
        font-weight: 600;
        color: #374151;
        margin-bottom: 4px;
        font-size: 0.875rem;
    }

    .chairman-name {
        color: #1f2937;
        font-weight: 500;
    }

    .focus-areas {
        margin-bottom: 20px;
    }

    .focus-areas-label {
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        font-size: 0.875rem;
    }

    .focus-area-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .focus-area-tag {
        background: #f3f4f6;
        color: #374151;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        border: 1px solid #e5e7eb;
    }

    .action-buttons {
        display: flex;
        gap: 12px;
        margin-top: auto;
    }

    .contact-btn {
        background: #3b82f6;
        color: white;
        padding: 10px 20px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        flex: 1;
        justify-content: center;
    }

    .contact-btn:hover {
        background: #2563eb;
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .learn-more-btn {
        background: white;
        color: #6b7280;
        padding: 10px 20px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        border: 1px solid #d1d5db;
        flex: 1;
        justify-content: center;
    }

    .learn-more-btn:hover {
        background: #f9fafb;
        color: #374151;
        text-decoration: none;
        border-color: #9ca3af;
    }

    .hero-section {
        background: linear-gradient(135deg, #009245, #00d4aa);
        color: white;
        padding: 80px 0;
        margin-bottom: 60px;
    }

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

    .hero-section p {
        font-size: 1.2rem;
        opacity: 0.9;
        max-width: 600px;
        margin: 0 auto;
    }

    .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);
    }
</style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container mx-auto text-center px-6">
            <h1 class="font-karla">Committees Grid View</h1>
            <p class="font-karla">Explore our committees in a grid layout for a comprehensive overview of our organizational structure.</p>
        </div>
    </section>

    <!-- Committees Section -->
    <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">Grid View</span>
                        </div>
                    </li>
                </ol>
            </nav>

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

            <!-- Grid View -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                @foreach($committeeTypes as $committee)
                    <div class="committee-card bg-white rounded-xl p-6 shadow-lg">
                        <!-- Committee Header with Title and Establishment Year -->
                        <div class="committee-header">
                            <h3 class="committee-title font-karla">
                                {{ $committee->name }}
                            </h3>
                            @if($committee->established_year)
                                <span class="established-badge">Est. {{ $committee->established_year }}</span>
                            @endif
                        </div>

                        <!-- Committee Description -->
                        <p class="committee-description font-karla">
                            {{ $committee->description ?? 'This committee works to support our foundation\'s mission and goals.' }}
                        </p>

                        <!-- Committee Meta Information -->
                        <div class="committee-meta">
                            <div class="meta-item">
                                <i class="fas fa-users"></i>
                                <span>{{ $committee->committee_members_count ?? 0 }} members</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-clock"></i>
                                <span>Active</span>
                            </div>
                        </div>

                        <!-- Committee Chairman -->
                        @if($committee->chairmanWithUser && $committee->chairmanWithUser->user)
                            <div class="committee-chairman">
                                <div class="chairman-label">Committee Chair:</div>
                                <div class="chairman-name">{{ $committee->chairmanWithUser->user->name }}</div>
                            </div>
                        @endif

                        <!-- Focus Areas -->
                        @if($committee->focusAreas && $committee->focusAreas->count() > 0)
                            <div class="focus-areas">
                                <div class="focus-areas-label">Focus Areas:</div>
                                <div class="focus-area-tags">
                                    @foreach($committee->focusAreas as $focusArea)
                                        <span class="focus-area-tag" style="background-color: {{ $focusArea->color }}20; color: {{ $focusArea->color }}; border-color: {{ $focusArea->color }}40;">
                                            {{ $focusArea->name }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Action Button -->
                        <div class="action-buttons">
                            <a href="{{ route('member.committees.show', $committee) }}" class="learn-more-btn" style="flex: 1;">
                                Learn More
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Empty State -->
            @if($committeeTypes->isEmpty())
                <div class="text-center py-16">
                    <div class="w-32 h-32 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-users text-white text-4xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4 font-karla">No Committees Available</h3>
                    <p class="text-gray-600 font-karla">Committee information will be available soon.</p>
                </div>
            @endif
        </div>
    </section>
@endsection