@extends('layouts.front')
@php $no_full_title = true; @endphp
@php $page_title = 'Nos offres'; @endphp
@php $page_cover = asset('img/nos-offres-cover.jpg'); @endphp
@section('meta-title', 'Des offres déco adaptées à vos besoins | Pipcke')
@section('meta-title', 'Des offres adaptées à vos besoins')
@section('meta-keywords', '')
@section('meta-description', '')
@section('body-class', 'page-offres')

@section('meta')

    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Des offres adaptées à vos besoins" />
    <meta property="og:description"
        content="Optez pour un forfait Essentiel si vous êtes inspiré et cherchez principalement des recommandations de mobilier et objets déco." />
    <meta name="description"
        content="Optez pour un forfait Essentiel si vous êtes inspiré et cherchez principalement des recommandations de mobilier et objets déco." />
    <meta property="twitter:image" content="{{ $page_cover }}">
    <meta property="og:image" content="{{ $page_cover }}">
    <meta property="fb:app_id" content="730800570418065">

@endsection
@section('additional-schema')
    <script type="application/ld+json">
        {
            "@context": "https://schema.org/",
            "@type": "Product",
            "name": "Décorateurs et Architectes d'Intérieur en ligne",
            "brand": {
                "@type": "Brand",
                "name": "Pipcke"
            },
            "description": "Collaborez en ligne à partir de 90€ avec un architecte d'intérieur de votre choix sur l'aménagement de vos espaces intérieurs",
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": 4.8,
                "reviewCount": 154
            }
        }
    </script>
@endsection

