@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')
@endsection
@php
    $data = (new \App\Http\Controllers\QuizController())->getData();
    $data = $data[5];
@endphp
@section('style')
    <style>
        #content {
            margin-top: 10px !important;
        }

        .add_space_container {
            position: absolute;
            top: 3%;
            right: 3%;
        }

        .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;
        }

        @media all and (max-width: 500px) {
            .select-room-list {
                max-height: 100%;
            }

            .add-room-div {
                margin-top: 100px !important
            }
        }
    </style>
@endsection
@section('content')
    <div class="loader">
        <div></div>
    </div>
    {{-- @if (!$projet->forfait || ($projet->forfait && $projet->forfait != 'fantastique'))
        @include('partials.choisir_offre_popup', $projet)
    @endif --}}

    @if ($projet->experience_achat_step < 3)
        <div class="row choisir_offre_header" style="text-align: center;">
            <div class="col-md-2">

            </div>
            <div class="col-md-8">
                <div class="discount-alert-forfait p_09 ">
                    <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>
            <div class="col-md-2 pull-right">
                <i title="Ajoutez une pièce et profitez d'une réduction" class="fa fa-plus-circle select-piece"
                    aria-hidden="true" data-target="#modal-selection-projet-{{ $projet->id }}" data-toggle="dropdown"
                    style="font-size: 50px;cursor: pointer;vertical-align: middle;float: left;"></i>
                <div class="dropdown-menu add-room-div" style="width : 225px">
                    <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 ($projet->type == 'pro')
                            <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.post', $projet->id) }}"
                    id="add_room_form">
                    {{ csrf_field() }}
                    <input type="text" class="d-none" name="espace" value="">
                </form>
            </div>
        </div>
    @endif

    <section class="container pt-50 pb-40">

        <div class="forfait {{ $projet->forfait }}">
            @if ($projet->type == 'pro')
                @include('front.components.offresPro', [
                    'no_buttons' => 1,
                    'taux' => 0.6,
                    'one_payment' => $projet->payment,
                ])
            @else
                @include('front.components.offres', [
                    'no_buttons' => 1,
                    'taux' => 0.6,
                    'one_payment' => $projet->payment,
                ])
            @endif

        </div>
        <div class="row mt-30 text-center actions {{ $projet->forfait }}">

            <div class="col-md-4 essentiel">

            </div>
            <div class="col-md-4 incontournable">

            </div>
            <div class="col-md-4 fantastique">

            </div>
        </div>
    </section>

    <section class="vc_row pt-50 pb-50 bg-primary row" style="padding-top: 50px !important;">
        <div class="usp_mid_offres">
            <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>
    </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 type="text/javascript">
        $(document).ready(function() {
            // $('#choisir-off').modal('show');
            // if (window.sessionStorage) {
            //     var modal_smart = parseInt(sessionStorage.getItem("modal_smart"));
            //     if (modal_smart != 1) {
            //         $('#choisir-off').modal('show');
            //     }
            // }
            // $("#smart_btn_off").on('click', function() {
            //     sessionStorage.setItem("modal_smart", 1);
            // });
            $(".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