@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">
    <link rel="stylesheet" href="{{ asset('assets/default/css/premium-graduates.css') }}?v=20260211">
@endpush

@php
    $gradHeroExtra = view('web.default.pages.partials.graduates_hero_inner', [
        'title' => $title,
        'bannerDescription' => $bannerDescription ?? null,
        'graduatesCount' => $graduatesCount,
        'page' => $page,
    ])->render();
@endphp

@section('content')
    @include('web.default.includes.premium.page_hero', [
        'variant' => 'image',
        'backgroundUrl' => $bannerImage ?? '/store/1/default_images/category_cover.png',
        'backgroundAlt' => $title,
        'title' => '',
        'kicker' => $title,
        'subtitle' => null,
        'extra' => $gradHeroExtra,
    ])

    <div class="container">

        @if($showGraduates ?? true)

        <form id="filtersForm" action="/{{ $page }}" method="get">

            <div id="topFilters" class="premium-graduates-filter-bar mt-25 shadow-lg border border-gray300 rounded-sm p-10 p-md-20">
                <div class="row align-items-center w-100 m-0">

                    <div class="col-lg-6 col-xl-4 d-flex align-items-center px-0 px-md-10">
                        <select name="course" class="form-control w-100">
                            <option disabled selected>{{ trans('public.sort_by') }}</option>
                            <option value="">{{ trans('public.all') }}</option>
                            @foreach($courses as $course)
                                <option value="{{$course->title}}" @if(request()->get('course') == $course->title) selected="selected" @endif>{{ $course->title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-6 col-xl-4 mt-15 mt-lg-0 px-0 px-md-10">
                        <button type="submit" class="btn btn-primary btn-block rounded-pill">{{ trans('site.filter_items') }}</button>
                    </div>
                </div>
            </div>
        </form>

        <section>
            <div id="instructorsList" class="row mt-20">

                @forelse($graduates as $graduate)

                    @php

                        $student = $graduate->student()->first();
                    @endphp
                    <div class="col-12 col-md-6 col-lg-4 graduates-card-item">

                        <div class="graduates-card-wrapper rounded-lg shadow-sm mt-25 p-20 course-teacher-card instructors-list text-center d-flex align-items-center flex-column position-relative">
                            <div class="text-center d-flex flex-column align-items-center">
                                @php
                                    $cardImage = $graduateImages[$graduate->id] ?? null;
                                    $savedCountryName = $graduateCountries[$graduate->id] ?? null;
                                    $savedCountryFlag = null;
                                    $savedFlagImage = $graduateFlags[$graduate->id] ?? null;

                                    if ($savedCountryName) {
                                        $savedCountryName = trim($savedCountryName);
                                        if (!$savedFlagImage && class_exists('\App\Helpers\CountryHelper')) {
                                            $savedCountryFlag = \App\Helpers\CountryHelper::getCountryFlag($savedCountryName);
                                        }
                                    }
                                @endphp
                                <div class="teacher-avatar position-relative graduates-avatar-container">
                                    @include('web.default.includes.premium.responsive_image', [
                                        'src' => $cardImage ?: $student->getAvatar(100),
                                        'alt' => $student->full_name,
                                        'class' => 'graduates-avatar-img',
                                        'width' => 80,
                                        'height' => 80,
                                        'loading' => 'lazy',
                                    ])

                                    @if($student->offline)
                                        <span class="user-circle-badge unavailable d-flex align-items-center justify-content-center">
                <i data-feather="slash" width="20" height="20" class="text-white"></i>
                </span>
                                    @elseif($student->verified)
                                        <span class="user-circle-badge has-verified d-flex align-items-center justify-content-center">
                    <i data-feather="check" width="20" height="20" class="text-white"></i>
                </span>
                                    @endif
                                </div>

                                <h3 class="mt-15 font-16 font-weight-bold text-dark-blue text-center">{{ $student->full_name }}</h3>

                                @if($savedCountryName)
                                    <div class="mt-8 d-flex align-items-center justify-content-center country-info">
                                        @if($savedFlagImage)
                                            @include('web.default.includes.premium.responsive_image', [
                                                'src' => $savedFlagImage,
                                                'alt' => $savedCountryName,
                                                'class' => 'country-flag-img mr-2',
                                                'width' => 20,
                                                'height' => 15,
                                                'loading' => 'lazy',
                                            ])
                                        @elseif($savedCountryFlag)
                                            <span class="country-flag-emoji mr-2">{{ $savedCountryFlag }}</span>
                                        @endif
                                        <span class="country-name font-14 text-gray">{{ $savedCountryName }}</span>
                                    </div>
                                @endif
                            </div>

                            <div class="mt-5 font-14 text-gray">
                                @if(!empty($graduate->comment))
                                    {{ $graduate->comment }}
                                @endif
                            </div>

                            <div class="stars-card d-flex align-items-center mt-10">
                                @include('web.default.includes.webinar.rate',['rate' => $graduate->review])
                            </div>

                            <div class="d-flex align-items-center mt-25">
                                @foreach($student->getBadges() as $badge)
                                    <div class="mr-15" data-toggle="tooltip" data-placement="bottom" data-html="true" title="{!! (!empty($badge->badge_id) ? nl2br($badge->badge->description) : nl2br($badge->description)) !!}">
                                        <img src="{{ !empty($badge->badge_id) ? $badge->badge->image : $badge->image }}" width="32" height="32" alt="{{ !empty($badge->badge_id) ? $badge->badge->title : $badge->title }}" loading="lazy" decoding="async">
                                    </div>
                                @endforeach
                            </div>

                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="text-center py-50">
                            <p class="font-16 text-gray">لا يوجد خريجين متاحين</p>
                        </div>
                    </div>
                @endforelse

            </div>
        </section>

        @else
            <div class="row">
                <div class="col-12">
                    <div class="text-center py-50">
                        <p class="font-16 text-gray">قسم الخريجين غير مفعل حالياً</p>
                    </div>
                </div>
            </div>
        @endif
    </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/instructors.min.js"></script>
@endpush
