@extends('layouts.contributor')
@php $page_title = 'Tableau de bord contributeur'; @endphp
@section('meta-title', 'Espace contributeur - Détails réalisation')
@section('meta-keywords', '')
@section('meta-description', '')

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">
    <style>
        .note-editable {
            font-size: 1em !important;
        }

        .note-editable p {
            font-size: 1em !important;
        }

        h4,
        h5 {
            font-family: "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
            line-height: 1.2 !important;
            font-size: 1.25rem !important;
        }

        textarea,
        input {
            font-weight: 500 !important;
        }

        label.error {
            color: red !important;
            font-weight: 500 !important;
        }

        .element-box {
            border-radius: 6px !important;
            background-color: #fff !important;
            -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12) !important;
            box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12) !important;
            padding: 1.5rem 2rem !important;
            margin-top: 2rem !important;
        }

        .bg-light {
            background-color: #f8f9fa !important;
        }

        .btn {
            font-family: "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-weight: 400 !important;
            outline: none !important;
            line-height: 1 !important;
            display: inline-block !important;
            text-align: center !important;
            white-space: nowrap !important;
            vertical-align: middle !important;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 2px solid transparent;
            padding: 0.375rem 0.375rem !important;
            font-size: 0.9rem !important;
            line-height: 1.5 !important;
            border-radius: 4px !important;
            -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
        }

        .btn:hover {
            -webkit-transform: scale(1) !important;
            transform: scale(1) !important;
        }

        .btn_rogner {
            background: black;
            color: white;
            font-weight: bold;
            border-color: black;
            border-radius: 2px;
            float: right;
        }

        .btn_rogner:hover {
            background-color: #0f1115 !important;
        }

        .cr-slider {
            position: absolute;
            top: 0;
            left: 15px;
            margin: 0;
            width: 50%;
        }

        .reset_btn {
            background: blue;
            color: white;
            font-weight: bold;
            border-color: blue;
            border-radius: 2px;
            float: left;
        }

        .reset_btn:hover {
            background-color: blue !important;
        }

        .btn-danger:hover {
            background-color: #e65252 !important;
        }

        .gallery_visuels {
            width: 100%;
            float: left;
            margin-top: 15px;
        }

        .gallery_visuels ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .gallery_visuels ul li {
            padding: 7px;
            border: 2px solid #ccc;
            float: left;
            margin: 10px 7px;
            background: none;
            width: auto;
            height: auto;
        }

        .gallery_visuels img {
            min-width: 250px;
            width: 250px;
            min-height: 100px;
        }

        .element-box {
            margin-bottom: 0px !important;
        }

        .div-table {
            display: table;
            width: auto;
            background-color: #eee;
            border: 1px solid #666666;
            border-spacing: 5px;
            /* cellspacing:poor IE support for  this */
        }

        .div-table input {
            width: 50px;
            height: 30px;
        }

        .div-table-row {
            display: table-row;
            width: auto;
            clear: both;
        }

        .div-table-col,
        .div-table-head {
            float: left;
            /* fix for  buggy browsers */
            display: table-column;
            width: 60px;
        }

        #div-table-btn {
            width: 100px !important;
        }

        label.error {
            color: red;
            display: block;
            margin-top: 5px;
        }

        input.error,
        textarea.error,
        select.error {
            border: 1px dashed red;
            font-weight: 300;
            color: red;
        }

        .emojis {
            width: auto;
            display: inline-block;
        }

        .emojis .smiley {
            width: 50px;
            height: 50px;
            display: inline-block;
            background-size: cover;
            margin: 0 1px;
            cursor: pointer;
        }

        .emojis .emoji-feedback {
            width: 1.5vw;
            height: 1.5vw;
            display: inline-block;
            background-size: cover;
            margin: 0 1px;
            cursor: pointer;
        }

        .btn-success {
            color: #fff;
            background-color: #24b314;
            border-color: #24b314;
        }

        .btn-success:hover {
            color: #fff;
            background-color: #1d9110;
            border-color: #1b850f;
        }

        .btn-success:focus,
        .btn-success.focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
        }

        .btn-success.disabled,
        .btn-success:disabled {
            color: #fff;
            background-color: #24b314;
            border-color: #24b314;
        }

        .btn-success:not(:disabled):not(.disabled):active,
        .btn-success:not(:disabled):not(.disabled).active,
        .show>.btn-success.dropdown-toggle {
            color: #fff;
            background-color: #1b850f;
            border-color: #187a0e;
        }

        .btn-success:not(:disabled):not(.disabled):active:focus,
        .btn-success:not(:disabled):not(.disabled).active:focus,
        .show>.btn-success.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
        }

        .btn-light {
            color: #292b2c;
            background-color: #f8f9fa;
            border-color: #f8f9fa;
        }

        .btn-light:hover {
            color: #292b2c;
            background-color: #e2e6ea;
            border-color: #dae0e5;
        }

        .btn-light:focus,
        .btn-light.focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
        }

        .btn-light.disabled,
        .btn-light:disabled {
            color: #292b2c;
            background-color: #f8f9fa;
            border-color: #f8f9fa;
        }

        .btn-light:not(:disabled):not(.disabled):active,
        .btn-light:not(:disabled):not(.disabled).active,
        .show>.btn-light.dropdown-toggle {
            color: #292b2c;
            background-color: #dae0e5;
            border-color: #d3d9df;
        }

        .btn-light:not(:disabled):not(.disabled):active:focus,
        .btn-light:not(:disabled):not(.disabled).active:focus,
        .show>.btn-light.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
        }

        .btn-dark {
            color: #fff;
            background-color: #343a40;
            border-color: #343a40;
        }

        .btn-dark:hover {
            color: #fff;
            background-color: #23272b;
            border-color: #1d2124;
        }

        .btn-dark:focus,
        .btn-dark.focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
        }

        .btn-dark.disabled,
        .btn-dark:disabled {
            color: #fff;
            background-color: #343a40;
            border-color: #343a40;
        }

        .btn-dark:not(:disabled):not(.disabled):active,
        .btn-dark:not(:disabled):not(.disabled).active,
        .show>.btn-dark.dropdown-toggle {
            color: #fff;
            background-color: #1d2124;
            border-color: #171a1d;
        }

        .btn-dark:not(:disabled):not(.disabled):active:focus,
        .btn-dark:not(:disabled):not(.disabled).active:focus,
        .show>.btn-dark.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
        }

        .btn-danger {
            color: #fff;
            background-color: #e65252;
            border-color: #e65252;
        }

        .btn-danger:hover {
            color: #fff;
            background-color: #e13131;
            border-color: #e02525;
        }

        .btn-danger:focus,
        .btn-danger.focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
        }

        .btn-danger.disabled,
        .btn-danger:disabled {
            color: #fff;
            background-color: #e65252;
            border-color: #e65252;
        }

        .btn-danger:not(:disabled):not(.disabled):active,
        .btn-danger:not(:disabled):not(.disabled).active,
        .show>.btn-danger.dropdown-toggle {
            color: #fff;
            background-color: #e02525;
            border-color: #d91f1f;
        }

        .btn-danger:not(:disabled):not(.disabled):active:focus,
        .btn-danger:not(:disabled):not(.disabled).active:focus,
        .show>.btn-danger.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
        }

        .btn-white,
        .all-wrapper .fc-button {
            color: #292b2c;
            background-color: #fff;
            border-color: #fff;
        }

        .btn-white:hover,
        .all-wrapper .fc-button:hover {
            color: #292b2c;
            background-color: #ececec;
            border-color: #e6e5e5;
        }

        .btn-white:focus,
        .all-wrapper .fc-button:focus,
        .btn-white.focus,
        .all-wrapper .focus.fc-button {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
        }

        .btn-white.disabled,
        .all-wrapper .disabled.fc-button,
        .btn-white:disabled,
        .all-wrapper .fc-button:disabled {
            color: #292b2c;
            background-color: #fff;
            border-color: #fff;
        }

        .btn-white:not(:disabled):not(.disabled):active,
        .all-wrapper .fc-button:not(:disabled):not(.disabled):active,
        .btn-white:not(:disabled):not(.disabled).active,
        .all-wrapper .fc-button:not(:disabled):not(.disabled).active,
        .show>.btn-white.dropdown-toggle,
        .all-wrapper .show>.dropdown-toggle.fc-button {
            color: #292b2c;
            background-color: #e6e5e5;
            border-color: #dfdfdf;
        }

        .btn-white:not(:disabled):not(.disabled):active:focus,
        .all-wrapper .fc-button:not(:disabled):not(.disabled):active:focus,
        .btn-white:not(:disabled):not(.disabled).active:focus,
        .all-wrapper .fc-button:not(:disabled):not(.disabled).active:focus,
        .show>.btn-white.dropdown-toggle:focus,
        .all-wrapper .show>.dropdown-toggle.fc-button:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
        }

        .emojis .smiley-1 {
            background-image: url("/img/smiley/pipcke-project-feedback-sarcastic1.svg");
        }

        .emojis .smiley-1.active,
        .emojis .smiley-1.enable:hover {
            background-image: url("/img/smiley/pipcke-project-feedback-sarcastic2.svg");
        }

        .emojis .smiley-2 {
            background-image: url("/img/smiley/pipcke-project-feedback-thinking1.svg");
        }

        .emojis .smiley-2.active,
        .emojis .smiley-2.enable:hover {
            background-image: url("/img/smiley/pipcke-project-feedback-thinking2.svg");
        }

        .emojis .smiley-3 {
            background-image: url("/img/smiley/pipcke-project-feedback-neutral1.svg");
        }

        .emojis .smiley-3.active,
        .emojis .smiley-3.enable:hover {
            background-image: url("/img/smiley/pipcke-project-feedback-neutral2.svg");
        }

        .emojis .smiley-4 {
            background-image: url("/img/smiley/pipcke-project-feedback-smile1.svg");
        }

        .emojis .smiley-4.active,
        .emojis .smiley-4.enable:hover {
            background-image: url("/img/smiley/pipcke-project-feedback-smile2.svg");
        }

        .emojis .smiley-5 {
            background-image: url("/img/smiley/pipcke-project-feedback-love1.svg");
        }

        .emojis .smiley-5.active,
        .emojis .smiley-5.enable:hover {
            background-image: url("/img/smiley/pipcke-project-feedback-love2.svg");
        }

        .emojis .emoji-feedback-1 {
            background-image: url("/img/smiley/new/blushing-smiley.png");
        }

        .emojis .emoji-feedback-2 {
            background-image: url("/img/smiley/new/crying-facebook-emoticon.png");
        }

        .emojis .emoji-feedback-3 {
            background-image: url("/img/smiley/new/devil-smiley-for-facebook.png");
        }

        .emojis .emoji-feedback-4 {
            background-image: url("/img/smiley/new/facebook-angel-smiley.png");
        }

        .emojis .emoji-feedback-5 {
            background-image: url("/img/smiley/new/facebook-heart-emoticon.png");
        }

        .emojis .emoji-feedback-6 {
            background-image: url("/img/smiley/new/facebook-smiley-face.png");
        }

        .emojis .emoji-feedback-7 {
            background-image: url("/img/smiley/new/frowny-face.png");
        }

        .emojis .emoji-feedback-8 {
            background-image: url("/img/smiley/new/gasp-emoticon.png");
        }

        .emojis .emoji-feedback-9 {
            background-image: url("/img/smiley/new/grinning-facebook-emoticon.png");
        }

        .emojis .emoji-feedback-10 {
            background-image: url("/img/smiley/new/kiss-emoji.png");
        }

        .emojis .emoji-feedback-11 {
            background-image: url("/img/smiley/new/shocked-facebook-emoticon.png");
        }

        .emojis .emoji-feedback-12 {
            background-image: url("/img/smiley/new/smiley-with-glasses.png");
        }

        .emojis .emoji-feedback-13 {
            background-image: url("/img/smiley/new/squint-emoticon.png");
        }

        .emojis .emoji-feedback-14 {
            background-image: url("/img/smiley/new/sunglasses-facebook-emoticon.png");
        }

        .emojis .emoji-feedback-15 {
            background-image: url("/img/smiley/new/tongue-out-facebook-emoticon.png");
        }

        .emojis .emoji-feedback-16 {
            background-image: url("/img/smiley/new/unsure-emoticon.png");
        }

        .emojis .emoji-feedback-17 {
            background-image: url("/img/smiley/new/upset-emoji.png");
        }

        .emojis .emoji-feedback-18 {
            background-image: url("/img/smiley/new/winking-facebook-smiley.png");
        }

        .emojis .emoji-feedback-19 {
            background-image: url("/img/smiley/new/facebook-like-emoticon.png");
        }

        .emojis .star-1,
        .emojis .star-2,
        .emojis .star-3,
        .emojis .star-4,
        .emojis .star-5 {
            background-image: url("/img/smiley/pipcke-project-feedback-star1.svg");
        }

        .tag {
            background-color: #23d160;
            color: #fff;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            border-radius: 30px;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            height: 2em;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            padding-left: .875em;
            padding-right: .875em;
            white-space: nowrap;
        }
    </style>
