@extends('layouts.main_dashboard.app')
@php($routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin')

@section('styles')
@endsection

@section('title',  __('dashboard.View Virtual Class Room')
@section('page_heading',  __('dashboard.View Virtual Class Room'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.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($routePrefix . '.courses.show', $course->id) }}">{{ $course->name }}</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($routePrefix . '.courses.virtual_class_rooms.index', $course->id) }}">{{ __('dashboard.All Virtual Class Rooms') }}</a></li>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.courses.virtual_class_rooms.edit', ['courseId' => $course->id, 'id' => $virtualClassRoom->id]) }}" class="btn btn-warning">{{ __('dashboard.Edit') }}</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 p-lg-15">
                <div class="d-flex flex-column flex-xl-row">
                    <div class="flex-lg-row-fluid me-xl-15">
                        <div class="mb-10">
                            <div class="d-flex flex-stack mb-5">
                                <h1 class="text-gray-900">{{ $virtualClassRoom->title }}</h1>
                                <a href="{{ $virtualClassRoom->join_link }}" target="_blank" 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.Join Class') }}</a>
                            </div>
                            <div class="fs-5 text-muted fw-semibold">
                                {!! nl2br(e($virtualClassRoom->description)) !!}
                            </div>
                        </div>
                        @if($virtualClassRoom->image)
                        <div class="mb-10">
                             <img src="{{ $virtualClassRoom->image }}" class="img-fluid rounded" alt="{{ $virtualClassRoom->title }}">
                        </div>
                        @endif
                    </div>
                    <div class="m-0">
                        <div class="d-flex flex-stack fs-4 py-3">
                            <div class="fw-bold text-gray-500">{{ __('dashboard.Status') }}</div>
                            <div class="d-flex align-items-center">
                                @if($virtualClassRoom->isUpcoming())
                                    <span class="badge badge-light-warning fs-6">{{ __('dashboard.Upcoming') }}</span>
                                @elseif($virtualClassRoom->isOngoing())
                                    <span class="badge badge-light-success fs-6">{{ __('dashboard.Ongoing') }}</span>
                                @else
                                    <span class="badge badge-light-secondary fs-6">{{ __('dashboard.Finished') }}</span>
                                @endif
                            </div>
                        </div>
                         <div class="separator separator-dashed my-1"></div>
                        <div class="d-flex flex-stack fs-4 py-3">
                            <div class="fw-bold text-gray-500">{{ __('dashboard.Published') }}</div>
                            <div class="d-flex align-items-center">
                               @if($virtualClassRoom->is_published)
                                    <span class="badge badge-light-success fs-6">{{ __('dashboard.Yes') }}</span>
                                @else
                                    <span class="badge badge-light-danger fs-6">{{ __('dashboard.No') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="separator separator-dashed my-1"></div>
                        <div class="d-flex flex-stack fs-4 py-3">
                            <div class="fw-bold text-gray-500">{{ __('dashboard.Start Time') }}</div>
                            <span class="text-gray-700 fw-bold">{{ $virtualClassRoom->start_time->format('d M, Y - h:i A') }}</span>
                        </div>
                         <div class="separator separator-dashed my-1"></div>
                        <div class="d-flex flex-stack fs-4 py-3">
                            <div class="fw-bold text-gray-500">{{ __('dashboard.End Time') }}</div>
                            <span class="text-gray-700 fw-bold">{{ $virtualClassRoom->end_time->format('d M, Y - h:i A') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@endsection