@extends('layout.layout')
@section('title','Organization Chart')
@section('org_chart','active')
@section('content')
    <style>
        #tree {
            background-color: #F1F3F4;
            border-radius: 10px;
        }

        /* Set the background color of the diagram container */
        #myDiagramDiv {
            background-color: #f0f0f0; !important; /* Change the background color to a lighter shade */
        }

        /* Update the shape's stroke and stroke-width */
        .go-Shape {
            stroke: #333; /* Change the outline color to a darker shade */
            stroke-width: 1; /* Adjust the outline width as needed */
        }

    </style>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h5>Organization Chart</h5>
                </div>
            </div>

            <div class="callout callout-info mt-2">
                <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  mr-1"></i> Tree View
                </div>
                <div class="card-body">
                    <div id="myDiagramDiv"
                         style="background-color: #34343C; border: solid 1px black; height: 570px;"></div>
                    <p class="mt-3">
                        <button class="btn btn-primary" id="zoomToFit"><i class="fas fa-search-plus mr-2"></i> Zoom to Fit</button>
                        <button class="btn btn-primary" id="centerRoot"><i class="fas fa-align-center mr-2"></i> Center on root</button>
                    </p>
                    <script src="{{asset('/lib/orgcharts/release/go.js')}}"></script>
                    <link rel="stylesheet" href="{{asset('/lib/orgcharts/extensions/DataInspector.css')}}"/>
                    <script src="{{asset('/lib/orgcharts/extensions/DataInspector.js')}}"></script>

                    @include('sitemap.chart-js')
                    <script src="{{asset('/lib/orgcharts/assets/js/goSamples.js')}}"></script>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">

        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $('.select2').select2({
            maximumSelectionLength: 0,
            selectOnClose: true,
        })
    </script>
    @include('sitemap.script')
@endsection