@extends('components.quiz.layouts.default', ['title' => 'Type de client'])

@section('quiz.content')
<div class="grid grid-cols-2 gap-4 w-full text-center">
    <button @class([
        'w-full rounded-xl bg-neutral-100 border-2 relative overflow-hidden aspect-square',
        'transition-all duration-300',
        'hover:border-blue-700',
        "!bg-blue-600 text-white border-blue-700" => $client_type == "professionnel"
    ]) type="button" wire:click='updateAttribute("client_type", "professionnel")'>

        <p>Professionnel</p>

        <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 bg-blue-600 fill-white">
                @include('components.quiz.public.loading.blocks-spinner')
            </div>
        </div>
    </button>
    <button @class([
        'w-full rounded-xl bg-neutral-100 border-2 relative overflow-hidden aspect-square',
        'transition-all duration-300',
        'hover:border-blue-700',
        "!bg-blue-600 text-white border-blue-700" => $client_type == "particulier"
    ]) type="button" wire:click='updateAttribute("client_type", "particulier")'>
        <p>Particulier</p>
        <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 bg-blue-600/20 backdrop-blur-sm fill-white">
                @include('components.quiz.public.loading.blocks-spinner')
            </div>
        </div>
    </button>
</div>
@overwrite