@extends('website.layouts.app', ['event_color' => isset($event) ? $event?->color : null])

@foreach ($meetAndGreet->seos as $seo)
    @section($seo->key, $seo->value)
@endforeach

@section('content')

    <section class="bg-light py-10" id="meetAndGreetDetailsSection">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    @include('website.components.success-submit')
                    @include('website.components.error-submit')
                </div>
            </div>
            <h1 class="text-primary fs-32 fw-bold mb-7">
                {{ $meetAndGreet->title }}
            </h1>

            <div class="row g-3">
                <div class="col-12 col-xl-8">
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            @if ($meetAndGreet->image)
                                <div class="mb-2">
                                    <img class="img-fluid" src="{{ asset('storage/'.$meetAndGreet->image?->path) }}" alt="{{ $meetAndGreet->title }}" />
                                </div>
                            @else
                                <div class="border border-7 border-event-color mb-2">
                                    <img class="w-100 h-100" src="{{ $meetAndGreet?->speaker?->main_image_thumbnail ?? $meetAndGreet?->speaker?->main_image_path }}" alt="{{ $meetAndGreet?->speaker?->name }}" />
                                </div>
                            @endif
                        </div>

                        <div class="col-12 col-md-8">
                            <div class="px-3">
                                @if ($meetAndGreet->speaker)
                                    <div class="text-primary fs-26 fw-bold lh-sm mb-1">
                                        {{ $meetAndGreet->speaker->name }}
                                    </div>
                                @endif

                                <span class="badge {{ ($meetAndGreet->level?->color() ? 'bg-'.$meetAndGreet->level->color() : bg-secondary) }}">
                                    {{ $meetAndGreet->level?->label() }}
                                </span>

                                <div class="d-flex flex-column gap-0 fs-14 my-3">
                                    @if ($meetAndGreet->speaker)
                                        <div class="d-flex align-items-center gap-1">
                                            <i class="fas fa-briefcase text-primary"></i>
                                            {{ $meetAndGreet->speaker->job_title }}
                                        </div>
                                    @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">
                                            <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->description)
                                        {{ nl2br($meetAndGreet->description) }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if ($meetAndGreetPageSettings['meet_and_greet_opening_at'] <= now())
                    <div class="col-12 col-xl-4">
                        <div class="mb-2 lh-md">
                            <div class="text-primary text-uppercase fs-20 fw-bold">
                                {{ __('app.Registration is now open') }}
                            </div>

                            @if (! empty($meetAndGreetPageSettings['meet_and_greet_card_who_can_attend']))
                                <div class="d-flex flex-row justify-content-between gap-2 fs-16">
                                    <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
                        </div>

                        <div class="bg-primary rounded text-white px-4 py-3 mt-2">
                            <form method="POST" action="{{ route('website.meet-and-greet.book-ticket', ['ulid' => $meetAndGreet->ulid]) }}">
                                @csrf

                                <div class="form-group">
                                    <label class="label text-capitalize mb-1">
                                        {{ __('labels.Enter your email') }}
                                    </label>

                                    <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" />

                                    @include('website.components.invalid-input', ['name' => 'name'])
                                </div>

                                <div class="text-center mt-4 mx-auto">
                                    <button type="submit" class="btn btn-light shadow-none text-uppercase text-primary mx-auto py-1">
                                        Register
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @else
                    <div class="col-12 col-xl-4">
                        <p class="lead rounded p-3 bg-color2">{{ $meetAndGreetPageSettings['meet_and_greet_opening_at_error_message'] }}</p>
                    </div>
                @endif
            </div>
        </div>
    </section>

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

@endsection