@section('content')

    <section class="vc_row hide-mobile">
        <div class="container price-table">
            <div class="table-responsive no-shadow mt-70" style="z-index: 1">
                <table class="table text-center">
                    <thead>
                        <tr>
                            <th style="background-color: transparent;">

                            </th>
                            <th width="230" class="text-center color-1 bg-primary">
                                <h4 style="font-family: poppins">{!! lang('Essentiel') !!}</h4>
                                <div class="price">
                                    <span class="h3" style="font-family: poppins"
                                        data-price="{{ \App\Models\Forfait::whereLibelle('Essentiel')->first()->montant }} €"
                                        id="price_ess">{{ \App\Models\Forfait::whereLibelle('Essentiel')->first()->montant }}
                                        €</span>
                                    <span class="h6 type_offer" style="font-family: poppins">par pièce</span>
                                </div>
                                <div style="padding-bottom: 10px">
                                    <span class="h6"
                                        style="display: inline-block;vertical-align: middle;padding-right: 2px;">{!! lang('Pièce') !!}
                                    </span>
                                    <label class="switch">
                                        <input id="checkbox_offre" type="checkbox"
                                            class="switch_offre_std checkbox_essentiel">
                                        <span class="slider_price round"></span>
                                    </label>
                                    <span class="h6"
                                        style="display: inline-block;vertical-align: middle;">{!! lang('Studio') !!}
                                    </span>
                                </div>
                                <a rel="nofollow" href="{{ route('nouveauprojet') }}"
                                    class="btn btn-sm btn2 rounded font-weight-semibold">{!! lang('Démarrer mon projet') !!} </a>
                            </th>
                            <th width="230" class="text-center color-2 bg-primary">
                                <h4 style="font-family: poppins">{!! lang('Incontournable') !!}</h4>
                                <div class="price">
                                    <span class="h3" style="font-family: poppins"
                                        data-price="{{ \App\Models\Forfait::whereLibelle('Incontournable')->first()->montant }} €"
                                        id="price_inc">{{ \App\Models\Forfait::whereLibelle('Incontournable')->first()->montant }}
                                        €</span>
                                    <span class="h6 type_offer" style="font-family: poppins">par pièce</span>
                                </div>
                                <div style="padding-bottom: 10px">
                                    <span class="h6"
                                        style="display: inline-block;vertical-align: middle;padding-right: 2px;">{!! lang('Pièce') !!}
                                    </span>
                                    <label class="switch">
                                        <input id="checkbox_offre" type="checkbox"
                                            class="switch_offre_std checkbox_essentiel">
                                        <span class="slider_price round"></span>
                                    </label>
                                    <span class="h6"
                                        style="display: inline-block;vertical-align: middle;">{!! lang('Studio') !!}
                                    </span>
                                </div>
                                <a rel="nofollow" href="{{ route('nouveauprojet') }}"
                                    class="btn btn-sm btn2 rounded font-weight-semibold">{!! lang('Démarrer mon projet') !!} </a>
                            </th>
                            <th width="230" class="text-center color-3 bg-primary">
                                <h4 style="font-family: poppins">{!! lang('Fantastique') !!}</h4>
                                <div class="price">
                                    <span class="h3" style="font-family: poppins"
                                        data-price="{{ \App\Models\Forfait::whereLibelle('Fantastique')->first()->montant }} €"
                                        id="price_fan">{{ \App\Models\Forfait::whereLibelle('Fantastique')->first()->montant }}
                                        €</span>
                                    <span class="h6 type_offer" style="font-family: poppins">par pièce</span>
                                </div>
                                <div style="padding-bottom: 10px">
                                    <span class="h6"
                                        style="display: inline-block;vertical-align: middle;padding-right: 2px;">{!! lang('Pièce') !!}
                                    </span>
                                    <label class="switch">
                                        <input id="checkbox_offre" type="checkbox"
                                            class="switch_offre_std checkbox_essentiel">
                                        <span class="slider_price round"></span>
                                    </label>
                                    <span class="h6"
                                        style="display: inline-block;vertical-align: middle;">{!! lang('Studio') !!}
                                    </span>
                                </div>
                                <a rel="nofollow" href="{{ route('nouveauprojet') }}"
                                    class="btn btn-sm btn2 rounded font-weight-semibold">{!! lang('Démarrer mon projet') !!} </a>
                            </th>

                        </tr>
                    </thead>
                </table>
            </div>
            <div class="table-responsive mt-30">

                <div class="table-head">
                    {!! lang("Concept d'idées") !!}
                </div>

                <table class="table" style="text-align:center;">
                    <tbody>
                        <tr>
                            <th>{!! lang('Architecte(s) d’intérieur') !!} </th>

                            <td width="230">1</td>
                            <td width="230">1</td>
                            <td width="230">2</td>
                        </tr>
                        <tr>
                            <th>{!! lang('Planche(s) d’ambiance') !!}<i
                                    class="fa fa-info-circle glyphicon glyphicon-question-sign append tip"
                                    data-tip="tip-2"></i></th>
                            <div id="tip-2" class="tip-content hidden">
                                <img src="{{ asset('img/screenshot/update/planche-ambiance-sejour-chaleureux-cosy.jpg') }}"
                                    alt="planche d'ambiance d'un séjour chaleureux et cosy réalisée par une décoratice d'intérieur">
                            </div>
                            <td id="amb_ess">1</td>
                            <td id="amb_inc">1</td>
                            <td id="amb_fan">2</td>
                        </tr>
                        <tr>
                            <th>{!! lang('Planche(s) de mobilier') !!}<i
                                    class="fa fa-info-circle glyphicon glyphicon-question-sign append tip"
                                    data-tip="tip-3"></i></th>
                            <div id="tip-3" class="tip-content hidden">
                                <img src="{{ asset('img/screenshot/update/planche-mobilier-sejour-chaleureux-cosy.jpeg') }}"
                                    alt="planche mobilier réalisée par une décoratrice d'intérieur d'un séjour chaleureux et cosy">
                            </div>
                            <td id="mob_ess">1</td>
                            <td id="mob_inc">1</td>
                            <td id="mob_fan">2</td>
                        </tr>
                    </tbody>
                </table>
                <div class="table-head">
                    {!! lang('Conception') !!}
                </div>
                <table class="table" style="text-align:center;">
                    <tbody>
                        <tr>
                            <th>{!! lang('Choix de la meilleure proposition') !!} <i
                                    class="fa fa-info-circle glyphicon glyphicon-question-sign append tip"
                                    data-tip="tip-4"></i>
                                <div id="tip-4" class="tip-content hidden">
                                    La collaboration continue en phase Conception avec le designer dont la proposition a été
                                    retenue, tout en ayant accès à l’ensemble des concepts d'idée.
                                </div>
                            </th>
                            <td width="230">-</td>
                            <td width="230">-</td>
                            <td width="230"><img src="{{ asset('img/icons/check.svg') }}" width="24"
                                    alt=""></td>
                        </tr>
                        <tr>
                            <th>{!! lang('Évaluation de la proposition initiale') !!}</th>
                            <td>-</td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                        </tr>
                        <tr>
                            <th>
                                {!! lang('Plan du projet') !!} <i
                                    class="fa fa-info-circle glyphicon glyphicon-question-sign append tip"
                                    data-tip="tip-5"></i>
                                <div id="tip-5" class="tip-content hidden img">
                                    <img src="{{ asset('img/screenshot/update/pipcke-plan-3D-sejour-moderne-contemporain.jpg') }}"
                                        alt="plan 3D d'un séjour moderne contemporain">
                                </div>
                            </th>
                            <td>-</td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                        </tr>
                        <tr>
                            <th>{!! lang('Visuels 3D du projet') !!} <i
                                    class="fa fa-info-circle glyphicon glyphicon-question-sign append tip"
                                    data-tip="tip-6"></i>
                                <div id="tip-6" class="tip-content hidden">
                                    <img src="{{ asset('img/screenshot/update/pipcke-visuel-3D-sejour-moderne-contemporain.jpg') }}"
                                        alt="visuel 3D d'un séjour moderne contemporain">
                                </div>
                            </th>
                            <td>-</td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                        </tr>
                        <tr>
                            <th>
                                {!! lang('Shopping List') !!} <i
                                    class="fa fa-info-circle glyphicon glyphicon-question-sign append tip"
                                    data-tip="tip-7"></i></i>
                                <div id="tip-7" class="tip-content hidden">
                                    <img src="{{ asset('img/screenshot/update/pipcke-shopping-list-screenshot.png') }}"
                                        alt="liste de mobilier et objets déco">
                                </div>
                            </th>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                        </tr>
                        <tr>
                            <th>{!! lang('Conseiller shopping') !!}</th>

                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                        </tr>
                        <tr>
                            <th>{!! lang('Révision(s) du projet') !!}</th>
                            <td>-</td>
                            <td>1</td>
                            <td>{!! lang('illimitées') !!}</td>
                        </tr>

                        <tr>
                            <th>{!! lang('Conseils d’installation et de réalisation du projet') !!}</th>
                            <td>-</td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                        </tr>
                        <tr>
                            <th>{!! lang('Entretien téléphonique avec l’architecte d’intérieur') !!}</th>
                            <td>-</td>
                            <td>-</td>
                            <td><img src="{{ asset('img/icons/check.svg') }}" width="24" alt=""></td>
                        </tr>

                        <tr>
                            <th>{!! lang('Temps estimé de collaboration') !!}</th>
                            <td>1 semaine</td>
                            <td>1 à 2 semaines</td>
                            <td>2 à 3 semaines</td>
                        </tr>
                    </tbody>
                </table>
                <div class="sticky-divider-end-point"></div>
            </div>
        </div>
        <div class="sticky-header-end-point mt-150 mb-60">&nbsp;</div>
    </section>

    <section class="pt-70 pb-70 bg-light show-mobile">
        @include('front.components.offres_landing')
    </section>
    <section class="vc_row pt-50 pb-50 bg-primary row">
        <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>
    @include('front.components.calltoaction_professionnel')

    <div class="container pt-50 hide-mobile">
        <div class="row">
            <div class="col-md-7">
                <div class="fancy-box content-box-big fancy-box-travel hide-target" data-slideelement-onhover="true"
                    data-slideelement-options='{ "visibleElement": ".fancy-box-header", "hiddenElement": ".fancy-box-info" }'>
                    <div class="fancy-box-image"
                        style="background-image: url({{ asset('img/nos-offres-paiement.jpg') }});"></div>
                    <div class="fancy-box-contents">
                        <div class="ld-slideelement-visible">
                            <div class="fancy-box-header">
                                <h3>Paiement Smart</h3>
                            </div>
                        </div>
                        <div class="ld-slideelement-hidden">
                            <div class="fancy-box-info">
                                <p>
                                    {!! lang(
                                        'Pour vous offrir un maximum de flexibilité dans la gestion de votre projet, Pipcke vous donne la possibilité de composer votre forfait de collaboration.',
                                    ) !!}
                                </p>
                                <br>
                                <p>
                                    {!! lang(
                                        'Votre projet évolue ? Vous avez besoin de plus de services ? Le paiement Smart vous permet d’évoluer vers une offre supérieure (Essentiel vers Incontournable ou Fantastique, Incontournable vers Fantastique).',
                                    ) !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fancy-box content-box-big fancy-box-travel hide-target" data-slideelement-onhover="true"
                    data-slideelement-options='{ "visibleElement": ".fancy-box-header", "hiddenElement": ".fancy-box-info" }'>
                    <div class="fancy-box-image"
                        style="background-image: url({{ asset('img/nos-offres-assurance.jpg') }});"></div>
                    <div class="fancy-box-contents">
                        <div class="ld-slideelement-visible">
                            <div class="fancy-box-header">

                                <h3>Notre Assurance Satisfaction Garantie</h3>
                            </div>
                        </div>
                        <div class="ld-slideelement-hidden">
                            <div class="fancy-box-info">
                                <p>

                                    {!! lang('La confiance que vous nous accordez fait de nous des gens heureux.') !!}
                                </p>
                                <br>
                                <p>
                                    {!! lang(
                                        'Nous mettons ainsi tout notre savoir-faire à contribution pour vous soumettre les meilleures propositions sur la base de ce que vous nous aurez transmis.',
                                    ) !!}
                                </p>
                                <br>
                                <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>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="fancy-box content-box-big fancy-box-travel hide-target" style="height: 848px"
                    data-slideelement-onhover="true"
                    data-slideelement-options='{ "visibleElement": ".fancy-box-header", "hiddenElement": ".fancy-box-info" }'>
                    <div class="fancy-box-image"
                        style="background-image: url({{ asset('img/nos-offres-service-conciergerie.jpg') }});"></div>
                    <div class="fancy-box-contents">
                        <div class="ld-slideelement-visible">
                            <div class="fancy-box-header">

                                <h3>Service conciergerie</h3>
                            </div>
                        </div>
                        <div class="ld-slideelement-hidden">
                            <div class="fancy-box-info">
                                <p>
                                    {!! lang(
                                        'Ils ont sillonné les salons de mobilier et de décoration, ont des connexions dans les maisons de design et chez les fournisseurs de mobilier et d’objets de décoration.',
                                    ) !!}
                                </p>

                                <p class="mt-3">
                                    {!! lang(
                                        'Faites appel à nos spécialistes pour commander votre mobilier et accessoires, et profitez de remises exceptionnelles qui peuvent couvrir le prix de votre forfait et bien plus… <br><br> Profitez-en !',
                                    ) !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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 composer votre forfait de collaboration.',
                ) !!}
            </p>
            <p>
                {!! lang(
                    'Votre projet évolue ? Vous avez besoin de plus de services ? Le paiement Smart vous permet 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 soumettre 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>
            <h3>Service conciergerie</h3>
            <div
                style="width: 300px; height: 600px; border-radius: 8px; margin: 0 auto; background-image: url({{ asset('img/nos-offres-service-conciergerie.jpg') }}); background-size: cover">
            </div>
            <br>
            <p>
                {!! lang(
                    'Ils ont sillonné les salons de mobilier et de décoration, ont des connexions dans les maisons de design et chez les fournisseurs de mobilier et d’objets de décoration.',
                ) !!}
            </p>
            <p class="mt-3">
                {!! lang(
                    'Faites appel à nos spécialistes pour commander votre mobilier et accessoires, et profitez de remises exceptionnelles qui peuvent couvrir le prix de votre forfait et bien plus… <br><br> Profitez-en !',
                ) !!}
            </p>
        </div>

    </div>
    {{-- <section class="pt-70 pb-70 bg-overlay overlay-black"
        style="background: url({{ asset('img/nos-offres-logement.jpg') }}) 50% 40% no-repeat; background-size: cover; background-attachment: fixed;">
        <div class="container text-center" style="z-index: 4; position: relative;">
            <p class="w-50 m-auto font-size-20 text-white font-weight-bold">
                {!! lang('Votre projet concerne un logement entier ? <br> Vous avez plusieurs pièces à réaménager ? …') !!}
            </p>
            <p class="w-75 m-auto font-size-20 text-white">
                <a target="_blank" href="{{ route('contact') }}"
                    class="text-underline text-white">{!! lang('Écrivez-nous') !!}</a> et profitez d’un bon d’achat de 50€ par
                espace supplémentaire et par palier de 500€ sur vos commandes de mobilier et d’objets déco
            </p>

        </div>
    </section> --}}
    <section class="vc_row pt-125 pb-80 bg-cover" style="background-image: url({{ asset('img/bg-23.jpg') }});"
        data-parallax="true" data-parallax-options='{"parallaxBG": true}'>
        <div class="container">
            <div class="row d-flex flex-wrap align-items-center">
                <div class="lqd-column col-md-7 text-md-right pr-md-7 pl-md-5">
                    <h2 class="mt-0 text-white" data-fittext="true"
                        data-fittext-options='{"compressor":0.5,"maxFontSize":"40","minFontSize":"36"}'
                        data-split-text="true" data-split-options='{"type":"lines"}' data-custom-animations="true"
                        data-ca-options='{"triggerHandler":"inview","animationTarget":".split-inner","duration":"1200","delay":"150","easing":"easeOutQuint","direction":"forward","initValues":{"translateY":120,"rotateZ":-5, "opacity": 0},"animations":{"translateY":0,"rotateZ":0, "opacity": 1}}'>
                        {!! lang('Démarrer votre projet dès maintenant') !!}

                    </h2>
                </div>
                <div class="lqd-column col-md-5" data-custom-animations="true"
                    data-ca-options='{"triggerHandler":"inview","animationTarget":"all-childs","duration":"1200","startDelay":"400","delay":100,"easing":"easeOutQuint","direction":"forward","initValues":{"translateX":-31,"opacity":0},"animations":{"translateX":0,"opacity":1}}'>
                    <a href="{{ route('nouveauprojet') }}"
                        class="btn btn-naked  btn-icon-left btn-icon-xlg btn-icon-circle btn-icon-solid btn-icon-ripple font-size-19 text-white text-hover-primary">
                        <span>
                            <span class="btn-icon text-secondary font-size-22"><i class="fa fa-arrow-right"></i></span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var url_check = '{{ URL::asset('img/icons/check.svg') }}';
            var check = '<img src="' + url_check + '" width="24" alt="">';
            $('.switch_offre_std').on('click', function() {
                let is_checked = false;
                if ($(this).is(':checked')) {
                    is_checked = true;
                }
                $('.switch_offre_std').not(this).each(function(index, elem) {
                    if (is_checked) {
                        $(elem).prop('checked', true);
                    } else {
                        $(elem).prop('checked', false);
                    }
                })
                if (is_checked) {
                    $("#price_ess").fadeOut(400, function() {
                        $(this).html("349 €");
                        $("#price_ess")
                            .fadeIn(400)
                    });
                    $("#price_inc").fadeOut(400, function() {
                        $(this).html("399 €");
                        $("#price_inc")
                            .fadeIn(400)
                    });
                    $("#price_fan").fadeOut(400, function() {
                        $(this).html("449 €");
                        $("#price_fan")
                            .fadeIn(400)
                    });

                    $('.type_offer').each(function(index, elem) {
                        $(elem).fadeOut(400, function() {
                            $(this).html("par studio");
                            $(elem)
                                .fadeIn(400)
                        });
                    });

                    $("#amb_ess").fadeOut(400, function() {
                        $(this).html("2");
                        $("#amb_ess")
                            .fadeIn(400)
                    });

                    $("#amb_inc").fadeOut(400, function() {
                        $(this).html("2");
                        $("#amb_inc")
                            .fadeIn(400)
                    });
                    $("#amb_fan").fadeOut(400, function() {
                        $(this).html("4");
                        $("#amb_fan")
                            .fadeIn(400)
                    });
                    $("#mob_ess").fadeOut(400, function() {
                        $(this).html("2");
                        $("#mob_ess")
                            .fadeIn(400)
                    });
                    $("#mob_inc").fadeOut(400, function() {
                        $(this).html("2");
                        $("#mob_inc")
                            .fadeIn(400)
                    });
                    $("#mob_fan").fadeOut(400, function() {
                        $(this).html("4");
                        $("#mob_fan")
                            .fadeIn(400)
                    });
                    $("#eval_ess").fadeOut(400, function() {
                        $(this).html("");
                        $(this).append(check);
                        $("#eval_ess")
                            .fadeIn(400)
                    });
                    $("#plan_ess").fadeOut(400, function() {
                        $(this).html("");
                        $(this).append(check);
                        $("#plan_ess")
                            .fadeIn(400)
                    });

                    $("#revision_ess").fadeOut(400, function() {
                        $(this).html("illimitées");
                        $("#revision_ess")
                            .fadeIn(400)
                    });
                    $("#revision_inc").fadeOut(400, function() {
                        $(this).html("illimitées");
                        $("#revision_inc")
                            .fadeIn(400)
                    });

                    $("#conseil_ess").fadeOut(400, function() {
                        $(this).html("");
                        $(this).append(check);
                        $("#conseil_ess")
                            .fadeIn(400)
                    });
                    $("#vis_ess").fadeOut(400, function() {
                        $(this).html("");
                        $(this).append(check);
                        $("#vis_ess")
                            .fadeIn(400)
                    });

                    $("#phone_ess").fadeOut(400, function() {
                        $(this).html("");
                        $(this).append(check);
                        $("#phone_ess")
                            .fadeIn(400)
                    });
                    $("#phone_inc").fadeOut(400, function() {
                        $(this).html("");
                        $(this).append(check);
                        $("#phone_inc")
                            .fadeIn(400)
                    });

                    $("#time_ess").fadeOut(400, function() {
                        $(this).html("2 à 4 semaines");
                        $("#time_ess")
                            .fadeIn(400)
                    });
                    $("#time_inc").fadeOut(400, function() {
                        $(this).html("2 à 4 semaines");
                        $("#time_inc")
                            .fadeIn(400)
                    });
                    $("#time_fan").fadeOut(400, function() {
                        $(this).html("2 à 4 semaines");
                        $("#time_fan")
                            .fadeIn(400)
                    });

                } else {
                    $("#price_ess").fadeOut(400, function() {
                        $(this).html($(this).data("price"));
                        $("#price_ess")
                            .fadeIn(400)
                    });
                    $("#price_inc").fadeOut(400, function() {
                        $(this).html($(this).data("price"));
                        $("#price_inc")
                            .fadeIn(400)
                    });
                    $("#price_fan").fadeOut(400, function() {
                        $(this).html($(this).data("price"));
                        $("#price_fan")
                            .fadeIn(400)
                    });

                    $('.type_offer').each(function(index, elem) {
                        $(elem).fadeOut(400, function() {
                            $(this).html("par pièce");
                            $(elem)
                                .fadeIn(400)
                        });
                    });
                    $("#amb_ess").fadeOut(400, function() {
                        $(this).html("1");
                        $("#amb_ess")
                            .fadeIn(400)
                    });
                    $("#amb_inc").fadeOut(400, function() {
                        $(this).html("1");
                        $("#amb_inc")
                            .fadeIn(400)
                    });
                    $("#amb_fan").fadeOut(400, function() {
                        $(this).html("2");
                        $("#amb_fan")
                            .fadeIn(400)
                    });
                    $("#mob_ess").fadeOut(400, function() {
                        $(this).html("1");
                        $("#mob_ess")
                            .fadeIn(400)
                    });
                    $("#mob_inc").fadeOut(400, function() {
                        $(this).html("1");
                        $("#mob_inc")
                            .fadeIn(400)
                    });
                    $("#mob_fan").fadeOut(400, function() {
                        $(this).html("2");
                        $("#mob_fan")
                            .fadeIn(400)
                    });

                    $("#eval_ess").fadeOut(400, function() {
                        $(this).html("-");
                        $("#eval_ess")
                            .fadeIn(400)
                    });

                    $("#vis_ess").fadeOut(400, function() {
                        $(this).html("-");
                        $("#vis_ess")
                            .fadeIn(400)
                    });
                    $("#revision_ess").fadeOut(400, function() {
                        $(this).html("-");
                        $("#revision_ess")
                            .fadeIn(400)
                    });
                    $("#revision_inc").fadeOut(400, function() {
                        $(this).html("1");
                        $("#revision_inc")
                            .fadeIn(400)
                    });
                    $("#conseil_ess").fadeOut(400, function() {
                        $(this).empty();
                        $(this).html("-");
                        $("#conseil_ess")
                            .fadeIn(400)
                    });
                    $("#plan_ess").fadeOut(400, function() {
                        $(this).empty();
                        $(this).html("-");
                        $("#plan_ess")
                            .fadeIn(400)
                    });

                    $("#visuels_ess").fadeOut(400, function() {
                        $(this).empty();
                        $(this).html("-");
                        $("#visuels_ess")
                            .fadeIn(400)
                    });

                    $("#phone_ess").fadeOut(400, function() {
                        $(this).empty();
                        $(this).html("-");
                        $("#phone_ess")
                            .fadeIn(400)
                    });
                    $("#phone_inc").fadeOut(400, function() {
                        $(this).empty();
                        $(this).html("-");
                        $("#phone_inc")
                            .fadeIn(400)
                    });

                    $("#time_ess").fadeOut(400, function() {
                        $(this).html("1 semaine");
                        $("#time_ess")
                            .fadeIn(400)
                    });
                    $("#time_inc").fadeOut(400, function() {
                        $(this).html("1 à 2 semaines");
                        $("#time_inc")
                            .fadeIn(400)
                    });
                    $("#time_fan").fadeOut(400, function() {
                        $(this).html("3 semaines");
                        $("#time_fan")
                            .fadeIn(400)
                    });
                }
            });
        });
    </script>
@endsection