@extends('theme::layout-teaser')

@section('title', __('Jeu :site_name', ['site_name' => $settingsGlobal->name]))
@section('description', __('Le jeu :site_name vas bientôt ouvrir', ['site_name' => $settingsGlobal->name]))

@section('main-class', 'teaser-page')
@section('content')
    <div class="main-rotate container-big container p-5">
        <div class="row position-relative text-xl-start mt-5 text-center">
            <div class="col">
                <h1 class="text-uppercase text-quad fs-1 fw-bold">
                    {{ __('Du :start_date au :end_date jouez et tentez de gagner', [
                        'start_date' => $settingsGlobal->start_date->isoFormat('DD MMMM'),
                        'end_date' => $settingsGlobal->end_date->isoFormat('DD MMMM'),
                    ]) }}
                </h1>
            </div>
        </div>
        <div class="row position-relative text-xl-start mb-5 text-center">
            <div class="col d-none d-xl-flex g-0">
                <img class="img-fluid object-fit-cover" src="{{ Vite::asset('resources/theme/mounted/assets/images/photo-canoe.png') }}"
                    title="{{ __('Une famille font du canoe avec leur petite file en gros plan.') }}" alt="{{ __('Une famille en canoe') }}">
            </div>
            <div class="col g-0 overflow-hidden">
                <div class="container-fluid mt-5">
                    <div class="row">
                        <div class="col">
                            <h2 class="text-uppercase text-primary fs-2 fw-bold ms-xl-5">{{ __('Jouez et tentez de gagner') }}</h2>
                        </div>
                    </div>
                    @if (collect($prizesGlobal)->count())
                        <div class="row">
                            @if (Arr::has($prizesGlobal, 0))
                                <div class="col-12 col-sm-6">
                                    <div class="d-flex justify-content-center justify-content-xl-start">
                                        <div class="ms-xl-5 me-2">
                                            <span
                                                class="bg-tertiary fs-3 rounded-pill fw-bold px-3 py-1 text-white">{{ optional(Arr::get($prizesGlobal, 0))->quantity }}</span>
                                        </div>
                                        <h3 class="text-tertiary fw-bold fs-3 text-uppercase lh-1">
                                            {!! clean(nl2br(__("Wonderbox \nLoisirs"))) !!}
                                        </h3>
                                    </div>
                                    <img class="img-fluid anti-rotate"
                                        src="{{ Vite::asset('resources/theme/mounted/assets/images/view-lot1.png') }}"
                                        title="{{ __('Wonderbox Loisir en famille') }}" alt="{{ __('Wonderbox Loisir en famille') }}">
                                </div>
                            @endif
                            @if (Arr::has($prizesGlobal, 1))
                                <div class="col-12 col-sm-6">
                                    <div class="d-flex justify-content-center justify-content-xl-start">
                                        <div class="ms-xl-5 me-2">
                                            <span
                                                class="bg-tertiary fs-3 rounded-pill fw-bold px-3 py-1 text-white">{{ optional(Arr::get($prizesGlobal, 1))->quantity }}</span>
                                        </div>
                                        <h3 class="text-tertiary fw-bold fs-3 text-uppercase lh-1">
                                            {!! clean(nl2br(__("Wonderbox \nHappy Day"))) !!}
                                        </h3>
                                    </div>
                                    <div class="lot2--img">
                                        <img class="img-fluid anti-rotate"
                                            src="{{ Vite::asset('resources/theme/mounted/assets/images/view-lot2.png') }}"
                                            title="{{ __('Wonderbox Happy Day') }}" alt="{{ __('Wonderbox Happy Day') }}">
                                    </div>
                                    <div class="d-flex align-items-center justify-content-center flex-column flex-lg-row mt-3">
                                        <span class="text-primary fw-bold text-uppercase">{!! clean(nl2br(__("Ou des milliers\n de bons\n de réduction"))) !!}</span>
                                        <img class="img-fluid" src="{{ Vite::asset('resources/theme/mounted/assets/images/br-1-euro.png') }}"
                                            title="{{ __('Réduction de 1 euro') }}" alt="{{ __('Réduction de 1 euro') }}">
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif
                    <div class="row">
                        <div class="col">

                            @php
                                $counterParts = explode(
                                    '#',
                                    $settingsGlobal->start_date->diffForHumans([
                                        'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE,
                                        'parts' => 3,
                                        'join' => '#',
                                    ]),
                                );
                            @endphp
                            @if (collect($counterParts)->count())
                                <h2 class="d-flex flex-column anti-rotate text-uppercase text-quad fw-bold mt-5 text-center">
                                    <span class="fs-2">{{ __('Votre jeu sera ouvert dans :time', ['time' => '']) }}</span>
                                    <span class="d-flex justify-content-center flex-row">
                                        @foreach ($counterParts as $counterPart)
                                            <span class="d-flex flex-column fs-3 m-3">
                                                <span class="my-3">
                                                    <span class="text-bg-tertiary rounded-pill p-3">
                                                        {{ Str::of($counterPart)->before(' ')->padLeft(2, '0') }}
                                                    </span>
                                                </span>
                                                <span>{{ Str::of($counterPart)->after(' ')->padBoth(8, "\u{00A0}") }}</span>
                                            </span>
                                        @endforeach
                                    </span>
                                </h2>
                            @endif
                            {{-- 07

                            jours
                            13

                            heures
                            14

                            minutes --}}

                        </div>
                    </div>
                </div>
                <img class="picture-100-win position-absolute img-fluid d-none d-xl-inline top-0 mt-3"
                    src="{{ Vite::asset('resources/theme/mounted/assets/images/pastille.png') }}" alt="{{ __('Grand jeu 100% gagnant') }}">
            </div>
        </div>
    </div>
