@extends('layouts.espace_collaboration')
@section('meta-title', 'Collaboration en cours')
@section('meta-keywords', '')
@section('meta-description', '')
@section('sub-menu')
    @include('front.espace_collaboration.menu')
@endsection
@section('content')
    @php
        $migrated = $projet->migrated;
    @endphp
    @if ($projet->status == 'Lancer conception')
        @if (!$migrated)
            @include('partials.conception_smart_popup', $projet)
        @endif
        @if ($projet->payment == 1)
            <section class="text-center pt-5 pb-5">
                @if ($migrated && $projet->forfait == 'essentiel')
                    <b>{!! lang('Recevez une conception 3D complète de votre espace avec un plan et des visuels photoréalistes.') !!}</b>
                @elseif($projet->forfait == 'essentiel')
                    <b>{!! lang('Confirmez votre offre ou choisissez un forfait supérieur pour lancer votre conception') !!}</b>
                @else
                    <b>{!! lang('Confirmez votre offre ou choisissez le forfait fantastique pour lancer votre conception') !!}</b>
                @endif
            </section>
        @else
            <section class="text-center pt-5 pb-5">
                <b>{!! lang('Sélectionnez une offre pour lancer votre conception') !!}</b>
            </section>
        @endif
        {{-- <section class="pt-65 pb-45 bg-primary">

        </section> --}}
        <section class="container pt-40 pb-40">
            <div class="forfait {{ $projet->forfait }}">
                @if ($projet->payment == 0)
                    @if ($projet->type == 'pro')
                        @php
                            $prefix = 'Pro-';
                            $montant =
                                \App\Models\Forfait::whereLibelle('Pro-' . $projet->forfait)->first()->conception ?? '';
                        @endphp
                    @elseif ($projet->type == 'studio')
                        @php
                            $prefix = 'Std-';
                            $montant =
                                \App\Models\Forfait::whereLibelle('Std-' . $projet->forfait)->first()->conception ?? '';
                        @endphp
                    @else
                        @php
                            $prefix = '';
                            $montant_essentiel =
                                \App\Models\Forfait::whereLibelle('Essentiel')->first()->conception ?? '';
                            $montant_incountournable =
                                \App\Models\Forfait::whereLibelle('Incontournable')->first()->conception ?? '';
                            $montant_fantastique =
                                \App\Models\Forfait::whereLibelle('Fantastique')->first()->conception ?? '';
                        @endphp
                    @endif
                @else
                    @if ($projet->type == 'maison')
                        @php
                            $prefix = '';
                        @endphp
                        @if ($projet->forfait == 'essentiel')
                            @php
                                $montant_essentiel = 0;
                                $montant_incountournable = 65;
                                $montant_fantastique = 115;
                            @endphp
                        @elseif ($projet->forfait == 'incontournable')
                            @php
                                $montant_essentiel = 0;
                                $montant_incountournable = 0;
                                $montant_fantastique = 50;
                            @endphp
                        @endif
                    @elseif ($projet->type == 'studio')
                        @php
                            $prefix = 'Std-';
                        @endphp
                        @if ($projet->forfait == 'essentiel')
                            @php
                                $montant_essentiel = 0;
                                $montant_incountournable = 100;
                                $montant_fantastique = 134;
                            @endphp
                        @elseif ($projet->forfait == 'incontournable')
                            @php
                                $montant_essentiel = 0;
                                $montant_incountournable = 0;
                                $montant_fantastique = 73;
                            @endphp
                        @endif
                    @else
                        @php
                            $prefix = 'Pro-';
                        @endphp
                        @if ($projet->forfait == 'essentiel')
                            @php
                                $montant_essentiel = 0;
                                $montant_incountournable = 70;
                                $montant_fantastique = 97;
                            @endphp
                        @elseif ($projet->forfait == 'incontournable')
                            @php
                                $montant_essentiel = 0;
                                $montant_incountournable = 0;
                                $montant_fantastique = 56;
                            @endphp
                        @endif
                    @endif
                @endif

                <div class="offres container">
                    <div class="row m-auto text-center">
                        <div class="col-md-4 essentiel {{ $migrated ? 'hidden-forfait-section' : '' }}">
                            <div class="pricing-item color-1">
                                <div class="pricing-divider">
                                    <h3>{!! lang('Essentiel') !!}</h3>
                                    <h4>
                                        {{ $montant_essentiel }} €
                                        @if ($projet->forfait != 'essentiel')
                                            <span class="h6">{!! lang('prix forfait') !!}
                                                {{ \App\Models\Forfait::whereLibelle($prefix . 'Essentiel')->first()->montant }}
                                                €</span>
                                        @endif
                                    </h4>
                                </div>
                                <small>{!! lang("Jusqu'à 1 semaine de conception") !!}</small>
                                <div class="card-body">

                                    <form method="post"
                                        action="{{ route('client.espace_collaboration.lancer_conception.post', $projet->id) }}">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="montant" value="{{ $montant_essentiel }}">
                                        <button name="forfait_conception" value="essentiel"
                                            class="btn btn-sm btn2 rounded font-weight-semibold">
                                            @if ($projet->forfait == 'essentiel')
                                                {!! lang('Continuer avec Essentiel') !!}
                                            @else
                                                {!! lang(' Sélectionner Essentiel') !!}
                                            @endif
                                            <i class="fa fa-chevron-right ml-3"></i>
                                        </button>
                                    </form>

                                    <ul class="list-unstyled mt-20">
                                        <li>
                                            {!! lang('1 architecte d’intérieur retenu pour le design final') !!}
                                        </li>
                                        <li>
                                            {!! lang('Révision du concept') !!}
                                        </li>
                                        <li>
                                            {!! lang('1 design final :') !!} {!! lang('plan') !!} <i
                                                class="fa fa-info-circle tip" data-tip="tip-2"></i> +
                                            {!! lang('Visuels 3D') !!} <i class="fa fa-info-circle tip" data-tip="tip-2"></i>
                                        </li>
                                        <li>
                                            {!! lang('1 Shopping List dans votre budget') !!}
                                        </li>
                                        <li>
                                            {!! lang('Conseiller shopping') !!}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 incontournable">
                            <div class="pricing-item color-2">
                                <div class="pricing-divider ">
                                    <p class="ribbon-header">Le plus populaire</p>
                                    <h3>{!! lang('Incontournable') !!}</h3>
                                    <h4>
                                        {{ $montant_incountournable }} €
                                        @if ($projet->forfait != 'incontournable')
                                            <span class="h6">{!! lang('prix forfait') !!}
                                                {{ \App\Models\Forfait::whereLibelle($prefix . 'Incontournable')->first()->montant }}
                                                €</span>
                                        @endif

                                    </h4>

                                </div>
                                <small>{!! lang('1 à 2 semaines de conception') !!}</small>
                                <div class="card-body">

                                    <form method="post"
                                        action="{{ route('client.espace_collaboration.lancer_conception.post', $projet->id) }}">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="montant" value="{{ $montant_incountournable }}">
                                        <button name="forfait_conception" value="incontournable"
                                            class="btn btn-sm btn2 rounded font-weight-semibold">
                                            @if ($projet->forfait == 'incontournable')
                                                {!! lang('Continuer avec Incontournable') !!}
                                            @else
                                                {!! lang('Sélectionner Incontournable ') !!}
                                            @endif
                                            <i class="fa fa-chevron-right ml-3"></i>
                                        </button>
                                    </form>

                                    <ul class="list-unstyled mt-20">
                                        <li>
                                            {!! lang('1 architecte d’intérieur retenu pour le design final') !!}
                                        </li>
                                        <li>
                                            {!! lang('Révision des concepts') !!}
                                        </li>
                                        <li>
                                            {!! lang('1 design final :') !!} {!! lang('plan') !!} <i
                                                class="fa fa-info-circle tip" data-tip="tip-2"></i> +
                                            {!! lang('Visuels 3D') !!} <i class="fa fa-info-circle tip" data-tip="tip-2"></i>
                                            <div id="tip-2" class="tip-content hidden">
                                                <img src="{{ asset('img/pipcke-example-layout-floor.jpg') }}"
                                                    alt="">
                                            </div>
                                        </li>
                                        <li>
                                            {!! lang('1 Shopping List dans votre budget') !!}
                                        </li>
                                        <li>
                                            {!! lang('Conseiller shopping') !!}
                                        </li>
                                        <li>
                                            *
                                        </li>
                                        <li>
                                            {!! lang('Conseils d’installation et de réalisation du projet') !!}
                                        </li>
                                        <li>
                                            {!! lang('Rendu photoréaliste du design') !!}
                                            <i class="fa fa-info-circle tip" data-tip="tip-7"></i>
                                            <div id="tip-7" class="tip-content hidden">
                                                <img src="{{ asset('img/pipcke-design-concept-layout-visual-3D.jpg') }}"
                                                    alt="">
                                            </div>
                                        </li>
                                        <li>
                                            {!! lang('1 révision du design final') !!}
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 fantastique">
                            <div class=" pricing-item color-3">
                                <div class="pricing-divider ">
                                    <h3>{!! lang('Fantastique') !!}</h3>
                                    <h4>
                                        {{ $montant_fantastique }} €
                                        @if ($projet->forfait != 'fantastique')
                                            <span class="h6">{!! lang('prix forfait') !!}
                                                {{ \App\Models\Forfait::whereLibelle($prefix . 'Fantastique')->first()->montant }}
                                                €
                                            </span>
                                        @endif

                                    </h4>

                                </div>
                                <small>{!! lang('1 à 3 semaines de conception') !!}</small>
                                <div class="card-body">

                                    <form method="post"
                                        action="{{ route('client.espace_collaboration.lancer_conception.post', $projet->id) }}">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="montant" value="{{ $montant_fantastique }}">
                                        <button name="forfait_conception" value="fantastique"
                                            class="btn btn-sm btn2 rounded font-weight-semibold">
                                            @if ($projet->forfait == 'fantastique')
                                                {!! lang('Continuer avec Fantastique') !!}
                                            @else
                                                {!! lang('Sélectionner Fantastique ') !!}
                                            @endif
                                            <i class="fa fa-chevron-right ml-3"></i>
                                        </button>
                                    </form>

                                    <ul class="list-unstyled mt-20">

                                        <li>
                                            {!! lang('1 architecte d’intérieur retenu pour le design final') !!}
                                        </li>
                                        <li>
                                            {!! lang('Révision des concepts') !!}
                                        </li>
                                        <li>
                                            {!! lang('1 design final :') !!} {!! lang('plan') !!} <i
                                                class="fa fa-info-circle tip" data-tip="tip-2"></i> +
                                            {!! lang('Visuels 3D') !!} <i class="fa fa-info-circle tip" data-tip="tip-2"></i>
                                        </li>
                                        <li>
                                            {!! lang('1 Shopping List dans votre budget') !!}
                                        </li>
                                        <li>
                                            {!! lang('Conseiller shopping') !!}
                                        </li>
                                        <li>
                                            *
                                        </li>
                                        <li>
                                            {!! lang('Conseils d’installation et de réalisation du projet') !!}
                                        </li>
                                        <li>
                                            {!! lang('Rendu photoréaliste du design') !!}
                                            <i class="fa fa-info-circle tip" data-tip="tip-7"></i>
                                            <div id="tip-7" class="tip-content hidden">
                                                <img src="{{ asset('img/pipcke-design-concept-layout-visual-3D.jpg') }}"
                                                    alt="">
                                            </div>
                                        </li>
                                        <li>
                                            {!! lang('Révisions <b>illimitées</b> du design final') !!}
                                        </li>
                                        <li>
                                            *
                                        </li>
                                        <li>
                                            {!! lang('1 entretien téléphonique avec l’architecte d’intérieur retenu') !!}
                                        </li>
                                    </ul>

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

            </div>

        </section>

        <section class="bg-white hide-mobile">
            <div class="container pt-80 pb-50">

                <div class="row">

                    <div class="col-md-6">

                        <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>

                    <div class="col-md-6">
                        <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 faire 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>
            </div>
        </section>

        <div class="container bg-white 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 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>
    @else
        <section class="pt-40 bg-white">
            <div class="row">

                <div class="col col-md-push-3 w-75">
                    @if (!count($projet->conceptions->where('is_draft', 0)))
                        <div class="text-center container">
                            <p><b>Bonne nouvelle ! <br> Votre designer travaille maintenant sur la conception de votre
                                    espace et vous fera un retour dans les prochains jours.</b></p>
                        </div>
                    @endif
                    <div class="fluid-container">
                        <div class="text-center p-4">
                            <p class="font-size-16">Toute la communauté Pipcke vous remercie pour votre confiance, et
                                travaille d’arrache plan pour vous fournir le meilleur du design. <br>Vous avez apprécié nos
                                services ? Prolongez l’aventure en offrant à vos proches une carte cadeau pour réaliser
                                l’intérieur de leurs rêves.</p>
                            <p class="font-size-16">Nos cartes cadeaux peuvent servir pour l’achat d’un ou de plusieurs
                                forfaits Pipcke, l’achat de mobilier et produits sur notre site, ou bien les
                                deux.</p>
                            <b class="font-size-16 text-marron">Faites plaisir à ceux que vous aimez en leur offrant
                                l’expérience Pipcke !</b>
                        </div>
                    </div>

                    @include('partials.form_offrir_pipcke')
                </div>
                <div id="chat-container" class="col-md-3 col-md-pull-8">
                    <div class="internal-chat-esquisse" style="top:125px;max-width: 23%;">
                        <section class="internal-chat-area">
                            <header>
                                @if ($migrated && $projet->forfait != 'fantastique')
                                    <img src="{{ asset($projet->designers[0]->designer->photo ?? $projet->designers[0]->designer->picture) }}"
                                        alt="">
                                    <div class="details" style="display:flex; flex-direction:column">
                                        <span>{{ $projet->designers[0]->designer->username }} </span>
                                        <small
                                            class="time">{{ (new \Carbon\Carbon($projet->designers[0]->designer->updated_at))->diffForHumans() }}</small>
                                    </div>
                                    <div
                                        class="status-dot {{ (new \Carbon\Carbon())->diffInMinutes(new \Carbon\Carbon($projet->designers[0]->designer->updated_at)) == 0 ? '' : 'offline' }}">
                                        <i class="fa fa-circle"></i>
                                    </div>
                                @else
                                    <img src="{{ asset($projet->designer_retenue->designer->photo ?? $projet->designer_retenue->designer->picture) }}"
                                        alt="">
                                    <div class="details" style="display:flex; flex-direction:column">
                                        <span>{{ $projet->designer_retenue->designer->username }} </span>
                                        <small
                                            class="time">{{ (new \Carbon\Carbon($projet->designer_retenue->designer->updated_at))->diffForHumans() }}</small>
                                    </div>
                                    <div
                                        class="status-dot {{ (new \Carbon\Carbon())->diffInMinutes(new \Carbon\Carbon($projet->designer_retenue->designer->updated_at)) == 0 ? '' : 'offline' }}">
                                        <i class="fa fa-circle"></i>
                                    </div>
                                @endif
                            </header>
                            <div class="chat-box scroll-chat_lancer_conception_cli" style="height: 50vh;">
                                @foreach ($chatRoom->messages as $message)
                                    @include('front.components.chat_message_update')
                                @endforeach
                            </div>
                            <div class="typing-area-container">
                                @php
                                    $senderId = auth()->id();
                                    $receiverId = $receiver->id ?? '-1';
                                    $projetId = $chatRoom->projet_id;
                                @endphp
                                <form class="typing-area" name="chat-component-update_lancer_conception_cli"
                                    id="chat-component-update_lancer_conception_cli" method="post"
                                    action="{{ route('chat.send-message', ['sender_id' => $senderId, 'receiver_id' => $receiverId, 'projetId' => $projetId]) }}">
                                    {{ csrf_field() }}
                                    <div class="smileys smileys-chat-update smiley_lancer_conception_cli">
                                        <label class="smiley_update_lancer_conception_cli smiley-update-1"
                                            style="opacity: 1;" data-value=":rougir:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-2"
                                            style="opacity: 1;" data-value=":pleurer:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-3"
                                            style="opacity: 1;" data-value=":demon:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-4"
                                            style="opacity: 1;" data-value=":ange:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-5"
                                            style="opacity: 1;" data-value=":coeur:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-19"
                                            style="opacity: 1;" data-value=":like:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-6"
                                            style="opacity: 1;" data-value=":sourire:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-7"
                                            style="opacity: 1;" data-value=":triste:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-8"
                                            style="opacity: 1;" data-value=":surpris:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-9"
                                            style="opacity: 1;" data-value=":rire:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-18"
                                            style="opacity: 1;" data-value=":clin-d-oeil:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-11"
                                            style="opacity: 1;" data-value=":choqué:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-12"
                                            style="opacity: 1;" data-value=":sourire-lunettes:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-13"
                                            style="opacity: 1;" data-value=":yeux:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-14"
                                            style="opacity: 1;" data-value=":lunettes:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-15"
                                            style="opacity: 1;" data-value=":langue:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-16"
                                            style="opacity: 1;" data-value=":incertain:"></label>
                                        <label class="smiley_update_lancer_conception_cli smiley-update-17"
                                            style="opacity: 1;" data-value=":vexé:"></label>
                                    </div>
                                    <div style="display: flex;justify-content: center;">
                                        <textarea name="message_lancer_conception_cli" id="message_content_lancer_conception_cli"
                                            placeholder="Entrez votre message..." class="form-control"></textarea>
                                        <div class=""
                                            style="display:inline-block;width: 50px;padding: 5px 0 0 5px;">
                                            <label id="attachedLabel_lancer_conception_cli"
                                                for="attachedFile_lancer_conception_cli" title="Envoyer un fichier">
                                                <i class="fa fa-upload" aria-hidden="true"></i>
                                            </label>
                                            <button id="submitChat_lancer_conception_cli" style="display: none;"><i
                                                    class="fa fa-send" aria-hidden="true"
                                                    title="Envoyer message"></i></button>
                                            <i class="fa fa-smile-o typing_area_label_lancer_conception_cli"
                                                aria-hidden="true" title="Insérer un emoji"></i>
                                            <input type="file" name="attachedFile_lancer_conception_cli"
                                                id="attachedFile_lancer_conception_cli" class="form-control hidden"
                                                accept="image/*, application/pdf, video/mp4,video/x-m4v,video/*" />
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </section>
                    </div>
                </div>
            </div>

        </section>
    @endif
