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

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

@section('main-class', 'home-page')
@section('content')
    <section class="default-image-background row position-relative text-xl-start overflow-hidden" id="main-section">
        <img class="d-none d-lg-block details-left position-absolute img-fluid" src='{{ Vite::asset("$themeResources/assets/images/confettis.png") }}'
            alt="{{ __('Confettis positionné sur la gauche') }}">
        <img class="d-none d-lg-block details-right position-absolute img-fluid" src='{{ Vite::asset("$themeResources/assets/images/confettis.png") }}'
            alt="{{ __('Confettis positionné sur la droite') }}">
        <div class="col-12 d-flex g-0 justify-content-center z-2">
            <img class="img-fluid" src='{{ Vite::asset("$themeResources/assets/images/logo-LG-40ans.png") }}'
                alt="{{ $settingsGlobal->name ?? config('app.name') }}">
            <img class="d-none d-lg-block position-absolute img-fluid wheel-up z-1" src='{{ Vite::asset("$themeResources/assets/images/Roue+ombre.png") }}'
                title="{{ __('La roue des cadeaux !') }}"
                alt="{{ __('Une roue de vélo avec des cadeaux') }}">
        </div>
        <div class="col-12 g-0 overflow-hidden z-1">
            <div class="row">
                <div class="col">
                    <h2 class="text-uppercase fs-big f-veneer text-center">{{ __('Jeu 100% gagnant') }}</h2>
                </div>
            </div>
            @if($prizesGlobal->count())
                <div id="home-gifts" class="container position-relative overflow-visible row mx-auto">
                    <div class="gifts-background col-12 h-100 position-absolute">
                        <img class="vw-100 h-100" src='{{ Vite::asset("$themeResources/assets/images/gift_background.png") }}'
                            title="{{ __('La roue des cadeaux !') }}"
                            alt="{{ __('Une roue de vélo avec des cadeaux') }}">
                    </div>
                    @php $sortedPrizes = $prizesGlobal->sortBy('quantity'); @endphp
                    <div class="col-12 col-md-6 d-flex flex-column justify-content-center align-items-center align-items-md-end px-5 pt-5 pb-0 py-md-5 z-1">
                        <div class="d-flex flex-row justify-content-center align-items-center">
                            <div class="d-flex flex-column justify-content-center align-items-center">
                                <p class="fw-bolder main-quantity m-0">{{ $sortedPrizes[0]->quantity }}</p>
                                <p class="small fw-lighter text-uppercase">Ensembles</p>
                            </div>
                            <img src="{{ asset(resize($sortedPrizes[0]->picture, 'trimlot1')) }}" alt="{{ $sortedPrizes[0]->picture_alt }}"
                                title="{{ $sortedPrizes[0]->picture_title }}" class="img-fluid">
                        </div>
                        <p class="fw-bolder gift-label">{{ $sortedPrizes[0]->label }}</p>
                    </div>
                    <div class="second-gift col-12 col-md-6 d-flex flex-column justify-content-center align-items-center align-items-md-start px-0 py-5 z-1">
                        @if ($sortedPrizes[1])
                            <div class="d-flex flex-column justify-content-center align-items-center border-custom ps-md-5">
                                <div class="d-flex flex-row justify-content-center align-items-center">
                                    <div class="d-flex flex-column justify-content-center align-items-center">
                                        <p class="fw-bolder quantity m-0">{{ $sortedPrizes[1]->quantity }}</p>
                                    </div>
                                    <img src="{{ asset(resize($sortedPrizes[1]->picture), 'trimlot2') }}" alt="{{ $sortedPrizes[1]->picture_alt }}"
                                        title="{{ $sortedPrizes[1]->picture_title }}" class="img-fluid">
                                </div>
                                <p class="fw-bolder gift-label">{{ $sortedPrizes[1]->label }}</p>
                            </div>
                        @endif
                        <div class="d-flex flex-column flex-sm-row justify-content-center align-items-center gap-2 border-custom mt-3 ps-md-5 z-1">
                            <div class="col-12 col-sm-6 text-center">
                                <img class="w-100 img-fluid" src={{ Vite::asset('resources/theme/' . \tenant()->theme . '/assets/images/Cadeau-Webcoupon.png') }}>
                            </div>
                            <div class="col-12 col-sm-6 text-center text-sm-start">
                                <p class="br-text fw-bolder text-uppercase">{{ __('et des miliers de bons de réductions') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <div class="row position-relative text-xl-start mt-5 text-center">
            <div class="col">
                <h1 class="text-uppercase text-tertiary fs-1 f-veneer text-center">
                    {{ __('Du :start_date au :end_date', [
                        'start_date' => $settingsGlobal->start_date->isoFormat('DD MMMM'),
                        'end_date' => $settingsGlobal->end_date->isoFormat('DD MMMM'),
                    ]) }}
                </h1>
            </div>
        </div>
        <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 text-uppercase text-tertiary fw-bold mt-5 text-center">
                        <span class="fs-2">{{ __('Votre jeu sera ouvert dans') }}</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-primary 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>
    </section>
@endsection