@extends('layouts.quiz')
@php $page_title = 'Quel est mon style déco ?'; @endphp
@php $no_full_title = true; @endphp
@section('meta-title', 'Quiz déco : quel est mon style déco d’intérieur ?')
@section('body-class', 'quiz')
@section('meta')

    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Quiz déco : quel est mon style déco d’intérieur ?" />
    <meta property="og:description"
        content="Vous voulez connaître votre style déco afin de créer un intérieur qui vous ressemble ? Lancez notre quizz déco gratuit et découvrez vos préférences !" />
    <meta name="description"
        content="Vous voulez connaître votre style déco afin de créer un intérieur qui vous ressemble ? Lancez notre quizz déco gratuit et découvrez vos préférences !" />
    <meta property="fb:app_id" content="730800570418065">

@endsection

@section('content')
    <div class="container">
        @if ($bricorama ?? 0)
            <div class="row mt-4">
                <div class="col-auto">
                    <img src="{{ asset('img/logo_bricorama.png') }}" style="height: 50px" alt="">
                </div>
                <div class="col"></div>
                <div class="col-auto">
                    <a href="{{ route('home') }}">
                        <img src="{{ asset('img/logo-black.svg') }}" class="mt-2" style="height: 30px" alt="">
                    </a>
                </div>
            </div>
        @endif
        <div class="steper @if ($bricorama ?? 0) bricorama @endif " data-step="1">
            <div class="step step1">
                <div class="title">{!! lang('Ambiance') !!}</div>
                @if ($bricorama ?? 0)
                    <div class="number">1</div>
                @else
                    <img class="primary" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
                    <img class="gris" src="{{ asset('img/picto-gris.svg') }}" alt="Pipcke">
                @endif
            </div>
            <div class="step step2">
                <div class="title"></div>
                @if ($bricorama ?? 0)
                    <div class="number">2</div>
                @else
                    <img class="primary" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
                    <img class="gris" src="{{ asset('img/picto-gris.svg') }}" alt="Pipcke">
                @endif
            </div>
            <div class="step step3">
                <div class="title"></div>
                @if ($bricorama ?? 0)
                    <div class="number">3</div>
                @else
                    <img class="primary" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
                    <img class="gris" src="{{ asset('img/picto-gris.svg') }}" alt="Pipcke">
                @endif
            </div>
            <div class="step step4">
                <div class="title"></div>
                @if ($bricorama ?? 0)
                    <div class="number">4</div>
                @else
                    <img class="primary" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
                    <img class="gris" src="{{ asset('img/picto-gris.svg') }}" alt="Pipcke">
                @endif
            </div>
            <div class="step step5">
                <div class="title"></div>
                @if ($bricorama ?? 0)
                    <div class="number">5</div>
                @else
                    <img class="primary" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
                    <img class="gris" src="{{ asset('img/picto-gris.svg') }}" alt="Pipcke">
                @endif
            </div>
            <div class="step step6">
                <div class="title"></div>
                @if ($bricorama ?? 0)
                    <div class="number">6</div>
                @else
                    <img class="primary" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
                    <img class="gris" src="{{ asset('img/picto-gris.svg') }}" alt="Pipcke">
                @endif
            </div>
        </div>
    </div>
    @if (request('grp_id'))
        <form name="quiz-form" method="post" {{ request('grp_id') ? 'data-validate=validate' : '' }}
            action="{{ route('quiz-grp.post', request('grp_id')) }}">
        @else
            <form class="@if ($bricorama ?? 0) bricorama @endif" name="quiz-form" method="post"
                {{ request('projet_id') ? 'data-validate=validate' : '' }}
                action="{{ route('quiz.post', request('projet_id')) }}">
    @endif
    {{ csrf_field() }}
    <section id="step1" data-title="Ambiance" class="">
        <div>
            <div class="container text-center">
                <h1 class="mb-50 h4">{!! lang('Chez moi, je préfère un intérieur…') !!}</h1>
                <div class="themes row">
                    @foreach ($data[0] as $key => $value)
                        <div class="col-lg-4 col-md-12 col-sm-12">
                            <label class="style"
                                style="cursor: pointer; background: url('{{ asset('assets/quiz/Q1_6/' . $value) }}')">
                                <input type="radio" name="ambiance" value="{{ $value }}">
                                <div class="check"><i class="fa fa-check"></i></div>
                                <span>{{ $key }}</span>
                            </label>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </section>
    <section id="step2" data-title="Décoration" class="hidden">
        <div>
            <div class="container text-center">
                <h2 class="mb-50 h4">{!! lang('En termes de décoration, je me sens mieux dans un environnement ...') !!}</h2>
                <div class="themes row">
                    @foreach ($data[1] as $key => $value)
                        <div class="col-lg-4 col-md-12 col-sm-12">
                            <label class="style"
                                style="cursor: pointer; background: url('{{ asset('assets/quiz/Q2_6/' . $value) }}')">
                                <input type="radio" name="decoration" value="{{ $value }}">
                                <div class="check"><i class="fa fa-check"></i></div>
                                <span>{{ $key }}</span>
                            </label>
                        </div>
                    @endforeach

                </div>
            </div>

        </div>
    </section>
    <section id="step3" data-title="Mobilier et accessoires" class="hidden">
        <div>
            <div class="container text-center">
                <h2 class="mb-50 h4">{!! lang('Pour le mobilier et les accessoires, je suis du genre… ') !!}</h2>
                <div class="themes row">
                    @foreach ($data[2] as $key => $value)
                        <div class="col-lg-4 col-md-12 col-sm-12">
                            <label class="style"
                                style="cursor: pointer; background: url('{{ asset('assets/quiz/Q3_6/' . $value) }}')">
                                <input type="radio" name="mobilier" value="{{ $value }}">
                                <div class="check"><i class="fa fa-check"></i></div>
                                <span>{{ $key }}</span>
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </section>
    <section id="step4" data-title="Inspirations" class="hidden">
        <div>
            <div class="container text-center">
                <h2 class="mb-50 h4">{!! lang('Je me vois bien vivre et évoluer dans ces espaces') !!}</h2>
                <small class="mt-1 mb-4 d-block">Choisissez autant de photos que nécessaire</small>

                <div class="columns">
                    @foreach ($data[3] as $value)
                        <label>
                            <input type="checkbox" name="inspiration[]" value="assets/quiz/Q4_6/{{ $value }}">

                            <img class="lazy-image" data-src="{{ asset('assets/quiz/Q4_6/' . $value) }}">
                            <div class="check"><i class="fa fa-check"></i></div>
                            <a class="fancybox" href="{{ asset('assets/quiz/Q4_6/' . $value) }}"><i
                                    class="fa fa-search"></i></a>
                        </label>
                    @endforeach

                </div>
                <div class="mb-20 mt-20 text-center">
                    <a href="#" class="suivant disabled btn btn2"
                        style ="position : relative !important; right: 4px;"> Suivant </a>
                </div>
                <div class="mb-50 mt-20">
                    <a href="#" class="suivant-link text-underline">{!! lang('Aucune de ces images ne m’inspire >') !!}</a>
                </div>

            </div>

            <a href="#"
                class="suivant disabled btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
                <span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-right"></i></span>
            </a>
        </div>
    </section>
    <section id="step5" data-title="Objets" class="hidden">
        <div>
            <div class="container text-center">
                <h2 class="mb-50 h4">{!! lang('J’aimerais bien avoir ces objets chez moi') !!}</h2>
                <small class="mt-3 d-block">Choisissez autant de photos que nécessaire</small>

                <div class="columns">
                    @foreach ($data[4] as $value)
                        <label>
                            <input type="checkbox" name="objets[]" value="assets/quiz/Q5_6/{{ $value }}">
                            <img class="lazy-image" data-src="{{ asset('assets/quiz/Q5_6/' . $value) }}">
                            <div class="check"><i class="fa fa-check"></i></div>
                            <a class="fancybox" href="{{ asset('assets/quiz/Q5_6/' . $value) }}"><i
                                    class="fa fa-search"></i></a>
                        </label>
                    @endforeach
                </div>
                <div class="mb-20 mt-20 text-center">
                    <a href="#" class="suivant disabled btn btn2"
                        style ="position : relative !important; right: 4px;"> Suivant </a>
                </div>
                <div class="mb-50 mt-20">
                    <a href="#" class="suivant-link text-underline">{!! lang('Aucune de ces images ne m’inspire >') !!}</a>
                </div>

            </div>

            <a href="#"
                class="suivant disabled btn btn-naked btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple">
                <span class="btn-icon text-secondary font-size-22"><i class="fa fa-chevron-right"></i></span>
            </a>
        </div>
    </section>
    <section id="step6" data-title="Espace" class="hidden">
        @if (!request('projet_id') && !request('grp_id'))
            <div>
                @include('partials.quiz_step6', ['data' => $data[5]])
            </div>
            <div class="text-center mb-4" id="decouvrir_quiz">
                <button class="btn btn1 btn-sm">{!! lang('Découvrir mon style') !!}</button>
            </div>
        @else
            <div class="text-center mb-4" id="return_quiz_project">
                <button class="btn btn1 btn-sm">{!! lang('Enregistrer et revenir au projet') !!}</button>
            </div>
        @endif
    </section>
    </form>
@endsection
@section('script')
    <script async type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js">
    </script>
    <script async type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_fr.min.js"></script>
    <script src="{{ asset('js/jquery.fancybox.min.js') }}"></script>
@endsection
@section('style')
    <link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
@endsection