@endsection
@section('content')
    <div class="row poppins">
        <div class="element-wrapper">
            <div class="content-box">
                <div class="element-box" style="margin-top: 0px !important;">
                    @if ($projet->published == 0)
                        <form action="{{ route('contributor.realisation.save', $projet->id) }}" method="post"
                            id="createForm">
                            {{ csrf_field() }}
                            <h4 class="form-header bold" style="margin: 0;">
                                Projet N° @if (isset($projet->id))
                                    {{ $projet->id }}
                                @endif
                                Utilisateur N° @if (isset($user->id))
                                    {{ $user->id }}
                                @endif
                            </h4>
                            <div class="row panel element-box" style="margin-top: 20px;">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <input name="projet_id" value="{{ $projet->id }}" type="hidden">
                                        <label class="mb-3"><strong>Nom du projet</strong></label>
                                        <input class="form-control" placeholder="Décoration d'un projet..."
                                            name="nom_projet" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="mb-3"><strong>Forfait</strong></label>
                                        <input class="form-control" readOnly="" value="{{ $projet->forfait_conception }}"
                                            type="text">
                                    </div>
                                </div>
                                @php
                                    foreach (
                                        \App\Models\StyleDeco::whereIn('letter', $projet->quiz->style)->get() ?? []
                                        as $key => $style
                                    ) {
                                        $key == 0 ? ($style_1 = $style->libelle) : ($style_2 = $style->libelle);
                                    }
                                    $slug = $projet->espace . '-' . $style_1 . '-' . $style_2 . '-' . $projet->id;
                                    $divider = '-';
                                    $slug = preg_replace('~[^\pL\d]+~u', $divider, $slug);
                                    // transliterate
                                    // $slug = iconv('utf-8', 'us-ascii//TRANSLIT', $slug);
                                    $slug = str_replace(
                                        [
                                            'à',
                                            'â',
                                            'ä',
                                            'á',
                                            'ã',
                                            'å',
                                            'î',
                                            'ï',
                                            'ì',
                                            'í',
                                            'ô',
                                            'ö',
                                            'ò',
                                            'ó',
                                            'õ',
                                            'ø',
                                            'ù',
                                            'û',
                                            'ü',
                                            'ú',
                                            'é',
                                            'è',
                                            'ê',
                                            'ë',
                                            'ç',
                                            'ÿ',
                                            'ñ',
                                            'À',
                                            'Â',
                                            'Ä',
                                            'Á',
                                            'Ã',
                                            'Å',
                                            'Î',
                                            'Ï',
                                            'Ì',
                                            'Í',
                                            'Ô',
                                            'Ö',
                                            'Ò',
                                            'Ó',
                                            'Õ',
                                            'Ø',
                                            'Ù',
                                            'Û',
                                            'Ü',
                                            'Ú',
                                            'É',
                                            'È',
                                            'Ê',
                                            'Ë',
                                            'Ç',
                                            'Ÿ',
                                            'Ñ',
                                        ],
                                        [
                                            'a',
                                            'a',
                                            'a',
                                            'a',
                                            'a',
                                            'a',
                                            'i',
                                            'i',
                                            'i',
                                            'i',
                                            'o',
                                            'o',
                                            'o',
                                            'o',
                                            'o',
                                            'o',
                                            'u',
                                            'u',
                                            'u',
                                            'u',
                                            'e',
                                            'e',
                                            'e',
                                            'e',
                                            'c',
                                            'y',
                                            'n',
                                            'A',
                                            'A',
                                            'A',
                                            'A',
                                            'A',
                                            'A',
                                            'I',
                                            'I',
                                            'I',
                                            'I',
                                            'O',
                                            'O',
                                            'O',
                                            'O',
                                            'O',
                                            'O',
                                            'U',
                                            'U',
                                            'U',
                                            'U',
                                            'E',
                                            'E',
                                            'E',
                                            'E',
                                            'C',
                                            'Y',
                                            'N',
                                        ],
                                        $slug,
                                    );
                                    // remove unwanted characters
                                    $slug = preg_replace('~[^-\w]+~', '', $slug);
                                    // trim
                                    $slug = trim($slug, $divider);
                                    // remove duplicate divider
                                    $slug = preg_replace('~-+~', $divider, $slug);
                                    // lowercase
                                    $slug = strtolower($slug);
                                @endphp
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="mb-3"><strong>URL</strong></label>
                                        <input class="form-control" name="slug" type="text" id="createSlug"
                                            value="{{ $slug }}" data-slug="{{ $slug }}">
                                    </div>
                                </div>
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label class="mb-3"><strong></strong>.</label>
                                        <input class="form-control" readOnly="" name="url" id="createUrl"
                                            type="text"
                                            value="https://pipcke.fr/realisations-amenagement-d-interieur/{{ $slug }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row bg-light mt-5 p-3">
                                <h5>Filtres</h5>
                                <div class="form-roup mt-3 col-sm-12">
                                    <label class="mt-1 mb-1">
                                        <strong>Esapce :</strong>
                                    </label>
                                    @php
                                        $espaces = [
                                            'Salon',
                                            'Salle à manger',
                                            'Séjour',
                                            'Cuisine',
                                            'Espace ouvert',
                                            'Studio',
                                            'Chambre adulte',
                                            'Chambre enfant',
                                            'Chambre bébé',
                                            'Bureau',
                                            "Hall d'entrée",
                                            'Extérieur',
                                            'Local commercial',
                                            'Salle de bains',
                                            'Terrasse',
                                        ];
                                    @endphp
                                    <div class="col-md-12">
                                        @foreach ($espaces as $piece)
                                            <label class="tags-item">
                                                <input name="filtre_espace[]" required type="checkbox"
                                                    value="{{ $piece }}">
                                                <span>{{ $piece }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    <small class="pl-1">
                                        <i>
                                            Sélectionnez parmi les pièces existantes
                                        </i>
                                    </small>
                                </div>
                                <div class="form-roup mt-3 col-sm-12">
                                    <label class="mt-1 mb-1">
                                        <strong>Style :</strong>
                                    </label>
                                    <div class="col-md-12">
                                        @foreach (\App\Models\StyleDeco::orderBy('libelle', 'asc')->get() as $style)
                                            <label class="tags-item">
                                                <input name="filtre_style[]" required type="checkbox"
                                                    value="{{ $style->libelle }}">
                                                <span>{{ $style->libelle }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    <small class="pl-1">
                                        <i>
                                            Sélectionnez parmi les styles existants
                                        </i>
                                    </small>
                                </div>
                                <div class="form-roup mt-3 col-sm-12">

                                    <div class="">
                                        <label class="mt-1 mb-1"><strong>Type : </label>
                                    </div>
                                    <div class="col-sm-4">
                                        <select class="form-control" name="filtre_type">
                                            <option value="">Tous les types</option>
                                            <option value="Résidentiel">Résidentiel</option>
                                            <option value="Commercial">Commercial</option>
                                        </select>
                                    </div>

                                </div>
                            </div>
                            <div class="row bg-light mt-5 p-3">
                                <h5>SEO</h5>
                                <div class="form-roup mt-3 col-sm-12">
                                    <label class="mt-1 mb-1">
                                        <strong>Mot clé :</strong>
                                    </label>
                                    <textarea class="form-control" rows="1" name="key_words" id="key_words"></textarea>
                                    <small class="pl-1">
                                        <i>
                                            Donner une liste de mots clés.
                                        </i>
                                    </small>
                                </div>
                                <div class="form-roup mt-3 col-sm-12">
                                    <label class="mt-1 mb-1">
                                        <strong>H1 :</strong>
                                        <span id="counter-h1" class="tag">0</span>
                                    </label>
                                    <textarea class="form-control" rows="1" name="meta_h1_projet" id="meta_h1_projet"></textarea>
                                    <small class="pl-1">
                                        <i>
                                            Aménagement (piece) (style_1) (style_2) - (id)
                                        </i>
                                    </small>
                                </div>
                                <div class="form-roup mt-3 col-sm-12">
                                    <label class="mt-1 mb-1"><strong>Meta title :</strong>
                                        <span id="counter-title" class="tag">0</span>
                                    </label>
                                    <strong> (63)</strong>
                                    <textarea class="form-control" rows="1" name="meta_title_projet" id="meta_title_projet"></textarea>
                                    <small class="pl-1">
                                        <i>
                                            Aménagement (piece) (style_1) (style_2) - (id) | Pipcke
                                        </i>
                                    </small>
                                </div>
                                <div class="form-roup mt-3 col-sm-12">
                                    <label class="mt-1 mb-1"><strong>Meta description :</strong>
                                        <span id="counter-desc" class="tag">0</span>
                                    </label>
                                    <strong> (156)</strong>
                                    <textarea class="form-control" rows="2" name="meta_desc_projet" id="meta_desc_projet"></textarea>
                                    <small class="pl-1">
                                        <i>
                                            Découvrez notre réalisation d’aménagement (piece) (style_1) (style_2) et lancez
                                            votre projet de décoration avec nos designers.
                                        </i>
                                    </small>
                                </div>
                            </div>

                            <div class="row panel element-box">
                                <div class="col-sm-8">
                                    <label class="mb-3"><strong> Plan </strong></label>
                                    <div class="panel-body">
                                        @if (isset($projet->brief))
                                            @if (!$projet->brief->plans)
                                                <i class="mt-2 mb-2 d-block">Aucune photo téléchargée par le client</i>
                                            @else
                                                <div class="row gallery_visuels">
                                                    <ul>
                                                        @foreach ($projet->brief->plans ?? [] as $photo)
                                                            @php
                                                                $extension = pathinfo(asset($photo))['extension'];
                                                            @endphp
                                                            @if ($extension == 'pdf')
                                                                <li style="position: relative;">
                                                                    <a href="{{ asset($photo) }}" target="_blank"
                                                                        style="float:none;">
                                                                        <div
                                                                            style="width:250px !important;height: 170px !important;background:no-repeat 50% 50% url(data:image/png;base64,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); background-size: contain;">
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                            @else
                                                                <li style="position: relative;">
                                                                    <a href="{{ asset($photo) }}" target="_blank"
                                                                        style="float:none;">
                                                                        <img src="{{ asset($photo) }}" alt="">
                                                                    </a>
                                                                </li>
                                                            @endif
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <div class="form-group">
                                                <label class="mb-3"><strong>Pièce</strong></label>
                                                <input class="form-control" name="piece_projet"
                                                    value="{{ $projet->espace }}" type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <div class="form-group">
                                                <label class="mb-3"><strong> Superficie </strong></label>
                                                <input class="form-control" placeholder="en m²" name="superficie"
                                                    type="number" min="1">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <div class="form-group">
                                                <label class="mb-3"><strong> Budget :
                                                        {{ $projet->brief->budgets_q10 }}</strong></label>
                                                <input class="form-control" placeholder="Estimation en €" name="budget"
                                                    type="number" min="1">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <div class="form-group">
                                                <label class="mb-3"><strong> Styles du client </strong></label>

                                                <select class="form-control" name="style_1">
                                                    @foreach (\App\Models\StyleDeco::orderBy('libelle', 'asc')->get() as $style)
                                                        <option value="{{ $style->libelle }}"
                                                            {{ $style->libelle == $style_1 ? 'selected' : '' }}>
                                                            {{ $style->libelle }}</option>
                                                    @endforeach
                                                </select>
                                                <br>

                                                <select class="form-control" name="style_2">
                                                    @foreach (\App\Models\StyleDeco::orderBy('libelle', 'asc')->get() as $style)
                                                        <option value="{{ $style->libelle }}"
                                                            {{ $style->libelle == $style_2 ? 'selected' : '' }}>
                                                            {{ $style->libelle }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <br><strong>Designers :</strong><br>
                                            @foreach ($projet->designers as $designer)
                                                {{ $designer->designer->prenom }} {{ $designer->designer->nom }}<br>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row panel element-box">
                                @php
                                    $proposition =
                                        $projet->designers
                                            ->where('designer_id', $projet->designer_retenue->designer->id)
                                            ->first()->proposition ?? null;
                                    $note = strip_tags($proposition->note);
                                @endphp
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="mb-3"><strong>Note designer </strong></label>
                                        @if ($note)
                                            <textarea class="form-control" readOnly="" rows="6">{!! $note !!}</textarea>
                                        @else
                                            <input class="form-control" readOnly=""
                                                value="Aucune note de designer disponible" type="text">
                                        @endif
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="mb-3"><strong>Description du projet </strong></label>
                                        <textarea class="summernote" name="desc_projet" rows="6" required></textarea>
                                        {{-- <textarea class="form-control" name="desc_projet" rows="4"
                                            placeholder="Décrire le projet en quelques mots..."></textarea> --}}
                                    </div>
                                </div>
                            </div>
                            <div class="row panel element-box">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label class="mb-3"><strong>Besoin client</strong></label>
                                        <textarea class="form-control" readOnly="" rows="4">{{ $projet->brief->projet_q9 }}</textarea>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <textarea class="summernote" name="besoin_client" rows="6" required></textarea>
                                        {{-- <textarea class="form-control" name="besoin_client" rows="4"></textarea> --}}
                                    </div>
                                </div>
                            </div>

                            <div class="row panel element-box">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="mb-3"><strong>Designer retenu</strong></label>
                                        @if ($projet->designer_retenue)
                                            <input name="designer_retenu"
                                                value="{{ $projet->designer_retenue->designer->id }}" type="hidden">
                                            <input class="form-control" readOnly=""
                                                value="{{ $projet->designer_retenue->designer->prenom }} {{ $projet->designer_retenue->designer->nom }}"
                                                type="text">
                                        @endif
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="mb-3"><strong> Type </strong></label>
                                        <input class="form-control" readOnly=""
                                            value="{{ $projet->designer_retenue->designer->profile->type }}"
                                            type="text">
                                    </div>
                                </div>
                                <div class="col-sm-12 panel form-group">
                                    <label class="mb-3"><strong>Designer en quelques mots</strong></label>
                                    @php
                                        $style_designer = strip_tags(
                                            $projet->designer_retenue->designer->profile->style,
                                        );
                                    @endphp
                                    <textarea class="form-control" readOnly="" rows="4">{!! $style_designer !!}</textarea>
                                </div>

                            </div>

                            <div class="row panel element-box">
                                @php
                                    $conceptions =
                                        $projet->designers->where('designer_id', auth()->id())->first()->conceptions ??
                                        [];
                                @endphp
                                <label class="mb-3"><strong>Plans designer</strong></label>
                                <div class="row w-100 panel element-box">
                                    <select class="form-control col-sm-4" name="plan_choisi">
                                        <option value="">Choisir un plan</option>
                                        @foreach ($projet->conceptions as $key => $conception)
                                            $@php
                                                $filename = basename($conception->plan);
                                            @endphp
                                            <option value="{{ $conception->plan }}">
                                                Plan {{ $key + 1 }} - {{ $filename }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="row w-100 panel element-box">
                                    @foreach ($projet->conceptions as $key => $conception)
                                        <div class="col-sm-4" style="padding:20px; background:#d3d3d3a3">
                                            <label class="mb-3"><strong>Plan {{ $key + 1 }}</strong></label>
                                            <a href="{{ asset($conception->plan) }}" target="_blank">
                                                <div class="photo"
                                                    style="margin:auto;height:445px !important;width: 100% !important;background-image:url({{ asset($conception->plan) }});background-size: contain;background-repeat: no-repeat;background-position: center;">
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="row panel element-box">
                                <label class="mb-3"><strong>Photos client</strong></label>
                                @if ($projet->brief)
                                    @if (!$projet->brief->espaces)
                                        <i class="mt-2 mb-2 d-block">Aucune photo téléchargée</i>
                                    @else
                                        <div class="row w-100 panel element-box">
                                            <div class="btn reset_btn" id="reset_client_init">{!! lang('Réinitialiser') !!}
                                            </div>
                                        </div>
                                        <div class="gallery_visuels">
                                            <ul class="reorder_ul reorder-photos-list" id="sortable_client">
                                                                                            </ul>

                                        </div>
                            </div>
                    @endif
                    @endif
                </div>
                <div class="row panel element-box">
                    <div class="form-group">
                        <label><strong>Photo de couverture</strong></label>
                        <input class="form-control" name="couverture" type="number" min=1>
                    </div>
                </div>

                <div class="row panel element-box">
                    <div class="form-group">
                        <label><strong>Grille de correspondance</strong></label>
                        <input type="number" id="grid_table" name="grid_table" style="display: none">

                        <div class=" row panel element-box">
                            <div style="padding-right: 10px;padding-top: 12px;">
                                <p><strong>Avant : </strong></p>
                                <p><strong>Après : </strong></p>
                            </div>
                            <div class="div-table">
                                <div class="div-table-row">
                                    <div class="div-table-head" id="div-table-btn">
                                        <div id="addColumn" class="btn btn-sm btn_rogner"
                                            style="float: left;width : 95px; padding : 0.4em !important">
                                            {!! lang('Ajouter') !!}</div>
                                    </div>
                                    <div class="div-table-head">
                                        <input type="number" min="1" id="photo_cli_0" name="photo_cli_0" />
                                    </div>
                                    <div class="div-table-head">
                                        <input type="number" min="1" id="photo_cli_1" name="photo_cli_1" />
                                    </div>
                                    <div class="div-table-head">
                                        <input type="number" min="1" id="photo_cli_2" name="photo_cli_2" />
                                    </div>
                                </div>
                                <div class="div-table-row">
                                    <div class="div-table-col" id="div-table-btn">
                                        <div id="removeColumn" class="btn btn-sm btn-danger"
                                            style="float: left;width : 95px; padding: 0.4em !important;">
                                            {!! lang('Supprimer') !!}</div>
                                    </div>
                                    <div class="div-table-col">
                                        <input type="number" min="1" id="photo_des_0" name="photo_des_0" />
                                    </div>
                                    <div class="div-table-col">
                                        <input type="number" min="1" id="photo_des_1" name="photo_des_1" />
                                    </div>
                                    <div class="div-table-col">
                                        <input type="number" min="1" id="photo_des_2" name="photo_des_2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row panel element-box">
                    <label class="mb-3"><strong>Visuels designer</strong></label>
                    <div class=" row w-100 panel element-box">
                        <div class="btn reset_btn" id="reset_visuel_init">{!! lang('Réinitialiser') !!}</div>
                        <div class="gallery_visuels">
                            <ul class="reorder_ul reorder-photos-list-visuel" id="sortable_visuel">