@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.general.home'))

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2><a href="{{url('/project/' . $file->box->project->name . '/show')}}" style="text-decoration: none;">{{$file->box->project->label}}</a> :: <a href="{{url('/project/' . $file->box->project->name . '/show#' . $file->box->name)}}" style="text-decoration: none;">{{$file->box->label}}</a></h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="padding: 0 0 10px 0px">
                <div id="loading" style="position: fixed;top: 50%;left: 50%;margin-top: -50px;margin-left: -100px;"><img src="{{ URL::asset('img/loading.svg') }}" alt="загрузка" title="загрузка"></div>
                <div style="height: 800px;border: 1px solid lightgray;border-radius: 10px;">
                    <div style="position: absolute; top: 10px; right: 10px"><img src="{{ URL::asset('img/camera.svg') }}" style="cursor: pointer; width: 40px; opacity: 0.3; border: 1px solid gray; border-radius: 5px;padding: 5px" alt="скриншот" title="скриншот" onclick="screenshot()"></div>
                    <canvas id="viewport" style="width: 100%; height: 100%"></canvas>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="margin-bottom: 20px;">
                @foreach($comments as $comment)
                    <div class="row" style="padding-bottom: 5px">
                        <div class="col-md-12" style="border: 1px solid lightgray;border-radius: 5px;">
                            <div class="row" style="color: gray;">
                                <div class="col-sm-4">
                                    {{$comment->created_at}}
                                </div>
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4" style="text-align: right;">
                                    {{$comment->getUser()->last_name}} {{$comment->getUser()->first_name}}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    {{$comment->message}}
                                </div>
                            </div>
                            @if (count($comment->attachments) > 0)
                                <div class="row">
                                    @foreach($comment->attachments as $attachment)
                                    <div class="col-sm-3">
                                        <a class='fancybox' rel='group' href='{{$attachment->path}}'><img src="{{$attachment->path}}" style="width: 100%"></a>
                                    </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div id="screenshot" class="editor" style="display: none;padding-bottom: 20px">
            <div class="row">
                <div class="col-md-12" style="padding: 0;">
                    Редактор:
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="padding: 0;">
                    <div id="wrapper">
                        <div id="conatiner"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="padding: 0;text-align: center;color: lightgray;font-style: italic">
                    Нажимте сохранить <i class="ptro-icon ptro-icon-save" style="font-size: 15px"></i> или сброс <i class="ptro-icon ptro-icon-close" style="font-size: 15px"></i> чтобы вернуться к составлению комментария
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12" style="padding: 0;">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div><br />
                @endif
                <form action="{{url('/project/' . $file->box->project->name . '/box/' . $file->box->name . '/file/' . $file->name . '/comment')}}" method="post" enctype="multipart/form-data">
                    <input type="hidden" value="{{csrf_token()}}" name="_token" />
                    <div id="message-wrapper" class="form-group not-editor">
                        <label for="message">Сообщение:</label>
                        <textarea id="message" name="message" class="form-control" cols="5" rows="5" required></textarea>
                    </div>
                    <div id="screenshots-wrapper" class="form-group" style="display: none;">
                        <label for="message">Скриншоты:</label>
                        <div class="row attachments">

                        </div>
                    </div>
                    <div class="not-editor" style="text-align: center;padding-bottom: 20px">
                        <input type="submit" class="btn btn-primary" value="Отправить">
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-style-files')
    <link rel="stylesheet" href="{{ URL::asset('css/jquery.fancybox.min.css') }}">
    <style>
        #wrapper {
            height:100%;
            margin:0;
            padding:0;
            background-color: lightgray;
            min-height: 650px;
        }
        #conatiner {
            position: absolute;
            top: 10px;
            bottom: 10px;
            left: 10px;
            right: 10px;
        }
        .attachments>.col-sm-4{
            padding: 0;
        }
        .attachment {
            border: 1px solid gray;
            border-radius: 10px;
            margin: 10px;
            position: relative;
        }
    </style>
@stop

@section('page-js-files')
    <script src="{{ URL::asset('js/claygl.min.js') }}"></script>
    <script src="{{ URL::asset('js/painterro-1.0.30.min.js') }}"></script>
    <script src="{{ URL::asset('js/jquery.min.js') }}"></script>
    <script>
        if (/Edge/.test(navigator.userAgent)) {
            var script = document.createElement('script');
            script.src = '{{ URL::asset('js/encoding.js') }}';
            document.head.appendChild(script);
        }
    </script>
@stop

