@extends('frontend.layouts.app_board_readonly')

@section('title', app_name() . ' | ' . __('navs.frontend.dashboard') )
@section('header')


@endsection
{{--Content--}}
@section('content')

    <!-- Back to dashboard -->
    <button class="dashboard_nav_btn dashboard_nav_btn_board"
            onclick=" return window.location.href='{{URL::to(isset($board->lab_id)?"/lab/{$board->lab_id}":'/')}}'">
        Back to<br>{{isset($board->lab_id)?"Lab":'Dashboard'}}<i
            class="fas fa-arrow-left"></i></button>

    <!-- New Artboard design starts -->
    <div class="app-container">
        <div class="canvas-section">
            <div class="top-tools">
                <div class="top-buttons top-buttons_left">

                    <div class="btn-grp">
                        <button class="mini-tool" data-tippy-content="Zoom in" data-tippy-placement="top"
                                onclick="zoomIn()">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.73 115.37">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M64,78.38l13.11,26.56a7.22,7.22,0,1,1-12.94,6.41L51,84.8A40,40,0,1,1,47.92,7.17v6.27h-7A12.16,12.16,0,0,0,30.24,19.8q-1.41.52-2.79,1.2A28.28,28.28,0,1,0,66.92,54.94a12.18,12.18,0,0,0,5.37-10.09v-7h6.78A40,40,0,0,1,64,78.38ZM79.32,19.22H66.51V6.41a6.41,6.41,0,0,0-12.82,0V19.22H40.88a6.41,6.41,0,1,0,0,12.81H53.69V44.85a6.41,6.41,0,0,0,12.82,0V32H79.32a6.41,6.41,0,1,0,0-12.81Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool" data-tippy-content="zoom out" data-tippy-placement="top"
                                onclick="zoomOut()">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.96 109.01">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M80,39.92V40c0,1.19-.07,2.37-.18,3.55,0,.41-.09.82-.14,1.23-.09.78-.21,1.55-.35,2.31-.08.44-.14.88-.24,1.31-.21,1-.47,2-.76,3-.16.53-.34,1-.52,1.56s-.4,1.14-.62,1.7-.4,1-.62,1.5c-.32.74-.68,1.47-1,2.19-.22.41-.43.83-.66,1.24-.46.81-.95,1.61-1.46,2.4l-.61.89c-.51.72-1,1.43-1.59,2.12l-.53.66a38.83,38.83,0,0,1-4.92,4.93c-.28.24-.58.47-.87.7s-.6.5-.92.74L77.06,98.58A7.22,7.22,0,0,1,64.12,105L51,78.43c-.3.09-.61.14-.92.22-.81.21-1.61.43-2.44.59-.48.09-1,.14-1.46.22-1.17.18-2.35.32-3.55.4-.73,0-1.47.1-2.2.11L40,80c-.49,0-1-.06-1.46-.07s-1.19,0-1.78-.09-1.47-.15-2.2-.25l-1.3-.2c-.82-.14-1.63-.3-2.43-.49l-.89-.23c-.89-.23-1.78-.48-2.65-.77l-.34-.13a39.91,39.91,0,0,1-8.52-4.12L18,73.37c-.6-.39-1.17-.83-1.74-1.25-.42-.32-.85-.62-1.26-1s-1-.8-1.41-1.21-.92-.81-1.36-1.23-.86-.87-1.27-1.31-.83-.88-1.22-1.34-.84-1-1.25-1.53-.64-.84-1-1.27c-.44-.61-.86-1.23-1.26-1.87-.23-.35-.45-.72-.66-1.08-.44-.74-.85-1.48-1.24-2.24-.06-.12-.13-.23-.19-.34S4,57.4,4,57.24c-.45-.93-.86-1.87-1.23-2.84-.13-.33-.25-.67-.37-1-.31-.87-.6-1.75-.85-2.64-.12-.46-.24-.92-.35-1.38C1,48.6.8,47.83.66,47c-.11-.59-.2-1.19-.27-1.78s-.17-1.34-.23-2-.08-1.41-.1-2.11C.05,40.75,0,40.38,0,40s0-.47,0-.72c0-.69,0-1.38.1-2.07s.09-1.33.17-2,.17-1.14.26-1.7C.69,32.76.82,32,1,31.26c.1-.45.22-.89.34-1.33.21-.83.43-1.65.7-2.45.13-.4.28-.78.43-1.18.29-.81.59-1.61.93-2.4.2-.44.43-.87.64-1.31.33-.69.66-1.39,1-2.06s.66-1.1,1-1.66.62-1,1-1.52c.46-.67,1-1.31,1.46-2,.27-.35.53-.71.81-1.05.58-.69,1.2-1.35,1.83-2,.26-.27.5-.55.76-.81.64-.62,1.31-1.22,2-1.8.31-.27.61-.55.93-.81.63-.5,1.29-1,1.95-1.45.43-.31.85-.62,1.29-.91.59-.39,1.21-.75,1.83-1.11s1.1-.64,1.67-.94l.68-.38c.47-.23,1-.42,1.42-.63s.76-.35,1.14-.5c.9-.37,1.81-.7,2.72-1l.72-.25A39.8,39.8,0,0,1,35.62.25l.94-.08C37.49.1,38.42.05,39.34,0c.22,0,.44,0,.65,0s.44,0,.66,0c.78,0,1.55.06,2.32.12.53,0,1.06.07,1.58.13s1.11.16,1.66.25a39.82,39.82,0,0,1,17,6.94H41.83a11.77,11.77,0,0,0-9.9,5.44c-.71.21-1.41.44-2.1.71s-1.23.5-1.84.78l-.92.45c-.51.26-1,.55-1.51.85-.32.19-.64.37-.95.57s-.89.62-1.33.93l-1,.71c-.41.34-.8.69-1.2,1l-.85.77c-.42.42-.82.85-1.21,1.29l-.61.66c-.48.57-.93,1.15-1.36,1.75l-.25.33A28.52,28.52,0,0,0,12,36.23h0c-.11.81-.17,1.63-.21,2.45,0,.14,0,.28,0,.42,0,.74,0,1.49,0,2.23l0,.6c0,.74.14,1.48.25,2.21,0,.18,0,.35.07.52.13.78.3,1.55.49,2.32l.09.34c.22.83.48,1.64.78,2.45l.07.19c.32.84.68,1.69,1.09,2.52l0,.09c.41.83.86,1.63,1.34,2.4l.08.13c.47.74,1,1.45,1.51,2.14l.14.19c.53.68,1.09,1.32,1.68,1.94l.14.16A28.36,28.36,0,0,0,36.19,68l.11,0c.75.1,1.52.16,2.28.2l.64,0c.65,0,1.3,0,2,0l.92,0c.61,0,1.23-.11,1.84-.2l.94-.14c.62-.11,1.23-.24,1.84-.39l.87-.22c.62-.18,1.25-.38,1.87-.6l.78-.29c.62-.24,1.24-.51,1.85-.8l.77-.37c.59-.3,1.15-.63,1.71-1l.84-.51c.48-.31.94-.65,1.4-1,.31-.23.62-.45.92-.69s.8-.69,1.19-1,.6-.53.89-.81.83-.87,1.23-1.32c.2-.22.42-.44.61-.67a28.39,28.39,0,0,0,5.27-9.6l0,0a28.06,28.06,0,0,0-.14-17.5H79c0,.14.07.27.1.4h0a2.07,2.07,0,0,0,0,.22c.07.32.12.66.18,1,.16.89.3,1.78.4,2.67q.07.53.12,1.05C79.91,37.56,80,38.74,80,39.92Zm7-20.66h0a6.12,6.12,0,0,0-6.13-6.12h-39a6.13,6.13,0,0,0-6.13,6.12h0a6.13,6.13,0,0,0,6.13,6.13h39A6.12,6.12,0,0,0,87,19.26Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <button class="mini-tool" data-tippy-content="Ruler" data-tippy-placement="top"
                            onclick="toggleRuler()">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.91 84.18">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M105.17,78.64,97.25,70,92.41,76.6a1.41,1.41,0,0,1-1.13.64,1.07,1.07,0,0,1-.81-.36,2,2,0,0,1,0-2.37l4.84-6.57-3.87-4.22L88.32,68a1.4,1.4,0,0,1-1.12.63,1.09,1.09,0,0,1-.81-.36,2,2,0,0,1,0-2.38l3.12-4.23-3.73-4.06-5,6.81a1.43,1.43,0,0,1-1.13.63,1,1,0,0,1-.8-.36,2,2,0,0,1,0-2.37l5-6.8L80,51.25l-3.29,4.46a1.41,1.41,0,0,1-1.12.64,1.09,1.09,0,0,1-.81-.36,1.93,1.93,0,0,1,0-2.37l3.29-4.47L74.24,45l-5,6.79a1.44,1.44,0,0,1-1.13.64,1.08,1.08,0,0,1-.81-.37,2,2,0,0,1,0-2.37l5-6.79L68.44,38.7l-3.28,4.45a1.43,1.43,0,0,1-1.13.63,1.07,1.07,0,0,1-.81-.36,2,2,0,0,1,0-2.37l3.28-4.45L62.7,32.45l-5,6.78a1.44,1.44,0,0,1-1.13.64,1.09,1.09,0,0,1-.81-.37,2,2,0,0,1,0-2.37l5-6.78L56.9,26.14l-3.28,4.44a1.43,1.43,0,0,1-1.13.63,1.08,1.08,0,0,1-.81-.36,2,2,0,0,1,0-2.37L55,24l-3.82-4.15-5,6.77A1.41,1.41,0,0,1,45,27.3a1.06,1.06,0,0,1-.81-.37,1.93,1.93,0,0,1,0-2.37l5-6.76-3.88-4.22L42.09,18a1.44,1.44,0,0,1-1.13.64,1.06,1.06,0,0,1-.81-.37,2,2,0,0,1,0-2.37l3.26-4.43L39.61,7.34l-5,6.75a1.41,1.41,0,0,1-1.13.64,1.1,1.1,0,0,1-.81-.36,2,2,0,0,1,0-2.37l5-6.76L33.49.67C32.26-.66,30.18.07,29.42,2.1L.25,80.07c-.75,2,.25,4.11,2,4.11H103.08C105.45,84.18,106.85,80.47,105.17,78.64ZM23.55,63.93,35.65,31.6,65.38,63.93Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                </div>

                <div class="board_name_input" ><h3
                        id=""><span id="board_name_disp"> {{$board->name}}</span>&nbsp(<span id="board_dimensions">{{round($board->width/ 3.7795) }}x{{round($board->height/ 3.7795)}}</span>&nbsp;mm)
                    </h3>
                </div>
                <div class="top-buttons top-buttons_right" style="display: none">
                    {{--                    Text controls --}}
                    <div class="text-tool-options" style="display: none">
                        @include('frontend.board.form.canvascontrols.textcontrols')
                    </div>
                    <div class="image_context_menu removed-alignment" style="display: flex">
                        {{--                        Colourways dropdown--}}
                        <div class="dropdown">
                            <button class="main-tool main-tool-option " id="colorWays" data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Colourways">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 168" fill="currentColor">
                                    <defs/>
                                    <g data-name="Layer 2">
                                        <path
                                            d="M162 23l-33 42-18 22a35 35 0 00-10-15 35 35 0 00-15-8l19-19 40-38c6-7 15-9 20-5s3 14-3 21zM94 81c-9-8-22-9-31 0-13 15-8 31-18 46 0 0 34 4 52-16 8-9 6-22-3-30zm19 24a33 33 0 01-7 15c-16 17-41 20-54 20a79 79 0 01-9 0l-20-3 11-17c3-5 5-10 6-17 2-9 5-20 14-31a32 32 0 0114-9l28-27 2-1H66a66 66 0 00-66 66v1a66 66 0 0066 66 66 66 0 0066-66V82zM94 81c-9-8-22-9-31 0-13 15-8 31-18 46 0 0 34 4 52-16 8-9 6-22-3-30z"
                                            data-name="Layer 1"/>
                                    </g>
                                </svg>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="colorWays">
                                @include('frontend.board.form.canvascontrols.colourways')
                            </div>
                        </div>
                        <button class="main-tool main-tool-option" id="update_selection_btn"
                                data-tippy-content="Edit Chart">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.671 96.671">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M0,12.3355v72A12.3355,12.3355,0,0,0,12.3355,96.671h72A12.3355,12.3355,0,0,0,96.671,84.3355v-72A12.3355,12.3355,0,0,0,84.3355,0h-72A12.3355,12.3355,0,0,0,0,12.3355ZM31.1175,75.9419a94.1917,94.1917,0,0,1-10.1508,3.1114l-.0163.0022a96.991,96.991,0,0,1,1.6922-10.4926,56.8232,56.8232,0,0,1,3.1159-9.251L39.8515,71.58A56.9914,56.9914,0,0,1,31.1175,75.9419Zm42.62-43.285L44.494,66.3243,30.4009,54.0555,59.6441,20.3892a8.0736,8.0736,0,0,1,11.3925-.7887l1.9046,1.6582A8.0775,8.0775,0,0,1,73.7371,32.6569Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>

                        <div class="dropdown  keep-open">
                            <button class="main-tool main-tool-option " id="editShapes" data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Update shapes">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 168" fill="currentColor">
                                    <defs/>
                                    <g data-name="Layer 2">
                                        <path
                                            d="M162 23l-33 42-18 22a35 35 0 00-10-15 35 35 0 00-15-8l19-19 40-38c6-7 15-9 20-5s3 14-3 21zM94 81c-9-8-22-9-31 0-13 15-8 31-18 46 0 0 34 4 52-16 8-9 6-22-3-30zm19 24a33 33 0 01-7 15c-16 17-41 20-54 20a79 79 0 01-9 0l-20-3 11-17c3-5 5-10 6-17 2-9 5-20 14-31a32 32 0 0114-9l28-27 2-1H66a66 66 0 00-66 66v1a66 66 0 0066 66 66 66 0 0066-66V82zM94 81c-9-8-22-9-31 0-13 15-8 31-18 46 0 0 34 4 52-16 8-9 6-22-3-30z"
                                            data-name="Layer 1"/>
                                    </g>
                                </svg>
                            </button>
                            <div class="dropdown-menu  keep-open" aria-labelledby="editShapes">
                                @include('frontend.board.form.canvascontrols.shapecontrols')
                            </div>
                        </div>

