@extends('layouts.app')

@section('title', $program->name . ' - ' . $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">{{ $program->name }}</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><a href="{{ route('academics.index') }}" class="text-white">Programs</a></li>
                <li class="text-white">/</li>
                <li class="active text-white">{{ $program->name }}</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- program single section -->
    <div class="course-single-area py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="course-single-wrapper">
                        <div class="course-single-img mb-4">
                            @if($program->image)
                                <img src="{{ asset('storage/' . $program->image) }}" alt="{{ $program->name }}" class="img-fluid rounded shadow-sm">
                            @else
                                <img src="{{ asset('assets/img/course/course-single.jpg') }}" alt="Default Program" class="img-fluid rounded shadow-sm">
                            @endif
                        </div>
                        <div class="course-single-content">
                            <h2 class="mb-3">{{ $program->name }}</h2>
                            <div class="course-single-text">
                                <p class="lead">
                                    {{ $program->description }}
                                </p>
                                <p class="mt-3">
                                    We offer a highly interactive, research-driven study environment for students enrolled in {{ $program->name }}. Under our guidance, pupils enjoy full access to state-of-the-art laboratory machinery, updated library documents, and active digital resources. We aim to help every child unlock their full academic potential.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="course-sidebar p-4 border bg-light rounded shadow-sm">
                        <h4 class="mb-3 border-bottom pb-2">Program Overview</h4>
                        <ul class="list-unstyled d-flex flex-column gap-3">
                            <li class="d-flex justify-content-between">
                                <strong>Duration:</strong>
                                <span>{{ $program->duration }}</span>
                            </li>
                            <li class="d-flex justify-content-between">
                                <strong>Institution:</strong>
                                <span>{{ $siteContext->name }}</span>
                            </li>
                            <li class="d-flex justify-content-between">
                                <strong>Location:</strong>
                                <span>{{ $siteContext->address }}</span>
                            </li>
                        </ul>
                        <div class="mt-4">
                            <a href="{{ route('contact') }}" class="theme-btn w-100 text-center">Enroll / Inquiry Now <i class="fas fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- program single section end -->
@endsection