@extends('layouts.dashboard')

@section('title', 'Student Chapter Affiliation | AICDS')

@section('dashboard_content')

<div class="card p-4 border rounded-4 shadow-sm bg-white mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold mb-0">Collegiate Student Chapter Nexus</h5>
        <a href="{{ route('student-chapter.apply') }}" class="btn btn-sm btn-outline-primary rounded-pill">Apply to Establish Campus Chapter</a>
    </div>

    <p class="text-muted small mb-4">AICDS Student Members are automatically aligned with their collegiate campus chapter to access regional hackathons, workshop sponsorships, and student leadership elections.</p>

    <div class="row g-4">
        @forelse($chapters as $ch)
            <div class="col-md-6">
                <div class="p-4 bg-light rounded-4 border h-100">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-success text-uppercase">{{ $ch->chapter_code }}</span>
                        <small class="text-muted">{{ $ch->institution_type }}</small>
                    </div>
                    <h5 class="fw-bold mb-1">{{ $ch->institution_name }}</h5>
                    <p class="small text-muted mb-2"><i class="icofont-location-pin text-primary"></i> {{ $ch->city }}, {{ $ch->state }}</p>
                    <div class="small border-top pt-2">
                        <div><strong>Faculty Coordinator:</strong> {{ $ch->faculty_coordinator_name }}</div>
                        <div><strong>Student Chair:</strong> {{ $ch->student_chairperson_name }}</div>
                        <div class="text-primary mt-1"><strong>Active Student Roster:</strong> {{ $ch->proposed_student_count }} Members</div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-4">
                <p class="text-muted small">No chapters found.</p>
            </div>
        @endforelse
    </div>
</div>

@endsection