{{--
                        {{--                       Opacity dropdown--}}
                        <div class="dropdown">
                            <button class="main-tool main-tool-option " id="opacity_button" data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Opacity">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89.7885 89.8152"
                                     fill="currentColor">
                                    <defs/>
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M35.9382,0V17.9084H18.03V0Zm.0608,17.9084V35.8167H53.9074V17.9084ZM18.03,35.8167V53.7251H35.9382V35.8167ZM35.999,53.9074V71.8157H53.9074V53.9074ZM0,18V35.9079H17.9084V18ZM0,53.8162V71.7246H17.9084V53.8162ZM18.03,71.9069V89.8152H35.9382V71.9069Zm35.7863,0V89.8152H71.7246V71.9069ZM53.8162,0V17.9084H71.7246V0ZM71.7246,17.9084V35.8167H89.633V17.9084ZM53.8162,35.8167V53.7251H71.7246V35.8167ZM71.88,53.8807V71.789H89.7885V53.8807Z"/>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            {{--                            Opacity controls --}}
                            <div class="dropdown-menu" aria-labelledby="opacity_button">
                                @include('frontend.board.form.canvascontrols.opacity')
                            </div>
                        </div>

                        {{--Arrange/reorder dropdown--}}
                        <div class="dropdown">
                            <button class="main-tool main-tool-option " id="arrange_button" data-toggle="dropdown"
                                    data-offset="-150"
                                    data-tippy-content="Arrange/Order">

                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.49 175.07"
                                     fill="currentColor">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M175.49,67a67,67,0,0,0-134,0c0,1.07,0,2.13.08,3.19L0,76.54l39.86,40.85-9.41,57.68,49.27-27.23L129,175.07l-6.92-42.45A67,67,0,0,0,175.49,67ZM82.14,143.46l-2.42-1.34-2.42,1.34L37.05,165.71l7.75-47.52.4-2.49-1.76-1.8L10.38,80,42,75.18l13.85-2.11,2.64-.41,1.13-2.41L79.72,27.41,99.83,70.25,101,72.66l2.64.41L149.06,80,116,113.9l-1.76,1.8.4,2.49,2.49,15.26,5.26,32.26Z"/>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            {{--                            Opacity controls --}}
                            <div class="dropdown-menu" aria-labelledby="arrange_button">
                                @include('frontend.board.form.canvascontrols.arrange')
                            </div>
                        </div>


                        {{--                        Alignment--}}
                        <div class="dropdown">
                            <button class="main-tool main-tool-option" id="alignItems" data-toggle="dropdown"
                                    data-offset="-50"
                                    {{--                                onclick="showMenus('board-top-tool-align')"--}}
                                    data-tippy-content="Align/Distribute">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.36 104.59">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M30,87.61H41.35V98.92a5.67,5.67,0,0,1-11.34,0ZM41.35,5.67A5.67,5.67,0,0,0,30,5.67V17.43H41.35Zm-35,11.76A6.35,6.35,0,0,0,0,23.76V81.28a6.35,6.35,0,0,0,6.32,6.33H30V17.43Zm58.72,0H41.35V87.61H65a6.35,6.35,0,0,0,6.32-6.33V23.76A6.35,6.35,0,0,0,65,17.43Z"/>

                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="alignItems">
                                @include('frontend.board.form.canvascontrols.alignment')
                            </div>
                        </div>

                        <div class="seperater"></div>
                        {{--                        Show and hide scale on the selected clipart--}}
                        <button class="mini-tool main-tool-option" id="scaleObject" onclick="toggleScale()"
                                data-tippy-content="Show/hide scale">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.6774 180.1167">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M218.4048,180.1167H10.2726A10.2726,10.2726,0,0,1,0,169.8442H0a10.2726,10.2726,0,0,1,10.2726-10.2725H218.4048a10.2726,10.2726,0,0,1,10.2726,10.2725h0A10.2726,10.2726,0,0,1,218.4048,180.1167ZM58.2257,73.3013c2.5392,8.6341,8.9718,13.2052,18.7907,13.2052h.1166a9.8313,9.8313,0,0,0,9.67-9.0533l.2411-2.8127a9.67,9.67,0,0,0-3.8163-8.6658c-1.8108-1.32-2.6557-3.841-2.6557-8.2471V11.761a9.8985,9.8985,0,0,0-9.8985-9.8984H64.739a9.8984,9.8984,0,0,0-9.8984,9.8984V51.1255a18.4453,18.4453,0,0,1-.8472,5.5866c-1.692,4.2323-6.7714,9.1412-13.3735,9.1412-8.2952,0-12.5275-6.6021-12.5275-17.7753V11.761A9.8984,9.8984,0,0,0,18.194,1.8626H12.2593A9.8985,9.8985,0,0,0,2.3608,11.761V88.1986c0,7.2029.2367,14.938.7448,20.8993a9.8977,9.8977,0,0,0,9.8658,9.0646h3.3444a9.8846,9.8846,0,0,0,9.8773-10.5387c-.4519-6.5532-.64-14.1377-.64-19.5935V80.92a15.72,15.72,0,0,0,11.6814,4.9089A22.3655,22.3655,0,0,0,57.7186,73.3013Zm43.1669.1686A11.1741,11.1741,0,0,0,112.5667,84.644h2.7069A11.1741,11.1741,0,0,0,126.4476,73.47V36.3976a17.0752,17.0752,0,0,1,1.0155-6.4337c1.5237-4.2312,5.4172-9.3106,12.0192-9.3106,8.1258,0,11.8509,7.11,11.8509,17.6058V73.47A11.1741,11.1741,0,0,0,162.5073,84.644h2.7057A11.1741,11.1741,0,0,0,176.3871,73.47V36.2282a21.5386,21.5386,0,0,1,1.0155-6.602c1.6931-4.91,5.9254-8.9729,11.8509-8.9729,8.294,0,12.1875,6.9409,12.1875,18.96V73.47A11.1741,11.1741,0,0,0,212.6151,84.644h2.7068A11.1741,11.1741,0,0,0,226.496,73.47v-37.58C226.496,11.1732,214.4768,0,198.5641,0A29.869,29.869,0,0,0,182.82,4.064a37.0451,37.0451,0,0,0-10.6649,9.9872h-.3388C168.2613,5.4172,159.7967,0,149.1318,0c-14.22,0-21.4993,7.788-25.0539,13.0358H123.57l-.1248-1.1775A11.1741,11.1741,0,0,0,112.333,1.8626h0a11.172,11.172,0,0,0-11.1675,11.5182c.1356,4.5506.2271,9.5141.2271,14.8911Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        {{--                        Group/ungroup objects--}}
                        <button class="mini-tool main-tool-option group" id="groupObjectButton" onclick="groupObjects()"
                                data-tippy-content="Group objects">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 211">
                                <defs/>
                                <g data-name="Layer 2">
                                    <path
                                        d="M111 72H65a65 65 0 00-24 5 46 46 0 0187-28 6 6 0 007 4l7-1a6 6 0 004-8v-1A65 65 0 0023 83l1 3a65 65 0 00-24 51v9a65 65 0 0065 65h46a65 65 0 0065-65v-9a65 65 0 00-65-65zm-17 73v28H81v-28a18 18 0 1113 0z"
                                        data-name="Layer 1"/>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool main-tool-option ungroup" id="ungroupObjectButton"
                                onclick="unGroupObjects()"
                                data-tippy-content="Ungroup objects">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.5653 191.6816">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M152.3594,68.0093c.06-1.1046.0979-2.2151.0979-3.3347a64.6747,64.6747,0,0,0-129.3493,0q0,1.683.0856,3.3454A64.7351,64.7351,0,0,0,0,117.7251v9.073a64.8835,64.8835,0,0,0,64.8835,64.8835h45.7981a64.8836,64.8836,0,0,0,64.8837-64.8835v-9.073A64.7355,64.7355,0,0,0,152.3594,68.0093ZM94.1741,125.5922v27.88H81.3914v-27.88a17.8695,17.8695,0,1,1,12.7827,0Zm16.5075-72.7506H64.8835A64.756,64.756,0,0,0,42.8669,56.68a45.62,45.62,0,0,1,89.8311,0A64.7531,64.7531,0,0,0,110.6816,52.8416Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool main-tool-option" onclick="flip('x')"
                                data-tippy-content="Flip horizontal">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280.71 257.24">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M277.12,132.9l-90.21,60.43a12,12,0,0,1-18.76-10V69a12.05,12.05,0,0,1,18.76-10l90.21,60.44A8.08,8.08,0,0,1,277.12,132.9ZM3.59,135.34,93.8,195.77a12,12,0,0,0,18.76-10V71.48a12.06,12.06,0,0,0-18.76-10L3.59,121.9A8.08,8.08,0,0,0,3.59,135.34ZM141.19,0h0A10.76,10.76,0,0,1,152,10.76V246.48a10.76,10.76,0,0,1-10.76,10.76h0a10.76,10.76,0,0,1-10.76-10.76V10.76A10.76,10.76,0,0,1,141.19,0Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                        <button class="mini-tool main-tool-option" onclick="flip('y')"
                                data-tippy-content="Flip vertical">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.24 280.71">
                                <g data-name="Layer 2">
                                    <g data-name="Layer 1">
                                        <path
                                            d="M132.9,3.59,193.33,93.8a12,12,0,0,1-10,18.76H69A12.05,12.05,0,0,1,59,93.8L119.46,3.59A8.08,8.08,0,0,1,132.9,3.59Zm2.44,273.53,60.43-90.21a12,12,0,0,0-10-18.76H71.48a12.06,12.06,0,0,0-10,18.76l60.44,90.21A8.08,8.08,0,0,0,135.34,277.12ZM0,139.52H0a10.76,10.76,0,0,1,10.76-10.76H246.48a10.76,10.76,0,0,1,10.76,10.76h0a10.76,10.76,0,0,1-10.76,10.76H10.76A10.76,10.76,0,0,1,0,139.52Z"/>
                                    </g>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <button class="mini-tool" onclick="cloneSelected()" data-tippy-content="Clone">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.0501 123.6897">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M81.5585,71.9418h-12.32v12.32A2.2179,2.2179,0,0,1,67.02,86.48H57.43a2.2179,2.2179,0,0,1-2.2177-2.2178v-12.32h-12.32a2.2177,2.2177,0,0,1-2.2178-2.2178V60.1335a2.2179,2.2179,0,0,1,2.2178-2.2177h12.32v-12.32A2.2178,2.2178,0,0,1,57.43,43.3779h9.59a2.2178,2.2178,0,0,1,2.2178,2.2178v12.32h12.32a2.2178,2.2178,0,0,1,2.2177,2.2177V69.724A2.2177,2.2177,0,0,1,81.5585,71.9418ZM24.06,8.9H96.5864A10.0032,10.0032,0,0,0,86.65,0H10A10.0036,10.0036,0,0,0,0,10V95.29a10.0034,10.0034,0,0,0,8.9,9.9366V24.06A15.1771,15.1771,0,0,1,24.06,8.9Zm90.7229,80.6834c-.0224.0454-.0466.0881-.0718.1323a2.5054,2.5054,0,0,1-.3959.5341L81.61,122.9547a2.5151,2.5151,0,0,1-.3828.3137c-.0444.03-.0936.0492-.14.0758a2.4745,2.4745,0,0,1-.2907.1541c-.063.0261-.13.0394-.1945.06a2.4611,2.4611,0,0,1-.2722.0817,2.4983,2.4983,0,0,1-.4753.0479l-.0151.0015H26.06A12.6741,12.6741,0,0,1,13.4,111.03V26.06A12.6741,12.6741,0,0,1,26.06,13.4h76.33a12.6742,12.6742,0,0,1,12.66,12.66V88.48a2.5061,2.5061,0,0,1-.0467.4641c-.0018.0094-.001.0191-.0029.0284A2.46,2.46,0,0,1,114.7828,89.5835ZM89.9,85.98h20.15V26.06a7.6687,7.6687,0,0,0-7.66-7.66H26.06a7.6683,7.6683,0,0,0-7.66,7.66v84.97a7.6682,7.6682,0,0,0,7.66,7.66H77.34V98.54A12.5746,12.5746,0,0,1,89.9,85.98Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                    <button class="mini-tool" onclick="deleteSelected()" data-tippy-content="Delete (Del)">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.86 172.07">
                            <g data-name="Layer 2">
                                <g data-name="Layer 1">
                                    <path
                                        d="M98.88,11V0H54V11H0V26.41H7.26v130a15.71,15.71,0,0,0,15.68,15.68h107a15.7,15.7,0,0,0,15.67-15.68v-130h7.27V11ZM44.33,156.9H31.48v-123H44.33Zm38.56,0H70v-123H82.89Zm38.55,0H108.59v-123h12.85Z"/>
                                </g>
                            </g>
                        </svg>
                    </button>

                </div>

            </div>
            <div class="board-section">
                {{--                Left hand side buttons--}}
                <div class="left-buttons">


                </div>
                <div class="canvas-board">
                    <div class="canvas-wrapper d-flex h-100">
                        <div class="canvas-layout ml-auto mr-auto">
                            <div class="canvas-content d-flex">
                                <canvas id="myCanvas" width="{{$board->width}}" height="{{$board->height}}"
                                ></canvas>
                            </div>
                        </div>
                    </div>
                    {{--                    Update board metadata form container--}}

                    {{--                    Clipart panel--}}


                    </div>


                    {{--                    Share--}}
                    <div class="board-tool-section share-tool-section" id="sharePannel"
                         style="display: none"
                    >
                        <div class="board-tool-wrapper">
                            <button class="main-tool board-tool-btn" onclick="showMenus('sharePannel')">
                                <svg class="left-tool-close" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 129.94 129.94">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                                        </g>
                                    </g>
                                </svg>
                                <svg class="left-tool-button" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 141.44 140.87">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M63.18,133.26a7.61,7.61,0,0,1-7.6,7.61H18.38A18.4,18.4,0,0,1,0,122.49V18.38A18.4,18.4,0,0,1,18.38,0h37.2a7.61,7.61,0,0,1,0,15.21H18.38a3.22,3.22,0,0,0-3.18,3.17V122.49a3.22,3.22,0,0,0,3.18,3.17h37.2A7.6,7.6,0,0,1,63.18,133.26Zm78.26-62.83a12.59,12.59,0,0,1-4,9.2l-34.72,32.62c-2.45,2.32-4.54,3-6.1,3a5.34,5.34,0,0,1-2.12-.43c-1.43-.62-3.83-2.44-3.83-7.73V97.31H38.48V43.56H90.67V33.82c0-5.29,2.4-7.11,3.83-7.73s4.39-1.1,8.22,2.53l34.71,32.62A12.55,12.55,0,0,1,141.44,70.43ZM99.29,108.62,134,76a7.55,7.55,0,0,0,0-11.12L99.29,32.26c-1.68-1.59-2.65-1.65-2.82-1.57s-.8.81-.8,3.13V48.56H43.48V92.31H95.67v14.74c0,2.32.63,3.06.8,3.13S97.61,110.2,99.29,108.62Z"/>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <h4 class="coming-soon-text">Coming Soon</h4>
                            <div class="share-section">
                                <div class="share-preview">
                                    <img src="" alt="" id="shareImagePreview" style="height:100%">
                                </div>
                                <h6 class="share-text">Share a JPG snapshot of your artboard</h6>
                                <input type="text" placeholder="Email Address" class="share-board-email"
                                       style="display: none">
                                <button class="request-send-btn" style="display: none">Submit</button>
                                {{--                                These don't work...--}}
                                <ul class="share-board-options" style="display: none">
                                    <li onclick="share('facebook')"><img
                                            src="{{ asset('img/frontend/icons/social/facebook.png') }}" alt=""></li>
                                    <li onclick="share('twitter')"><img
                                            src="{{ asset('img/frontend/icons/social/twitter.png') }}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/youtube.png')}}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/pinterest.png')}}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/tumbler.png')}}" alt=""></li>
                                    <li><img src="{{asset('img/frontend/icons/social/instagram.png')}}" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    {{--                    Help panel--}}
                    <div class="board-tool-section search-tool-section" id="helpPannel"
                         style="display: none"
                    >
                        <div class="graphic-tool-section-content">
                            <button class="main-tool board-tool-btn" onclick="showMenus('helpPannel')">
                                <svg class="left-tool-close" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 129.94 129.94">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                                        </g>
                                    </g>
                                </svg>
                                <svg class="left-tool-button" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 96.03 96.02">
                                    <g data-name="Layer 2">
                                        <g data-name="Layer 1">
                                            <path
                                                d="M48,0A48,48,0,1,0,96,48,48,48,0,0,0,48,0ZM45,82.28,36.47,73.8,45,65.31l8.49,8.49ZM65.73,32.76A16.93,16.93,0,0,1,63.89,37a34.73,34.73,0,0,1-3.25,4.45c-1.33,1.56-3.18,3.61-5.57,6.16A35.43,35.43,0,0,0,51.41,52a13.9,13.9,0,0,0-1.74,3.47,12.5,12.5,0,0,0-.53,3.8v.43h-8.6v-.53a13.25,13.25,0,0,1,.5-3.8,19.06,19.06,0,0,1,1.79-3.89C43.69,50,45,48,46.75,45.41a35.4,35.4,0,0,0,4.37-8.2,22.15,22.15,0,0,0,1.32-7.39,16.48,16.48,0,0,0-.89-6,5.74,5.74,0,0,0-2.29-3A6.45,6.45,0,0,0,46,20a6,6,0,0,0-5,2.24,13.12,13.12,0,0,0-2.37,6.46H29.74v-9A63.52,63.52,0,0,1,40,16a35.66,35.66,0,0,1,8.27-1,26.74,26.74,0,0,1,10.4,1.74,12.28,12.28,0,0,1,5.88,4.69A12.76,12.76,0,0,1,66.3,28.2,17.53,17.53,0,0,1,65.73,32.76Z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <h4 class="coming-soon-text">Coming Soon</h4>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- New Artboard design ends -->
    </div>


@endsection

@section('dialogs')


    <div class="modal fade load-spinner" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <i style="color: #2aa8cc" class="fas fa-circle-notch fa-spin fa-3x mx-auto"></i>
            </div>
        </div>
    </div>

    <div class="popover" id="selected_content_popover">
        <div class="d-flex flex-column w-100">
            <div class="w-100 mb-1 selected_item_name"></div>
        </div>
    </div>


    <div id="loader_overlay" class="loader-wrapper">
        <span class="loader"><i style="color: #2aa8cc" class="fas fa-circle-notch fa-spin fa-3x mx-auto"></i><span
                id="loading_message"
                style="font-size: 2em; font-weight:bolder; color: #2aa8cc">Loading...</span></span>
    </div>

@endsection

@push('after-scripts')
    <!-- for creating zip file -->
<script>

        'use strict';
        // the canvas
        var canvas;

        var canvas_height = {{ $board->height}};
        var canvas_width = {{$board->width}};
        var board_name = '{{$board->name}}'


        var myRuler;

        var state;

        var canvas_ruler;

        // hide it
        //canvas_ruler.api.toggleRulerVisibility(false);
        $(document).ready(() => {

            //$("#loader_overlay").show();
            //wait(true)

            // restore zoom and ruler state
            @if($board->state)
                state = JSON.parse('{!! $board->state!!}')
            //
            @endif




            //Initialise canvas
            canvas = new fabric.Canvas('myCanvas', {
                preserveObjectStacking: true,
                selection: false,
                noScaleCache: true,
                isDrawingMode: false
                // renderOnAddRemove: false
            });
            // fabric.Object.prototype.transparentCorners = false;
            fabric.Object.NUM_FRACTION_DIGITS = 8
            canvas.skipOffscreen = true;

            canvas.setHeight(canvas_height);
            canvas.setWidth(canvas_width);
            canvas.setBackgroundColor("rgba(255,255,255,0.8)");

            // initialise the ruler
            canvas_ruler = new ruler({
                container: document.querySelector('.canvas-container'),// reference to DOM element to apply rulers on
                rulerHeight: 15, // thickness of ruler
                fontFamily: 'arial',// font for points
                fontSize: '10px',
                strokeStyle: 'black',
                lineWidth: 1,
                smallTickDist: 1,
                medTickDist: 10,
                bigTickDist: 20,
                enableMouseTracking: true,
                //enableToolTip: true
            });
            canvas_ruler.api.setScale(0.265);
            //

            // restore state from database if there's data
            @if($has_data)

            //$("#loader_overlay").modal('show');
            $.getJSON('{{URL::to('board/'.$board->id.'/data')}}', function (data) {

                canvas.loadFromJSON(data, () => {
                    console.log('loaded')
                    canvas.renderAll.bind(canvas);
                    restoreState();
                    $("#loader_overlay").hide();
                }, (o, object) =>{
                    object.set('selectable', false);
                });
            });
            @else
            $("#loader_overlay").hide();
           @endif

        });

        // restore the canvas state
        const restoreState = () => {
// restore zoom state
            let zoom_factor;
            if ((typeof state !== 'undefined') && state.hasOwnProperty('zoom')) {
                zoom_factor = state.zoom;
            } else {
                if (canvas.width > canvas.height) {
                    zoom_factor = ($(window).width() * 0.9) / canvas.width;
                } else {
                    zoom_factor = ($(window).height() * 0.9) / canvas.height;
                }
            }
            zoomTo(zoom_factor);

            // restore ruler state
            if ((typeof state !== 'undefined') && state.hasOwnProperty('has_ruler')) {
                $(".canvas-layout").css('margin-top', (state.has_ruler ? '15px' : '5px'))
                canvas_ruler.api.toggleRulerVisibility(state.has_ruler);
            }
        }

        const zoomTo = (zoom_factor) => {
            let height = canvas.getHeight();
            let width = canvas.getWidth();
            canvas.setZoom(zoom_factor)
            canvas.setHeight(height * zoom_factor);
            canvas.setWidth(width * zoom_factor);
            let scale = 0.265 / canvas.getZoom();
            let smallTick = Math.pow(2, Math.floor(Math.log(scale * 2) / Math.log(2))) * 4;
            canvas_ruler.api.setTicks(smallTick, smallTick * 10, smallTick * 20)
            canvas_ruler.api.setScale(scale);
            // canvas_ruler.api.setScale(0.265 / canvas.getZoom());

            //$("#zoom_disp").html("(" + Math.round(canvas.getZoom() * 100) + "%)");
        }

        const zoomIn = () => {
            zoom(1.1);
            //canvas.setZoom(canvas.getZoom() * 1.1 )
        }

        const zoomOut = () => {
            zoom(0.9);
            //canvas.setZoom(canvas.getZoom() / 1.1 )
        }

        const zoom = (ratio) => {

            let canvasContainer = document.getElementById("myCanvas");
            let middleX = canvasContainer.offsetWidth / 2;
            let middleY = 0;
            //console.log('current zoom is:' + canvas.getZoom())
            let currentZoom = canvas.getZoom();
            let newZoom = currentZoom + (ratio - 1);
            let height = canvas.getHeight();
            let width = canvas.getWidth();
            let zoomBy = newZoom / currentZoom;  // the amount to scale canvas

            canvas.setZoom(newZoom);

            //canvas.zoomToPoint(new fabric.Point(width / 2, height / 2), newZoom);
            canvas.setHeight(height * zoomBy);
            canvas.setWidth(width * zoomBy);

            let scale = 0.265 / canvas.getZoom();
            let smallTick = Math.pow(2, Math.floor(Math.log(scale * 2) / Math.log(2))) * 4;
            canvas_ruler.api.setTicks(smallTick, smallTick * 10, smallTick * 20)
            canvas_ruler.api.setScale(scale);
            // console.log('CLosest 2 is');
            // console.log(Math.pow(2,Math.floor(Math.log(scale*2)/Math.log(2)))*8)

            // let medTick = smallTick

            //$("#zoom_disp").html("(" + Math.round(canvas.getZoom() * 100) + "%)");
        }

        const toggleRuler = () => {
            $(".canvas-layout").css('margin-top', ($(".rul_wrapper").css('display') == 'none') ? '15px' : '5px')
            canvas_ruler.api.toggleRulerVisibility(($(".rul_wrapper").css('display') == 'none'));
        }
    </script>
@endpush

@push('after-styles')

    <style>
        /* Background only for this screen */
        body {
            background-image: url('{{asset("img/frontend/backgrounds/Background_Header_Gray.svg")}}') !important;
        }
    </style>
@endpush
