@extends('layouts.super-designer')
@php
    $page_title = 'Détails projet';
    $state = 0;
@endphp
@section('meta-title', 'Espace super designer')
@section('meta-keywords', '')
@section('meta-description', '')
@section('content')
    @if (!\Session::has('side-menu'))
        @php \Session::put('side-menu',1); @endphp
    @endif
    @if (\Session::has('sent_proposition'))
    @endif
    @if (\Session::has('saved_proposition'))
    @endif
    @if (\Session::has('sent_proposition'))
        @php
            $state = 1;
            \Session::forget('sent_proposition');
        @endphp
    @elseif (\Session::has('saved_proposition'))
        @php
            $state = 2;
            \Session::forget('saved_proposition');
        @endphp
    @elseif (\Session::has('sent_conception'))
        @php
            $state = 3;
            \Session::forget('sent_conception');
        @endphp
    @elseif (\Session::has('update_conception'))
        @php
            $state = 4;
            \Session::forget('update_conception');
        @endphp
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="tabs tabs-nav-justified mt-10 details-projet">
                <ul class="nav tabs-nav" role="tablist" id="ulNavDesigner" style="margin-bottom: 15px !important">
                    <li role="presentation">
                        <a href="#tab-1" data-toggle="tab">{!! lang('Quiz') !!}</a>
                    </li>
                    <li role="presentation">
                        <a href="#tab-2" data-toggle="tab">{!! lang('Brief') !!}</a>
                    </li>
                    <li role="presentation" class="{{ !$projet->esquisse ? 'disabled' : '' }}">
                        <a href="#tab-3" {{ $projet->esquisse ? 'data-toggle=tab' : '' }}>{!! lang("Concept d'idées") !!}</a>
                    </li>
                    <li role="presentation" class="{{ $projet->designer_retenue ? '' : 'disabled' }}">
                        <a href="#tab-4"
                            {{ $projet->conception && $projet->designer_retenue ? 'data-toggle=tab' : '' }}>{!! lang('Conception') !!}</a>
                    </li>
                    <li role="presentation"
                        class="{{ ($projet->migrated && $projet->forfait == 'essentiel') || $projet->designer_retenue ? '' : 'disabled' }}">
                        <a href="#tab-5"
                            {{ ($projet->migrated && $projet->forfait == 'essentiel') || ($projet->conception && $projet->designer_retenue) ? 'data-toggle=tab' : '' }}>{!! lang('Shopping List') !!}
                        </a>
                    </li>
                </ul>
                <div class="pb-10">
                    @php
                        $achats = \App\Models\Achat::whereProjetId($projet->id)
                            ->whereStatus('Payé')
                            ->get();
                        $butReduction = false;
                        foreach ($achats as $k => $achat) {
                            foreach ($achat->lignes as $j => $ligne) {
                                if ($ligne->code_carte) {
                                    $carte = \App\Models\Carte::whereCode($ligne->code_carte)->first();
                                    if ($carte && $carte->special == true) {
                                        $butReduction = true;
                                    }
                                }
                            }
                        }
                    @endphp
                    <div>
                        <b class="font-size-18">{{ $projet->nom ?? ($projet->espace ?? '') }} : <span
                                class="text-capitalize">{{ $projet->forfait_conception ?? $projet->forfait }}</span>
                            @if ($butReduction == true)
                                : <span class="text-capitalize" style="color: red;"> BUT</span>
                            @endif
                        </b>
                    </div>
                    <div>
                        <b class="font-size-14 ">Gamme de prix : </b> <b class="font-size-14"
                            id="gamme">{{ $projet->gammes ?? 'NC' }}</b>
                        <div style="padding-left: 10px; cursor: pointer;display: inline-block;" id="edit_gamme"
                            data-user={{ auth()->user()->type }}>
                            <i class="fa fa-pencil"></i>
                        </div>
                    </div>
                </div>
                <div class="tabs-content">
                    @include('super-designer.partials.projets_details_quiz')
                    @include('super-designer.partials.projets_details_brief')
                    @include('super-designer.partials.projets_details_esquisse')
                    @include('super-designer.partials.projets_details_conception')
                    @include('super-designer.partials.projets_details_shopping')
                </div>
            </div>

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

        .taggd__button {
            background-color: red
        }

        .ui-selectmenu-button {
            display: none;
        }

        .swal2-styled {
            width: 110px !important;
        }
    </style>
    <link rel="stylesheet" href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/taggd/4.0.0/taggd.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css"
        integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
