@extends('layouts.master')
@section('page_title')
    @if(isset($page_title))
        {{ $page_title }}
    @endif
@endsection
@section('css')
        <!-- <link rel="stylesheet" href="{!! url('public/assets/css/demo.css') !!}"/> -->
        <!-- <link rel="stylesheet" href="../jquery.orgchart.css"/> -->
        <link href="{!! url('public/assets/css/jq-orgchart.css') !!}" type="text/css" rel="stylesheet">
@endsection('css')
@section('content')

        <title>Org Chart</title>
    
        <div id="left">

            <ul id="organisation">
                <li><em>Mobile Network Operators</em>
                    <ul>
                        <li><a href="">UCM</a><br/>
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <ul>
                                <li>Bulk Tool</li>
                                <li>Reporting Server</li>
                            </ul>
                        </li>
                        <li>IVR<br/>
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <ul>
                                <li>Apps Server</li>
                            </ul>
                        </li>
                        <li>USSD Gateway<br/>
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-half.png') !!}">
                            <ul>
                                <li>Apps Server</li>
                            </ul>
                        </li>
                        <li>Billing Platform<br/>
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-one.png') !!}">
                            <img class="star" src="{!! url('public/assets/img/star-half.png') !!}">
                            <ul>
                                <li>Apps Server</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

        </div>

        <div id="content">

            <h1>JQuery/CSS Organisation Chart</h1>

            <div id="main">
            </div>

            

        </div>


 
@endsection
@section('javascript')
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script src="{!! url('public/assets/js/jq-orgchart.js') !!}"></script>
<script>
    $(function() {
        $("#organisation").orgChart({container: $("#main")});
    });
</script>
@endsection