<div class="webinar-card montessori-card-glass" style="height: 100%; display: flex; flex-direction: column;">
    <figure style="margin: 0; height: 100%; display: flex; flex-direction: column;">
        <div class="image-box" style="position: relative; overflow: hidden; height: 220px;">
            @if($webinar->bestTicket() < $webinar->price)
                <span class="badge badge-danger" style="position: absolute; top: 15px; right: 15px; z-index: 2; padding: 6px 12px; border-radius: 6px;">{{ trans('public.offer',['off' => $webinar->bestTicket(true)['percent']]) }}</span>
            @elseif(empty($isFeature) and !empty($webinar->feature))
                <span class="badge badge-warning" style="position: absolute; top: 15px; right: 15px; z-index: 2; padding: 6px 12px; border-radius: 6px;">{{ trans('home.featured') }}</span>
            @elseif($webinar->type == 'webinar')
                @if($webinar->start_date > time())
                    <span class="badge badge-primary" style="position: absolute; top: 15px; right: 15px; z-index: 2; padding: 6px 12px; border-radius: 6px;">{{  trans('panel.not_conducted') }}</span>
                @elseif($webinar->isProgressing())
                    <span class="badge badge-secondary" style="position: absolute; top: 15px; right: 15px; z-index: 2; padding: 6px 12px; border-radius: 6px;">{{ trans('webinars.in_progress') }}</span>
                @else
                    <span class="badge badge-secondary" style="position: absolute; top: 15px; right: 15px; z-index: 2; padding: 6px 12px; border-radius: 6px;">{{ trans('public.finished') }}</span>
                @endif
            @elseif(!empty($webinar->type))
                <span class="badge badge-primary" style="position: absolute; top: 15px; right: 15px; z-index: 2; padding: 6px 12px; border-radius: 6px;">{{ trans('webinars.'.$webinar->type) }}</span>
            @endif

            <a href="{{ $webinar->getUrl() }}">
                {!! premium_picture_tag([
                    'src' => $webinar->getImage(),
                    'alt' => $webinar->title,
                    'class' => 'img-cover',
                    'width' => 640,
                    'height' => 360,
                    'loading' => request()->is('/') ? 'lazy' : 'lazy',
                    'sizes' => '(max-width: 768px) 100vw, 320px',
                ]) !!}
            </a>

            @if($webinar->type == 'webinar')
                <div class="progress" style="position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,0.3);">
                    <span class="progress-bar" style="width: {{ $webinar->getProgress() }}%; background: #fff; height: 100%;"></span>
                </div>

                <a href="{{ $webinar->addToCalendarLink() }}" target="_blank" class="webinar-notify d-flex align-items-center justify-content-center" style="position: absolute; bottom: 15px; left: 15px; width: 36px; height: 36px; background: rgba(255,255,255,0.9); border-radius: 50%; z-index: 2;">
                    <i data-feather="bell" width="18" height="18" class="webinar-icon" style="color: var(--primary);"></i>
                </a>
            @endif
        </div>

        <figcaption class="webinar-card-body" style="padding: 20px; flex: 1; display: flex; flex-direction: column;">
            <a href="{{ $webinar->getUrl() }}" style="text-decoration: none;">
                <h3 class="webinar-title font-weight-bold font-20 text-dark-blue" style="margin: 0 0 8px 0; line-height: 1.4; min-height: 56px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ clean($webinar->title,'title') }}</h3>
                @if(!empty($webinar->age_level))
                    <h4 class="font-weight-500 font-14 text-gray mt-5" style="margin: 0 0 12px 0;">{{ clean($webinar->age_level,'age_level') }}</h4>
                @endif
            </a>

            @if(!empty($webinar->teacher))
                <div class="user-inline-avatar d-flex align-items-center mt-10" style="margin-top: 8px;">
                    <div class="avatar bg-gray200" style="width: 32px; height: 32px; border-radius: 50%; overflow: hidden; margin-right: 8px;">
                        <img src="{{ $webinar->teacher->getAvatar() }}" class="img-cover" alt="{{ $webinar->teacher->full_name }}" width="32" height="32" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <a href="{{ $webinar->teacher->getProfileUrl() }}" target="_blank" class="user-name font-14 text-gray" style="text-decoration: none;">{{ $webinar->teacher->full_name }}</a>
                </div>
            @endif

            <div class="mt-auto" style="margin-top: auto; padding-top: 15px;">
                @if(!empty($webinar->duration))
                    <div class="d-flex align-items-center mb-10" style="margin-bottom: 10px;">
                        <i data-feather="clock" width="16" height="16" style="color: #6c757d; margin-right: 6px;"></i>
                        <span class="font-14 text-gray">{{ trans('public.duration') }}: {{ convertMinutesToHourAndMinute($webinar->duration) }} {{ trans('home.hours') }}</span>
                    </div>
                @endif

                <div class="d-flex align-items-center justify-content-between mt-15" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #e9ecef;">
                    <div class="webinar-price-box">
                        @if(!empty($isRewardCourses) and !empty($webinar->points))
                            <span class="font-18 font-weight-bold text-warning">{{ $webinar->points }} {{ trans('update.points') }}</span>
                        @elseif(!empty($webinar->price) and $webinar->price > 0)
                            @if($webinar->bestTicket() < $webinar->price)
                                <div class="d-flex flex-column">
                                    <span class="font-16 text-decoration-line-through text-gray" style="text-decoration: line-through;">{{ formatModelPrice($webinar->price, $webinar) }}</span>
                                    <span class="font-22 font-weight-bold text-primary">{{ formatModelPrice($webinar->bestTicket(), $webinar) }}</span>
                                </div>
                            @else
                                <span class="font-22 font-weight-bold text-primary">{{ formatModelPrice($webinar->price, $webinar) }}</span>
                            @endif
                        @else
                            <span class="font-18 font-weight-bold text-success">{{ trans('public.free') }}</span>
                        @endif
                    </div>

                    <a href="{{ $webinar->getUrl() }}" class="btn btn-premium btn-sm" style="padding: 10px 20px; border-radius: 50px; font-weight: 600; white-space: nowrap;">
                        {{ trans('public.enroll_on_webinar') }}
                    </a>
                </div>
            </div>
        </figcaption>
    </figure>
</div>

<style>
.webinar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.webinar-card:hover .image-box img {
    transform: scale(1.05);
}
</style>
