@extends('layouts.app')

@section('content')
<div id="project" v-if="project" data-project-key="{{$project->key}}">


    <h1 class="title m-b-md text-center">
        Projet @{{ project.name }}
    </h1>

    <div class="container project-container">
        <div :class="['global-background', {active: displayItem}]" v-on:click="removeCurrentDisplayed">

        </div>
        <div class="row" v-if="project.config">

            <div class="col-md-4 category-container" v-for="(categ, categIndex) in project.config.categs">
                <h2>@{{categ.name}}</h2>
                <ul>
                    <li  v-for="item in categ.items" :class="['project-item-line','type-'+ (item.type ? item.type : 'default'), {active: displayItem === item}]">
                        <div class="display-info" v-if="item.data && item.data.helpText">
                            <span class="fa fa-question-circle"></span>
                            <div class="info">
                                <span v-html="item.data.helpText"> </span>
                                <ul v-if="item.data.helpLinks">
                                    <li v-for="link in item.data.helpLinks"><a class="btn btn-primary" target="_blank" :href="link.link">@{{link.name}}</a> </li>
                                </ul>
                            </div>
                        </div>


                        @auth
                        <input v-on:change="event => validCheckbox(item, event)"  type="checkbox" class="project-item-valid" v-model="item.projectItem.valid"/>
                        <label v-on:click="item.type !== 'checkbox' && item.type !== '' ? displayItemFunc(item):''" class="item-label" :title="item.name">
                            @{{ item.name }}
                        </label>
                        @else

                            <input type="checkbox" disabled class="project-item-valid" v-model="item.projectItem.valid"/>
                            <label v-on:click="item.type === 'checkbox' && item.type === '' && !item.projectItem.valid ? displayItemFunc(item): ''" class="item-label" :title="item.name">
                                @{{ item.name }}
                            </label>
                        @endauth
                            <span class="far fa-comment" v-if="item.comments.length || item.type === 'checkbox' || item.type === ''" v-on:click="displayItemFunc(item)">@{{ item.comments.length ? item.comments.length : ''}}</span>

                            <div class="editable-value" v-if="displayItem === item">
                                <span v-if="item.type === 'text' || item.type === 'link' || item.type === 'private_link' || item.type === 'color'">
                                    <input type="text" class="project-item-value" v-model="item.projectItem.value" />

                                </span>
                                <span v-if="item.type === 'textarea'">
                                    <textarea type="text" class="project-item-value" v-model="item.projectItem.value"></textarea>

                                </span>
                                <span v-else-if="item.type === 'image' || item.type === 'file'">
                                    <input type="file" v-on:change="uploadFile(item, $event.target.name, $event.target.files, 0)" />
                                </span>
                                <span v-else-if="item.type === 'image_multiple'">
                                    <div class="multiple-item" v-for="(curentValueItem, index) in currentValueArray">
                                        <a :href="'/storage/'+curentValueItem" target="_blank"> <img style="max-width: 40px; max-height: 40px;" :src="'/storage/'+curentValueItem" /></a>
                                        <input type="file" v-on:change="uploadFile(item,  $event.target.name, $event.target.files, index)" />
                                        <div v-on:click="removeFromArray(currentValueArray,curentValueItem, index)" class="btn btn-primary">-</div>
                                    </div>
                                    <span class="btn-add-multiple btn btn-secondary" v-on:click="currentValueArray.push({val: ''})">+</span>

                                </span>
                                <span v-else-if="item.type === 'text_multiple'">
                                    <div class="multiple-item" v-for="(curentValueItem, index) in currentValueArray">
                                        <input type="text"   v-model="curentValueItem.val"/>
                                        <div v-on:click="removeFromArray(currentValueArray,curentValueItem, index)" class="btn btn-primary">-</div>
                                    </div>
                                    <span class="btn-add-multiple btn btn-secondary" v-on:click="currentValueArray.push({val: ''})">+</span>
                                </span>
                                <span v-else-if="item.type === 'select'">
                                    <select v-model="item.projectItem.value">
                                        <option v-for="val in item.data.values">@{{val}}</option>
                                    </select>
                                </span>
                                <span v-else-if="item.type === 'check_list'">
                                    <label class="check_list-elem-checkbox multiple-item" v-for="val in item.data.values"><input type="checkbox" v-model="currentValueArray" :value="val"/> @{{ val }}</label>
                                </span>

                            </div>
                            <div class="showable-value" v-if="displayItem !== item && item.type !== 'checkbox' && item.type !== ''">
                                <span v-if="item.type === 'text'">
                                     @{{ item.projectItem.value }}
                                </span>
                                <span v-if="item.type === 'textarea'" >
                                    <p v-html="item.projectItem.value">

                                    </p>

                                </span>
                                <span v-else-if="item.type === 'text_multiple' ">

                                    <ul v-if="item.projectItem.value">
                                         <li v-for="val in item.projectItem.value.split('||')">@{{val}} </li>
                                    </ul>
                                </span>
                                 <span v-else-if="item.type === 'link' || item.type === 'private_link'">
                                     <a :href="item.projectItem.value" target="_blank">Lien</a>
                                </span>
                                <span v-else-if="item.type === 'color'">
                                     <span class="color-block" v-bind:style="{ backgroundColor: item.projectItem.value}">&nbsp;</span>
                                </span>
                                <span v-else-if="item.type === 'image' && item.projectItem.value ">
                                        <a :href="'/storage/'+item.projectItem.value" target="_blank"> <img style="max-width: 40px; max-height: 40px;" :src="'/storage/'+item.projectItem.value" /></a>
                                </span>
                                <span v-else-if="item.type === 'image_multiple'">
                                    <ul v-if="item.projectItem.value">
                                         <li v-for="val in item.projectItem.value.split('||')">
                                            <a :href="'/storage/'+val" target="_blank"> <img style="max-width: 40px; max-height: 40px;" :src="'/storage/'+val" /></a>
                                         </li>
                                    </ul>
                                </span>
                                <span v-else-if="item.type === 'select' ">
                                    <span v-if="item.projectItem.value"> :</span> @{{item.projectItem.value}}</span>
                                </span>
                                <span v-else-if="item.type === 'check_list' ">

                                    <ul v-if="item.projectItem.value">
                                         <li v-for="val in item.projectItem.value.split('||')">@{{val}} </li>
                                    </ul>
                                </span>
                                <span v-else-if="item.type === 'file' && item.projectItem.value ">
                                        <a :href="'/storage/'+item.projectItem.value" target="_blank">Fichier</a>
                                </span>


                            </div>
                        <div class="action">
                            @auth
                                <span v-if="item.type !== 'checkbox' && item.type !== ''" class="fa fa-edit project-button" v-on:click="displayItemFunc(item)"></span>
                                <span  v-if="item === displayItem" class="project-button bordered" v-on:click="updateItem(item)">✓</span>
                            @else
                                <span v-if="!item.projectItem.valid && item.type !== 'checkbox' && item.type !== ''" class="fa fa-edit project-button" v-on:click="displayItemFunc(item)"></span>
                                <span  v-if="item === displayItem && item.type !== 'checkbox' && item.type !== ''" class="project-button bordered" v-on:click="updateItem(item)">✓</span>
                            @endauth

                        </div>
                        <div v-if="displayItem  == item" :class="['item-comment-area', 'comment-column-' + (categIndex +1) %3]">


                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-12">
                                        Commentaires
                                    </div>
                                    <div class="comment-list-container col-md-12">
                                        <div class="container-fluid">
                                            <div class="item-comment-line row" v-for="comment in displayItem.comments">
                                                <div class="col-md-12">
                                                    @{{comment.text}}

                                                </div>
                                                <div class="comment-date col-md-6 text-left">@{{comment.dateFormated}}</div>
                                                <div class="comment-author col-md-6 text-right">@{{ comment.user ?? 'Visiteur' }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="add-comment-line col-md-12">
                                        <div>
                                            <textarea v-model="newComment"></textarea>
                                            <button class="btn btn-primary" v-on:click="sendComment">Envoyer le commentaire</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
            {{-- @foreach($project->config->categs as $configCateg)
                <div class="col-md-4">
                    {{$configCateg->name}} : {{$configCateg->totalWeight}}
                    <ul>
                        @foreach($configCateg->items as $item)
                            <li class="project-item" data-item-id="{{$item->id}}" data-project-id="{{$project->id}}">
                                @php $projectConfigItem = $project->getConfigItem($item); @endphp
                                @auth
                                <input type="checkbox" class="project-item-valid"  name="configItem[{{$item->id}}][valid]" {{$projectConfigItem && $projectConfigItem->valid ? 'checked':''}}/>
                                @endauth
                                {{$item->name}} ({{$item->weight}}):

                                @if(!$projectConfigItem || !$projectConfigItem->valid)
                                    <input type="text" class="project-item-value" name="configItem[{{$item->id}}][value]" value="{{$projectConfigItem?$projectConfigItem->value:''}}"/>
                                @else
                                    <input type="hidden" class="project-item-value" name="configItem[{{$item->id}}][value]" value="{{$projectConfigItem?$projectConfigItem->value:''}}"/>
                                    {{$projectConfigItem->value}}
                                @endif
                                <button>✓</button>
                            </li>
                        @endforeach
                    </ul>
                </div>


            @endforeach --}}

        </div>
    </div>
</div>
@endsection