@endsection

@section('style')
    <style>
        .offres .col-md-4 {
            opacity: 1 !important
        }
    </style>
@endsection
@section('script')
    <script src="https://js.pusher.com/7.2/pusher.min.js"></script>
    {!! NoCaptcha::renderJs() !!}
    <script type="text/javascript">
        $(document).ready(function() {
            var payment = {!! json_encode($projet->payment) !!};
            var type = {!! json_encode($projet->type) !!};
            var forfait_projet = {!! json_encode($projet->forfait) !!};

            var referrer = document.referrer;
            // console.log("referrer : ", referrer);
            if (referrer.indexOf("mercanet") >= 0) {
                @if (isset($achat))
                    window.dataLayer = window.dataLayer || [];
                    dataLayer.push({
                        ecommerce: null
                    });
                    dataLayer.push({
                        'event': 'purchase',
                        'ecommerce': {
                            'transaction_id': "{{ $achat->reference }}",
                            'value': "{{ $achat->montant_total }}",
                            'affiliation': 'Pipcke-store',
                            'currency': 'EUR',
                            "items": [
                                @foreach ($achat->lignes as $key => $ligne)
                                    {
                                        @if ($achat->type == 'forfait' || $achat->type == 'conception')
                                            "item_name": "{{ $ligne->description }}" + " - P-" +
                                                {{ $achat->projet_id }},
                                        @elseif ($achat->type == 'group')
                                            "item_name": "{{ $ligne->description }}" + " - G-" +
                                            {{ $achat->group_id }},
                                        @else
                                            "item_name": "{{ $ligne->description }}",
                                        @endif

                                        "item_id": "{{ $ligne->id }}",
                                        @if ($achat->type == 'forfait' || $achat->type == 'conception')
                                            @if ($achat->projet->type == 'studio')
                                                "item_category": "Forfait studio",
                                            @elseif ($achat->projet->type == 'pro')
                                                "item_category": "Fofait pro",
                                            @else
                                                "item_category": "Fofait maison",
                                            @endif
                                        @elseif ($achat->type == 'commande')
                                            "item_category": "Marchandise",
                                        @elseif ($achat->type == 'bricorama')
                                            "item_category": "Bricorama",
                                        @elseif ($achat->type == 'card')
                                            "item_category": "Carte",
                                        @elseif ($achat->type == 'group')
                                            "item_category": "Group",
                                        @endif
                                        "price": {{ $ligne->prix_unitaire }},
                                        "quantity": {{ $ligne->quantite }},
                                        "shipping": {{ $ligne->frais_livraison ?? 0 }},
                                        'currency': "EUR"
                                    },
                                @endforeach
                            ]
                        }
                    });
                @endif
                // console.log("dataLayer push");
            }
            scrollChatContentBox = function(element) {
                var scroll = $(element[0]);
                scroll.animate({
                    scrollTop: scroll.prop("scrollHeight")
                }, 250);
            }

            var projectURL = window.location.href.split("/");
            var projectID = projectURL[projectURL.length - 2]

            var pusher = new Pusher('1f75887b4f7685a2d4a0', {
                cluster: 'eu'
            });

            var channel = pusher.subscribe('chat' + projectID);
            channel.bind('message', function(data) {
                var appendURL =
                    "{{ route('chat.append-message', ['projetId' => ':p_id', 'message_id' => ':m_id']) }}";
                appendURL = appendURL.replace(':p_id', data.projectId);
                appendURL = appendURL.replace(':m_id', data.messageId);
                $.ajax({
                        url: appendURL,
                        method: 'POST',
                        cache: false,
                        contentType: false,
                        processData: false,
                        beforeSend: function() {
                            $('.loader').fadeIn();
                        }
                    })
                    .success((data) => {
                        $('.scroll-chat_lancer_conception_cli').append(data);
                        scrollChatContentBox($('.scroll-chat_lancer_conception_cli'));
                        $('.loader').fadeOut();
                    })
                    .error(function(error) {
                        $('.loader').fadeOut();
                        console.log("error");
                    });
                return false;
            });
            if (payment != 1 || (forfait_projet != 'fantastique' && type == "maison")) {
                $('#conception_popup').modal('show');
            }
        });
    </script>
@endsection