@extends('frontend.organization.organization_layouts')

@push('style')
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f6f9;
        }

        .hero-section {
            background: linear-gradient(to right, #ffffff, #e9f0ff);
            padding: 60px 30px 40px;
        }

        .committee-hero {
            max-width: 1000px;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .committee-hero img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
            margin-bottom: 20px;
        }

        .committee-hero h1 {
            font-size: 2rem;
            font-weight: 700;
            color: #1a2d5a;
            margin-bottom: 10px;
        }

        .committee-meta {
            font-size: 14px;
            color: #6c757d;
        }

        .committee-meta span {
            margin: 0 8px;
        }

        .committee-content {
            max-width: 900px;
            background: #fff;
            margin: -30px auto 40px;
            padding: 30px;
        }

        .committee-description {
            font-size: 16px;
            color: #333;
            line-height: 1.8;
        }

        .members-section {
            max-width: 1100px;
            margin: auto;
            padding: 40px 20px;
        }

        .members-title {
            font-size: 1.7rem;
            font-weight: 600;
            margin-bottom: 30px;
            color: #1a2d5a;
            text-align: center;
        }

        .member-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 25px;
        }

        .member-card {
            background: #ffffff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
            text-align: center;
        
        }


        .member-photo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 12px;
            border: 3px solid #267bbd;
        }

        .member-name {
            font-weight: 600;
            font-size: 16px;
            color: #2b4c7e;
        }

        .member-designation {
            font-size: 14px;
            color: #6a6a6a;
        }

        @media (max-width: 768px) {
            .committee-hero h1 {
                font-size: 1.6rem;
            }
        }
    </style>
@endpush

@section('member-content')
    <section class="hero-section">
        <div class="committee-hero">
            @if ($committee->photo)
                <img src="{{ asset('storage/' . $committee->photo) }}" alt="Committee Image">
            @endif
            <h1>{{ $committee->title }}</h1>
            <div class="committee-meta">
                <span><i class="bi bi-calendar"></i> {{ \Carbon\Carbon::parse($committee->publish_date)->format('F j, Y') }}</span>
                <span><i class="bi bi-people"></i> Session: {{ $committee->session }}</span>
                <span><i class="bi bi-building"></i> {{ ucfirst($committee->type) }}</span>
            </div>
        </div>
    </section>

    <div class="committee-content">
        <div class="committee-description">
            {!! $committee->description !!}
        </div>
    </div>

    <section class="members-section">
        <h2 class="members-title">Committee Members</h2>
        @if ($committee->committee_details->count())
            <div class="member-grid">
                @foreach ($committee->committee_details as $member)
                    <div class="member-card">
                        <img src="{{ $member->photo ? asset('storage/' . $member->photo) : asset('images/default-avatar.png') }}"
                             class="member-photo"
                             alt="{{ $member->member_name }}">
                        <div class="member-name">{{ $member->member_name }}</div>
                        <div class="member-designation">{{ $member->designation }}</div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-center text-muted mt-3">No members added yet.</p>
        @endif
    </section>
@endsection