@extends(getTemplate().'.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
    <style>
        .side-filters{
            width: 73%;
            position: absolute;
            right: 208px;
            z-index: 100;
            background: #fff;
            display: none;
        }
        
        .webinar-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .webinar-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
        }
        
        @media (max-width: 768px) {
            .webinar-card {
                margin-bottom: 20px;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $classesPageHeroBg = getPageBackgroundSettings('categories');
        if (empty(trim((string) $classesPageHeroBg))) {
            foreach (['classes-banner.webp', 'classes-banner.jpg', 'classes-banner.png'] as $classesBannerFile) {
                if (file_exists(public_path('assets/default/img/page-heroes/'.$classesBannerFile))) {
                    $classesPageHeroBg = asset('assets/default/img/page-heroes/'.$classesBannerFile);
                    break;
                }
            }
        }
        if (empty(trim((string) $classesPageHeroBg))) {
            $classesPageHeroBg = asset('assets/default/img/montessori-premium/premium-home-cta-art.svg');
        }
        $classesHeroExtra = view('web.default.pages.partials.classes_hero_inner', [
            'pageTitle' => $pageTitle,
            'coursesCount' => $coursesCount,
        ])->render();
    @endphp
    @include('web.default.includes.premium.page_hero', [
        'variant' => 'image',
        'backgroundUrl' => $classesPageHeroBg,
        'backgroundAlt' => '',
        'title' => '',
        'kicker' => trans('product.courses'),
        'subtitle' => null,
        'extra' => $classesHeroExtra,
    ])

    <div class="container mt-30 premium-classes-page">

        <section class="mt-lg-50 pt-lg-20 mt-md-40 pt-md-40">
            <form action="/classes" method="get" id="filtersForm">

                @include('web.default.pages.includes.top_filters')

                <div class="row mt-20 justify-content-center">
                    <div class="col-12">

                        @if($webinars->count() > 0)
                            @if(empty(request()->get('card')) or request()->get('card') == 'grid')
                                <div class="row" style="margin: 0 -10px;">
                                    @foreach($webinars as $webinar)
                                        <div class="col-12 col-md-6 col-lg-4" style="padding: 10px; margin-bottom: 20px;">
                                            @include('web.default.includes.webinar.grid-card',['webinar' => $webinar])
                                        </div>
                                    @endforeach
                                </div>

                            @elseif(!empty(request()->get('card')) and request()->get('card') == 'list')

                                @foreach($webinars as $webinar)
                                    @include('web.default.includes.webinar.list-card',['webinar' => $webinar])
                                @endforeach
                            @endif
                        @else
                            <div class="text-center py-50">
                                <i data-feather="inbox" width="64" height="64" class="text-gray mb-20"></i>
                                <h3 class="font-20 text-dark-blue font-weight-bold">{{ trans('public.no_result_found') }}</h3>
                                <p class="mt-10 text-gray">{{ trans('public.try_different_search') }}</p>
                            </div>
                        @endif

                    </div>


                    <div class="side-filters">
                        <div class="mt-20 p-20 rounded-sm shadow-lg border border-gray300 filters-container">

                            <div class="">
                                <h3 class="category-filter-title font-20 font-weight-bold text-dark-blue">{{ trans('public.type') }}</h3>

                                <div class="pt-10">
                                    @foreach(['bundle','webinar','course','text_lesson'] as $typeOption)
                                        <div class="d-flex align-items-center justify-content-between mt-20">
                                            <label class="cursor-pointer" for="filterLanguage{{ $typeOption }}">
                                                @if($typeOption == 'bundle')
                                                    {{ trans('update.bundle') }}
                                                @else
                                                    {{ trans('webinars.'.$typeOption) }}
                                                @endif
                                            </label>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" name="type[]" id="filterLanguage{{ $typeOption }}" value="{{ $typeOption }}" @if(in_array($typeOption, request()->get('type', []))) checked="checked" @endif class="custom-control-input">
                                                <label class="custom-control-label" for="filterLanguage{{ $typeOption }}"></label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="mt-25 pt-25 border-top border-gray300">
                                <h3 class="category-filter-title font-20 font-weight-bold text-dark-blue">{{ trans('site.more_options') }}</h3>

                                <div class="pt-10">
                                    @foreach(['subscribe','certificate_included','with_quiz','featured'] as $moreOption)
                                        <div class="d-flex align-items-center justify-content-between mt-20">
                                            <label class="cursor-pointer" for="filterLanguage{{ $moreOption }}">{{ trans('webinars.show_only_'.$moreOption) }}</label>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" name="moreOptions[]" id="filterLanguage{{ $moreOption }}" value="{{ $moreOption }}" @if(in_array($moreOption, request()->get('moreOptions', []))) checked="checked" @endif class="custom-control-input">
                                                <label class="custom-control-label" for="filterLanguage{{ $moreOption }}"></label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>


                            <button type="submit" class="btn btn-sm btn-primary btn-block mt-30">{{ trans('site.filter_items') }}</button>
                        </div>
                    </div>
                </div>

            </form>
            <div class="mt-50 pt-30">
                {{ $webinars->appends(request()->input())->links('vendor.pagination.panel') }}
            </div>
        </section>
    </div>

@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>

    <script src="/assets/default/js/parts/categories.min.js"></script>
    <script>
        $('.adv-filters').click(function(){
            $('.side-filters').slideToggle();
        })
    </script>
@endpush
