@extends('frontend.mediknode.layout.mainlayout')

@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            {!! \App\Helpers\TextHelper::addSup($event->title) !!}
        @endslot
        @slot('li_1')
            {{ $event->title }}
        @endslot
    @endcomponent
    <section class="about-content">
        <div class="container">
            @if (session('account_created'))
                <div class="alert alert-success text-center mt-3">
                    {{ session('account_created') }}
                </div>
            @endif
            @if ($event->id == 19)
                {{-- Infinite logo carousel https://codepen.io/Navneet-Dwivedi/pen/LYXbvVL --}}
                <style>
                    @keyframes slides {
                        from {
                            transform: translateX(0);
                        }

                        to {
                            transform: translateX(-100%);
                        }
                    }

                    .logos {
                        overflow: hidden;
                        padding: 30px 0px;
                        white-space: nowrap;
                        position: relative;
                    }

                    .logos:before,
                    .logos:after {
                        position: absolute;
                        top: 0;
                        content: '';
                        width: 250px;
                        height: 100%;
                        z-index: 2;
                    }

                    .logo_items {
                        display: inline-block;
                        animation: 50s slides infinite linear;
                    }

                    .logos:hover .logo_items {
                        animation-play-state: paused;
                    }

                    .logo_items img {
                        height: 100px;
                    }
                </style>
                <div class="logos">
                    <div class="logo_items">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/01-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/02-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/03-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/04-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/05-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/06-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/07-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/08-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/09-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/10-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/11-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/12-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/13-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/14-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/15-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/16-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/17-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/18-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/19-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/20-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/21-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/22-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/23-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/24-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/25-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/26-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/27-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/28-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/29-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/30-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/31-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/32-100.jpg') }}">
                    </div>
                    <div class="logo_items">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/01-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/02-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/03-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/04-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/05-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/06-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/07-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/08-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/09-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/10-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/11-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/12-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/13-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/14-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/15-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/16-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/17-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/18-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/19-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/20-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/21-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/22-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/23-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/24-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/25-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/26-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/27-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/28-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/29-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/30-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/31-100.jpg') }}">
                        <img src="{{ URL::asset('/storage/mediknode/partners/19/32-100.jpg') }}">
                    </div>
                </div>
            @endif

            @component('frontend.mediknode.components.buttons', ['event' => $event])
            @endcomponent

            @php
                $buttonFlags = \App\Helpers\EventButtonHelper::flags($event, $userId);
                $showEventButtons = $buttonFlags['showEventButtons'];
            @endphp

            @if ($showEventButtons)
                @include('frontend.mediknode.landing-page.partials.event-buttons', [
                    'position' => 'top',
                    'flags' => $buttonFlags,
                ])
            @endif

            <div class="row mt-4 mb-4 justify-content-md-center">
                @if ($event->cover)
                    <div class="col-md-6 text-center">
                        <img class="img-fluid" src="{{ \App\Helpers\AssetVersionHelper::versioned($event->cover) }}"
                            alt="{{ $event->client }}">
                    </div>
                @endif

                @if ($event->content)
                    <div class="col-md-6">
                        <div class="card dash-cards text-start">
                            <div class="card-body">
                                {!! $event->content !!}
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- 
            <div class="row">
                @if ($showParticipateButton)
                    <div class="col- text-center mx-auto">
                        <a href="{{ URL::to('/event/' . $event->slug . '/participate/step1') }}"
                            class="btn btn-xlarge-width btn-success">
                            S'inscrire au congrès
                        </a>
                    </div>
                @endif
                @if ($showParticipateToLandingPageButton)
                    <div class="col- text-center mx-auto">
                        <a href="{{ URL::to('/landing/inscription?event=' . $event->slug) }}" class="btn btn-xlarge-width btn-success">
                            S'inscrire au congrès
                        </a>
                    </div>
                @endif
            </div>

            @if ($alreadyRegistered)
                <div class="row">
                    <div class="col-md-12 mb-3 text-center mx-auto">
                        <p class="bold">Vous êtes déjà inscrit {{ $event->is_masculin ? 'au' : 'à la' }} <span
                                class="text-dark-blue">&#171;
                                {{ $event->title }}
                                &#187;</span></p>
                    </div>
                </div>
            @endif

            <div class="row mt-2 mb-4">
                <div class="col-md-2 text-center mx-auto">
                    <a href="{{ URL::to('/event/' . $event->slug . '/') }}" class="btn btn-large-width btn-light-green">
                        Annonce
                    </a>
                </div>
                <div class="col-md-2 text-center mx-auto">
                    <a href="#" class="btn btn-large-width btn-light-blue">
                        Frais d'inscription
                    </a>
                </div>
                @if ($showAbstractButton)
                    <div class="col-md-2 text-center mx-auto">
                        <a href="{{ URL::to('/event/' . $event->slug . '/abstract') }}"
                            class="btn btn-large-width btn-pink">
                            Déposer votre Abstract
                        </a>
                    </div>
                @endif
                @if ($showAbstractToLandingPageButton)
                    <div class="col-md-2 text-center mx-auto">
                        <a href="{{ URL::to('/landing/abstract?event=' . $event->slug) }}" class="btn btn-large-width btn-pink">
                            Déposer votre Abstract
                        </a>
                    </div>
                @endif
                @if ($showAbstractToParticipatePageButton)
                    <div class="col-md-2 text-center mx-auto">
                        <a href="{{ URL::to('/event/' . $event->slug . '/participate/step1?v=a') }}"
                            class="btn btn-large-width btn-pink">
                            Déposer votre Abstract
                        </a>
                    </div>
                @endif
                @if ($showInternalProgramButton)
                    <div class="col-md-2 text-center mx-auto">
                        <a href="{{ URL::to('/event/' . $event->slug . '/programme-book') }}"
                            class="btn btn-large-width btn-tertiary">
                            {{ $event->label_program }}
                        </a>
                    </div>
                @endif
                @if ($showExternalProgramButton)
                    <div class="col-md-2 text-center mx-auto">
                        <a target="_blank" href="{{ URL::asset($event->link_program) }}"
                            class="btn btn-large-width btn-tertiary">
                            {{ $event->label_program }}
                        </a>
                    </div>
                @endif
                @if ($showHebergementButton)
                    <div class="col-md-2 text-center mx-auto">
                        <a href="{{ URL::to('/event/' . $event->slug . '/hebergement') }}"
                            class="btn btn-large-width btn-blue-light">
                            Hébergement
                        </a>
                    </div>
                @endif
            </div> --}}

            @if ($showEventButtons)
                @include('frontend.mediknode.landing-page.partials.event-buttons', [
                    'position' => 'bottom',
                    'flags' => $buttonFlags,
                ])
            @endif

            @component('frontend.mediknode.components.buttons', ['event' => $event])
            @endcomponent
        </div>
    </section>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection