@php
    // var_dump($webinar->home_page);
    $name = $webinar->creator->full_name;
    if (!empty($upcomingCourse)) {
        $name = $upcomingCourse->creator->full_name;
    }

@endphp


<!--begin::Card widget 18-->
<div class="card card-flush h-xl-100">
    <!--begin::Body-->
    <div class="card-body py-9">
        <!--begin::Row-->
        <div class="row gx-9 h-100">
            <!--begin::Col-->
            <div class="col-12 mb-5">
                <div class="d-flex flex-column">
                    {{-- <span class="text-gray-500 fs-7 fw-bold me-2 d-block lh-1 pb-1">Featured</span> --}}
                    <span class="text-gray-800 fs-1 fw-bold me-2 d-block lh-1 pb-1 text-wrap overflow-auto">{{$webinar->title}}</span>
                </div>
            </div>
        </div>
        <div class="row gx-9 h-100">
            <div class="col-sm-6 mb-10 mb-sm-0">
                <!--begin::Image-->
                <div class="bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-300px min-h-sm-100 h-100"
                    style="background-size: 100% 100%;background-image:url('/assets/media/stock/600x600/img-65.jpg')">
                </div>
                <!--end::Image-->
            </div>
            <!--end::Col-->
            <!--begin::Col-->
            <div class="col-sm-6">
                <!--begin::Wrapper-->
                <div class="d-flex flex-column h-100">
                    <!--begin::Header-->
                    <div class="mb-7">
                        <!--begin::Headin-->
                        <div class="d-flex flex-stack mb-6">
                            <!--begin::Title-->
                            <div class="flex-shrink-0 me-5">
                                <span class="text-gray-500 fs-7 fw-bold me-2 d-block lh-1 pb-1">Featured</span>
                                <span class="text-gray-800 fs-1 fw-bold">9 Degree</span>
                            </div>
                            <!--end::Title-->
                            <span class="badge badge-light-primary flex-shrink-0 align-self-center py-3 px-4 fs-7">In
                                Process</span>
                        </div>
                        <!--end::Heading-->
                        <!--begin::Items-->
                        <div class="d-flex align-items-center flex-wrap d-grid gap-2">
                            <!--begin::Item-->
                            <div class="d-flex align-items-center me-5 me-xl-13">
                                <!--begin::Symbol-->
                                <div class="symbol symbol-30px symbol-circle me-3">
                                    <img src="/assets/media/avatars/300-3.jpg" class="" alt="" />
                                </div>
                                <!--end::Symbol-->
                                <!--begin::Info-->
                                <div class="m-0">
                                    <span class="fw-semibold text-gray-500 d-block fs-8">Manager</span>
                                    <a href="?page=pages/user-profile/overview"
                                        class="fw-bold text-gray-800 text-hover-primary fs-7">Robert Fox</a>
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Item-->
                            <!--begin::Item-->
                            <div class="d-flex align-items-center">
                                <!--begin::Symbol-->
                                <div class="symbol symbol-30px symbol-circle me-3">
                                    <span class="symbol-label bg-success">
                                        <i class="ki-outline ki-abstract-41 fs-5 text-white"></i> </span>
                                </div>
                                <!--end::Symbol-->
                                <!--begin::Info-->
                                <div class="m-0">
                                    <span class="fw-semibold text-gray-500 d-block fs-8">Budget</span>
                                    <span class="fw-bold text-gray-800 fs-7">$64.800</span>
                                </div>
                                <!--end::Info-->
                            </div>
                            <!--end::Item-->
                        </div>
                        <!--end::Items-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div class="mb-6">
                        <!--begin::Text-->
                        <span class="fw-semibold text-gray-600 fs-6 mb-8 d-block">
                            Flat cartoony illustrations with vivid
                            unblended colors and asymmetrical beautiful purple hair lady
                        </span>
                        <!--end::Text-->
                        <!--begin::Stats-->
                        <div class="d-flex">
                            <!--begin::Stat-->
                            <div
                                class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-3">
                                <!--begin::Date-->
                                <span class="fs-6 text-gray-700 fw-bold">Feb 6, 2021</span>
                                <!--end::Date-->
                                <!--begin::Label-->
                                <div class="fw-semibold text-gray-500">Due Date</div>
                                <!--end::Label-->
                            </div>
                            <!--end::Stat-->
                            <!--begin::Stat-->
                            <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 mb-3">
                                <!--begin::Number-->
                                <span class="fs-6 text-gray-700 fw-bold">$<span class="ms-n1" data-kt-countup="true"
                                        data-kt-countup-value="284,900.00">0</span></span>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold text-gray-500">Budget</div>
                                <!--end::Label-->
                            </div>
                            <!--end::Stat-->
                        </div>
                        <!--end::Stats-->
                    </div>
                    <!--end::Body-->
                    <!--begin::Footer-->
                    <div class="d-flex flex-stack mt-auto bd-highlight">
                        <!--begin::Users group-->
                        <div class="symbol-group symbol-hover flex-nowrap">
                            <div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip" title="Melody Macy">
                                <img alt="Pic" src="/assets/media/avatars/300-2.jpg" />
                            </div>
                            <div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip"
                                title="Michael Eberon">
                                <img alt="Pic" src="/assets/media/avatars/300-3.jpg" />
                            </div>
                            <div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip"
                                title="Susan Redwood">
                                <span class="symbol-label bg-primary text-inverse-primary fw-bold">S</span>
                            </div>
                        </div>
                        <!--end::Users group-->
                        <!--begin::Actions-->
                        <a href="?page=apps/projects/project"
                            class="d-flex align-items-center text-primary opacity-75-hover fs-6 fw-semibold">
                            View Project
                            <i class="ki-outline ki-exit-right-corner fs-4 ms-1"></i>
                        </a>
                        <!--end::Actions-->
                    </div>
                    <!--end::Footer-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
    </div>
    <!--end::Body-->

    <!--end::Card widget 18-->
    <div class="extended-info-popup" id="popup-{{ $webinar->id }}" style="display: none;">
        <div class="popup-content">
            <div class="container-fluid">
                {{-- row 1 --}}
                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="d-flex align-items-center">
                            <a href="{{ $webinar->getUrl() }}">
                                <h3 class="mt-5 webinar-title font-weight-bold font-12 text-dark-blue">
                                    {{ clean($webinar->title, 'title') }}</h3>
                            </a>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-12">
                        @if (!empty($webinar->category))
                            <span class="d-block font-14">{{ trans('public.in') }} <a
                                    href="{{ $webinar->category->getUrl() }}" target="_blank"
                                    class="text-decoration-underline">{{ $webinar->category->title }}</a></span>
                        @endif
                    </div>
                </div>
                {{-- row 2 --}}
                <div class="row mt-1">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i data-feather="clock" width="20" height="20" class="webinar-icon"></i>
                            <span class="duration font-12 ml-2">{{ convertMinutesToHourAndMinute($webinar->duration) }}
                                {{ trans('home.hours') }}</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i data-feather="calendar" width="20" height="20" class="webinar-icon"></i>
                            <span
                                class="date-published font-12 ml-2">{{ dateTimeFormat(!empty($webinar->start_date) ? $webinar->start_date : $webinar->created_at, 'j M Y') }}</span>
                        </div>
                    </div>
                </div>


                {{-- row 3 --}}
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="user-inline-avatar d-flex align-items-center">
                            <div class="avatar bg-gray200">
                                <img src="{{ $webinar->teacher->getAvatar() }}" class="img-cover"
                                    alt="{{ $name }}">
                            </div>
                            <a href="{{ $webinar->teacher->getProfileUrl() }}" target="_blank"
                                class="user-name font-12 ml-2">{{ $name }}</a>
                        </div>
                    </div>
                </div>

                {{-- row 4 --}}
                <div class="row mt-3">
                    <div class="col-12">
                        {{-- @if ($webinar->type == 'webinar')
                            <a href="{{ $webinar->addToCalendarLink() }}" target="_blank" class="webinar-notify d-flex align-items-center justify-content-center">
                                <i data-feather="bell" width="20" height="20" class="webinar-icon"></i>
                                <span class="ml-5">{{ trans('public.add_to_calendar') }}</span>
                            </a>
                        @endif --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>