@extends('components.quiz.layouts.default', ['title' => "Taille souhaitée"])

@section('quiz.content')
<div id="box-size-form" class="flex flex-col items-center gap-4">
    <div class="flex justify-center items-center order-1 md:order-1">
        <button type="button" class="box-size-helper-btn bg-orange-500 rounded-lg px-4 py-1 text-white transition-all duration-300 hover:bg-orange-600 hover:text-white">
            <p>Quelle taille choisir ?</p>
        </button>
    </div>

    <div class="p-4 md:p-8 order-3 md:order-2">
        <div class="max-w-xs w-full relative flex flex-col items-center select-none rounded-2xl overflow-hidden shadow-lg">

            @if ($client_type == "professionnel")
                <img src="{{ Vite::image('illustrations/box/pro-xs.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-xs", "hidden" => $box_size != "XS"])>
                <img src="{{ Vite::image('illustrations/box/pro-s.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-s", "hidden" => $box_size != "S"])>
                <img src="{{ Vite::image('illustrations/box/pro-m.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-m", "hidden" => $box_size != "M" && $box_size != null])>
                <img src="{{ Vite::image('illustrations/box/pro-l.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-l", "hidden" => $box_size != "L"])>
                <img src="{{ Vite::image('illustrations/box/pro-xl.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-xl", "hidden" => $box_size != "XL"])>
            @else
                <img src="{{ Vite::image('illustrations/box/particulier-xs.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-xs", "hidden" => $box_size != "XS"])>
                <img src="{{ Vite::image('illustrations/box/particulier-s.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-s", "hidden" => $box_size != "S"])>
                <img src="{{ Vite::image('illustrations/box/particulier-m.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-m", "hidden" => $box_size != "M" && $box_size != null])>
                <img src="{{ Vite::image('illustrations/box/particulier-l.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-l", "hidden" => $box_size != "L"])>
                <img src="{{ Vite::image('illustrations/box/particulier-xl.png') }}" alt="Le box en image" @class(["w-full object-contain box-illustration box-infos box-infos-xl", "hidden" => $box_size != "XL"])>
            @endif

            <div wire:loading class="absolute inset-0 pointer-events-none">
                <div class="w-full h-full flex items-center justify-center p-4 z-10 backdrop-blur-sm fill-white">
                    @include('components.quiz.public.loading.blocks-spinner')
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col gap-4 w-full max-w-sm select-none relative order-2 md:order-3">
        <div class="absolute inset-0 flex items-start gap-2 pt-4 z-0">
            <div class="border rounded-full w-full">

            </div>
        </div>

        <div class="flex justify-between gap-4 w-full z-10 overflow-x-auto">
            <button @class([
                'flex items-center gap-2 justify-center box-size-btn',
                'transition-all duration-300',
                'bg-neutral-100 rounded-lg border-2 px-2 py-1',
                'hover:border-blue-700',
                '!bg-blue-600 text-white border-blue-700 shadow' => $box_size == 'XS'
            ]) type="button" data-box="xs" wire:click='updateAttribute("box_size", "XS")'>
                XS
            </button>
            <button @class([
                'flex items-center gap-2 justify-center box-size-btn',
                'transition-all duration-300',
                'bg-neutral-100 rounded-lg border-2 px-2 py-1',
                'hover:border-blue-700',
                '!bg-blue-600 text-white border-blue-700 shadow' => $box_size == 'S'
            ]) type="button" data-box="s" wire:click='updateAttribute("box_size", "S")'>
                S
            </button>
            <button @class([
                'flex items-center gap-2 justify-center box-size-btn',
                'transition-all duration-300',
                'bg-neutral-100 rounded-lg border-2 px-2 py-1',
                'hover:border-blue-700',
                '!bg-blue-600 text-white border-blue-700 shadow' => $box_size == 'M'
            ]) type="button" data-box="m" wire:click='updateAttribute("box_size", "M")'>
                M
            </button>
            <button @class([
                'flex items-center gap-2 justify-center box-size-btn',
                'transition-all duration-300',
                'bg-neutral-100 rounded-lg border-2 px-2 py-1',
                'hover:border-blue-700',
                '!bg-blue-600 text-white border-blue-700 shadow' => $box_size == 'L'
            ]) type="button" data-box="l" wire:click='updateAttribute("box_size", "L")'>
                L
            </button>
            <button @class([
                'flex items-center gap-2 justify-center box-size-btn',
                'transition-all duration-300',
                'bg-neutral-100 rounded-lg border-2 px-2 py-1',
                'hover:border-blue-700',
                '!bg-blue-600 text-white border-blue-700 shadow' => $box_size == 'XL'
            ]) type="button" data-box="xl" wire:click='updateAttribute("box_size", "XL")'>
                XL
            </button>
        </div>
        <div class="flex justify-between gap-4 w-full z-10 overflow-x-auto">
            <p class="text-xs text-neutral-500">1m² à 2m²</p>
            <p class="text-xs text-neutral-500">3m² à 4m²</p>
            <p class="text-xs text-neutral-500">5m² à 7m²</p>
            <p class="text-xs text-neutral-500">8m² à 12m²</p>
            <p class="text-xs text-neutral-500">12m² et +</p>

        </div>
    </div>

    <div class="flex flex-col order-4 md:order-4 w-full">
        @if (null != $text = (\App\Models\Text::where('identifier', "box_size_xs_$client_type")->first()?->value ?? null))
            <div @class([
                "w-full bg-blue-100 rounded-lg border-blue-200/50 border-2 p-4 flex-col gap-1 text-start box-infos box-infos-xs",
                "hidden" => $box_size != "XS"
            ])>
                {!! nl2br($text) !!}
            </div>
        @endif

        @if (null != $text = (\App\Models\Text::where('identifier', "box_size_s_$client_type")->first()?->value ?? null))
            <div @class([
                "w-full bg-blue-100 rounded-lg border-blue-200/50 border-2 p-4 flex-col gap-1 text-start box-infos box-infos-s",
                "hidden" => $box_size != "S"
            ])>
                {!! nl2br($text) !!}
            </div>
        @endif

        @if (null != $text = (\App\Models\Text::where('identifier', "box_size_m_$client_type")->first()?->value ?? null))
            <div @class([
                "w-full bg-blue-100 rounded-lg border-blue-200/50 border-2 p-4 flex-col gap-1 text-start box-infos box-infos-m",
                "hidden" => $box_size != "M" && $box_size != null
            ])>
                {!! nl2br($text) !!}
            </div>
        @endif

        @if (null != $text = (\App\Models\Text::where('identifier', "box_size_l_$client_type")->first()?->value ?? null))
            <div @class([
                "w-full bg-blue-100 rounded-lg border-blue-200/50 border-2 p-4 flex-col gap-1 text-start box-infos box-infos-l",
                "hidden" => $box_size != "L"
            ])>
                {!! nl2br($text) !!}
            </div>
        @endif

        @if (null != $text = (\App\Models\Text::where('identifier', "box_size_xl_$client_type")->first()?->value ?? null))
            <div @class([
                "w-full bg-blue-100 rounded-lg border-blue-200/50 border-2 p-4 flex-col gap-1 text-start box-infos box-infos-xl",
                "hidden" => $box_size != "XL"
            ])>
                {!! nl2br($text) !!}
            </div>
        @endif
    </div>
