@if (!($projet->migrated && $projet->forfait != 'fantastique'))
    <form name="f" action="{{ route('designer.projets.proposition', $projet->id) }}" method="post"
        enctype="multipart/form-data">
        {{ csrf_field() }}
@endif
<div class="row">
    <div class="col-md-3">
        @if ($projet->migrated && $projet->forfait != 'fantastique')
            <div class="internal-chat-esquisse" id='chat-esq-des'>
                <section class="internal-chat-area">
                    <header>
                        <img src="{{ asset($projet->user->photo ?? $projet->user->picture) }}" alt="">
                        <div class="details" style="display:flex; flex-direction:column;">
                            <span>{{ $projet->user->username }} </span>
                            <small
                                class="time">{{ (new \Carbon\Carbon($projet->user->updated_at))->diffForHumans() }}</small>
                        </div>
                        <div
                            class="status-dot {{ (new \Carbon\Carbon())->diffInMinutes(new \Carbon\Carbon($projet->user->updated_at)) == 0 ? '' : 'offline' }}">
                            <i class="fa fa-circle"></i>
                        </div>
                    </header>
                    <div class="chat-box scroll-chat">
                        @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-des-ess"
                            id="chat-component-update-des-ess" method="post"
                            action="{{ route('chat.send-message', ['sender_id' => $senderId, 'receiver_id' => $receiverId, 'projetId' => $projetId]) }}">
                            {{ csrf_field() }}
                            <div class="smileys smileys-chat-update">
                                <label class="smiley-update-ess-des smiley-update-1" style="opacity: 1;"
                                    data-value=":rougir:"></label>
                                <label class="smiley-update-ess-des smiley-update-2" style="opacity: 1;"
                                    data-value=":pleurer:"></label>
                                <label class="smiley-update-ess-des smiley-update-3" style="opacity: 1;"
                                    data-value=":demon:"></label>
                                <label class="smiley-update-ess-des smiley-update-4" style="opacity: 1;"
                                    data-value=":ange:"></label>
                                <label class="smiley-update-ess-des smiley-update-5" style="opacity: 1;"
                                    data-value=":coeur:"></label>
                                <label class="smiley-update-ess-des smiley-update-19" style="opacity: 1;"
                                    data-value=":like:"></label>
                                <label class="smiley-update-ess-des smiley-update-6" style="opacity: 1;"
                                    data-value=":sourire:"></label>
                                <label class="smiley-update-ess-des smiley-update-7" style="opacity: 1;"
                                    data-value=":triste:"></label>
                                <label class="smiley-update-ess-des smiley-update-8" style="opacity: 1;"
                                    data-value=":surpris:"></label>
                                <label class="smiley-update-ess-des smiley-update-9" style="opacity: 1;"
                                    data-value=":rire:"></label>
                                <label class="smiley-update-ess-des smiley-update-18" style="opacity: 1;"
                                    data-value=":clin-d-oeil:"></label>
                                <label class="smiley-update-ess-des smiley-update-11" style="opacity: 1;"
                                    data-value=":choqué:"></label>
                                <label class="smiley-update-ess-des smiley-update-12" style="opacity: 1;"
                                    data-value=":sourire-lunettes:"></label>
                                <label class="smiley-update-ess-des smiley-update-13" style="opacity: 1;"
                                    data-value=":yeux:"></label>
                                <label class="smiley-update-ess-des smiley-update-14" style="opacity: 1;"
                                    data-value=":lunettes:"></label>
                                <label class="smiley-update-ess-des smiley-update-15" style="opacity: 1;"
                                    data-value=":langue:"></label>
                                <label class="smiley-update-ess-des smiley-update-16" style="opacity: 1;"
                                    data-value=":incertain:"></label>
                                <label class="smiley-update-ess-des smiley-update-17" style="opacity: 1;"
                                    data-value=":vexé:"></label>
                            </div>
                            <div style="display: flex;justify-content: center;">
                                <textarea name="message_esq_des" id="message_content_ess_des" placeholder="Entrez votre message..."
                                    class="form-control"></textarea>
                                <div class="chat-typing-ess"
                                    style="display:inline-block;width: 50px;padding: 5px 0 0 5px;">
                                    <label id="attachedLabel_ess_des" for="attachedFile_ess_des"
                                        title="Envoyer un fichier">
                                        <i class="fa fa-upload" aria-hidden="true"></i>
                                    </label>
                                    <button id="submitChatEssDes" 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_des_ess" aria-hidden="true"
                                        title="Insérer un emoji"></i>
                                    <input type="file" name="attachedFile_ess_des" id="attachedFile_ess_des"
                                        class="form-control hidden"
                                        accept="image/*, application/pdf, video/mp4,video/x-m4v,video/*" />
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        @else
            <div class="panel">
                <div class="form-group note-bloc {{ $proposition->note ? 'disabled' : '' }}">
                    <label for="">{!! lang('Notes du designer') !!} </label>
                    <hr>
                    @php
                        // replace <span> by <br> for new line return
                        $note = preg_replace('/<span\s(.+?)>(.+?)<\/span>/is', "<br>$2</br>", $proposition->note);
                    @endphp
                    @if ($projet->lancer_conception)
                        <br> {!! $proposition->note !!}
                    @else
                        <textarea class="summernote" name="note" rows="4">{!! $proposition->note ?? '' !!}</textarea>
                        <div class="text-right">
                            <div class="btn btn2 btn-formulaire mt-3 show-disabled">{!! lang('Modifier') !!}</div>
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </div>
    <div class="col-md-6">
        @if ($projet->migrated && $projet->forfait != 'fantastique')
            <form action="{{ route('designer.projets.proposition', $projet->id) }}" method="post"
                enctype="multipart/form-data">
                {{ csrf_field() }}
        @endif
        <div class="panel taggd_box esquisse-box">
            <div class="form-group">
                <label class="d-block mb-0" for="">{!! lang("Planche d'ambiance ") !!}
                    {{ $projet->type == 'studio' ? 'pièce' : '' }}</label>
                <span class="font-size-13 mt-0 text-danger">Format recommandé : paysage A4 largeur / hauteur =
                    <strong>1.4</strong> (Exemple : 850px x 601px ou 3508px x 2480x)</span>
                <hr>

                <div class=" ">
                    <img class="img_plan img-fluid img disabled_taggd" id="img_esquisse_1_{{ $proposition->id }}"
                        src="{{ asset($proposition->planche_ambiance) }}" alt="">
                </div>

                <div class="form-group d-none">
                    <div class="img-preview">
                        <div class="preview" style="width: 100%; padding-bottom: 70%;"></div>
                        <input type="file" accept="image/*" name="planche_ambiance" class="form-control"
                            id="planche_ambiance">
                    </div>
                </div>
                @if (!$projet->lancer_conception)
                    <div class="text-right mt-3">
                        <div class="btn btn-sm btn2 btn-formulaire btn-modifier">{{ lang('Modifier') }}</div>
                    </div>
                @endif
            </div>
            <hr>
            <div class="form-group">
                <label class="d-block mb-0" for="">{!! lang('Planche de mobilier ') !!}
                    {{ $projet->type == 'studio' ? 'pièce' : '' }}</label>
                <span class="font-size-13 mt-0 text-danger">Format recommandé : paysage A4 largeur / hauteur =
                    <strong>1.4</strong> (Exemple : 850px x 601px ou 3508px x 2480x)</span>
                <hr>

                <div class=" ">
                    <img class="img_visuel img-fluid img disabled_taggd" id="img_esquisse_2_{{ $proposition->id }}"
                        src="{{ asset($proposition->planche_mobilier) }}" alt="">
                </div>

                <div class="form-group d-none">
                    <div class="img-preview">
                        <div class="preview" style="width: 100%; padding-bottom: 70%;"></div>
                        <input type="file" accept="image/*" name="planche_mobilier" class="form-control">
                    </div>
                </div>

                @if (!$projet->lancer_conception)
                    <div class="text-right mt-3">
                        <div class="btn btn-sm btn2 btn-formulaire btn-modifier">{{ lang('Modifier') }}</div>
                    </div>
                @endif
            </div>
            @if ($projet->type == 'studio')
                <div class="form-group">
                    <label class="d-block mb-0" for="">{!! lang("Planche d'ambiance salle de bains") !!}</label>
                    <span class="font-size-13 mt-0 text-danger">Format recommandé : paysage A4 largeur / hauteur =
                        <strong>1.4</strong> (Exemple : 850px x 601px ou 3508px x 2480x)</span>
                    <hr>

                    <div class=" ">
                        <img class="img_plan img-fluid img disabled_taggd" id="img_esquisse_3_{{ $proposition->id }}"
                            src="{{ asset($proposition->planche_ambiance_2) }}" alt="">
                    </div>

                    <div class="form-group d-none">
                        <div class="img-preview">
                            <div class="preview" style="width: 100%; padding-bottom: 70%;"></div>
                            <input type="file" accept="image/*" name="planche_ambiance_2" class="form-control"
                                id="planche_ambiance_2">
                        </div>
                    </div>
                    @if (!$projet->lancer_conception)
                        <div class="text-right mt-3">
                            <div class="btn btn-sm btn2 btn-formulaire btn-modifier">{{ lang('Modifier') }}</div>
                        </div>
                    @endif
                </div>
                <div class="form-group">
                    <label class="d-block mb-0" for="">{!! lang('Planche de mobilier salle de bains') !!}</label>
                    <span class="font-size-13 mt-0 text-danger">Format recommandé : paysage A4 largeur / hauteur =
                        <strong>1.4</strong> (Exemple : 850px x 601px ou 3508px x 2480x)</span>
                    <hr>

                    <div class=" ">
                        <img class="img_visuel img-fluid img disabled_taggd"
                            id="img_esquisse_4_{{ $proposition->id }}"
                            src="{{ asset($proposition->planche_mobilier_2) }}" alt="">
                    </div>

                    <div class="form-group d-none">
                        <div class="img-preview">
                            <div class="preview" style="width: 100%; padding-bottom: 70%;"></div>
                            <input type="file" accept="image/*" name="planche_mobilier_2" class="form-control">
                        </div>
                    </div>

                    @if (!$projet->lancer_conception)
                        <div class="text-right mt-3">
                            <div class="btn btn-sm btn2 btn-formulaire btn-modifier">{{ lang('Modifier') }}</div>
                        </div>
                    @endif
                </div>
            @endif
        </div>
        @if ($projet->lancer_conception == 0)
            <div class="row send-div-des">
                <div class="mb-4">
                    @if ($proposition->is_draft == 0)
                        <input class="btn btn8 btn-formulaire btn-modifier-esquisse" type="submit" name="save"
                            data-message="Voulez-vous modifier votre proposition ?" value="{!! lang('Enregistrer modification') !!}"
                            data-space="{{ $projet->type }}" data-migrated="{{ $projet->migrated }}"
                            data-products="{{ count($projet->produits) }}" data-forfait="{{ $projet->forfait }}">
                        <button class="btn btn15 btn-formulaire btn-envoyer" name="send" value="1"
                            type="submit" data-check-valid='[name="note"]'
                            data-message="Voulez-vous confirmer l'envoi ?" data-space="{{ $projet->type }}"
                            data-migrated="{{ $projet->migrated }}" data-products="{{ count($projet->produits) }}"
                            data-forfait="{{ $projet->forfait }}">{!! lang('Envoyer') !!}</button>
                    @else
                        <button class="btn btn8 btn-formulaire btn-envoyer" name="send" value="1"
                            type="submit" data-check-valid='[name="note"]'
                            data-message="Voulez-vous confirmer l'envoi ?" data-space="{{ $projet->type }}"
                            data-migrated="{{ $projet->migrated }}" data-products="{{ count($projet->produits) }}"
                            data-forfait="{{ $projet->forfait }}">{!! lang('Envoyer') !!}</button>
                    @endif
                </div>
            </div>
        @endif
        @if ($projet->migrated && $projet->forfait != 'fantastique')
            </form>
        @endif
    </div>

    <div class="col-md-3 col-chat" style="width: 400px">
        @if (!($projet->migrated && $projet->forfait != 'fantastique'))
            <div class="panel">
                <b>{!! lang('Commentaires de ') !!} {{ $projet->user->prenom }}</b>
                <hr>

                @if (count($proposition->commentaires) == 0)
                    <p>{!! lang('Aucun commentaire pour le moment') !!}</p>
                @else
                    <div class="commentaires">

                        @include('front.components.commentaires', [
                            'commentaires' => $proposition->commentaires ?? [],
                            'proposition_id' => $proposition->id,
                            'no_buttons' => true,
                        ])

                    </div>
                @endif
            </div>
        @endif
        <div class="panel">
            <b>{!! lang('Évaluation de ') !!} {{ $projet->user->prenom }}</b>
            <hr>
            @if ($projet->migrated && $projet->forfait != 'fantastique')
                <div class="text-center mb-4">
                    <div class="smileys">
                        <label class="smiley star star-1 {{ $proposition->smiley >= '1' ? 'active' : '' }}"
                            data-value="1"></label>
                        <label class="smiley star star-2 {{ $proposition->smiley >= '2' ? 'active' : '' }}"
                            data-value="2"></label>
                        <label class="smiley star star-3 {{ $proposition->smiley >= '3' ? 'active' : '' }}"
                            data-value="3"></label>
                        <label class="smiley star star-4 {{ $proposition->smiley >= '4' ? 'active' : '' }}"
                            data-value="4"></label>
                        <label class="smiley star star-5 {{ $proposition->smiley >= '5' ? 'active' : '' }}"
                            data-value="5"></label>
                    </div>
                </div>
            @else
                <div class="text-center mb-4">
                    <div class="smileys">
                        <label
                            class="smiley smiley-1 {{ $projet->conception && $proposition->smiley == '1' ? 'active' : '' }}"
                            data-value="1"></label>
                        <label
                            class="smiley smiley-2 {{ $projet->conception && $proposition->smiley == '2' ? 'active' : '' }}"
                            data-value="2"></label>
                        <label
                            class="smiley smiley-3 {{ $projet->conception && $proposition->smiley == '3' ? 'active' : '' }}"
                            data-value="3"></label>
                        <label
                            class="smiley smiley-4 {{ $projet->conception && $proposition->smiley == '4' ? 'active' : '' }}"
                            data-value="4"></label>
                        <label
                            class="smiley smiley-5 {{ $projet->conception && $proposition->smiley == '5' ? 'active' : '' }}"
                            data-value="5"></label>
                        <input type="text" name="smiley" class="d-none" value="-1">
                    </div>
                </div>
            @endif
            @if (!($projet->migrated && $projet->forfait != 'fantastique'))
                <p>
                    <b>{!! lang("J'aime") !!} : </b> <br>
                    @if ($projet->conception)
                        {!! $proposition->jaime ?? '<i>Aucun message fourni</i>' !!}
                    @else
                        <i>Aucun message fourni</i>
                    @endif
                </p>

                <p>
                    <b>{!! lang("J'aime un peu moins") !!} : </b> <br>
                    @if ($projet->conception)
                        {!! $proposition->jaime_peu_moins ?? '<i>Aucun message fourni</i>' !!}
                    @else
                        <i>Aucun message fourni</i>
                    @endif
                </p>
            @endif
        </div>
        @if ($projet->conception)

            @php
                // $esquisses = $projet->esquisses->where('designer_id', '!=', auth()->id())->where('is_draft',0)->get();
                $esquisses = array_filter(
                    $projet->esquisses->toArray(),
                    function ($item, $key) {
                        return $item['designer_id'] != auth()->id();
                    },
                    ARRAY_FILTER_USE_BOTH,
                );

                $unique_esquisses_arr = array_unique(array_column($esquisses, 'designer_id'));

            @endphp

            @foreach ($unique_esquisses_arr as $key => $esquisse)
                <a target="_blank"
                    href="{{ route('designer.projets.esquisse_designer', ['id' => $projet->id, 'designer_id' => $esquisse]) }}"
                    class="panel d-block link-esquisse-page">
                    <b>Concept d'idées {{ $key + 1 }} </b>
                </a>
            @endforeach

        @endif
    </div>
</div>
@if (!($projet->migrated && $projet->forfait != 'fantastique'))
    </form>
@endif
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
    jQuery(document).ready(function($) {
        $.summernote.dom.emptyPara = "<div><br/></div>";
    });
</script>