@extends('frontend.layouts.app')
@push('style')
    @push('style')
        <style>
            .card-title {
                font-size: 1.25rem;
            }

            .card-text {
                font-size: 0.875rem;
            }

            @media (max-width: 576px) {
                .card-title {
                    font-size: 1.1rem;
                }
            }

            .no-data-message {
                padding: 60px 20px;
                background-color: #f9f9f9;
                border: 1px solid #ddd;
                border-radius: 0.5rem;
                color: #6c757d;
                /* muted text */
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            .no-data-message h5 {
                font-weight: 600;
                font-size: 1.5rem;
            }

            .no-data-message p {
                font-size: 0.9rem;
                color: #868e96;
                margin-top: 0;
            }
        </style>
    @endpush
@endpush
@section('content')
    <div class="container-fluid page-header-modern py-4 bg-light border-bottom">
        <div class="container">
            <h1 class="display-5 fw-bold mb-1">Past Committees</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-modern mb-0">
                    <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 py-5">
        {{--   <div class="section-header text-center mb-5">
            <h4 class="text-primary fw-bold">Previous Committees</h4>
            <p class="text-muted">Explore our past leadership teams that helped shape our society's mission.</p>
        </div> --}}

        <div class="row g-4">
            @forelse($committees as $committee)
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card h-100 border-0 shadow committee-card-hover">
                        <div class="card-body d-flex flex-column justify-content-between">
                            <div class="mb-3">
                                <h5 class="text-dark fw-semibold mb-2">
                                    <i class="fa fa-flag text-primary me-2"></i>{{ $committee->title }}
                                </h5>

                                <p class="text-muted mb-1 small">
                                    <i class="fa fa-clock me-1 text-secondary"></i>
                                    <strong>Session:</strong> {{ $committee->session }}
                                </p>
                                <p class="text-muted mb-1 small">
                                    <i class="fa fa-calendar-alt me-1 text-secondary"></i>
                                    <strong>Published:</strong>
                                    {{ \Carbon\Carbon::parse($committee->publish_date)->format('d M Y') }}
                                </p>
                                <p class="text-muted small mb-0">
                                    <i class="fa fa-users me-1 text-secondary"></i>
                                    <strong>{{ $committee->committee_details->count() }}</strong>
                                    Member{{ $committee->committee_details->count() !== 1 ? 's' : '' }}
                                </p>
                            </div>

                            <a href="{{ route('archive-commeety-list.details', Crypt::encryptString($committee->id)) }}"
                                class="btn btn-sm btn-outline-primary mt-auto w-100">
                                <i class="fa fa-eye me-1"></i> View Details
                            </a>
                            
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center text-muted no-data-message">
                    <h5 class="mb-3">No inactive committees found.</h5>
                    <p class="small">Please check back later or explore our active committees.</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection