<!DOCTYPE HTML>

<html>
    <head>
        <title>Org Chart</title>
        <link href="{!! url('public/assets/vendors/bootstrap/dist/css/bootstrap.min.css') !!}" rel="stylesheet">
        <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">
        <script type="text/javascript">
          var base_url = "{!! url('/') !!}";
        </script>
    </head>

    <body class="nav-md">
            <div class="container body">
                <div class="main_container">

                    <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 class="text">
                            <h2>JQuery</h2>
                            <pre>
                                $("#organisation").orgChart({container: $("#main")});
                            </pre>
                        </div>

                    </div>
                    <footer>
                      <div class="pull-right">
                        Click Mobile |  <a href="https://click-mobile.com">Main Website</a>
                      </div>
                      <div class="clearfix"></div>
                    </footer>
                </div>
            </div>

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

</html>