@extends('website.layouts.app')

@section('content')

    <section class="meet-and-greet bg-light" id="meetAndGreetSection">
        @if (! empty($meetAndGreetPageSettings['meet_and_greet_page_header_description']) || ! empty($meetAndGreetPageSettings['meet_and_greet_page_header_btn_link']))
            <div class="bg-color4 py-10">
                <div class="container text-center">
                    <h2 class="text-white text-uppercase fs-48 fw-bold mb-5">
                        {{ __('app.Meet and greet') }}
                    </h2>

                    <div class="mb-4">
                        @if(! empty($meetAndGreetPageSettings['meet_and_greet_page_header_description']))
                            {!! html_entity_decode($meetAndGreetPageSettings['meet_and_greet_page_header_description']) !!}
                        @endif
                    </div>

                    @if(! empty($meetAndGreetPageSettings['meet_and_greet_page_header_btn_link']))
                        <a href="{{ $meetAndGreetPageSettings['meet_and_greet_page_header_btn_link'] }}" class="btn btn-primary bg-event-color border-event-color py-1">
                            {{ $meetAndGreetPageSettings['meet_and_greet_page_header_btn_title'] }}
                        </a>
                    @endif
                </div>
            </div>
        @endif

        <div class="container-fluid py-10 px-3 px-lg-7 px-md-5">
            <h2 class="text-primary text-uppercase fs-38 fw-bold mb-5">
                {{ __('app.Meet and greet') }}
            </h2>

            <div class="row g-3 mb-3">
                @forelse ($meetAndGreets as $meetAndGreet)
                    <div class="col-12 col-sm-6 col-lg-4 col-xxl-4">
                        <div class="position-relative border">
                            @if ($meetAndGreet->image)
                                <div class="meet-and-greet-img-container">
                                    <img class="img-fluid mx-auto meet-and-greet-img" src="{{ $meetAndGreet->main_image_thumbnail ?? $meetAndGreet->main_image_path }}" alt="{{ $meetAndGreet->title }}" />
                                </div>
                            @else
                                <div class="row gy-2 gx-1">
                                    <div class="col-12 col-sm-5">
                                        <div class="speaker-img-container">
                                            <img class="img-fluid mx-auto" src="{{ $meetAndGreet->main_image_thumbnail ?? $meetAndGreet->main_image_path }}" alt="{{ $meetAndGreet?->speaker?->name }}" />
                                        </div>
                                    </div>

                                    <div class="col-12 col-sm-7">
                                        <div class="p-3">
                                            <span class="badge {{ ($meetAndGreet->level?->color() ? 'bg-'.$meetAndGreet->level->color() : bg-secondary) }}">
                                                {{ $meetAndGreet->level?->label() }}
                                            </span>

                                            <div class="text-dark fs-16 fw-bold lh-sm my-2">
                                                {{ Str::limit($meetAndGreet->title, 44, '...') }}
                                            </div>

                                            <div class="d-flex flex-column gap-0 fs-14 my-2">
                                                @if ($meetAndGreet->speaker)
                                                    <div class="d-flex align-items-center gap-1">
                                                        <i class="fas fa-microphone-alt fs-16 text-primary"></i>
                                                        {{ $meetAndGreet->speaker->name }}
                                                    </div>
                                                    
                                                    @if ($meetAndGreet->speaker->job_title)
                                                        <div class="d-flex align-items-center gap-1">
                                                            <i class="fas fa-briefcase text-primary"></i>
                                                            {{ Str::limit($meetAndGreet->speaker->job_title, 27, '...') }}
                                                        </div>
                                                    @endif
                                                @endif

                                                @if ($meetAndGreet->language)
                                                    <div class="d-flex align-items-center gap-1">
                                                        <i class="fas fa-globe-africa text-primary"></i>
                                                        {{ $meetAndGreet->language }}
                                                    </div>
                                                @endif

                                                @if ($meetAndGreet->location)
                                                    <div class="d-flex align-items-center gap-1 language">
                                                        <i class="fas fa-map-marker-alt text-primary"></i>
                                                        {{ $meetAndGreet->location }}
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="my-2 fs-14 lh-sm">
                                                @if ($meetAndGreet->short_description)
                                                    {{ Str::limit($meetAndGreet->short_description, 64, '...') }}
                                                @endif
                                            </div>

                                            <div class="mt-4">
                                                <a href="{{ route('website.meet-and-greet.show', ['ulid' => $meetAndGreet->ulid]) }}" class="btn btn-outline-dark shadow-none rounded-0 py-1 px-3 fs-15">
                                                    {{ __('app.More info and register') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if(! empty($meetAndGreetPageSettings['meet_and_greet_card_who_can_attend']))
                                <div class="bg-primary text-white d-flex flex-column flex-sm-row justify-content-between gap-2 fs-12 py-1 px-2">
                                    <div>{{ __('app.Who can attend') }}</div>

                                    <div class="d-flex align-items-center gap-1">
                                        <i class="fas fa-ticket-alt"></i>
                                        {{ $meetAndGreetPageSettings['meet_and_greet_card_who_can_attend'] }}
                                    </div>
                                </div>
                            @endif
                            <a href="{{ route('website.meet-and-greet.show', ['ulid' => $meetAndGreet->ulid]) }}" class="stretched-link"></a>
                        </div>
                    </div>
                @empty
                    <div class="col-12 mx-auto text-center">
                        <p class="lead my-16 fs-38">
                            No Meet & Greet Found
                        </p>
                    </div>
                @endforelse

                <div class="col-12 mt-3">
                    {{ $meetAndGreets->withQueryString()->links('website.layouts.pagination') }}
                    {{-- $meetAndGreets->onEachSide(1)->withQueryString()->links() --}}
                </div>
            </div>
        </div>
    </section>

    @include('website.sections.subscribe-form')

@endsection