@extends('layouts.designer') 
@php $page_title = 'Mes projets'; @endphp 
@section('meta-title','Espace designers') 
@section('meta-keywords','') 
@section('meta-description','') 
@section('content')
<div class="row">
    <div class="col-md-12">
        <b class="font-size-20">{{ $projet->espace ?? '' }} : <span class="text-capitalize">{{ $projet->forfait }}</span></b>
         
   

        <div class="tabs tabs-nav-justified mt-30">
             
            <div class="tabs-content">

  
                <div id="tab-3" class="esquisse">
                    
                    <div class="toggle-chat no-puce" style="background-image: url('{{asset( $projet->user->photo ?? $projet->user->picture ) }}'); background-size: cover"></div>

                    @if($proposition)
                        @include('front.designer.partials.esquisse.show', ['showButtons'=>0])
                    @endif


                </div>

 

            </div>
        </div>
    </div>
</div>
@endsection 
@section('style')
<style>
.section_100vh {
    min-height: auto;
}

.taggd__button {
    background-color: red
}
</style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/taggd/4.0.0/taggd.css"> 
    
@endsection 
@section('script')

<script src="{{ asset('js/taggd.js') }}"></script>
<script>
// jQuery(document).ready(function($) {
    

  
//     let showCommentaire = function(text) {
//         $('.commentaire').removeClass('selected');
//         $('[data-message="' + text + '"]').addClass('selected');
//     }
//     let left, top, img;

//     var options = {
//         show: 'click'
//     };
//     var data1 = [];
//     var data2 = [];
//     $('.summernote').summernote({
//         name: 'contenu',
//         placeholder: '',
//         tabsize: 2,
//         lang: 'fr-FR',
//         height: 200
//     });

     
//     $('.commentaire').each(function(index, el) {
//         if ($(el).data('img') == 1) {
//             data1.push(
//                 Taggd.Tag.createFromObject({
//                     position: {
//                         x: $(el).data('x'),
//                         y: $(el).data('y')
//                     },
//                     text: $(el).find('p').text(),
//                 })
//             );
//         }
//         if ($(el).data('img') == 2) {
//             data2.push(
//                 Taggd.Tag.createFromObject({
//                     position: {
//                         x: $(el).data('x'),
//                         y: $(el).data('y')
//                     },
//                     text: $(el).find('p').text(),
//                 })
//             );
//         }
//     });
//     if (document.getElementById('img1')) {
//         var taggd1 = new Taggd(document.getElementById('img1'), options, data1);
//         taggd1.on('taggd.tag.show', (tags, tag) => {
//             showCommentaire(tag.text);
//             return false;
//         });
//     }
//     if (document.getElementById('img2')) {
//         var taggd2 = new Taggd(document.getElementById('img2'), options, data2);
//         taggd2.on('taggd.tag.show', (tags, tag) => {
//             showCommentaire(tag.text);
//             return false;
//         });
//     }
    


// });

jQuery(document).ready(function($) {
    let showCommentaire = function(text) {
        $('.commentaire').removeClass('selected');
        $('[data-message="' + text + '"]').addClass('selected');
    }
    let left, top, img;

    var options = {
        show: 'click'
    };
    var data1 = [];
    var data2 = [];

    if($('.summernote').length){
        $('.summernote').summernote({
            name: 'contenu',
            placeholder: '',
            tabsize: 2,
            lang: 'fr-FR',
            height: 200
        });
    }

    $('div.disabled, form.disabled').each(function(index, el) {
       $(this).find('.summernote').each(function(index, el) {
            $(this).summernote('disable');
       });
       $(this).find('.btn').click(function(event) {
           $(this).parents('.disabled').find('.summernote').each(function(index, el) {
                $(this).summernote('enable');
           });
           $(this).parents('.disabled').removeClass('disabled');
       });
    });


    function setTags(){
        console.log('setTags');
            $('.taggd__button').remove();
            $('.taggd').removeClass('taggd');
            var data = [];

            $('.commentaire').each(function(index, el) {

                if( $(el).data('img') && $(el).data('projet_designer_conception_id')){
                        let t_id = 'img_conception_'+ $(el).data('img')+'_'+$(el).data('projet_designer_conception_id') ;

                        if(!data[t_id]){
                            data[t_id] = [];
                        }
                        data[t_id].push(
                            Taggd.Tag.createFromObject({
                                position: { x: $(el).data('x'), y: $(el).data('y') },
                                text: $(el).find('p').text(),
                            })
                        );
                }


                if( $(el).data('img') && $(el).data('projet_designer_proposition_id')){

                        let t_id = 'img_esquisse_'+ $(el).data('img')+'_'+$(el).data('projet_designer_proposition_id') ;

                        if(!data[t_id]){
                            data[t_id] = [];
                        }
                        data[t_id].push(
                            Taggd.Tag.createFromObject({
                                position: { x: $(el).data('x'), y: $(el).data('y') },
                                text: $(el).find('p').text(),
                            })
                        );
                }

            });

            $('.img_plan').each(function(index, el) {
                console.log( $(el).attr('id'), data[$(el).attr('id')] );
                var taggd = new Taggd(document.getElementById( $(el).attr('id') ), options, data[$(el).attr('id')]);
                if(!$(el).hasClass('disabled_taggd')){
                    taggd.enableEditorMode();
                    taggd.on('taggd.tag.add', (tags,tag) => {
                        left = parseFloat( $(tag.wrapperElement).css('left')) / 100 ;
                        top  = parseFloat($(tag.wrapperElement).css('top')) / 100 ;
                        img=1;
                        _tag = tag;

                        conception=$(this).data('conception');

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

            $('.img_visuel').each(function(index, el) {
                var taggd = new Taggd(document.getElementById( $(el).attr('id') ), options, data[$(el).attr('id')] );
                if(!$(el).hasClass('disabled_taggd')){
                    taggd.enableEditorMode();
                    taggd.on('taggd.tag.add', (tags,tag) => {
                        left =  parseFloat( $(tag.wrapperElement).css('left')) / 100 ;
                        top = parseFloat($(tag.wrapperElement).css('top')) / 100 ;
                        img=2;
                        _tag = tag;

                        conception=$(this).data('conception');

                        $('[name=commentaire]').val('');
                        $('#modal-commentaire').modal('show');
                    });
                }
                taggd.on('taggd.tag.show', (tags,tag) => {
                    showCommentaire( tag.text );
                    return false;
                });
                taggd.on('taggd.tag.hide', (tags,tag) => {
                    console.log('hide',tag.text);
                    return false;
                });
            });
            $('.taggd').each(function(index, el) {
                $('.taggd__button').each(function(index, el) {
                    $(this).html(index+1);
                    $(this).attr('data-message',index+1);
                });
            });

            $('.loader').fadeOut();  

        }
        var data = [];
        setTags();


    $('.taggd_box').each(function(index, el) {    
        $(this).find('.taggd__button').each(function(index, el) {
            $(this).html(index+1);
            $(this).attr('data-message',index+1);
            $(this).click(function(event) {
                event.preventDefault()
            });
        });
    });
    $(".js-range-slider").ionRangeSlider({
        max_postfix: " +",
        step: 10
    });

});
</script>
@endsection