@extends('layouts.experience_achat')
@section('meta-title', 'Choisissez votre offre')
@section('meta-keywords', '')
@section('meta-description', '')
@section('meta')
    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Choisissez votre offre | Pipcke – Décoration d’intérieur en ligne" />
    <meta property="og:description"
        content="Choisissez en fonction de votre budget et de vos besoins et envies les forfaits déco pour vos espaces à aménager." />
    <meta name="description"
        content="Choisissez en fonction de votre budget et de vos besoins et envies les forfaits déco pour vos espaces à aménager." />
@endsection
@section('sub-menu')
    @include('front.experience_achat.menu_grp')
@endsection
@php
    $data = (new \App\Http\Controllers\QuizController())->getData();
    $data = $data[5];
@endphp
@section('style')
    <style>
        #content {
            margin-top: -12px !important;
        }

        .p_09 {
            font-size: 0.9em;
        }

        .p_08 {
            font-size: 0.75em !important;
        }

        .fa-times-circle {
            color: var(--color-marron);
        }

        .select-room-list li:hover {
            background-color: var(--color-primary);
            -webkit-box-shadow: 0px 2px 4px rgb(0 0 0 / 30%);
            box-shadow: 0px 2px 4px rgb(0 0 0 / 30%);
        }

        .select-room-list {
            max-height: 50vh;
            overflow: auto;
        }

        .mobile_hr {
            display: none;
        }

        @media all and (max-width: 500px) {
            .mobile_hr {
                display: block;
                border-top: 1px solid black;
                width: 60%;
                margin-top: 0px !important;
                margin-bottom: 10px !important;
            }

            .select-room-list {
                max-height: 100%;
            }

            .add-room-div {
                margin-top: 100px !important
            }
        }
    </style>
