@extends('layout.layout')
@section('title','Organization Chart')
@section('org_chart','active')
@section('content')
    <style>
        #tree {
            background-color: #F1F3F4;
            border-radius: 10px;
        }
    </style>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h5>Organization Chart</h5>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="callout callout-info">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for=""> Reporting To </label>
                        <select class="form-control select2" id="manager_id" name="manager_id"></select>
                    </div>

                </div>
            </div>
            <div class="card card-cyan">
                <div class="card-header">
                    <i class="fa fa-sitemap"></i> Tree View
                </div>
                <div class="card-body">
                    <div style="width:100%;" id="tree"></div>
                </div>
            </div>
        </div>
    </section>


    {{-- <div class="container" style=" padding: 5px; border-radius: 5px"></div>

     <div class="wrapper" style="margin: 10px">
         <div class="container-fluid mt-2 mb-3" style="border-radius: 5px; padding: 0px !important">
             <h5>Organization Chart</h5>
         </div>

         <div class="callout callout-info">
             <div class="form-group row" style="padding:0px; margin-bottom: 0px">
                 <label for="" class="col-sm-2 col-form-label">Select Manager</label>
                 <div class="col-sm-4">
                     <select class="form-control" id="manager_id" name="manager_id"></select>
                 </div>
             </div>
         </div>

         <div class="card card-cyan">
             <div class="card-header">
                 Organizational Chart Tree View
             </div>
             <div class="card-body">
                 <div style="width:100%;" id="tree"></div>
             </div>
         </div>
     </div>--}}
@endsection
@section('scripts')
    <script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
{{--    <script src="{{asset('/lib/orgchart.js')}}"></script>--}}
{{--    <script src="{{asset('/lib/orgchart.d.ts')}}"></script>--}}
    <script>
        $('.select2').select2({
            maximumSelectionLength: 0,
            selectOnClose: true,
        })
    </script>
    @include('sitemap.script')
@endsection