@extends('front.layout')
@section('header')
    <title>چارت سازمانی</title>
    <link href="
https://cdn.jsdelivr.net/npm/jsplumb@2.15.6/css/jsplumbtoolkit-defaults.min.css
" rel="stylesheet">
    <style>


        .box {
            display: inline-block;
            color: black;
            width: 80%;
            max-width: 300px;
            height: 50px;
            text-decoration: none;
            text-align: center;
            border: 2px solid #333;
            -webkit-transition: all ease-in-out .2s;
            -moz-transition: all ease-in-out .2s;
            transition: all ease-in-out .2s;
            background: #EEE;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.6);
            overflow: hidden;
            position: relative;
        }

        .information {
            display: table;
            height: 100%;
            width: 100%;
            text-align: center;
        }

        .additionalInfo {
            padding: 15px;
        }

        .position {
            display: flex;
            justify-content: center;
            align-content:  center;
            vertical-align: middle;
            height: 50px;
            font-weight: 700;
            flex-wrap: wrap;        }

        .sectionchart ul {
            padding: 0px;
            list-style-type: none;
            display: inline-block;
            height: 100%;
        }

        .sectionchart li {
            margin-top: 50px;
            height: 100%;
            display: flex;
            justify-content: center;
        }

        .children2 ul {
            display: inline-block;
            padding: 0;
            overflow: hidden;
            text-align: center;
            height: 100%;
        }

        h4 {
            margin-block-start: 1em;
        }

        .children2 li {
            float: left;
            width: 50%;
        }

        ._jsPlumb_connector {
            z-index: 1;
        }

        ._jsPlumb_overlay {
            z-index: 1;
        }

        .enlarged {
            height: 300px !important;
            width: 90% !important;
        }

        .enlarged additionalInfo {
            opacity: 0.2;
        }



        body {
            font-family: helvetica;
        }

        .bg {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            min-height: 100%;
            max-height: 100%;
            z-index: 0;
            background-image: linear-gradient(#bc4e9c, #B06AB3);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .main-header{
            z-index: 1000;
        }

    </style>
    <style>
        @media screen and (min-width: 768px) {
            .image-banner::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 70%;
                background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
                pointer-events: none;
            }
            .image-banner img{
                height: 400px;
                object-fit: cover;
            }
        }

        @media screen and (max-width: 768px) {
            .image-banner img{
                height: 490px !important;
                object-fit: cover !important;
                width: 100% !important;
            }
        }
    </style>
@endsection

@section('content')

    <div class="">
        <div class="image-banner">
            @php
                $desktopSrc = '6.jpg';
                $mobileSrc =  '4.png';
            @endphp
            <picture>
                <source srcset="/{{ $mobileSrc }}" media="(max-width: 600px)">
                <source srcset="/{{ $desktopSrc }}">
                <img src="/{{ $desktopSrc }}" class="d-block w-100" alt="">
            </picture>

            <div>
                <h1>
                    <div class="container">{{ trans('translate.iran_map_heading') }}</div>
                </h1>
            </div>



        </div>
        <div class="container mb-4">
            <div class="sectionchart d-flex justify-content-center">
                <ul>
                    <li>
                        <div class="box" id="ceo" onclick="this.classList.toggle('enlarged');">
                            <div class="information">
                                <div class="position">
                                    <p>CEO</p>
                                </div>
                                <div class="additionalInfo">
                                    This is the CEO he basically runs things round here. If you want a promotion, make him a coffee and ask about his cats.
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <ul class="children2">
                            <li>
                                <div class="box" id="manager1" onclick="this.classList.toggle('enlarged');">
                                    <div class="information">
                                        <div class="position">
                                            <p>Manager 1</p>
                                        </div>
                                        <div class="additionalInfo">
                                            This is manager 1 he is kinda annoying sometimes but as long as you do your paperwork and stay away from his stapler you'll be fine.
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box" id="manager2" onclick="this.classList.toggle('enlarged');">
                                    <div class="information">
                                        <div class="position">
                                            <p>Manager 2</p>
                                        </div>
                                        <div class="additionalInfo">
                                            This is manager 2, she is kind but will eat anything you leave in the fridge for longer than a day so BEWARE.
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul class="children2">
                            <li>
                                <div class="box" id="child1" onclick="this.classList.toggle('enlarged');">
                                    <div class="information">
                                        <div class="position">
                                            <p>Child 1</p>
                                        </div>
                                        <div class="additionalInfo">
                                            This is a child of manager 2, they basically just do all our paper work.
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box" id="child2" onclick="this.classList.toggle('enlarged');">
                                    <div class="information">
                                        <div class="position">
                                            <p>Child 2</p>
                                        </div>
                                        <div class="additionalInfo">
                                            This is a child of manager 2, they basically just do all our paper work.
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>




@endsection

@section('footer')
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js'></script>
    <script>
        var instance;
        var draws = 0;

        jsPlumb.bind("ready", function() {

            instance = jsPlumb.getInstance({
                PaintStyle: {
                    lineWidth: 2,
                    strokeStyle: "#444",
                    outlineColor: "#444",
                    outlineWidth: 1
                },
                Connector: ["Flowchart"],
                Endpoint: ["Blank", { radius: 3 }],
                EndpointStyle: { fillStyle: "#333" },
            });

            $(window).resize(function() {
                instance.repaintEverything();
            });

            drawConnections();

        });

        function drawConnections() {
            draws++;
            instance.connect({
                source: "ceo",
                target: "manager1",
                scope: "someScope",
                anchor: ["Bottom", "Top"]
            });
            instance.connect({
                source: "ceo",
                target: "manager2",
                scope: "someScope",
                anchor: ["Bottom", "Top"]
            });
            instance.connect({
                source: "manager2",
                target: "child1",
                scope: "someScope",
                anchor: ["Bottom", "Top"]
            });
            instance.connect({
                source: "manager2",
                target: "child2",
                scope: "someScope",
                anchor: ["Bottom", "Top"]
            });
        }

        window.setInterval(function() {
            instance.repaintEverything();
        }, 20);
    </script>
@endsection