@extends('public.layout.app') {{-- if you have front.layout.app, replace it --}}
@section('title', $program->name)

@section('body')
<section class="section pt-5">
    <div class="container">

        {{-- Header --}}
        <div class="glass shadow-soft p-4 p-lg-5 mb-4">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                <div>
                    <a href="{{ route('front.programs.index') }}" class="btn btn-outline-light btn-sm mb-3">
                        <i class="fa-solid fa-arrow-left me-1"></i> {{ __('front.back_to_list_2') }}
                    </a>

                    <div class="d-flex flex-wrap gap-2 mb-2">
                        @if($program->department)
                            <span class="badge-soft">
                                <i class="fa-solid fa-diagram-project me-1"></i>
                                {{ $program->department->name }}
                            </span>
                        @endif

                        @if(optional($program->department)->faculty)
                            <span class="badge-soft">
                                <i class="fa-solid fa-layer-group me-1"></i>
                                {{ $program->department->faculty->name }}
                            </span>
                        @endif

                        @if(optional($program->department?->faculty)->university)
                            <span class="badge-soft">
                                <i class="fa-solid fa-building-columns me-1"></i>
                                {{ $program->department->faculty->university->name }}
                            </span>
                        @endif

                        @if($program->code)
                            <span class="badge-soft">
                                <i class="fa-solid fa-hashtag me-1"></i>{{ $program->code }}
                            </span>
                        @endif
                    </div>

                    <h2 class="fw-extrabold mb-0" style="letter-spacing:-.02em;">
                        {{ $program->name }}
                    </h2>
                    <p class="text-muted2 mb-0 mt-2">
                        {{ __('front.program_details_and_its_relations_department_faculty_un') }}
                    </p>
                </div>

                <div class="text-end">
                    @if($program->department_id)
                        <a class="btn btn-info-soft"
                           href="{{ route('front.programs.index', ['department_id' => $program->department_id]) }}">
                            <i class="fa-solid fa-filter me-1"></i> {{ __('front.more_from_same_department') }}
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <div class="row g-3">
            {{-- Main --}}
            <div class="col-lg-8">
                <div class="card-soft shadow-soft p-3 p-lg-4">
                    <h5 class="fw-bold mb-3">
                        <i class="fa-regular fa-id-card me-1 text-muted2"></i> {{ __('front.program_info') }}
                    </h5>

                    <div class="alert alert-soft mb-0">
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge-soft">
                                <span class="text-muted2">{{ __('front.name') }}</span>
                                <strong class="ms-1">{{ $program->name }}</strong>
                            </span>

                            <span class="badge-soft">
                                <span class="text-muted2">{{ __('front.code') }}</span>
                                <strong class="ms-1">{{ $program->code ?? '—' }}</strong>
                            </span>

                            <span class="badge-soft">
                                <span class="text-muted2">{{ __('front.created') }}</span>
                                <strong class="ms-1">{{ optional($program->created_at)->format('Y-m-d') }}</strong>
                            </span>

                            <span class="badge-soft">
                                <span class="text-muted2">{{ __('front.updated_2') }}</span>
                                <strong class="ms-1">{{ optional($program->updated_at)->format('Y-m-d') }}</strong>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="col-lg-4">
                <div class="card-soft shadow-soft p-3 p-lg-4 mb-3">
                    <h6 class="fw-bold mb-3">
                        <i class="fa-solid fa-link me-1 text-muted2"></i> {{ __('front.related') }}
                    </h6>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.department') }}</span>
                        <span class="fw-semibold">{{ $program->department?->name ?? '—' }}</span>
                    </div>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.faculty') }}</span>
                        <span class="fw-semibold">{{ optional($program->department)->faculty?->name ?? '—' }}</span>
                    </div>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.university') }}</span>
                        <span class="fw-semibold">{{ optional($program->department?->faculty)->university?->name ?? '—' }}</span>
                    </div>
                </div>

                <div class="glass shadow-soft p-3 p-lg-4">
                    <h6 class="fw-bold mb-2">
                        <i class="fa-solid fa-lightbulb me-1 text-muted2"></i> {{ __('front.tip') }}
                    </h6>
                    <p class="text-muted2 mb-0">
                        {{ __('front.use_filters_on_the_programs_list_to_quickly_find_by_dep') }}
                    </p>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection