@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" id="chat-container">
        @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">
                    <label>{!! lang('Notes du designer') !!}</label>
                    <hr>
                    <textarea class="summernote" name="note" rows="4"></textarea>
                </div>
            </div>
        @endif
    </div>
    <div class="col">
        @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="panel">
            <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-preview">
                    <div class="preview" style="width: 100%; height: 400px"></div>
                    <input type="file" accept="image/*" name="planche_ambiance" class="form-control"
                        required="">
                </div>
            </div>

            <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-preview">
                    <div class="preview" style="width: 100%; height: 400px"></div>
                    <input type="file" accept="image/*" name="planche_mobilier" class="form-control"
                        required="">
                </div>
            </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-preview">
                        <div class="preview" style="width: 100%; height: 400px"></div>
                        <input type="file" accept="image/*" name="planche_ambiance_2" class="form-control"
                            required="">
                    </div>
                </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-preview">
                        <div class="preview" style="width: 100%; height: 400px"></div>
                        <input type="file" accept="image/*" name="planche_mobilier_2" class="form-control"
                            required="">
                    </div>
                </div>
            @endif
        </div>
        <div class="row send-div-des">
            <div class="mb-4 ">
                <button class="btn btn8 btn-formulaire btn-enregister-esquisse" name="save"
                    data-message="Voulez-vous enregistrer votre proposition ?" data-space="{{ $projet->type }}"
                    data-migrated="{{ $projet->migrated }}" data-products="{{ count($projet->produits) }}"
                    data-forfait="{{ $projet->forfait }}">{!! lang('Enregistrer et quitter') !!}</button>
                <button class="btn btn8 btn-formulaire btn-envoyer-esquisse" name="send" value="1"
                    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>
            </div>
        </div>
        @if ($projet->migrated && $projet->forfait != 'fantastique')
            </form>
        @endif
    </div>
    <div class="col-auto col-chat" id="chat" style="width: 400px">
        <div class="panel">
            <b>{!! lang('Commentaires de ') !!} {{ $projet->user->prenom }}</b>
            <hr>
            <p>{!! lang('Aucun commentaire pour le moment') !!}</p>
        </div>
        <div class="panel">
            <b>{!! lang('Évaluation de ') !!} {{ $projet->user->prenom }}</b>
            <hr>
            <div class="text-center mb-4">
                <div class="smileys">
                    <label class="smiley smiley-1" data-value="1"></label>
                    <label class="smiley smiley-2" data-value="2"></label>
                    <label class="smiley smiley-3" data-value="3"></label>
                    <label class="smiley smiley-4" data-value="4"></label>
                    <label class="smiley smiley-5" data-value="5"></label>
                    <input type="text" name="smiley" class="d-none" value="-1">
                </div>
            </div>
            <p>
                <b>{!! lang("J'aime") !!} : </b> <br>
                <i>Aucun message fourni</i>
            </p>

            <p>
                <b>{!! lang("J'aime un peu moins") !!} : </b> <br>
                <i>Aucun message fourni</i>
            </p>
        </div>
    </div>
</div>
@if (!($projet->migrated && $projet->forfait != 'fantastique'))
    </form>
@endif
<script>
    jQuery(document).ready(function($) {
        $.summernote.dom.emptyPara = "<div><br/></div>";
    });
</script>