@extends('layouts.espace_collaboration')
@section('meta-title', 'Découvrez vos esquisses')
@section('meta-keywords', '')
@section('meta-description', '')
@section('sub-menu')
    @include('front.espace_collaboration.menu')
@endsection
@section('content')
    @php
        $total = 3;
        $migrated = $projet->migrated && $projet->forfait != 'fantastique';
        if ($projet->migrated) {
            $total = 2;
        }
    @endphp
    <div class="container-fluid">
        <div class="row pt-40" id="designer-container">
            <div class="col-auto">
                @if ($projet->migrated)
                    <div style="width: 550px;"></div>
                @else
                    <div style="width: 370px;"></div>
                @endif
            </div>
            <div class="col">
                <div class="architectes row">
                    @for ($i = 0; $i < $total; $i++)
                        <div data-concept-target="{{ $i + 1 }}"
                            class="architecte col {{ $projet->nb_designers < $i + 1 ? 'disabled' : '' }} {{ $i == 0 ? 'active' : '' }} ">
                            <div class="row">
                                <div class="col">
                                    <div class="photo"
                                        style="background-image: url('{{ $projet->designers[$i]->designer->photo ?? '' }}')">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="concept">{{ $i + 1 }}<sup>{{ $i == 0 ? 'er' : 'ème' }}</sup>
                                        {!! lang('concept') !!}</div>
                                    <div class="prenom">{{ $projet->designers[$i]->designer->prenom ?? '' }}</div>
                                </div>
                            </div>
                        </div>
                    @endfor
                </div>
            </div>
            <div class="col-auto">
                @if ($projet->migrated)
                    <div style="width: 550px;"></div>
                @else
                    <div style="width: 370px;"></div>
                @endif
                @if ($projet->conception == 0 && $migrated)
                    @if ($projet->forfait != 'fantastique')
                        <form class="mt-30 mb-50" method="post"
                            action="{{ route('client.espace_collaboration.esquisse.designer.post', $projet->id) }}">
                            {{ csrf_field() }}

                            <div class="text-center">
                                <input type="hidden" name="projet_designer_id" value="{{ $projet->designers[0]->id }}">
                                <button class="btn btn-sm btn2">
                                    {!! lang('Lancer conception') !!}
                                </button>
                            </div>
                        </form>
                    @else
                        <form class="mt-30 mb-50 confirm-concept form-retenir" method="post"
                            data-confirm="{{ 1 }}"
                            action="{{ route('client.espace_collaboration.esquisse.designer.post', $projet->id) }}">
                            {{ csrf_field() }}
                            <div class="text-center">
                                <input type="hidden" id="projet_designer_1" name="projet_designer_id"
                                    value="{{ $projet->designers[0]->id }}">
                                <button class="btn btn2 btn-formulaire btn-xs"
                                    data-message="<div class='font-size-16'>Félicitations ! <br><br>Vous avez choisi de continuer la collaboration avec {{ $projet->designers[0]->designer->prenom }}. <br> 
                                            {{ $projet->designers[0]->designer->prenom }} aura accès à l'ensemble de vos concepts d'idées et commentaires, et se lancera dans la conception finale après votre confirmation. <br><br>
                                            {{ $projet->designers[1]->designer->prenom }} vous remercie et espère collaborer avec vous bientôt sur d'autres projets.
                                         </div>">
                                    {!! lang('Je retiens la proposition de') !!} {{ $projet->designers[0]->designer->prenom }}
                                </button>
                            </div>
                        </form>
                        <form class="mt-30 mb-50 confirm-concept form-retenir hidden" method="post"
                            data-confirm="{{ 2 }}"
                            action="{{ route('client.espace_collaboration.esquisse.designer.post', $projet->id) }}">
                            {{ csrf_field() }}
                            <div class="text-center">
                                <input type="hidden" id="projet_designer_2" name="projet_designer_id"
                                    value="{{ $projet->designers[1]->id }}">
                                <button class="btn btn2 btn-formulaire btn-xs"
                                    data-message="<div class='font-size-16'>Félicitations ! <br><br>Vous avez choisi de continuer la collaboration avec {{ $projet->designers[1]->designer->prenom }}. <br> 
                                            {{ $projet->designers[1]->designer->prenom }} aura accès à l'ensemble de vos concepts d'idées et commentaires, et se lancera dans la conception finale après votre confirmation. <br><br>
                                            {{ $projet->designers[0]->designer->prenom }} vous remercie et espère collaborer avec vous bientôt sur d'autres projets.
                                         </div>">
                                    {!! lang('Je retiens la proposition de') !!} {{ $projet->designers[1]->designer->prenom }}
                                </button>
                            </div>
                        </form>
                    @endif
                @endif
            </div>
        </div>
    </div>

    @foreach ($projet->designers as $key => $designer)
        <div class="concept {{ $key > 0 ? 'hidden' : '' }}" data-concept="{{ $key + 1 }}">
            @if (!$migrated)
                <div class="toggle-bloc no-puce"
                    style="background-image: url('{{ asset($designer->designer->photo ?? '') }}'); background-size: cover">
                </div>
            @endif
            <div class="row">
                @if (!$migrated)
                    <div class="chat col-md-3  col-md-push-9">
                        <div class="commentaires-width" style="width: 100%"></div>

                        <div class="panel" id="commentaires" style="max-height: 70vh; overflow: auto;">
                            <div class="font-size-16 m-0">{!! lang('Mes commentaires') !!}</div>
                            <hr class="mb-1">
                            @if ($designer->proposition && $designer->proposition->is_draft == 0)
                                @if ($projet->lancer_conception)
                                    @include('front.components.commentaires', [
                                        'commentaires' => $designer->proposition->commentaires ?? [],
                                        'proposition_id' => $designer->proposition->id,
                                        'no_buttons' => true,
                                    ])
                                @else
                                    @include('front.components.commentaires', [
                                        'commentaires' => $designer->proposition->commentaires ?? [],
                                        'proposition_id' => $designer->proposition->id,
                                    ])
                                @endif
                            @endif
                        </div>
                    </div>
                @endif

                <div class="col imgs_proposition {{ $migrated ? 'col-md-push-4 mr-md-4' : '' }}">

                    @if ($designer->proposition && $designer->proposition->is_draft == 0)
                        <label class="d-block mb-0" for="">{!! lang("Planche d'ambiance ") !!}
                            {{ $projet->type == 'studio' ? 'pièce' : '' }}</label>
                        <div class="panel" data-img="1"
                            data-projet_designer_proposition_id="{{ $designer->proposition->id }}">
                            <div class="text-center">
                                <img class="img-fluid img_ambiance {{ $projet->conception == 1 || $migrated ? 'disabled_taggd' : '' }}"
                                    id="img_1_{{ $designer->proposition->id }}"
                                    data-proposition="{{ $designer->proposition->id }}"
                                    src="{{ asset($designer->proposition->planche_ambiance) }}" alt="">
                            </div>
                        </div>
                        <label class="d-block mb-0" for="">{!! lang('Planche de mobilier ') !!}
                            {{ $projet->type == 'studio' ? 'pièce' : '' }}</label>
                        <div class="panel pb-0" data-img="2"
                            data-projet_designer_proposition_id="{{ $designer->proposition->id }}">
                            <div class="text-center pb-4">
                                <img class="img-fluid img_mobilier {{ $projet->conception == 1 || $migrated ? 'disabled_taggd' : '' }}"
                                    id="img_2_{{ $designer->proposition->id }}"
                                    data-proposition="{{ $designer->proposition->id }}"
                                    src="{{ asset($designer->proposition->planche_mobilier) }}" alt="">
                            </div>
                            <div class="sticky-header-end-point"></div>
                        </div>
                        @if ($projet->type == 'studio')
                            <label class="d-block mb-0" for="">{!! lang("Planche d'ambiance salle de bains") !!}</label>
                            <div class="panel" data-img="3"
                                data-projet_designer_proposition_id="{{ $designer->proposition->id }}">
                                <div class="text-center">
                                    <img class="img-fluid img_ambiance_2 {{ $projet->conception == 1 || $migrated ? 'disabled_taggd' : '' }}"
                                        id="img_3_{{ $designer->proposition->id }}"
                                        data-proposition="{{ $designer->proposition->id }}"
                                        src="{{ asset($designer->proposition->planche_ambiance_2) }}" alt="">
                                </div>
                            </div>
                            <label class="d-block mb-0" for="">{!! lang('Planche de mobilier salle de bains') !!}</label>
                            <div class="panel pb-0" data-img="4"
                                data-projet_designer_proposition_id="{{ $designer->proposition->id }}">
                                <div class="text-center pb-4">
                                    <img class="img-fluid img_mobilier_2 {{ $projet->conception == 1 || $migrated ? 'disabled_taggd' : '' }}"
                                        id="img_4_{{ $designer->proposition->id }}"
                                        data-proposition="{{ $designer->proposition->id }}"
                                        src="{{ asset($designer->proposition->planche_mobilier_2) }}" alt="">
                                </div>
                                <div class="sticky-header-end-point"></div>
                            </div>
                        @endif
                    @endif
                </div>

                <div class=" {{ $migrated ? 'col-md-4 col-md-pull-8' : 'col-md-3 col-md-pull-9' }}">
                    @if ($migrated)
                        <div class="internal-chat-esquisse" data-chat="{{ 1 }}"
                            style="top:285px;max-width: 30%;">
                            <section class="internal-chat-area">
                                <header>
                                    <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>
                                </header>
                                <div class="chat-box scroll-chat_conception_cli" style="height: 42vh;">
                                    @foreach ($chatRoom->messages as $message)
                                        @include('front.components.chat_message_update', [
                                            'designer_migrated' => $projet->designers[0]->designer,
                                        ])
                                    @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>
                        @if ($projet->forfait == 'fantastique')
                            <div class="internal-chat-esquisse hidden" data-chat="{{ 2 }}"
                                style="top:285px;max-width: 30%;">
                                <section class="internal-chat-area">
                                    <header>
                                        <img src="{{ asset($projet->designers[1]->designer->photo ?? $projet->designers[1]->designer->picture) }}"
                                            alt="">
                                        <div class="details" style="display:flex; flex-direction:column">
                                            <span>{{ $projet->designers[1]->designer->username }} </span>
                                            <small
                                                class="time">{{ (new \Carbon\Carbon($projet->designers[1]->designer->updated_at))->diffForHumans() }}</small>
                                        </div>
                                        <div
                                            class="status-dot {{ (new \Carbon\Carbon())->diffInMinutes(new \Carbon\Carbon($projet->designers[1]->designer->updated_at)) == 0 ? '' : 'offline' }}">
                                            <i class="fa fa-circle"></i>
                                        </div>
                                    </header>
                                    <div class="chat-box scroll-chat_migrated_cli" style="height: 42vh;">
                                        @foreach ($chatRoom_sec->messages as $message)
                                            @include('front.components.chat_message_update', [
                                                'designer_migrated' => $projet->designers[1]->designer,
                                            ])
                                        @endforeach
                                    </div>
                                    <div class="typing-area-container">
                                        @php
                                            $senderId = auth()->id();
                                            $receiverId = $receiver_sec->id ?? '-1';
                                            $projetId = $chatRoom_sec->projet_id;
                                        @endphp
                                        <form class="typing-area" name="chat-component-update_migrated_cli"
                                            id="chat-component-update_migrated_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_migrated_cli">
                                                <label class="smiley_update_migrated_cli smiley-update-1"
                                                    style="opacity: 1;" data-value=":rougir:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-2"
                                                    style="opacity: 1;" data-value=":pleurer:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-3"
                                                    style="opacity: 1;" data-value=":demon:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-4"
                                                    style="opacity: 1;" data-value=":ange:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-5"
                                                    style="opacity: 1;" data-value=":coeur:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-19"
                                                    style="opacity: 1;" data-value=":like:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-6"
                                                    style="opacity: 1;" data-value=":sourire:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-7"
                                                    style="opacity: 1;" data-value=":triste:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-8"
                                                    style="opacity: 1;" data-value=":surpris:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-9"
                                                    style="opacity: 1;" data-value=":rire:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-18"
                                                    style="opacity: 1;" data-value=":clin-d-oeil:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-11"
                                                    style="opacity: 1;" data-value=":choqué:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-12"
                                                    style="opacity: 1;" data-value=":sourire-lunettes:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-13"
                                                    style="opacity: 1;" data-value=":yeux:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-14"
                                                    style="opacity: 1;" data-value=":lunettes:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-15"
                                                    style="opacity: 1;" data-value=":langue:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-16"
                                                    style="opacity: 1;" data-value=":incertain:"></label>
                                                <label class="smiley_update_migrated_cli smiley-update-17"
                                                    style="opacity: 1;" data-value=":vexé:"></label>
                                            </div>
                                            <div style="display: flex;justify-content: center;">
                                                <textarea name="message_migrated_cli" id="message_content_migrated_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_migrated_cli" for="attachedFile_migrated_cli"
                                                        title="Envoyer un fichier">
                                                        <i class="fa fa-upload" aria-hidden="true"></i>
                                                    </label>
                                                    <button id="submitChat_migrated_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_migrated_cli"
                                                        aria-hidden="true" title="Insérer un emoji"></i>
                                                    <input type="file" name="attachedFile_migrated_cli"
                                                        id="attachedFile_migrated_cli" class="form-control hidden"
                                                        accept="image/*, application/pdf, video/mp4,video/x-m4v,video/*" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </section>
                            </div>
                        @endif
                    @else
                        <div class="panel" id="chat-panel" style="max-height: 70vh; overflow: auto;">
                            <div class="font-size-16 m-0">{!! lang('Notes de ') !!} {{ $designer->designer->prenom }}
                            </div>
                            <hr>
                            <div class="font-size-12">
                                {!! $designer->proposition->note ?? '' !!}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            <div class="row ">
                @if ($migrated)
                    <div class="col-md-8 col-md-offset-4">
                        <div class="panel text-center mt-3">
                            <div class="text-center font-size-16">
                                {!! lang('Dites-nous ce que vous pensez de cette proposition ?') !!}
                            </div>

                            <form method="post" class="pt-10"
                                action="{{ route('client.espace_collaboration.esquisse', $projet->id) }}">
                                <input type="hidden" name="projet_designer_proposition_id"
                                    value="{{ $designer->proposition->id }}">
                                {{ csrf_field() }}
                                <input type="hidden" name="ajax" value="1">
                                <div class="smileys">
                                    <label
                                        class="smiley star {{ $projet->conception == 0 ? 'enable' : '' }} star-1 {{ $designer->proposition->smiley >= '1' ? 'active' : '' }}"
                                        data-value="1"></label>
                                    <label
                                        class="smiley star {{ $projet->conception == 0 ? 'enable' : '' }} star-2 {{ $designer->proposition->smiley >= '2' ? 'active' : '' }}"
                                        data-value="2"></label>
                                    <label
                                        class="smiley star {{ $projet->conception == 0 ? 'enable' : '' }} star-3 {{ $designer->proposition->smiley >= '3' ? 'active' : '' }}"
                                        data-value="3"></label>
                                    <label
                                        class="smiley star {{ $projet->conception == 0 ? 'enable' : '' }} star-4 {{ $designer->proposition->smiley >= '4' ? 'active' : '' }}"
                                        data-value="4"></label>
                                    <label
                                        class="smiley star {{ $projet->conception == 0 ? 'enable' : '' }} star-5 {{ $designer->proposition->smiley >= '5' ? 'active' : '' }}"
                                        data-value="5"></label>
                                    <input type="text" name="smiley" class="d-none" value="-1">
                                </div>
                            </form>
                        </div>
                        @if (count($projet->produits) > 0)
                            <div class="text-center pb-20">
                                <a class="btn btn3 btn-formulaire mt-2"
                                    href="{{ route('client.espace_collaboration.shopping', $projet->id) }}">Ma Shopping
                                    list</a>
                            </div>
                        @endif
                    </div>
                @else
                    <div class="col-md-3"></div>
                    <div class="col">
                        <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">

                                <div class="col-md-6">
                                    <div class="panel mb-0">
                                        <form method="post"
                                            class="{{ $designer->proposition->jaime || $projet->status == 'Lancer conception' ? 'disabled' : '' }} jaime"
                                            action="{{ route('client.espace_collaboration.esquisse.post', $projet->id) }}">
                                            {{ csrf_field() }}
                                            <input type="hidden" name="projet_designer_proposition_id"
                                                value="{{ $designer->proposition->id }}">
                                            <div class="text-center font-size-14 mb-3">{!! lang("J'aime") !!}
                                            </div>
                                            <input type="hidden" name="ajax" value="1">
                                            @if ($projet->lancer_conception == 0)
                                                <textarea name="jaime" placeholder="La disposition du mobilier, le choix des couleurs ..."
                                                    class="form-control font-size-12" rows="5">{{ $designer->proposition->jaime }}</textarea>
                                            @else
                                                <small>{{ $designer->proposition->jaime }}</small>
                                            @endif
                                            <div class="text-center mt-4">
                                                @if ($projet->lancer_conception == 0)
                                                    <div class="btn  show-disabled"><i class="fa fa-pencil"></i>
                                                    </div>
                                                    <button class="btn  hide-disabled" title="Enregistrer">
                                                        <i class="fa fa-save"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </form>
                                    </div>

                                </div>
                                <div class="col-md-6">
                                    <div class="panel mb-0">
                                        <form method="post"
                                            class="{{ $designer->proposition->jaime_peu_moins || $projet->status == 'Lancer conception' ? 'disabled' : '' }} jaime_peu_moins"
                                            action="{{ route('client.espace_collaboration.esquisse.post', $projet->id) }}">
                                            {{ csrf_field() }}
                                            <input type="hidden" name="projet_designer_proposition_id"
                                                value="{{ $designer->proposition->id }}">
                                            <div class="text-center font-size-14 mb-3">{!! lang("J'aime un peu moins") !!}
                                            </div>
                                            <input type="hidden" name="ajax" value="1">

                                            @if ($projet->lancer_conception == 0)
                                                <textarea name="jaime_peu_moins" placeholder="La disposition du mobilier, le choix des couleurs ..."
                                                    class="form-control font-size-12" rows="5">{{ $designer->proposition->jaime_peu_moins }}</textarea>
                                            @else
                                                <small>{{ $designer->proposition->jaime_peu_moins }}</small>
                                            @endif

                                            <div class="text-center mt-4">
                                                @if ($projet->lancer_conception == 0)
                                                    <div class="btn show-disabled"><i class="fa fa-pencil"></i>
                                                    </div>
                                                    <button class="btn hide-disabled">
                                                        <i class="fa fa-save"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="text-center">
                                        <form method="post"
                                            action="{{ route('client.espace_collaboration.esquisse', $projet->id) }}">
                                            {{ csrf_field() }}
                                            <input type="hidden" name="projet_designer_proposition_id"
                                                value="{{ $designer->proposition->id }}">
                                            <input type="hidden" name="ajax" value="1">
                                            <div class="smileys">
                                                <label
                                                    class="smiley {{ $projet->lancer_conception == 0 ? 'enable' : '' }} smiley-1 {{ $designer->proposition->smiley == '1' ? 'active' : '' }}"
                                                    data-value="1"></label>
                                                <label
                                                    class="smiley {{ $projet->lancer_conception == 0 ? 'enable' : '' }} smiley-2 {{ $designer->proposition->smiley == '2' ? 'active' : '' }}"
                                                    data-value="2"></label>
                                                <label
                                                    class="smiley {{ $projet->lancer_conception == 0 ? 'enable' : '' }} smiley-3 {{ $designer->proposition->smiley == '3' ? 'active' : '' }}"
                                                    data-value="3"></label>
                                                <label
                                                    class="smiley {{ $projet->lancer_conception == 0 ? 'enable' : '' }} smiley-4 {{ $designer->proposition->smiley == '4' ? 'active' : '' }}"
                                                    data-value="4"></label>
                                                <label
                                                    class="smiley {{ $projet->lancer_conception == 0 ? 'enable' : '' }} smiley-5 {{ $designer->proposition->smiley == '5' ? 'active' : '' }}"
                                                    data-value="5"></label>
                                                <input type="text" name="smiley" class="d-none" value="-1">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if (!$migrated)
                            <form class="mt-50 mb-50 form-retenir" method="post"
                                action="{{ route('client.espace_collaboration.esquisse.designer.post', $projet->id) }}">
                                {{ csrf_field() }}
                                <div class="text-center">
                                    <input type="hidden" name="projet_designer_id" value="{{ $designer->id }}">
                                    @if ($projet->lancer_conception == 0)
                                        @if ($projet->nb_designers == 1)
                                            <button class="btn btn2 btn-formulaire btn-xs"
                                                data-message="<div class='font-size-16'>Félicitations ! <br><br>Vous avez choisi de continuer la collaboration avec {{ $designer->designer->prenom }}. <br><br> {{ $designer->designer->prenom }} aura accès à l'ensemble de vos concepts d'idées et commentaires, et se lancera dans la conception finale après votre confirmation.</div>">
                                                {!! lang('Confirmer') !!}
                                            </button>
                                        @elseif($projet->nb_designers == 2)
                                            @php
                                                $designers = $projet->designers->where(
                                                    'designer_id',
                                                    '!=',
                                                    $designer->designer_id,
                                                );
                                            @endphp
                                            <button class="btn btn2 btn-formulaire btn-xs"
                                                data-message="<div class='font-size-16'>Félicitations ! <br><br>Vous avez choisi de continuer la collaboration avec {{ $designer->designer->prenom }}. <br> 
												{{ $designer->designer->prenom }} aura accès à l'ensemble de vos concepts d'idées et commentaires, et se lancera dans la conception finale après votre confirmation. <br><br>
												{{ $designers->first()->designer->prenom }} vous remercie et espère collaborer avec vous bientôt sur d'autres projets.
											 </div>">
                                                {!! lang('Je retiens la proposition de') !!} {{ $designer->designer->prenom }}
                                            </button>
                                        @else
                                            @php
                                                $designers = $projet->designers->where(
                                                    'designer_id',
                                                    '!=',
                                                    $designer->designer_id,
                                                );
                                            @endphp

                                            <button class="btn btn2 btn-formulaire btn-xs"
                                                data-message="<div class='font-size-16'>Félicitations ! <br><br>Vous avez choisi de continuer la collaboration avec {{ $designer->designer->prenom }}. <br> 
												{{ $designer->designer->prenom }} aura accès à l'ensemble de vos concepts d'idées et commentaires, et se lancera dans la conception finale après votre confirmation. <br><br>
												{{ $designers->first()->designer->prenom }} et {{ $designers->last()->designer->prenom }} vous remercient et espèrent collaborer avec vous bientôt sur d'autres projets.
											</div>">
                                                {!! lang('Je retiens la proposition de') !!} {{ $designer->designer->prenom }}
                                            </button>
                                        @endif
                                    @endif
                                    @if (count($projet->produits) > 0)
                                        <a class="btn btn3 btn-formulaire"
                                            href="{{ route('client.espace_collaboration.shopping', $projet->id) }}">Ma
                                            Shopping
                                            list</a>
                                    @endif
                                </div>
                            </form>
                        @endif
                    </div>
                    <div class="col-md-3"></div>
                @endif
            </div>
        </div>
    @endforeach

    <div class="modal fade" id="modal-commentaire" data-backdrop="static" data-keyboard="false" role="dialog">
        <div class="modal-dialog" style="width: 95%; max-width: 400px; 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>