@endsection
@section('content')
    @php
        $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',
        ];
        $black_icons = [
            'Hall d’entrée' => 'pipcke-new-project-select-room-entrance.png',
            'Salon' => 'pipcke-new-project-select-room-living-room.png',
            'Séjour' => 'pipcke-new-project-select-room-guest-room.png',
            'Salle à manger' => 'pipcke-new-project-select-room-dining-room.png',
            'Chambre adulte' => 'pipcke-new-project-select-room-bedroom.png',
            'Chambre enfant' => 'pipcke-new-project-select-room-kids-room.png',
            'Chambre bébé' => 'pipcke-new-project-select-room-nursery.png',
            'Dressing' => 'pipcke-new-project-select-room-dressing.png',
            'Cuisine' => 'pipcke-new-project-select-kitchen.png',
            'Salle de bains' => 'pipcke-new-project-select-bathroom.png',
            'Bureau' => 'pipcke-new-project-select-office.png',
            'Terrasse' => 'pipcke-new-project-select-terrace.png',
            'Pièce de vie' => 'pipcke-new-project-open-space.png',
            'Studio' => 'pipcke-new-project-select-studio.png',
            'Espace commercial' => 'pipcke-new-project-select-prof.png',
        ];
    @endphp
    <div class="loader">
        <div></div>
    </div>
    {{-- @include('partials.choisir_offre_grp_popup', $group) --}}
    {{-- @foreach ($group->projets as $projet)
        @include('partials.change_project_name', ['projet' => $projet])
    @endforeach --}}
    <section class="w-100 choisir_offre_section_nav">
        <div class="row" style="text-align: center;">
            <div class="col-md-3 col-sm-12" style="padding-bottom: 20px;">
                <div class="col-md-4 discount-alert-forfait col-sm-3">
                    <div class="discount-alert-forfait-count">
                        <i class="fa" style="font-size:30px;">&#xf07a;</i>
                        <span class='badge badge-warning p_08'
                            style="vertical-align:top;background-color: #d8ad7f !important;">{{ count($group->projets) }}</span>
                    </div>
                </div>
                <div class="col-md-8 discount-alert-forfait col-sm-9">
                    @if (session()->has('personnaliser_offre'))
                        <div class="discount-alert-forfait-discount" style="display: inline-block;vertical-align: middle;">
                            <div class="total-container row p_09" style="text-align: left;">
                                <span style="display: inline-block;font-weight: 600;">Total : </span>
                                <span id='purchaseValue' style="font-weight: 600;padding-left: 5px;"> 0 €</span>
                                <span id="oldPurchaseValue"
                                    style="padding-top: 5px;display: inline-block;font-size: .7em;margin-left: 5px;text-decoration: line-through;vertical-align: middle;"></span>
                            </div>
                            <div class="discount-container row p_09">
                                <span style="display: inline-block">Économies réalisées : </span>
                                <span style="display: inline-block;font-weight: 600;padding-left: 5px; color:#29b542;"
                                    id='discountValue'> 0
                                    €</span>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <div class="col-md-6 col-sm-12" style="padding-bottom: 10px;">
                <div class=" p_09 discount-alert-forfait">
                    <p>Profitez d'une réduction de
                        <strong>
                            <span style="font-weight: 700;color:#29b542;">15€ à 25€ sur chaque pièce supplémentaire</span>
                        </strong>
                    <p>
                </div>
            </div>
            <hr class="mobile_hr">
            <div class="col-md-3 cart choisir_offre_cart col-sm-12">
                @if (session()->has('personnaliser_offre'))
                    <div class="col-md-3 col-sm-6 ">
                        @if ($group->experience_achat_step < 3)
                            <i title="Ajoutez une pièce et profitez d'une réduction"
                                class="fa fa-plus-circle select-piece choisir_offre_cart_add_room" aria-hidden="true"
                                data-toggle="dropdown"
                                style="font-size: 50px;cursor: pointer;vertical-align: middle;float: right;"></i>
                            <div class="dropdown-menu add-room-div">
                                <ul class="nav tabs-nav " style="margin-bottom: 0px;">
                                    <li class="m-auto pt-10 pb-10 w-100"
                                        style="border-bottom: 1px dashed var(--color-font) ;">
                                        <span class="value m-auto">
                                            Ajouter une pièce</span>
                                    </li>
                                </ul>
                                <ul class="nav tabs-nav select-room-list" role="tablist"
                                    style="margin-bottom: 0px !important;">
                                    @if ($group->pro == 1)
                                        <li data-value="Espace commercial" style="width: 225px"><a href="#">
                                                <span class="value" style="padding-right: 25px;">
                                                    Espace commercial</span><img class="flag" width="25"
                                                    src="{{ asset('assets/quiz/icons/pipcke-new-project-select-prof.png') }}"
                                                    alt=""></a>
                                        </li>
                                    @else
                                        @php
                                            array_pop($data);
                                        @endphp
                                        @php $i=0;  @endphp
                                        @foreach ($data as $key => $value)
                                            @php
                                                $i++;
                                            @endphp
                                            <li data-value="{{ $key }}" style="width: 225px"><a href="#">
                                                    <span class="value" style="padding-right: 25px;">
                                                        {{ $key }}</span><img class="flag" width="25"
                                                        src="{{ asset('assets/quiz/icons/' . $value) }}" alt=""></a>
                                            </li>
                                        @endforeach
                                        <li data-value="Autre" style="width: 225px"><a href="#"><span class="value"
                                                    style="padding-right: 25px;">{!! lang('Autres') !!}</span>
                                                <img class="flag" width="25"
                                                    src="{{ asset('assets/quiz/icons/pipcke-new-project-other-room.svg') }}"
                                                    alt=""></a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                            <form class="d-none" method="post" class="hidden"
                                action="{{ route('ajout_piece_grp.post', $group->id) }}" id="add_room_form">
                                {{ csrf_field() }}
                                <input type="text" class="d-none" name="espace" value="">
                            </form>
                        @endif
                    </div>
                    <div class="col-md-9 col-sm-6 ">

                        @if ($group->experience_achat_step < 3)
                            <button id="btn_confirmer_forfait_grp"
                                class="btn btn-sm btn2 rounded font-weight-semibold disabled choisir_offre_cart_btn"
                                data-url="{{ route('experience_achat.choisir_offre_grp.submit', $group->id) }}">{!! lang('Confirmer') !!}
                                <i class="fa fa-chevron-right ml-3"></i></button>
                        @else
                            <button id="btn_ugrade_forfait_grp" class="btn btn-sm btn2 rounded font-weight-semibold"
                                style=""
                                data-url="{{ route('experience_achat.choisir_offre_grp.update', $group->id) }}">{!! lang('Valider') !!}
                                <i class="fa fa-chevron-right ml-3"></i></button>
                        @endif
                    </div>
                @else
                    <div class="col-md-6 col-sm-6 "></div>
                    <div class="col-md-3 col-sm-6 ">
                        @if ($group->experience_achat_step < 3)
                            <i title="Ajoutez une pièce et profitez d'une réduction"
                                class="fa fa-plus-circle select-piece choisir_offre_cart_add_room" aria-hidden="true"
                                data-toggle="dropdown"
                                style="font-size: 50px;cursor: pointer;vertical-align: middle;float: right;"></i>
                            <div class="dropdown-menu add-room-div">
                                <ul class="nav tabs-nav " style="margin-bottom: 0px;">
                                    <li class="m-auto pt-10 pb-10 w-100"
                                        style="border-bottom: 1px dashed var(--color-font) ;">
                                        <span class="value m-auto">
                                            Ajouter une pièce</span>
                                    </li>
                                </ul>
                                <ul class="nav tabs-nav select-room-list" role="tablist"
                                    style="margin-bottom: 0px !important;">
                                    @if ($group->pro == 1)
                                        <li data-value="Espace commercial" style="width: 225px"><a href="#">
                                                <span class="value" style="padding-right: 25px;">
                                                    Espace commercial</span><img class="flag" width="25"
                                                    src="{{ asset('assets/quiz/icons/pipcke-new-project-select-prof.png') }}"
                                                    alt=""></a>
                                        </li>
                                    @else
                                        @php
                                            array_pop($data);
                                        @endphp
                                        @php $i=0;  @endphp
                                        @foreach ($data as $key => $value)
                                            @php
                                                $i++;
                                            @endphp
                                            <li data-value="{{ $key }}" style="width: 225px"><a href="#">
                                                    <span class="value" style="padding-right: 25px;">
                                                        {{ $key }}</span><img class="flag" width="25"
                                                        src="{{ asset('assets/quiz/icons/' . $value) }}"
                                                        alt=""></a>
                                            </li>
                                        @endforeach
                                        <li data-value="Autre" style="width: 225px"><a href="#"><span
                                                    class="value"
                                                    style="padding-right: 25px;">{!! lang('Autres') !!}</span>
                                                <img class="flag" width="25"
                                                    src="{{ asset('assets/quiz/icons/pipcke-new-project-other-room.svg') }}"
                                                    alt=""></a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                            <form class="d-none" method="post" class="hidden"
                                action="{{ route('ajout_piece_grp.post', $group->id) }}" id="add_room_form">
                                {{ csrf_field() }}
                                <input type="text" class="d-none" name="espace" value="">
                            </form>
                        @endif
                    </div>
                @endif

            </div>
        </div>

    </section>

    <section class="container pb-40 offre_container_grp" data-number="{{ count($group->projets) }}">
        <div
            class="row m-auto
        @switch(count($group->projets) )
            @case(1)
            w-30
                @break
            @case(2)
            w-50
                @break
            @case(3)
            w-75
                @break
            @default
            w-100 @endswitch
        ">
            <div class="col-md-12 lqd-custom-menu" style='display: inline-block;'>
                <div class="reset-ul inline-nav text-center choisir_offre_nav">
                    @include('front.components.carrouselPieces')
                </div>
            </div>
        </div>
        <div class="row pt-40">
            @if (!session()->has('personnaliser_offre') && $group->experience_achat_step < 3)
                @php
                    if (session()->has('g_id')) {
                        $g_id = session()->get('g_id');
                        $group = \App\Models\GroupeProjet::find($g_id);
                    }
                    $projet = $group->projets[0];
                @endphp

                @include('front.components.offres_tmp', [
                    'no_buttons' => 1,
                    'taux' => 0.6,
                    'one_payment' => 1,
                ])
            @else
                @foreach ($group->projets as $key => $projet)
                    <div
                        class="forfait {{ $projet->forfait }} {{ $key != 0 ? 'hidden' : '' }} forfait-{{ $projet->id }}">
                        @if ($projet->type == 'pro')
                            @include('front.components.offresPro_grp', [
                                'no_buttons' => 1,
                                'taux' => 0.6,
                                'one_payment' => $projet->payment,
                            ])
                        @else
                            @include('front.components.offres_grp', [
                                'no_buttons' => 1,
                                'taux' => 0.6,
                                'one_payment' => $projet->payment,
                            ])
                        @endif
                    </div>
                @endforeach
            @endif
        </div>

    </section>
    {{-- <section class="pt-25 pb-10 bg-primary">
        @if ($group->status == 'Compléter mon brief')
            <p class="text-center text-black">
                {!! lang('Vous avez encore la possibilité de choisir un forfait supérieur et de profiter de plus de services !') !!} <br>
                {!! lang('Vous ne payez que <b>la différence</b> par rapport à votre forfait actuel.') !!}
            </p>
        @else
            <p class="text-center text-black">{!! lang('Soyez Flex Ô Max grâce au <b>Paiement Smart</b> : payez <b>60%</b> du prix du forfait maintenant, le reste au lancement de la conception finale !') !!}</p>
        @endif
    </section> --}}
    <section class="@if ((new \Jenssegers\Agent\Agent())->isDesktop()) vc_row pt-50 @endif pb-50 bg-primary row how_section">
        <div class="usp_mid_offres hide-mobile-usp">
            <div class="row box">
                <div class="lqd-column col-md-12 text-center" data-custom-animations="true"
                    data-ca-options='{"triggerHandler":"inview","animationTarget":"all-childs","duration":1200,"delay":160,"initValues":{"translateY":50,"opacity":0},"animations":{"translateY":0,"opacity":1}}'>
                    <header class="fancy-title fancy-usp-title">
                        <h2 class="h2"><b>1000+</b></h2>
                    </header>
                    <p class="font-size-18">
                        {!! lang('Espaces transformés par nos designers') !!}
                    </p>
                </div>
            </div>
            {{-- <div class="row box">
                <div class="lqd-column col-md-12 text-center" data-custom-animations="true"
                    data-ca-options='{"triggerHandler":"inview","animationTarget":"all-childs","duration":1200,"delay":160,"initValues":{"translateY":50,"opacity":0},"animations":{"translateY":0,"opacity":1}}'>
                    <header class="fancy-title fancy-usp-title fancy-mb-0">
                        <h2 class="h2" style="font-size: 27px !important;"><b>Excellent</b></h2>
                    </header>
                    <a class="fancy-title m-0" href="https://fr.trustpilot.com/review/pipcke.fr" target="_blank">
                        <div class="trustpilote-rating">
                            <img alt="trustpilote pipcke 4,5 sur 5" src="{{ asset('img/logo_pro/stars-4.5.svg') }}">
                        </div>
                    </a>
                    <a href="https://fr.trustpilot.com/review/pipcke.fr" target="_blank">
                        <div class="trustpilote-logo">
                            <img alt="trustpilote pipcke 4,5 sur 5" src="{{ asset('img/logo_pro/trustpilot-1.svg') }}">
                        </div>
                    </a>
                </div>
            </div> --}}
            <div class="row box">
                <div class="lqd-column col-md-12 text-center" data-custom-animations="true"
                    data-ca-options='{"triggerHandler":"inview","animationTarget":"all-childs","duration":1200,"delay":160,"initValues":{"translateY":50,"opacity":0},"animations":{"translateY":0,"opacity":1}}'>
                    <header class="fancy-title fancy-usp-title">
                        <h2 class="h2"><b>100%</b></h2>
                    </header>
                    <p class="font-size-18">
                        {!! lang('Satisfait ou remboursé') !!}
                    </p>
                </div>
            </div>
            <div class="row box">
                <div class="lqd-column col-md-12 text-center" data-custom-animations="true"
                    data-ca-options='{"triggerHandler":"inview","animationTarget":"all-childs","duration":1200,"delay":160,"initValues":{"translateY":50,"opacity":0},"animations":{"translateY":0,"opacity":1}}'>
                    <header class="fancy-title fancy-usp-title">
                        <h2 class="h2"><b>500+</b></h2>
                    </header>
                    <p class="font-size-18">
                        {!! lang('Des réductions sur plus de 500 marques') !!}
                    </p>
                </div>
            </div>
        </div>
        <div class="show-mobile-usp w-100">
            @include('front.components.carrouselUSP')
        </div>
    </section>

    {{-- <section class="bg-white show-mobile">
        <div class="container pt-50 show-mobile">

            <div>
                <h3>Paiement Smart</h3>
                <div
                    style="width: 300px; height: 300px; border-radius: 8px; margin: 0 auto; background-image: url({{ asset('img/nos-offres-paiement.jpg') }}); background-size: cover">
                </div>
                <br>
                <p>
                    {!! lang('Pour vous offrir un maximum de flexibilité dans la gestion de votre projet, Pipcke vous donne la possibilité de payer, <b>sans frais supplémentaires et sans obligations</b>, votre projet à l’avancement : 60% pour lancer la phase d’esquisse et les 40% restants pour lancer votre conception finale.') !!}
                </p>
                <p>
                    {!! lang('Votre projet évolue ? Vous avez besoin de plus de services ? Le paiement Smart en deux temps vous permet également d’évoluer vers une offre supérieure (Essentiel vers Incontournable ou Fantastique, Incontournable vers Fantastique).') !!}
                </p>
            </div>

            <div>
                <h3>Notre Assurance Satisfaction Garantie</h3>
                <div
                    style="width: 300px; height: 300px; border-radius: 8px; margin: 0 auto; background-image: url({{ asset('img/nos-offres-assurance.jpg') }});  background-size: cover">
                </div>
                <br>
                <p>
                    {!! lang('La confiance que vous nous accordez fait de nous des gens heureux.') !!}
                </p>
                <p>
                    {!! lang('Nous mettons ainsi tout notre savoir-faire à contribution pour vous faire les meilleures propositions sur la base de ce que vous nous aurez transmis.') !!}
                </p>
                <p>
                    {!! lang('Vous n’êtes pas satisfait de votre collaboration ? Faites-le-nous savoir rapidement et on trouvera la solution. Aussi very so much simple que ça !') !!}
                </p>
            </div>

        </div>
    </section> --}}

