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

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

@section('content')

    <section class="bg-light py-10" id="workshopDetailsSection">
        <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">
                {{ $workshop->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">
                            <div class="border border-7 border-event-color mb-2">
                                <img class="w-100 h-100" src="{{ $workshop->main_image_thumbnail ?? $workshop->main_image_path }}" alt="{{ $workshop->title }}" />
                            </div>
                        </div>

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

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

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

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

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

                                <div class="my-2 fs-14 lh-sm">
                                    @if ($workshop->description)
                                        {{ nl2br($workshop->description) }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if ($workshopPageSettings['workshop_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($workshopPageSettings['workshop_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>
                                        {{ $workshopPageSettings['workshop_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.workshops.book-ticket', ['ulid' => $workshop->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">{{ $workshopPageSettings['workshop_opening_at_error_message'] }}</p>
                    </div>
                @endif

            </div>
        </div>
    </section>

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

@endsection