@extends('layout.front')
@section('title', 'Krojač Biznis | Dashboard')
@section('html-class', 'class=footer-without-top-footer')

@section('content')
<div class="page-wrapper">

    <!-- Header Account -->
    @include('front-inc._header-account')

    <!-- section main-container -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main-content -->
                <div class="main-content col-12">

                    <div class="row">

                        @include('front.dashboard.partials._header')
                        <!-- col end -->

                        @include('front.dashboard.partials._leader-line-holder')
                        <!-- col end -->

                        @include('front.dashboard.partials._bottom-section')
                        <!-- col end -->

                    </div>
                    <!-- row end -->

                </div>
                <!-- main-content end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->

    </section>
    <!-- main-container end -->

</div>
@include('front-inc._footer')
@endsection

@section('add-scripts')
    @parent
    <script type="text/javascript" src="{{ asset('front/plugins/leaderline/leader-line.min.js') }}"></script>
    <script>
        window.addEventListener('load', function () {
            'use strict';

            new LeaderLine(
                document.getElementById('element-1'),
                document.getElementById('element-2'), {
                size: 1,
                color: '#92929F',
                startPlug: 'behind',
                endPlug: 'behind',
                endSocket: 'right',
                path: 'grid',
                dash: {
                    animation: true,
                    len: 10, gap: 3
                }
            }
            );

            new LeaderLine(
                document.getElementById('element-1'),
                document.getElementById('element-3'), {
                size: 1,
                color: '#92929F',
                startPlug: 'behind',
                endPlug: 'behind',
                endSocket: 'top',
                path: 'grid',
                dash: {
                    animation: true,
                    len: 10, gap: 3
                }
            }
            );

            new LeaderLine(
                document.getElementById('element-4'),
                document.getElementById('element-5'), {
                size: 1,
                color: '#92929F',
                startPlug: 'behind',
                endPlug: 'behind',
                startSocket: 'bottom',
                endSocket: 'right',
                path: 'grid',
                dash: {
                    animation: true,
                    len: 10, gap: 3
                }
            }
            );

            new LeaderLine(
                document.getElementById('element-4'),
                document.getElementById('element-6'), {
                size: 1,
                color: '#92929F',
                startPlug: 'behind',
                endPlug: 'behind',
                startSocket: 'bottom',
                endSocket: 'left',
                path: 'grid',
                dash: {
                    animation: true,
                    len: 10, gap: 3
                }
            }
            );
            
            new LeaderLine(
                document.getElementById('element-6'),
                document.getElementById('element-7'), {
                size: 1,
                color: '#92929F',
                startPlug: 'behind',
                endPlug: 'behind',
                endSocket: 'left',
                path: 'grid',
                dash: {
                    animation: true,
                    len: 10, gap: 3
                }
            }
            );

            new LeaderLine(
                document.getElementById('element-8'),
                document.getElementById('element-9'), {
                size: 1,
                color: '#92929F',
                startPlug: 'behind',
                endPlug: 'behind',
                path: 'grid',
                dash: {
                    animation: true,
                    len: 10, gap: 3
                }
            }
            );

        });
    </script>
    <script src="{{ mix('js/components/dashboard/BottomSection2.js') }}"></script>
    <script src="{{ mix('js/components/dashboard/UserActivities.js') }}"></script>
@endsection