@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($) {

            $(window).scroll(function() {
                var aTop = $('#designer-container').height();
                if ($(this).scrollTop() > aTop) {
                    $('.internal-chat-esquisse').animate({
                        'top': '120px'
                    }, 75, 'linear');
                } else {
                    $('.internal-chat-esquisse').animate({
                        'top': '285px'
                    }, 75, 'linear');
                }
            });

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

            $('.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 submit = 0;
            $('.form-retenir').submit(function(event) {
                if (!submit) {
                    event.preventDefault();
                    $('.jaime:not(.disabled), .jaime_peu_moins:not(.disabled)').trigger('submit');
                    Swal.fire({
                        html: $(this).find('button').data('message'),
                        showCancelButton: false,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: '<div class="font-size-16">Confirmer et lancer la conception finale<div>',
                    }).then((result) => {
                        if (result.value) {
                            $(".loader").fadeIn();
                            submit = 1;
                            $(this).submit();
                        }
                    });
                }
            });
            let addTag = function(left, top, img, message) {
                $('.modal').modal('hide');
                $('.loader').fadeIn();
                $.ajax({
                        url: '{{ route('client.espace_collaboration.esquisse.commentaire.post', $projet->id) }}',
                        type: 'POST',
                        data: {
                            left: left,
                            top: top,
                            projet_designer_proposition_id: proposition,
                            img: img,
                            message: message,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        }
                    })
                    .success(function() {

                        $.ajax({
                                url: '/api/proposition/' + proposition + '/commentaires',
                            })
                            .success(function(data) {
                                $('.commentaires[data-projet_designer_proposition_id=' + proposition +
                                    ']').replaceWith(data);
                                setTags();
                            });
                    })
                    .error(function() {
                        $('.loader').fadeOut();
                        console.log("error");
                    });
            }
            $(document).on('click', '.commentaire .supprimer', function(event) {

                let commentaires = $(this).parents('.commentaires');
                event.preventDefault();
                event.stopPropagation();

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

                $.ajax({
                        url: '/api/proposition/commentaire/' + $(this).data('id'),
                        type: 'DELETE'
                    })
                    .success((data) => {
                        commentaires.html(data);
                        setTimeout(function() {
                            setTags();
                        }, 2000);
                    });
            });
            let showCommentaire = function(text) {
                $('.commentaire').removeClass('selected');
                $('[data-message="' + text + '"]').addClass('selected');
            }
            let left, top, img;

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


            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_proposition_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(),
                            })
                        );
                    }
                });

                let _tag;
                {{-- @if ($projet->conception == 0) --}}
                $('.img_ambiance').each(function(index, el) {
                    $(el).parent().find('.taggd__wrapper').remove();
                    var taggd = new Taggd(el, {
                        show: 'click'
                    }, 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;
                            proposition = $(this).data('proposition');
                            $('[name=commentaire]').val('');
                            $('#modal-commentaire').modal('show');
                        });
                    }
                    taggd.on('taggd.tag.show', (tags, tag) => {
                        showCommentaire(tag.text);
                        return false;
                    });

                });

                $('.img_ambiance_2').each(function(index, el) {
                    $(el).parent().find('.taggd__wrapper').remove();
                    var taggd = new Taggd(el, {
                        show: 'click'
                    }, 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 = 3;
                            _tag = tag;
                            proposition = $(this).data('proposition');
                            $('[name=commentaire]').val('');
                            $('#modal-commentaire').modal('show');
                        });
                    }
                    taggd.on('taggd.tag.show', (tags, tag) => {
                        showCommentaire(tag.text);
                        return false;
                    });

                });
                $('#modal-commentaire').on('hidden.bs.modal', function() {
                    $(_tag.wrapperElement).remove();
                })
                $('.img_mobilier').each(function(index, el) {
                    $(el).parent().find('.taggd__wrapper').remove();
                    var taggd = new Taggd(el, {
                        show: 'click'
                    }, 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;

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

                });
                $('.img_mobilier_2').each(function(index, el) {
                    $(el).parent().find('.taggd__wrapper').remove();
                    var taggd = new Taggd(el, {
                        show: 'click'
                    }, 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 = 4;
                            _tag = tag;

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

                });
                {{-- @endif --}}

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

                $('.loader').fadeOut();
            }
            var data = [];
            setTags();
        });
    </script>
@endsection