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

@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">
                                            @if (intval(Arr::get($prizesGlobal, 0)->quantity) > 1)
                                                {{ Str::plural(Arr::get($prizesGlobal, 0)->label) }}
                                            @else
                                                {{ Arr::get($prizesGlobal, 0)->label }}
                                            @endif
                                        </h3>
                                    </div>
                                    <img class="img-fluid anti-rotate" src="{{ asset(Arr::get($prizesGlobal, 0)->picture) }}"
                                        title="{{ Arr::get($prizesGlobal, 0)->picture_title }}"
                                        alt="{{ Arr::get($prizesGlobal, 0)->picture_alt }}">
                                </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">
                                            @if (intval(Arr::get($prizesGlobal, 1)->quantity) > 1)
                                                {{ Str::plural(Arr::get($prizesGlobal, 1)->label) }}
                                            @else
                                                {{ Arr::get($prizesGlobal, 1)->label }}
                                            @endif
                                        </h3>
                                    </div>
                                    <img class="img-fluid anti-rotate"
                                        src="{{ asset(resize(Arr::get($prizesGlobal, 1)->picture, 'trimlot2')) }}"
                                        title="{{ Arr::get($prizesGlobal, 1)->picture_title }}"
                                        alt="{{ Arr::get($prizesGlobal, 1)->picture_alt }}">
                                    <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
                        </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