@extends('layouts.app')

@section('title', 'Academic Programs - ' . $siteContext->name)

@section('content')
    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background-image: url('{{ asset('assets/img/breadcrumb/breadcrumb.jpg') }}'); background-size: cover; background-position: center; padding: 80px 0;">
        <div class="container text-center text-white">
            <h2 class="breadcrumb-title text-white">Academic Programs</h2>
            <ul class="breadcrumb-menu d-flex justify-content-center list-unstyled gap-2 mt-2">
                <li><a href="{{ route('home') }}" class="text-white">Home</a></li>
                <li class="text-white">/</li>
                <li class="active text-white">Programs</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- programs section -->
    <div class="course-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline">Academics</span>
                        <h2 class="site-title">Explore Our Educational Schemes</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($programs as $program)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="course-item">
                            <div class="course-img">
                                @if($program->image)
                                    <img src="{{ asset('storage/' . $program->image) }}" alt="{{ $program->name }}">
                                @else
                                    <img src="{{ asset('assets/img/course/course-1.jpg') }}" alt="Default Program">
                                @endif
                            </div>
                            <div class="course-content">
                                <div class="course-meta">
                                    <span class="course-duration"><i class="far fa-clock"></i>{{ $program->duration }}</span>
                                </div>
                                <h4 class="course-title">
                                    <a href="{{ route('academics.show', $program->slug) }}">{{ $program->name }}</a>
                                </h4>
                                <p class="course-desc">
                                    {{ Str::limit($program->description, 120) }}
                                </p>
                                <div class="course-bottom">
                                    <a href="{{ route('academics.show', $program->slug) }}" class="course-btn">Learn More<i class="fas fa-arrow-right-long"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center">
                        <p class="text-muted">No academic programs added yet for this site context.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
    <!-- programs section end -->
@endsection