@extends('layouts.main_dashboard.app')

@section('title', $lesson->title)
@section('page_heading', $lesson->title)

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route('admin.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route('admin.subjects.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.Subjects') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route('admin.lessons.index', $subject->id) }}" class="text-muted text-hover-primary">{{ __('dashboard.Lessons') }}</a></li>
@endsection

@section('actions')
    <a href="{{ route('admin.lessons.edit', ['subjectId' => $subject->id, 'id' => $lesson->id]) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">{{ __('dashboard.Edit') }}</a>
    <a href="{{ route('admin.lessons.index', $subject->id) }}" class="btn btn-flex btn-outline btn-color-gray-700 btn-active-color-primary bg-body h-40px fs-7 fw-bold ms-2">{{ __('dashboard.Back') }}</a>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
            <div class="card-body pt-7">
                <div class="row g-5">
                    @if($lesson->image)
                    <div class="col-12">
                        <img src="{{ $lesson->image }}" class="rounded mw-100 mh-300px object-fit-cover" alt="{{ $lesson->title }}">
                    </div>
                    @endif
                    <div class="col-md-6">
                        <label class="fs-6 fw-semibold text-gray-600">{{ __('dashboard.Title') }}</label>
                        <div class="fs-5 fw-bold text-gray-800 mt-1">{{ $lesson->title }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="fs-6 fw-semibold text-gray-600">{{ __('dashboard.Unit') }}</label>
                        <div class="fs-5 fw-bold text-gray-800 mt-1">{{ $lesson->subjectUnit->name ?? __('dashboard.Not Assigned') }}</div>
                    </div>
                    @if($lesson->description)
                    <div class="col-12">
                        <label class="fs-6 fw-semibold text-gray-600">{{ __('dashboard.Description') }}</label>
                        <div class="fs-5 text-gray-800 mt-1">{{ $lesson->description }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection