@extends('backend.layouts.app')
@push('style')
    <style>
        /* Card hover effect */
        .card {
            transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            cursor: default;
            border: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            background-color: #fff;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        /* Center the image and make it circular */
        .card-img-top {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            margin: 1rem auto 0.5rem;
            display: block;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }

        /* Card body text styling */
        .card-body {
            padding: 1rem;
        }

        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.25rem;
        }

        .card-text {
            font-size: 0.9rem;
            color: #777;
            margin-bottom: 0;
        }

        /* Empty placeholder circle */
        .bg-secondary {
            background-color: #6c757d !important;
        }

        /* Responsive gutter spacing handled by Bootstrap's g-4 */
    </style>
@endpush
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <h3 class="mb-4">Committee Details</h3>

            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title">{{ $committee->title }}</h4>
                    <p><strong>Publish Date:</strong>
                        {{ \Carbon\Carbon::parse($committee->publish_date)->format('d M, Y') }}</p>
                    <p><strong>Session:</strong> {{ $committee->session }}</p>
                    <p><strong>Status:</strong>
                        @if ($committee->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Inactive</span>
                        @endif
                    </p>
                    <p><strong>Description:</strong></p>
                    <div>{!! $committee->description !!}</div>
                </div>
            </div>

            <h4>Committee Members</h4>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
                @forelse ($committee->committee_details as $detail)
                    <div class="col">
                        <div class="card h-100 text-center shadow-sm">
                            @if ($detail->member && $detail->member->photo)
                                <img src="{{ asset('storage/' . $detail->member->photo) }}"
                                    class="card-img-top rounded-circle mx-auto mt-3" alt="{{ $detail->member->full_name }}"
                                    style="width: 100px; height: 100px; object-fit: cover;">
                            @else
                                <div class="bg-secondary rounded-circle mx-auto mt-3" style="width: 100px; height: 100px;">
                                </div>
                            @endif
                            <div class="card-body">
                                <h5 class="card-title mb-1"><a
                                        href="{{ route('member_list.show', $detail->member_id) }}">{{ $detail->member->full_name ?? '-' }}</a>
                                </h5>
                                <p class="card-text text-muted mb-0">{{ $detail->designation->name ?? 'N/A' }}</p>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <p class="text-center text-muted">No members found for this committee.</p>
                    </div>
                @endforelse
            </div>

        </div>
    </div>
@endsection