@section('page-js-script')
    <script>
        var scale = 10;
        var distance = 0.75;
        var tonemapping = false;
        var canvas = document.getElementById('viewport');
        var app = clay.application.create('#viewport', {
            graphic: {
                shadow: true,
                linear: true,
                tonemapping: tonemapping
            },
            init: function (app) {
                // Create camera
                this._camera = app.createCamera([distance * scale, distance * scale, distance * scale], [0, 0, 0]);

                // Create light
                //app.createDirectionalLight([-3, -3, -3], '#fff', 2);
                app.createPointLight([-3 * scale, -3 * scale, -3 * scale], 100, '#fff', 0.25 * scale / 2);
                app.createPointLight([3 * scale, 3 * scale, 3 * scale], 100, '#fff', 0.5 * scale / 2);
                //app.createAmbientLight('#fff', 0.3);
                /*app.createSpotLight([-5 * scale, -5 * scale, -5 * scale], [0, 0, 0], 20 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, 5 * scale, 5 * scale], [0, 0, 0], 100 * scale / 2, '#fff');*/
                /*app.createSpotLight([5 * scale, 5 * scale, 5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, 5 * scale, -5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, -5 * scale, 5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');
                app.createSpotLight([5 * scale, -5 * scale, -5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, 5 * scale, 5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, 5 * scale, -5 * scale], [0, 0, 0], 75 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, -5 * scale, 5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');
                app.createSpotLight([-5 * scale, -5 * scale, -5 * scale], [0, 0, 0], 30 * scale / 2, '#fff');*/

                this._orbitControl = new clay.plugin.OrbitControl({
                    target: this._camera,
                    domElement: app.container,
                    //autoRotate: true
                });

                // Load model. return a load promise to make sure the look will be start after model loaded.
                return app.loadModel('{{ $file->path . '?updated=' . strtotime($file->updated_at) . '&type=.glb'}}').then((function (result) {
                    this.object = result.rootNode;
                    result.rootNode.scale.set(1 * scale, 1 * scale, 1 * scale);
                    result.materials.forEach(function (material) {
                        material.set('roughness', 0.9);
                    });
                    document.getElementById('loading').style.display = "none";
                }).bind(this));
            },

            loop: function (app) {
                this._orbitControl.update(app.frameTime);
            }
        });
    </script>
    <script>
        var painterro;
        function screenshot() {
            jQuery('.editor').show();
            document.getElementById('screenshot').style.display = 'block';
            jQuery('.not-editor').hide();
            if (painterro) {
                painterro.show();
                painterro.clear();
                app.render();
                painterro.show(app.renderer.canvas.toDataURL('image/png'));
            } else {
                painterro = Painterro({
                    hideByEsc: true,
                    saveByEnter: true,
                    // defaultTool: 'arrow',
                    onChange: (e) => {
                        //console.log('onchange e', e)
                    },
                    onUndo: (e) => {
                        console.log('onUndo e', e)
                    },
                    onRedo: (e) => {
                        console.log('onRedo e', e)
                    },
                    id: 'conatiner',
                    //initText: 'Press <strong>Prn Scr</strong>, Ctrl+V to paste a screenshot',
                    changeHandler: function (state) {
                        //console.log('Something drawed: ', state);
                        // localStorage.setItem('painterroImage', this.imageSaver.asDataURL())
                    },
                    onBeforeClose: function (has, done) {
                        console.log('has unsaved: ', has);
                        window.confirmClose = done;
                    },
                    // language: 'ja',
                    availableLineWidths: [1, 2, 4, 8, 16, 64],
                    availableEraserWidths: [1, 2, 4, 8, 16, 64],
                    availableFontSizes: [1, 2, 4, 8, 16, 64],
                    availableArrowLengths: [10, 20, 30, 40, 50, 60],
                    // how_to_paste_actions: ['replace_all'],
                    saveHandler: (saver, done) => {
                        document.getElementById('screenshots-wrapper').style.display = 'block';
                        jQuery('.attachments').append('<div class="col-sm-4"><div class="attachment"><input type="hidden" name="attachments[]" value="' + saver.asDataURL() + '"><img src="' + saver.asDataURL() + '" style="width: 100%"><div style="position: absolute; top: 5px; right: 10px; cursor: pointer; opacity: 0.3;" onclick="jQuery(this).parent().parent().remove();"><img src="{{ URL::asset("img/close.svg") }}" style="width: 10px"></div></div></div>')
                        done(false);
                        painterro.hide();
                        document.getElementById('screenshot').style.display = 'none';
                        jQuery('.not-editor').show();
                        jQuery('html, body').animate({scrollTop: jQuery('#screenshots-wrapper').offset().top}, 500);
                    },
                    //toolbarPosition: 'top',
                    // fixMobilePageReloader: false,
                    defaultTool: 'brush',
                    //hiddenTools: ['line']
                }).show() //;
                app.render();
                painterro.show(app.renderer.canvas.toDataURL('image/png'));
            }
            jQuery('html, body').animate({scrollTop: jQuery('#screenshot').offset().top}, 500);
        }
    </script>
    <script src="{{ URL::asset('js/jquery.fancybox.min.js') }}"></script>
    <script>
        jQuery(document).ready(() => {
            jQuery('.fancybox').fancybox();

            jQuery(document).click(function(event) {
                if (event.target && (event.target.className == 'ptro-icon ptro-icon-close' || (event.target.className == 'ptro-icon-btn ptro-color-control' && event.target.children.length == 1 && event.target.children[0].className == 'ptro-icon ptro-icon-close'))){
                    jQuery('.editor').hide();
                    jQuery('.not-editor').show();
                }
            });

        })
    </script>
@stop