@extends('layouts.master')

@section('scripts')
    {!! Html::script('//code.highcharts.com/4.1.8/highcharts.js') !!}
    {!! Html::script('//code.highcharts.com/4.1.8/modules/exporting.js') !!}
    {!! Html::script('//raw.githubusercontent.com/exupero/saveSvgAsPng/gh-pages/src/saveSvgAsPng.js') !!}
    {!! Html::script('//cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.0/jspdf.debug.js') !!}
    {!! Html::script('jsme/jsme.nocache.js') !!}
    {!! Html::script('js/svg_to_pdf.js') !!}

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        var jme = "{!! $molecule->jmeDisplacement !!}";
        var jsmeApplet;

        $(document).ready(init);

        /**
         * Funcion encargada de cargar el JSME
         */
        function jsmeOnLoad() {

            jsmeApplet = new JSApplet.JSME("jsme_container", "350px", "350px", {
                "options": "depict",
            });
            jsmeApplet.readMolecule(jme);
            @if (isset($atomos))
                jsmeApplet.setAtomBackgroundColors(1, "{{ $atomos }}");
            @endif
        }



        /**
         * Funcion que inicia lo necesario en la carga de la pagina
         */
        function init() {
            html2canvas(document.body, {
                onrendered(canvas) {
                    var link = document.getElementById('download');
                    if (link) {
                        var image = canvas.toDataURL();
                        link.href = image;
                        link.download = 'screenshot.png';
                    }
                }
            });

            /** Para arrastrar la molecula */
            $('#jsme_container').on('mousedown', function(e) {

                $(this).addClass('active');

                var oTop = e.pageY - $('.active').offset().top;
                var oLeft = e.pageX - $('.active').offset().left;

                $(this).parents().on('mousemove', function(e) {

                    $('.active').offset({

                        top: e.pageY - oTop,
                        left: e.pageX - oLeft

                    }).on('mouseup', function() {

                        $(this).removeClass('active');

                    });

                });

                return false;
            });

            @foreach ($charts as $chart)
                {!! $chart->render() !!}
            @endforeach
        }
    </script>
@endsection

@section('mainContainer')
    <section class="container main-container" id="container">
        <div class="row">
            <div class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-12">

                <!--si la busqueda se hizo por desplazamiento pone la tabla de tolerancias-->
                @if (isset($atomos))
                    {{-- @include('layouts.toleranceTable') --}}
                @endif


                <hr class="invisible" />
                <div class="hidden-xs" style="border: 2px solid #cb0223; position: absolute; cursor: move; z-index: 20"
                    id="jsme_container"></div>
                <div class="row" id="topLinechart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
                <div class="row" id="middleLinechart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
                <div class="row" id="lowerLinechart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

                <div class="row">
                    <div class="col-xs-12 text-center">
                        <button id="btnPrint" class="btn btn-danger" onclick="window.print()">
                            <i class="fa fa-btn fa-user"></i>{{ trans('applicationResource.menu.print') }}
                        </button>
                        <button class="btn btn-danger" onclick="window.history.back()">
                            <i class="fa fa-btn fa-user"></i>{{ trans('applicationResource.button.back') }}
                        </button>
                    </div>
                </div>

                <hr class="invisible"/>

            </div>
        </div>

    </section>
@endsection