@extends('layouts.espace_collaboration')
@section('meta-title', 'Découvrez votre conception')
@section('meta-keywords', '')
@section('meta-description', '')
@section('sub-menu')
    @include('front.espace_collaboration.menu')
@endsection
@section('content')
    @include('partials.shopping_popup')
    <div class="container-fluid">
        <div class="panel-steps mt-20 mb-20">
            <div class="row">
                <div class="col">

                </div>
                <div class="col-auto">
                    @php
                        switch ($projet->forfait_conception) {
                            case 'essentiel':
                                $nb = 1;
                                break;
                            case 'incontournable':
                                $nb = 2;
                                break;
                            case 'fantastique':
                                $nb = 3;
                                break;
                        }
                    @endphp

                    @if ($nb == 1)
                        <ul class="steps row forfait1">
                            <li class="col-auto disabled"> <span> 1 </span> </li>
                            <li class="col-auto disabled"> <span> 2 </span> </li>
                            <li class="col-auto disabled"> <span> 3 </span> </li>

                            <li class="col-auto disabled"> <span class="small"> <i class="fa fa-plus-circle"></i> </span>
                            </li>

                            <li class="col-auto active"><span class="active">{!! lang('Finale') !!}</span></li>
                        </ul>
                    @endif

                    @if ($nb == 2)
                        <ul class="steps row forfait2">
                            @if (count($projet->conceptions) >= 1)
                                <li class="col-auto {{ count($projet->conceptions) == 1 ? 'active' : '' }}" data-target="1">
                                    <span> 1 </span>
                                </li>
                                <li class="col-auto disabled"> <span> 2 </span> </li>
                                <li class="col-auto disabled"> <span> 3 </span> </li>
                                <li class="col-auto disabled"> <span class="small"> <i class="fa fa-plus-circle"></i>
                                    </span> </li>
                            @endif
                            @if (count($projet->conceptions) == 2)
                                <li class="col-auto {{ count($projet->conceptions) == 2 ? 'active' : '' }}" data-target="2">
                                    <span>{!! lang('Finale') !!}</span>
                                </li>
                            @else
                                <li class="col-auto disabled"><span>{!! lang('Finale') !!}</span></li>
                            @endif
                        </ul>
                    @endif

                    @if ($nb == 3)
                        <ul class="steps row forfait3">
                            @for ($i = 0; $i < count($projet->conceptions); $i++)
                                <li class="col-auto {{ $i == count($projet->conceptions) - 1 ? 'active' : '' }}"
                                    data-target="{{ $i + 1 }}">
                                    <span class="active">
                                        @if ($projet->conceptions[$i]->is_final == 0)
                                            {{ $i + 1 }}
                                        @else
                                            {!! lang('Finale') !!}
                                        @endif
                                    </span>
                                </li>
                            @endfor
                            @if (isset($projet->conceptions[$i - 1]) && $projet->conceptions[$i - 1]->is_final == 0)
                                @if (count($projet->conceptions) < 2)
                                    <li class="col-auto disabled"> <span> 2 </span> </li>
                                @endif
                                @if (count($projet->conceptions) < 3)
                                    <li class="col-auto disabled"> <span> 3 </span> </li>
                                @endif

                                <li class="col-auto disabled"> <span class="small"> <i class="fa fa-plus-circle"></i>
                                    </span> </li>

                                <li class="col-auto disabled"><span>{!! lang('Finale') !!}</span></li>
                            @endif
                        </ul>
                    @endif

                </div>
                <div class="col"></div>
            </div>
        </div>

        <div class="row">

            <div class="col col-lg-push-3 mr-lg-3 col-md-push-0 mr-md-0">

                @foreach ($projet->conceptions as $key => $conception)
                    <div class="row {{ $key != count($projet->conceptions) - 1 ? 'hidden' : '' }} proposition"
                        data-tab="{{ $key + 1 }}">

                        <div class="col-lg-8 col-md-12 taggd_box">
                            @if ($conception->plan)
                                <div class="panel">
                                    <div class="text-center">

                                        @if ($key + 1 == count($projet->conceptions) && $conception->is_final == 0)
                                            <img class="img-fluid lazy-image img_plan taggable"
                                                id="img_1_{{ $conception->id }}" data-conception="{{ $conception->id }}"
                                                data-src="{{ asset($conception->plan) }}" alt="">
                                        @else
                                            <img class="img-fluid lazy-image img_plan disabled_taggd"
                                                id="img_1_{{ $conception->id }}" data-conception="{{ $conception->id }}"
                                                data-src="{{ asset($conception->plan) }}" alt="">
                                        @endif
                                    </div>
                                </div>
                            @endif

                            @if ($conception->visuel)
                                <div class="panel pb-0">
                                    <div class="text-center pb-4">

                                        @if ($key + 1 == count($projet->conceptions) && $conception->is_final == 0)
                                            <img class="img-fluid lazy-image img_visuel taggable"
                                                id="img_2_{{ $conception->id }}" data-conception="{{ $conception->id }}"
                                                data-src="{{ asset($conception->visuel) }}" alt="">
                                        @else
                                            <img class="img-fluid lazy-image img_visuel disabled_taggd"
                                                id="img_2_{{ $conception->id }}" data-conception="{{ $conception->id }}"
                                                data-src="{{ asset($conception->visuel) }}" alt="">
                                        @endif
                                    </div>
                                </div>
                            @endif
                            <div @if ($conception->is_final) id="divScroll" @endif></div>
                            @foreach ($conception->livrables ?? [] as $k => $url)
                                <div class="panel">
                                    <div class="text-center mb-4">
                                        @if ($key + 1 == count($projet->conceptions) && $conception->is_final == 0)
                                            <img class="img-fluid lazy-image img_livrable taggable"
                                                id="img_{{ $k + 3 }}_{{ $conception->id }}"
                                                data-conception="{{ $conception->id }}" data-src="{{ asset($url) }}"
                                                data-key="{{ $k }}" alt="">
                                        @else
                                            <img class="img-fluid lazy-image img_livrable disabled_taggd"
                                                id="img_{{ $k + 3 }}_{{ $conception->id }}"
                                                data-conception="{{ $conception->id }}" data-src="{{ asset($url) }}"
                                                data-key="{{ $k }}" alt="">
                                        @endif
                                    </div>
                                </div>
                            @endforeach

                            <div class="sticky-header-end-point"></div>

                        </div>

                        <div class="col-lg-4 col-md-12" style="width: 450px;">
                            <div class="commentaires-width" style="width: 100%"></div>

                            @if (
                                $conception->is_final == 1 ||
                                    $projet->forfait_conception == 'essentiel' ||
                                    ($projet->forfait_conception == 'incontournable' && $key + 1 == 2))
                                <div class="panel pr-5" id="commentaires">
                                    <div class="font-size-16 m-0">{!! lang('Mes produits') !!}</div>
                                    <hr>
                                    <div class="bg-light font-size-12 p-3  border-radius-10 mb-3">
                                        <p>Consultez dès maintenant le mobilier ainsi que les matériaux et objets décoratifs
                                            sélectionnés par
                                            {{ $conception->designer->prenom }} pour sublimer votre espace.</p>
                                        <p class="m-0">N’hésitez pas à en parler avec
                                            {{ $conception->designer->prenom }} qui pourra vous proposer de nouveaux
                                            produits en fonction de vos besoins, votre style et votre budget.</p>
                                    </div>
                                    <a href="{{ route('client.espace_collaboration.shopping', $projet->id) }}"
                                        class="btn btn2 btn-formulaire">{{ lang('Découvrir mes produits') }}</a>
                                </div>
                            @else
                                <div class="panel" id="commentaires">
                                    <div class="font-size-16 m-0">{!! lang('Mes commentaires') !!}</div>
                                    <hr class="mb-1">
                                    @include('front.components.commentaires', [
                                        'commentaires' => $conception->commentaires ?? [],
                                        'conception_id' => $conception->id,
                                    ])
                                </div>
                            @endif
                        </div>

                        <div class="col-lg-8 col-md-12">

                            <div class="panel">
                                <div class="text-center font-size-16">
                                    {!! lang('Dites-nous ce que vous pensez de cette proposition ?') !!}
                                </div>
                                <div class="row bloc-jaime">
                                    @if ($key + 1 < $nb || $projet->forfait_conception == 'fantastique')
                                        <div class="col-md-6">
                                            <div class="panel mb-0">
                                                <form method="post" class="jaime"
                                                    action="{{ route('client.espace_collaboration.conception.post', $projet->id) }}">
                                                    <input type="hidden" name="projet_designer_conception_id"
                                                        value="{{ $conception->id }}">
                                                    {{ csrf_field() }}
                                                    <div class="text-center font-size-14 mb-3">{!! lang("J'aime") !!}
                                                    </div>
                                                    <input type="hidden" name="ajax" value="1">
                                                    <textarea
                                                        {{ $key + 1 < count($projet->conceptions) || $conception->jaime || $conception->is_confirmed || $conception->is_final ? 'readonly' : '' }}
                                                        name="jaime" placeholder="La disposition du mobilier, le choix des couleurs ..."
                                                        class="form-control font-size-12 bg-white" rows="5">{{ $conception->jaime }}</textarea>
                                                    @if ($conception->is_final == 0 && $key + 1 == count($projet->conceptions) && !$conception->is_confirmed)
                                                        <div class="text-center mt-4">
                                                            <div class="btn show-disabled"><i class="fa fa-pencil"></i>
                                                            </div>
                                                            <button class="btn hide-disabled">
                                                                <i class="fa fa-save"></i>
                                                            </button>
                                                        </div>
                                                    @endif
                                                </form>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="panel mb-0">
                                                <form method="post" class="jaime_peu_moins"
                                                    action="{{ route('client.espace_collaboration.conception.post', $projet->id) }}">
                                                    <input type="hidden" name="projet_designer_conception_id"
                                                        value="{{ $conception->id }}">
                                                    {{ csrf_field() }}
                                                    <div class="text-center font-size-14 mb-3">{!! lang("J'aime un peu moins") !!}
                                                    </div>
                                                    <input type="hidden" name="ajax" value="1">
                                                    <textarea
                                                        {{ $key + 1 < count($projet->conceptions) || $conception->jaime_peu_moins || $conception->is_confirmed || $conception->is_final ? 'readonly' : '' }}
                                                        name="jaime_peu_moins" placeholder="La disposition du mobilier, le choix des couleurs ..."
                                                        class="form-control font-size-12 bg-white" rows="5">{{ $conception->jaime_peu_moins }}</textarea>
                                                    @if ($conception->is_final == 0 && $key + 1 == count($projet->conceptions) && !$conception->is_confirmed)
                                                        <div class="text-center mt-4">
                                                            <div class="btn show-disabled"><i class="fa fa-pencil"></i>
                                                            </div>
                                                            <button class="btn hide-disabled">
                                                                <i class="fa fa-save"></i>
                                                            </button>
                                                        </div>
                                                    @endif
                                                </form>
                                            </div>
                                        </div>

                                        @if ($conception->is_final == 0)
                                            <div class="col-md-12">
                                                <div class="text-center">
                                                    <form method="post"
                                                        action="{{ route('client.espace_collaboration.conception.post', $projet->id) }}">
                                                        <input type="hidden" name="projet_designer_conception_id"
                                                            value="{{ $conception->id }}">
                                                        {{ csrf_field() }}
                                                        <input type="hidden" name="ajax" value="1">
                                                        <div class="smileys">
                                                            <label
                                                                class="smiley {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} smiley-1 {{ $conception->smiley == '1' ? 'active' : '' }}"
                                                                data-value="1"></label>
                                                            <label
                                                                class="smiley {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} smiley-2 {{ $conception->smiley == '2' ? 'active' : '' }}"
                                                                data-value="2"></label>
                                                            <label
                                                                class="smiley {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} smiley-3 {{ $conception->smiley == '3' ? 'active' : '' }}"
                                                                data-value="3"></label>
                                                            <label
                                                                class="smiley {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} smiley-4 {{ $conception->smiley == '4' ? 'active' : '' }}"
                                                                data-value="4"></label>
                                                            <label
                                                                class="smiley {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} smiley-5 {{ $conception->smiley == '5' ? 'active' : '' }}"
                                                                data-value="5"></label>
                                                            <input type="text" name="smiley" class="d-none"
                                                                value="{{ $conception->smiley ?? -1 }}">
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                    @if (
                                        $conception->is_final == 1 ||
                                            $projet->forfait_conception == 'essentiel' ||
                                            ($projet->forfait_conception == 'incontournable' && $key + 1 == 2))
                                        <div class="col-md-12">
                                            <div class="text-center mt-3">
                                                <form method="post"
                                                    action="{{ route('client.espace_collaboration.conception.post', $projet->id) }}">
                                                    <input type="hidden" name="projet_designer_conception_id"
                                                        value="{{ $conception->id }}">
                                                    {{ csrf_field() }}
                                                    <input type="hidden" name="ajax" value="1">
                                                    <div class="smileys">
                                                        <label
                                                            class="smiley star {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} star-1 {{ $conception->smiley >= '1' ? 'active' : '' }}"
                                                            data-value="1"></label>
                                                        <label
                                                            class="smiley star {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} star-2 {{ $conception->smiley >= '2' ? 'active' : '' }}"
                                                            data-value="2"></label>
                                                        <label
                                                            class="smiley star {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} star-3 {{ $conception->smiley >= '3' ? 'active' : '' }}"
                                                            data-value="3"></label>
                                                        <label
                                                            class="smiley star {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} star-4 {{ $conception->smiley >= '4' ? 'active' : '' }}"
                                                            data-value="4"></label>
                                                        <label
                                                            class="smiley star {{ $key + 1 == count($projet->conceptions) && !$conception->is_confirmed ? 'enable' : '' }} star-5 {{ $conception->smiley >= '5' ? 'active' : '' }}"
                                                            data-value="5"></label>
                                                        <input type="text" name="smiley" class="d-none"
                                                            value="{{ $conception->smiley ?? -1 }}">
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            @if (
                                $conception->is_final == 1 ||
                                    $projet->forfait_conception == 'essentiel' ||
                                    ($projet->forfait_conception == 'incontournable' && $key + 1 == 2))
                                <div class="panel">
                                    <div class="text-center">
                                        <b>Félicitations ! votre conception finale est prête.</b> <br><br>
                                        <p>Commandez vos produits ou faites appel à notre conseiller shopping pour
                                            concrétiser votre projet et profiter pleinement de votre nouvel espace.</p>
                                        <a href="{{ route('client.espace_collaboration.shopping', $projet->id) }}"
                                            class="btn btn3 btn-formulaire">Faire une demande de devis</a>
                                    </div>
                                </div>
                            @elseif($key + 1 == count($projet->conceptions) && !$conception->is_confirmed)
                                <div class="panel text-center mb-4">
                                    <form method="POST"
                                        action="{{ route('client.espace_collaboration.conception.post', $projet->id) }}"
                                        class="send-commentaires">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="projet_designer_conception_id"
                                            value="{{ $conception->id }}">
                                        <input type="hidden" name="send" value="1">
                                        <input type="hidden" name="ajax" value="1">
                                        <button class="btn btn-sm btn2 btn-action" name="send" value="1"
                                            data-message="<p class='font-size-16'>Merci pour vos commentaires ! <br><br>
														Votre designer va en prendre connaissance et revenir vers vous avec une conception révisée. <br><br>
														Vous pouvez en attendant consulter votre Shopping List et noter vos produits. </p>
														<a class='swal2-confirm swal2-styled d-inline-block mt-3 font-size-16' href='{{ route('client.espace_collaboration.shopping', $projet->id) }}'>Découvrir mes produits</a>">
                                            {!! lang('Envoyer mes commentaires') !!}
                                        </button>
                                    </form>
                                </div>
                            @endif

                            @if ($conception->is_final == 0)
                                <div class="panel">
                                    <div class="text-center">
                                        <b>Liste des produits</b> <br><br>
                                        <p class="m-0">Vous trouverez l’ensemble des produits sélectionnés par
                                            {{ $conception->designer->prenom }} dans votre Shopping List.</p>
                                        <p>N’hésitez pas à les évaluer et à en discuter directement
                                            avec votre designer. Il pourra vous proposer de nouveaux produits en fonction de
                                            vos besoins.</p>
                                        <a href="{{ route('client.espace_collaboration.shopping', $projet->id) }}"
                                            class="btn btn3 btn-formulaire">Découvrir mes produits</a>
                                    </div>
                                </div>
                            @endif
                        </div>

                    </div>
                @endforeach
            </div>
            <div id="chat-container" class="col-md-10 col-md-pull-0 col-lg-3 col-lg-pull-9 m-auto">
                <div class="internal-chat-esquisse" style="top:125px;max-width: 23%;">
                    <section class="internal-chat-area">
                        <header>
                            <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>
                        </header>
                        <div class="chat-box scroll-chat_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_conception_cli"
                                id="chat-component-update_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_conception_cli">
                                    <label class="smiley_update_conception_cli smiley-update-1" style="opacity: 1;"
                                        data-value=":rougir:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-2" style="opacity: 1;"
                                        data-value=":pleurer:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-3" style="opacity: 1;"
                                        data-value=":demon:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-4" style="opacity: 1;"
                                        data-value=":ange:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-5" style="opacity: 1;"
                                        data-value=":coeur:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-19" style="opacity: 1;"
                                        data-value=":like:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-6" style="opacity: 1;"
                                        data-value=":sourire:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-7" style="opacity: 1;"
                                        data-value=":triste:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-8" style="opacity: 1;"
                                        data-value=":surpris:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-9" style="opacity: 1;"
                                        data-value=":rire:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-18" style="opacity: 1;"
                                        data-value=":clin-d-oeil:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-11" style="opacity: 1;"
                                        data-value=":choqué:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-12" style="opacity: 1;"
                                        data-value=":sourire-lunettes:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-13" style="opacity: 1;"
                                        data-value=":yeux:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-14" style="opacity: 1;"
                                        data-value=":lunettes:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-15" style="opacity: 1;"
                                        data-value=":langue:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-16" style="opacity: 1;"
                                        data-value=":incertain:"></label>
                                    <label class="smiley_update_conception_cli smiley-update-17" style="opacity: 1;"
                                        data-value=":vexé:"></label>
                                </div>
                                <div style="display: flex;justify-content: center;">
                                    <textarea name="message_conception_cli" id="message_content_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_conception_cli" for="attachedFile_conception_cli"
                                            title="Envoyer un fichier">
                                            <i class="fa fa-upload" aria-hidden="true"></i>
                                        </label>
                                        <button id="submitChat_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_conception_cli" aria-hidden="true"
                                            title="Insérer un emoji"></i>
                                        <input type="file" name="attachedFile_conception_cli"
                                            id="attachedFile_conception_cli" class="form-control hidden"
                                            accept="image/*, application/pdf, video/mp4,video/x-m4v,video/*" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modal-commentaire" data-backdrop="static" data-keyboard="false" role="dialog">
            <div class="modal-dialog" style="width: 400px; max-width: 95%; padding-top: 50px;"">
                <form class="modal-content border-radius-10" name="form-add-commentaire">
                    <div class="modal-body p-2">
                        <textarea required="" placeholder="Rajouter commentaire" class="form-control border-radius-10 font-size-12"
                            name="commentaire" rows="5"></textarea>
                    </div>
                    <div class="modal-footer pt-0 pb-2 no-borders">
                        <button data-dismiss="modal" class="mr-2 bg-transparent no-borders font-size-12">Annuler</button>
                        <button id="btnSaveCommentaire" class="font-size-12 bg-transparent no-borders pb-0"> Valider
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/taggd/4.0.0/taggd.css">
@endsection
@section('script')
    <script src="https://js.pusher.com/7.2/pusher.min.js"></script>
    <script src="{{ asset('js/taggd.js') }}"></script>
    <script>
        jQuery(document).ready(function($) {
            sessionStorage.setItem("modal_shpping", '0');
            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_conception_cli').append(data);
                        scrollChatContentBox($('.scroll-chat_conception_cli'));
                        $('.loader').fadeOut();
                    })
                    .error(function(error) {
                        $('.loader').fadeOut();
                        console.log("Error chat cli : ", error);
                    });
                return false;
            });

            $('.send-commentaires').submit(function(event) {
                event.preventDefault();
                Swal.fire({
                    html: $(this).find('button').data('message'),
                    showCancelButton: false,
                    showConfirmButton: false
                });
                $('.jaime:not(.disabled), .jaime_peu_moins:not(.disabled)').trigger('submit');
                $.ajax({
                    method: 'POST',
                    url: $(this).attr('action'),
                    data: $(this).serialize(),
                    success: () => {}
                })

            });

            $('.jaime, .jaime_peu_moins').submit(function(event) {
                event.preventDefault();
                $.ajax({
                        method: 'POST',
                        data: $(this).serialize(),
                        url: $(this).attr('action'),
                    })
                    .success((data) => {
                        $(this).addClass('disabled');
                    });

            });

            let addTag = function(left, top, img, message) {
                $('.modal').modal('hide');
                $('.loader').fadeIn();
                $.ajax({
                        url: '{{ route('client.espace_collaboration.conception.commentaire.post', $projet->id) }}',
                        type: 'POST',
                        data: {
                            left: left,
                            top: top,
                            projet_designer_conception_id: conception,
                            img: img,
                            message: message,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        }
                    })
                    .success(function() {
                        $.ajax({
                                url: '/api/conception/' + conception + '/commentaires',
                            })
                            .success(function(data) {
                                $('.commentaires').replaceWith(data);
                                setTimeout(function() {
                                    setTags();
                                }, 1000);
                            });
                    })
                    .error(function() {
                        console.log("error");
                    });
            }
            let showCommentaire = function(text) {
                $('.commentaire').removeClass('selected');
                $('[data-message="' + text + '"]').addClass('selected');
            }
            let left, top, img;
            var options = {
                show: 'click'
            };
            let _tag;

            function setTags() {
                $('.taggd__button').remove();
                $('.taggd').removeClass('taggd');
                var data = [];

                $('.commentaire').each(function(index, el) {

                    if ($(el).data('img')) {
                        let t_id = 'img_' + $(el).data('img') + '_' + $(el).data(
                            'projet_designer_conception_id');

                        if (!data[t_id]) {
                            data[t_id] = [];
                        }
                        data[t_id].push(
                            Taggd.Tag.createFromObject({
                                position: {
                                    x: $(el).data('x'),
                                    y: $(el).data('y')
                                },
                                text: $(el).find('p').text(),
                            })
                        );
                    }
                });

                $('.img_plan').each(function(index, el) {
                    var taggd = new Taggd(document.getElementById($(el).attr('id')), options, data[$(el)
                        .attr('id')]);
                    if (!$(el).hasClass('disabled_taggd')) {
                        taggd.enableEditorMode();
                        taggd.on('taggd.tag.add', (tags, tag) => {
                            left = parseFloat($(tag.wrapperElement).css('left')) / 100;
                            top = parseFloat($(tag.wrapperElement).css('top')) / 100;
                            img = 1;
                            _tag = tag;

                            conception = $(this).data('conception');

                            $('[name=commentaire]').val('');
                            $('#modal-commentaire').modal('show');
                        });
                    }
                    taggd.on('taggd.tag.show', (tags, tag) => {
                        showCommentaire(tag.text);
                        return false;
                    });
                    taggd.on('taggd.tag.hide', (tags, tag) => {
                        return false;
                    });
                });

                $('.img_visuel').each(function(index, el) {
                    var taggd = new Taggd(document.getElementById($(el).attr('id')), options, data[$(el)
                        .attr('id')]);
                    if (!$(el).hasClass('disabled_taggd')) {
                        taggd.enableEditorMode();
                        taggd.on('taggd.tag.add', (tags, tag) => {
                            left = parseFloat($(tag.wrapperElement).css('left')) / 100;
                            top = parseFloat($(tag.wrapperElement).css('top')) / 100;
                            img = 2;
                            _tag = tag;

                            conception = $(this).data('conception');

                            $('[name=commentaire]').val('');
                            $('#modal-commentaire').modal('show');
                        });
                    }
                    taggd.on('taggd.tag.show', (tags, tag) => {
                        showCommentaire(tag.text);
                        return false;
                    });
                    taggd.on('taggd.tag.hide', (tags, tag) => {
                        return false;
                    });
                });

                $('.img_livrable').each(function(index, el) {
                    var taggd = new Taggd(document.getElementById($(el).attr('id')), options, data[$(el)
                        .attr('id')]);
                    if (!$(el).hasClass('disabled_taggd')) {
                        taggd.enableEditorMode();
                        taggd.on('taggd.tag.add', (tags, tag) => {
                            left = parseFloat($(tag.wrapperElement).css('left')) / 100;
                            top = parseFloat($(tag.wrapperElement).css('top')) / 100;
                            img = $(el).data('key') + 3;
                            _tag = tag;

                            conception = $(this).data('conception');

                            $('[name=commentaire]').val('');
                            $('#modal-commentaire').modal('show');
                        });
                    }
                    taggd.on('taggd.tag.show', (tags, tag) => {
                        showCommentaire(tag.text);
                        return false;
                    });
                    taggd.on('taggd.tag.hide', (tags, tag) => {
                        return false;
                    });
                });


                $('.taggd_box').each(function(index, el) {
                    $(this).find('.taggd__button').each(function(i, el) {
                        $(this).html(i + 1);
                        $(this).attr('data-message', i + 1);
                    });
                });

                $('.loader').fadeOut();

            }
            var data = [];
            setTags();

            $(document).on('click', '.commentaire .supprimer', function(event) {
                event.preventDefault();
                event.stopPropagation();
                let commentaires = $(this).parents('.commentaires');

                $('.loader').fadeIn();
                $(this).parents('.commentaire').fadeOut().remove();

                $.ajax({
                        url: '/api/conception/commentaire/' + $(this).data('id'),
                        type: 'DELETE'
                    })
                    .success((data) => {
                        commentaires.html(data);
                        setTimeout(function() {
                            setTags();
                        }, 1000);
                    });

            });
            $('[name=form-add-commentaire]').submit(function(event) {
                event.preventDefault();
                addTag(left, top, img, $('[name=commentaire]').val());
                $('.modal').modal('hide');
            });

            $('#modal-commentaire').on('hidden.bs.modal', function() {
                $(_tag.wrapperElement).remove();
            })

            $(document).on('scroll', function(e) {
                if ($('#divScroll').length) {
                    if ($(window).scrollTop() >= $('#divScroll').offset().top + $('#divScroll')
                        .outerHeight() - window.innerHeight) {
                        var modal_shpping = sessionStorage.getItem("modal_shpping");
                        if (modal_shpping != '1') {
                            $('#shopping_popup').modal('show');
                        }
                    }
                }
            });
            $("#shopping_btn_modal").on('click', function() {
                sessionStorage.setItem("modal_shpping", '1');
            });

        });
    </script>
@endsection