@endsection
@section('script')
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"
        integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
    <script src="{{ asset('js/summernote-lite.js') }}"></script>
    <script src="{{ asset('js/summernote-fr-FR.min.js') }}"></script>
    <script type="text/javascript" src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>
    <script src="{{ asset('js/taggd.js') }}"></script>
    <script src="https://js.pusher.com/7.2/pusher.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            scrollChatContentBox = function(element) {
                var scroll = $(element[0]);
                scroll.animate({
                    scrollTop: scroll.prop("scrollHeight")
                }, 250);
            }

            $(window).scroll(function() {
                var aTop = $('#ulNavDesigner').height();
                if ($(this).scrollTop() > aTop) {
                    console.log('here > atop');
                    $('.internal-chat-esquisse-admin').animate({
                        'top': '80px'
                    }, 75, 'linear');
                } else {
                    console.log('here < atop');
                    $('.internal-chat-esquisse-admin').animate({
                        'top': '210px'
                    }, 75, 'linear');
                }
            });

            $('#fournisseur_scrapper').selectize({
                sortField: 'text'
            });
            $('#produit_four').selectize({
                sortField: 'text'
            });
            // $('#produit_fournisseur_modal').selectize({
            //     sortField: 'text'
            // });

            var projectURL = window.location.href.split("/");
            var projectID = projectURL[projectURL.length - 1]



            var pusher = new Pusher('1f75887b4f7685a2d4a0', {
                cluster: 'eu'
            });
            var channel = pusher.subscribe('chat' + projectID);
            channel.bind('message', function(data) {
                var appendURL =
                    "{{ route('chat.append-message', ['projetId' => ':p_id', 'message_id' => ':m_id']) }}";
                appendURL = appendURL.replace(':p_id', data.projectId);
                appendURL = appendURL.replace(':m_id', data.messageId);
                $.ajax({
                        url: appendURL,
                        method: 'POST',
                        cache: false,
                        contentType: false,
                        processData: false,
                        beforeSend: function() {
                            $('.loader').fadeIn();
                        }
                    })
                    .success((data) => {
                        $('.scroll-chat').append(data);
                        $('.scroll-chat_shopping_des').append(data);
                        scrollChatContentBox($('.scroll-chat'));
                        scrollChatContentBox($('.scroll-chat_shopping_des'));
                        $('.loader').fadeOut();
                    })
                    .error(function(error) {
                        $('.loader').fadeOut();
                        console.log("Error chat Designer : ", error);
                    });
                event.preventDefault();
                return false;
            });
            var state = {{ json_encode($state) }};
            // console.log("test : ",$.session.get('saved_proposition'));
            if (state == 1) {
                Swal.fire({
                    title: 'Proposition envoyée avec succès',
                    type: 'success',
                    confirmButtonColor: '#3085d6',
                    allowOutsideClick: false,
                    confirmButtonText: 'Confirmer',
                });
            } else if (state == 2) {
                Swal.fire({
                    title: 'Proposition enregistrée avec succès',
                    type: 'success',
                    confirmButtonColor: '#3085d6',
                    allowOutsideClick: false,
                    confirmButtonText: 'Confirmer',
                });
            } else if (state == 3) {
                Swal.fire({
                    title: 'Conception envoyée avec succès',
                    type: 'success',
                    confirmButtonColor: '#3085d6',
                    allowOutsideClick: false,
                    confirmButtonText: 'Confirmer',
                });
            } else if (state == 4) {
                Swal.fire({
                    title: 'Conception mise à jour avec succès',
                    type: 'success',
                    confirmButtonColor: '#3085d6',
                    allowOutsideClick: false,
                    confirmButtonText: 'Confirmer',
                });
            }

            $(window).scroll(function() {
                var aTop = $('#ulNavDesigner').height();
                if ($(this).scrollTop() > aTop) {
                    $('.internal-chat').animate({
                        'top': '80px'
                    }, 75, 'linear');
                } else {
                    $('.internal-chat').animate({
                        'top': '145px'
                    }, 75, 'linear');
                }
            });
            $('.toogle-left-menu').delay(75).toggleClass('open');

            var side_menu = $('#side-menu');
            side_menu.animate({
                'margin-left': '-' + side_menu.css('width')
            }).addClass('out');
            $.ajax({
                url: '/api/side-menu/0'
            });

            let showCommentaire = function(text) {
                $('.commentaire_concetpion').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
            });

            $('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');
                });
            });

            $('#ui-id-1-button').addClass('d-none');

            function setTags() {
                var liv = 0;
                $('.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(),
                            })
                        );
                    }

                });
                $('.commentaire_concetpion').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;
                    });
                });

                $('.img_livrable').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 = $(el).data('key') + 3;
                            _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_box').each(function(index, el) {
                    $(this).find('.taggd__button').each(function(i, el) {
                        $(this).html(i + 1);
                        $(this).attr('data-message', i + 1);
                        $(this).click(function(event) {
                            event.preventDefault()
                        });
                        liv = i + 1;
                    });
                    $('.livrable-box').each(function(index, el) {
                        $(this).find('.taggd__button').each(function(i, el) {
                            $(this).html(liv + i + 1);
                            $(this).attr('data-message', liv + i + 1);
                        });
                    });
                });

                $('.esquisse-box').each(function(index, el) {
                    $(this).find('.taggd__button').each(function(i, el) {
                        $(this).html(i + 1);
                        $(this).attr('data-message', i + 1);
                    });
                });

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

            }
            var data = [];
            setTags();



            $(".js-range-slider").ionRangeSlider({
                max_postfix: " +",
                step: 10
            });

            $(document).on('click', '#edit_gamme', function(event) {
                event.stopPropagation();
                event.preventDefault();
                Swal.fire({
                    text: "Choisissez la gamme de prix",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    input: 'text',
                    inputPlaceholder: $('#gamme').html(),
                }).then((result) => {
                    if (result.value) {
                        let data = {
                            gammes: result.value
                        };
                        if ($('#edit_gamme').data("user") == 'admin') {
                            url = '{{ route('admin.projets.gammes', $projet->id) }}'
                        } else {
                            url = '{{ route('super-designer.projets.gammes', $projet->id) }}'
                        }
                        $.ajax({
                                url: url,
                                method: 'POST',
                                cache: false,
                                data: data,
                                beforeSend: function() {
                                    $('.loader').fadeIn();
                                }
                            })
                            .success((data) => {
                                $('#gamme').html(data.gamme);
                                $('.loader').fadeOut();
                            })
                            .error(function(error) {
                                $('.loader').fadeOut();
                            });
                    }
                });
            });
        });
    </script>
@endsection