@endsection
@section('style')
    <style>
        .offres .col-md-4 {
            opacity: 1 !important
        }
    </style>
@endsection

@section('script')
    {!! NoCaptcha::renderJs() !!}
    <script>
        $(document).ready(function() {
            // if (window.sessionStorage) {
            //     var modal_smart = parseInt(sessionStorage.getItem("modal_smart"));
            //     if (modal_smart != 1) {
            //         $('#choisir-off-grp').modal('show');
            //     }
            // }
            // $("#smart_btn_modal").on('click', function() {
            //     sessionStorage.setItem("modal_smart", 1);
            // });
            // if (window.sessionStorage) {
            //     var order = JSON.parse(sessionStorage.getItem("order")) || [];
            //     var purchaseValue = sessionStorage.getItem("purchaseValue");
            //     if (purchaseValue) {
            //         $("#purchaseValue").fadeOut(250, function() {
            //             $(this)
            //                 .text(purchaseValue + " €")
            //                 .fadeIn(250);
            //         });
            //     }
            //     var discountValue = sessionStorage.getItem("discountValue");
            //     if (discountValue) {
            //         $("#discountValue").fadeOut(250, function() {
            //             $(this)
            //                 .text(discountValue + " €")
            //                 .fadeIn(250);
            //         });
            //     }
            //     var oldPurchaseValue = sessionStorage.getItem("oldPurchaseValue");
            //     if(oldPurchaseValue) {
            //         $("#oldPurchaseValue").fadeOut(250, function() {
            //             $(this)
            //                 .text(
            //                     oldPurchaseValue +
            //                     " €"
            //                 )
            //                 .fadeIn(250);
            //         });
            //     }

            //     let total = $("[data-number]").data("number");
            //     if (order.length == total) {
            //         $("#btn_confirmer_forfait_grp").removeClass("disabled", 250);
            //     } else {
            //         $("#btn_confirmer_forfait_grp").addClass("disabled", 250);
            //     }
            //     order.forEach(element => {

            //     });
            // }

            var group_size = {!! json_encode(count($group->projets)) !!};
            $("#btn_confirmer_forfait_grp").on('click', function() {
                $(".loader").fadeIn();
                var count = 0;
                var values_array = [];
                $(".offre_container_grp").find("button[type=button][checked='checked']")
                    .each(function(index, elem) {
                        values_array.push($(elem).attr("value"));
                        count++;
                    });
                if (group_size != count) {
                    $(".loader").fadeOut();
                    Swal.fire({
                        text: "Veuillez choisir un forfait pour chaque pièce",
                        showCancelButton: false,
                        confirmButtonColor: "#3085d6",
                        confirmButtonText: "Ok",
                    })
                    return;
                } else {
                    var array_forfait = $(this).serialize(values_array);
                    $.ajax({
                            url: $(this).data("url"),
                            type: "POST",
                            data: {
                                values_array: values_array
                            },
                            datatype: "json",
                            cache: true,
                        })
                        .success((data) => {
                            if (data.goto) {
                                location.href = data.goto;
                            }
                        })
                        .error((error) => {
                            console.log("error here :", error.responseJSON);
                            if (error.status == 401) {
                                document.location.href = window.location.origin + "/connexion";
                            }
                        });
                    return false;
                }
            });

            $("#personnaliser_offre").on('click', function() {
                $(".loader").fadeIn();
                $.ajax({
                        url: $(this).data("url"),
                        type: "GET",
                        cache: true,
                    })
                    .success((data) => {
                        if (data.goto) {
                            location.reload();
                        }
                    })
                    .error((error) => {
                        console.log("error here :", error.responseJSON);
                        if (error.status == 401) {
                            document.location.href = window.location.origin + "/connexion";
                        }
                    });

            });
            $("#btn_ugrade_forfait_grp").on('click', function() {
                $(".loader").fadeIn();
                var count = 0;
                var values_array = [];
                var keys_array = [];
                var prices_array = [];
                var discounts_array = [];
                $(".offre_container_grp").find("button[type=button][checked='checked']")
                    .each(function(index, elem) {
                        keys_array.push($(elem).attr("name"));
                        values_array.push($(elem).attr("value"));
                        discounts_array.push($(elem).attr("discount"));
                        prices_array.push($(elem).data("price"));
                        count++;
                    });

                if (count == 0) {
                    // Swal.fire({
                    //     text: "Veuillez choisir un nouveau forfait ou plus",
                    //     showCancelButton: false,
                    //     confirmButtonColor: "#3085d6",
                    //     confirmButtonText: "Ok",
                    // })
                    window.location.href =
                        "{{ route('experience_achat.completez_brief_grp', request('id')) }}";
                } else {
                    $.ajax({
                            url: $(this).data("url"),
                            type: "POST",
                            data: {
                                values_array: values_array,
                                keys_array: keys_array,
                                prices_array: prices_array,
                                discounts_array: discounts_array
                            },
                            datatype: "json",
                            cache: true,
                        })
                        .success((data) => {
                            if (data.goto) {
                                location.href = data.goto;
                            }
                        })
                        .error((error) => {
                            console.log("error here :", error.responseJSON);
                            if (error.status == 401) {
                                document.location.href = window.location.origin + "/connexion";
                            }
                        });
                    return false;
                }
            });


            $(".select-room-list li").click(function() {
                $(".loader").fadeIn();
                $(".select-piece").toggleClass("fa-plus-circle fa-times-circle", 500);
                $("[name=espace]").val($(this).data("value"));
                $("#add_room_form").trigger("submit");
            });

            $(".select-piece").click(function() {
                $(".select-piece").toggleClass("fa-plus-circle fa-times-circle", 500);
            });

        });
    </script>
@endsection