@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