@extends('frontend.layouts.app')
@push('style')
    <style>
        .committee-card {
            transition: 0.3s ease-in-out;
        }

        .committee-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .team-box:hover {
            background-color: #fff;
            transform: translateY(-4px);
            transition: all 0.3s ease;
        }

        .team-box img {
            border: 2px solid #ddd;
        }

        .committee-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            padding: 30px;
            margin-bottom: 30px;
            transition: box-shadow 0.3s ease;
        }

        /* Hover effect for desktop */
        .committee-card:hover {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        /* Mobile responsiveness */
        @media (max-width: 767px) {
            .committee-card {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
        }
    </style>
@endpush


@section('content')
    <div class="container-fluid page-header-modern py-5 bg-light">
        <div class="container text-center">
            <h1 class="display-5 fw-bold">Past Committees</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mt-3">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Inactive Committees</li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="container commety py-5">
        <div class="committee-card mb-5 p-4 p-md-5 bg-white rounded shadow-sm">
            <div class="mb-4">
                <h2 class="text-primary fw-bold mb-1">{{ $committee->title }}</h2>
                <div class="text-muted small">
                    <i class="fa fa-calendar-alt me-1"></i>
                    {{ \Carbon\Carbon::parse($committee->publish_date)->format('d M, Y') }} |
                    <i class="fa fa-clock me-1 ms-2"></i> Session: {{ $committee->session }}
                    @if ($committee->is_active)
                        <span class="badge bg-success ms-2">Running</span>
                    @else
                        <span class="badge bg-warning ms-2">Previous</span>
                    @endif

                </div>
            </div>

            @if ($committee->description)
                <p class="mb-4 lh-lg" style="text-align: justify;">
                    {!! $committee->description !!}
                </p>
            @endif

            <div class="row g-4">
                @forelse($committee->committee_details as $detail)
                    <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                        <div class="text-center border rounded h-100 p-3 shadow-sm team-box bg-light">
                            @if ($detail->member && $detail->member->photo)
                                <img src="{{ asset('storage/' . $detail->member->photo) }}"
                                    alt="{{ $detail->member->full_name }}" class="rounded-circle mb-2 img-fluid"
                                    style="width: 80px; height: 80px; object-fit: cover;">
                            @else
                                <img src="{{ asset('default/user.png') }}" class="rounded-circle mb-2"
                                    style="width: 80px; height: 80px; object-fit: cover;" alt="User">
                            @endif
                            <div class="fw-bold"><a
                                    href="{{ route('memebr-profile', Crypt::encryptString($detail->member_id)) }}">{{ $detail->member->full_name ?? '-' }}</a>
                            </div>
                            <div class="text-muted small">{{ $detail->designation ? $detail->designation->name : '' }}
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center text-muted">No members found for this committee.</div>
                @endforelse
            </div>
        </div>
    </div>
@endsection