</div>

<div id="box-size-helper" wire:ignore.self class="opacity-0 pointer-events-none absolute inset-0 bg-neutral-50 transition-all duration-300 flex flex-col gap-4 px-4">

    <div class="flex items-center gap-2">
        <button type="button" class="box-size-helper-btn flex items-center gap-1 px-3 py-1 bg-orange-500 text-white hover:bg-orange-600 transition-all duration-300 rounded-md">
            <x-heroicon-m-arrow-long-left class="w-4 h-4" />
            <span>OK</span>
        </button>
        <p class="text-xl font-medium">Quelle est la surface d'habitation à déménager?</p>
    </div>

    <div class="flex flex-col gap-4">
        @csrf

        @include('components.quiz.public.forms.inputs.default', [
            'id' => "surface",
            'wireModel' => "surface",
            'type' => 'number',
            'step' => 1,
            'max' => 300
        ])

        @include('components.quiz.public.forms.inputs.checkbox', [
            'id' => "withCave",
            'wireModel' => "withCave",
            "label" => "Il y a une cave à déménager ?"
        ])

        @include('components.quiz.public.forms.inputs.checkbox', [
            'id' => "withGarage",
            'wireModel' => "withGarage",
            "label" => "Il y a un garage à déménager ?"
        ])
    </div>

    @if (null != $surface && 0 < $surface)
        <div class="flex flex-col gap-4">
            <div class="flex flex-col">
                <p class="text-lg font-medium">Lockit vous recommande : </p>
                <p class="text-neutral-500">{{ $recommendedBoxName }} - {{ self::BOX_SIZES[$recommendedBoxName ?? ""] }}</p>
            </div>

            <div class="grid grid-cols-3 gap-4 items-center">
                @foreach ($recommendedBoxSizes as $boxSize)
                    @if ($boxSize['recommended'])
                        <div @class([
                            "flex flex-col gap-2 justify-center items-center",
                            "col-start-2" => 1 >= collect($recommendedBoxSizes)->reduce(function ($carry, $element) {
                                return ($carry + $element['recommended']);
                            })
                        ])>
                            <button type="button" wire:click='updateAttribute("box_size", "{{ $boxSize['name'] }}")' @class([
                                "flex flex-col gap-2 text-xl font-semibold items-center justify-center bg-white border border-neutral-200 rounded-lg overflow-hidden aspect-square",
                                "hover:border-blue-600 hover:opacity-100 hover:text-blue-600 transition-all duration-300",
                                "scale-90 opacity-30" => !$boxSize['favorite'],
                                "shadow-lg !border-blue-600 border-2" => $boxSize['favorite'],

                            ])>
                                <img src="{{ $client_type == "professionnel" ? Vite::image("illustrations/box/pro-".strtolower($boxSize['name']).".png") : Vite::image("illustrations/box/particulier-".strtolower($boxSize['name']).".png") }}" alt="Le box en image" class="w-full h-full object-contain">
                            </button>
                            <div class="flex flex-col items-center justify-center">
                                <p class="text-lg font-medium">{{ $boxSize['name'] }}</p>
                                <p class="text-sm text-neutral-500">{{ self::BOX_SIZES[$boxSize['name'] ?? ""] }}</p>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    @endif
</div>
@overwrite

@push('page.scripts')
    <script>
        $('.range-selector').on('click', function () {
            var index = $(this).index();
            var percent = index*25;
            var adding = (index*8)/2;
            $("#range-indicator").css('left', 'calc('+percent+'% - '+adding+'px)');
        });

        $('.box-size-btn').on('mouseenter', function () {
            console.log("#box-"+$(this).data('box'))
            $('.box-infos').addClass('hidden').removeClass('flex');
            $(".box-infos-"+$(this).data('box')).removeClass('hidden').addClass('flex');
        });

        $('.box-size-helper-btn').on('click', function () {
            console.log("btn")
            $('#box-size-helper').toggleClass('opacity-0 pointer-events-none z-40')
        })
    </script>
@endpush