@push('styles_top')
    <style>

    </style>
@endpush

@php
    $user = Auth()->user();
    //fixed hasBought
    $hasBought = $webinar->checkUserHasBought($user) || $webinar->checkUserHasDepartmentTrainingAccess($user);

    //Add checkUserHasDepartmentTrainingAccess
    //$webinar->checkUserHasDepartmentTrainingAccess($user)
    $canSale = ($webinar->canSale() and !$hasBought);
@endphp
<div class="card extended-info-popup hide rounded bg-dark border-gray border-1 shadow-sm" id="popup-{{ $courseUID }}">
    <div class="card-body p-1">
        <h3 class="card-title"><a class="" href="{{ $webinar->getUrl() }}">
                {{ clean($webinar->title, 'title') }}
            </a></h3>

        <p class="card-text mb-0">
            @if (!empty($webinar->category))
                <span class="fs-4">{{ trans('public.in') }} <a href="{{ $webinar->category->getUrl() }}" target="_blank"
                        class="text-decoration-none ">{{ $webinar->category->title }}</a></span>
            @endif
        </p>

        <p class="card-text mb-0"><i class="ki-outline ki-time fs-5"></i>
            <span class="mx-2 text-gray-600">{{ convertMinutesToHourAndMinute($webinar->duration) }}
                {{ trans('home.hours') }}</span>
            <span class="mx-2 text-gray-600">-</span>
            <span class="mx-2 text-gray-600">All Levels</span>
        </p>
        <p class="fs-4 fw-bold text-gray">This is an example short description of the course. Keep it about this length.
        </p>
        <div class="d-flex align-items-start mb-2">
            <i class="mx-2 ki-outline ki-check fs-4 text-primary"></i>
            <div class="mx-2 text-gray fs-5">
                This is course sub-description 1 . Keep it about this length, or not. The container is responsive.
            </div>
        </div>
        <div class="d-flex align-items-start mb-2">
            <i class="mx-2 ki-outline ki-check fs-4 text-primary"></i>
            <div class="mx-2 text-gray fs-5">
                This is course sub-description 2. Keep it about this length, or not. The container is responsive.
            </div>
        </div>
        <div class="d-flex align-items-start mb-2">
            <i class="mx-2 ki-outline ki-check fs-4 text-primary"></i>
            <div class="mx-2 text-gray fs-5">
                This is course sub-description 3. Keep it about this length, or not. The container is responsive.
            </div>
        </div>
        <div class="mt-auto text-center">
            @if (!$canSale and $webinar->canJoinToWaitlist())
                <button type="button" data-slug="{{ $webinar->slug }}"
                    class="btn btn-primary w-80 {{ !$authUserJoinedWaitlist ? (!empty($authUser) ? 'js-join-waitlist-user' : 'js-join-waitlist-guest') : 'disabled' }}"
                    {{ $authUserJoinedWaitlist ? 'disabled' : '' }}>
                    <i class="fas fa-clock me-2"></i>
                    @if ($authUserJoinedWaitlist)
                        {{ trans('update.already_joined') }}
                    @else
                        {{ trans('update.join_waitlist') }}
                    @endif
                </button>
            @elseif($hasBought or !empty($webinar->getInstallmentOrder()))
                <a href="{{ $webinar->getLearningPageUrl() }}" class="btn btn-success w-80">
                    <i class="fas fa-graduation-cap me-2"></i>
                    {{ trans('update.go_to_learning_page') }}
                </a>
            @elseif(!empty($webinar->price) and $webinar->price > 0)
                <button type="button" id="button-{{ $courseUID }}"
                    class="btn mt-2 btn-primary w-80 {{ $canSale ? 'js-course-add-to-cart-btn' : $webinar->cantSaleStatus($hasBought) . ' disabled ' }}">
                    @if (!$canSale)
                        @if ($webinar->checkCapacityReached())
                            {{ trans('update.capacity_reached') }}
                        @else
                            {{ trans('update.disabled_add_to_cart') }}
                        @endif
                    @else
                        {{ trans('public.add_to_cart') }}
                    @endif
                </button>

                @if ($canSale and !empty(getFeaturesSettings('direct_classes_payment_button_status')))
                    <button type="button" class="btn btn-danger w-80 mt-2 js-course-direct-payment">
                        {{ trans('update.buy_now') }}
                    </button>
                @endif

                @if (!empty($installments) and count($installments) and getInstallmentsSettings('display_installment_button'))
                    <a href="/course/{{ $webinar->slug }}/installments" class="btn btn-outline-primary w-80 mt-2">
                        {{ trans('update.pay_with_installments') }}
                    </a>
                @endif
            @else
                <a href="{{ $canSale ? '/course/' . $webinar->slug . '/free' : '#' }}"
                    class="btn mt-2 btn-primary w-80 {{ !$canSale ? ' disabled ' . $webinar->cantSaleStatus($hasBought) : '' }}">
                    @if (!$canSale)
                        @if ($webinar->checkCapacityReached())
                            {{ trans('update.capacity_reached') }}
                        @else
                            {{ trans('public.disabled') }}
                        @endif
                    @else
                        {{ trans('public.enroll_on_webinar') }}
                    @endif
                </a>
            @endif

            {{-- @if ($canSale and $webinar->subscribe)
                <a href="/subscribes/apply/{{ $webinar->slug }}"
                    class="btn btn-outline-primary w-80 mt-2 @if (!$canSale) disabled @endif">
                    {{ trans('public.subscribe') }}
                </a>
            @endif --}}
        </div>
    </div>
</div>