@extends('layouts.quiz')
@php
    $page_title = 'Complétez votre Brief';
    $icons = [
        'Hall d’entrée' => 'pipcke-new-project-select-room-entrance.svg',
        'Salon' => 'pipcke-new-project-select-room-living-room.svg',
        'Séjour' => 'pipcke-new-project-select-room-guest-room.svg',
        'Salle à manger' => 'pipcke-new-project-select-room-dining-room.svg',
        'Chambre adulte' => 'pipcke-new-project-select-room-bedroom.svg',
        'Chambre enfant' => 'pipcke-new-project-select-room-kids-room.svg',
        'Chambre bébé' => 'pipcke-new-project-select-room-nursery.svg',
        'Dressing' => 'pipcke-new-project-select-room-dressing.svg',
        'Cuisine' => 'pipcke-new-project-select-kitchen.svg',
        'Salle de bains' => 'pipcke-new-project-select-bathroom.svg',
        'Bureau' => 'pipcke-new-project-select-office.svg',
        'Terrasse' => 'pipcke-new-project-select-terrace.svg',
        'Pièce de vie' => 'pipcke-new-project-open-space.svg',
        'Studio' => 'pipcke-new-project-select-studio.png',
        'Espace commercial' => 'pipcke-new-project-select-prof.png',
    ];
@endphp
@section('meta-title', $page_title)
@section('meta-keywords', '')
@section('meta-description', '')
@section('body-class', 'brief')
@section('style')
    <style>
        .panel {
            margin-bottom: 0px !important;
        }

        <style>.jq-stars {
            display: inline-block;
        }

        .jq-rating-label {
            font-size: 22px;
            display: inline-block;
            position: relative;
            vertical-align: top;
            font-family: helvetica, arial, verdana;
        }

        .jq-star {
            width: 100px;
            height: 100px;
            display: inline-block;
            cursor: pointer;
        }

        .jq-star-svg {
            padding-left: 3px;
            width: 100%;
            height: 100%;
        }

        .jq-star:hover .fs-star-svg path {}

        .jq-star-svg path {
            /* stroke: #000; */
            stroke-linejoin: round;
        }

        /* un-used */
        .jq-shadow {
            -webkit-filter: drop-shadow(-2px -2px 2px #888);
            filter: drop-shadow(-2px -2px 2px #888);
        }
    </style>
    </style>
@endsection
@section('content')
    @php
        $projets = $group->projets;
    @endphp
    <div class="navbar">
        <div class="row w-100">
            <div class="col-auto">
                <a class="brand" href="{{ route('client.dashboard') }}" rel="home">
                    <img class="logo-default" src="{{ asset('img/picto-primary.svg') }}" alt="Pipcke">
                </a>
            </div>
            <div class="col-auto">
                <div class="pt-3 project_name_brief" style="text-transform: capitalize;">
                    {{ $group->nom_group ?? $group->espaces }}</div>
            </div>
            <div class="col"></div>
            <div class="col-auto pt-2">
                @if ($group->experience_achat_step != 0)
                    <a href="{{ route('experience_achat.completez_brief_grp', $group->id) }}" id="btnSaveBrief"
                        class="btn btn-xs btn4">{!! lang('Enregistrer et quitter') !!}</a>
                    <div id="btnValiderBrief" class="btn btn-xs btn2 mr-3">{!! lang('Valider') !!}</div>
                @else
                    <a id="btnValiderBrief" href="{{ route('client.espace_collaboration.index', $group->id) }}"
                        class="btn btn-xs btn2 mr-3">{!! lang('Valider') !!}</a>
                @endif
            </div>
        </div>
        <div class="progressbar">
            <div class="liquid-progressbar liquid-progressbar-sm" data-progressbar="true"
                data-progressbar-options='{"value":{{ $level_grp ?? 0 }} }'>
                <div class="liquid-progressbar-inner">
                    <span class="liquid-progressbar-bar"></span>

                </div>
            </div>
        </div>
    </div>
    <form name="consulter-un-designer-form" id="brief" data-projet="{{ $group->id }}" method="put"
        action="{{ route('client.brief_grp.update', $group->id) }}" enctype="multipart/form-data">
        {{ csrf_field() }}
        <section>
            <div class="container-fluid">
                <div class="row">
                    <div class=" col1 pt-4" style="width: 295px">
                        <div class="menu-sticky" style="width: 275px"></div>
                        <div class="menu menu-brief-grp">
                            <ul>
                                <li data-target="projet" class="active"> <img
                                        src="{{ asset('assets/brief/objectif.png') }}"> {!! lang('PROJET') !!} </li>
                                @if ($group->pro == 1)
                                    <li data-target="activite"> <img src="{{ asset('assets/brief/personnalite.png') }}">
                                        {!! lang('ACTIVITÉ') !!}</li>
                                @else
                                    <li data-target="personnalite"> <img
                                            src="{{ asset('assets/brief/personnalite.png') }}"> {!! lang('PERSONNALITÉ') !!}
                                    </li>
                                @endif
                                <li data-target="gouts-et-couleurs"> <img
                                        src="{{ asset('assets/brief/gout-couleur.png') }}"> {!! lang('GOÛTS ET COULEURS') !!}</li>
                                <li data-target="inspirations"> <img src="{{ asset('assets/brief/inspiration.png') }}">
                                    {!! lang('INSPIRATIONS') !!}</li>
                                <li data-target="budget"> <img src="{{ asset('assets/brief/budget.png') }}">
                                    {!! lang('BUDGET') !!}</li>
                                <li data-target="etat-des-lieux"> <img src="{{ asset('assets/brief/lieux.png') }}">
                                    {!! lang('ETAT DES LIEUX') !!}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col col2 pt-4">
                        <div class="panel panel-projet" style="background: transparent;">
                            @include('partials.brief.1_projet_grp')
                        </div>
                        @if ($group->pro == 1)
                            <div class="panel panel-activite hidden" style="background: transparent;">
                                @include('partials.brief.2_personnalite_grp')
                            </div>
                        @else
                            <div class="panel panel-personnalite hidden" style="background: transparent;">
                                @include('partials.brief.2_personnalite_grp')
                            </div>
                        @endif
                        <div class="panel panel-gouts-et-couleurs hidden" style="background: transparent;">
                            @include('partials.brief.3_gout-et-couleur_grp')
                        </div>
                        <div class="panel panel-inspirations hidden" style="background: transparent;">
                            @include('partials.brief.4_inspirations_grp')
                        </div>
                        <div class="panel panel-budget hidden" style="background: transparent;">
                            @include('partials.brief.5_budget_grp')
                        </div>
                        <div class="panel panel-etat-des-lieux hidden" style="background: transparent;">
                            @include('partials.brief.6_etat-des-lieux_grp')
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </form>
@endsection

@section('script')
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
    <script src="{{ asset('js/jquery.star-rating-svg.min.js') }}"></script>
    <script>
        jQuery(document).ready(function($) {
            $(".rating").starRating({
                starSize: 25,
                disableAfterRate: 0,
                callback: function(currentRating, $el) {
                    $($el).next().val(currentRating);
                }
            });
            $(".js-range-slider").ionRangeSlider({
                max_postfix: " +",
                step: 10
            });

        });
    </script>

@endsection