@endsection

{{-- <div class="teaser floating grid">
    <div class="head-bloc"></div>
    <section class="floating-bloc container flex">
        <div class="floating--width flex">
            <div class="floating--title">
                @php
                    setlocale(LC_TIME, 'fr_FR.utf8');
                    \Carbon\Carbon::setLocale('fr');
                @endphp
                <p>Du {{ \Carbon\Carbon::parse($settingsGlobal->start_date)->formatLocalized('%d %B') }} au
                    {{ \Carbon\Carbon::parse($settingsGlobal->end_date)->formatLocalized('%d %B') }}</p>

                <h1 class="post-title flex">
                    <div class="row flex">
                        <img src="{{ Vite::asset('resources/theme/mounted/assets/images/photo-canoe.png') }}" alt="">
                    </div>
                </h1>
            </div>
            <div class="floating--txt flex">
                <h2 class="raleway post-subtitle">Jouez et tentez de gagner</h2>
                <div class="floating--gift flex">
                    <div class="gift--col flex">
                        <div class="gift--lot1 flex">
                            <div class="nb-lot1 flex">
                                <span>{{ $prizesGlobal[0]->quantity }}</span>
                            </div>
                            <h3 class="post-chapter">Wonderbox <br>Loisirs</h3>

                        </div>
                        <div class="gift--img">
                            <img src="{{ Vite::asset('resources/theme/mounted/assets/images/view-lot1.png') }}"
                                alt="Grand jeu 100% gagnant">
                            <div class="floating--sticker">
                                <img src="{{ Vite::asset('resources/theme/mounted/assets/images/pastille.png') }}"
                                    alt="Grand jeu 100% gagnant">
                            </div>
                        </div>
                    </div>
                    <div class="gift--col flex">
                        <div class="gift--lot2 flex">
                            <div class="nb-lot2 flex">
                                <span>{{ $prizesGlobal[1]->quantity }}</span>
                            </div>
                            <h3 class="post-chapter">Wonderbox <br>Happy Day</h3>
                        </div>
                        <div class="lot2--img">
                            <img src="{{ Vite::asset('resources/theme/mounted/assets/images/view-lot2.png') }}" alt="Wonderbox Happy Day">
                        </div>
                        <div class="gift--br">
                            <p>Ou des milliers<br /> de bons<br />de réduction</p>
                            <img src="{{ Vite::asset('resources/theme/mounted/assets/images/br-1-euro.png') }}" alt="Wonderbox Happy Day">
                        </div>
                    </div>
                </div>
                <div class="text_teaser">
                    <p>Votre jeu sera ouvert dans</p>
                    <div class="compteur flex">
                        <div class="jours">
                            <div class="count"><span></span></div>
                            <p>jours</p>
                        </div>
                        <div class="heures">
                            <div class="count"><span></span></div>
                            <p>heures</p>
                        </div>
                        <div class="minutes">
                            <div class="count"><span></span></div>
                            <p>minutes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div> --}}

{{-- @push('scripts')
    <script>
        __TEASEREND = '{{ $settings->start_date }}';
    </script>
@endpush --}}