@extends('adminlte::page')
@section('title', config('adminlte.title') . ' | Organogram')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Organogram</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Organogram</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')

<script>
        window.Laravel = {
            organogramApiKey: "{{ env('ORGANOGRAM_API_KEY') }}",
            organogramUrl: "{{ env('ORGANOGRAM_URL') }}",
            organogramId: "{{ env('ORGANOGRAM_ID') }}",
        };
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2.7.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script>

    <script src="{{ asset('js/organogram.js') }}"></script>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-wrap align-items-center justify-content-between mb-1">
                        <div class="d-grid gap-1 d-sm-flex mb-2">
                            <div class="btn-group mr-1">
                                <button class="btn btn-secondary shadow-sm"
                                    onClick="fetchAndUpdate({{ env('ORGANOGRAM_ID') }})" title="Reset to Home">
                                    <i class="fas fa-home"></i>
                                </button>
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.expandAll().render().fit()" title="Expand All">
                                    <i class="fas fa-expand-arrows-alt"></i>
                                </button>
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.collapseAll().render().fit()" title="Collapse All">
                                    <i class="fas fa-compress-arrows-alt"></i>
                                </button>
                            </div>

                            <div class="btn-group mr-1">
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.compact(false).render().fit()" title="Horizontal Layout">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.compact(true).render().fit()" title="Vertical Layout">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>

                            <div class="btn-group mr-1">
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.layout('top').render().fit()" title="Top">
                                    <i class="fas fa-caret-up"></i>
                                </button>
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.layout('bottom').render().fit()" title="Bottom">
                                    <i class="fas fa-caret-down"></i>
                                </button>
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.layout('left').render().fit()" title="Left">
                                    <i class="fas fa-caret-left"></i>
                                </button>
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.layout('right').render().fit()" title="Right">
                                    <i class="fas fa-caret-right"></i>
                                </button>
                            </div>

                            @can('hr_manager_hq')
                                <button class="btn btn-secondary shadow-sm"
                                    onclick="chart.exportImg({full:true})" title="Export Image">
                                    <i class="fas fa-image"></i>
                                </button>
                            @endcan
                        </div>

                        <div class="d-flex align-items-center mb-2">
                            <select name="search" value="835" class="custom-select sSelect shadow-sm" style="min-width: 250px;">
                                <option value="">Please select employee</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}">
                                    {{ $user->name }} - {{ $user->team }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="text-center">
                        <span class="mr-2">Legends:</span>
                        <span class="legend bg-orange" style="display: inline-block; width: 10px; height: 10px;"></span> <span class="mr-2">Director</span>
                        <span class="legend bg-info" style="display: inline-block; width: 10px; height: 10px;"></span> <span class="mr-2">Senior Manager</span>
                        <span class="legend bg-warning" style="display: inline-block; width: 10px; height: 10px;"></span> <span class="mr-2">Manager</span>
                        <span class="legend bg-secondary" style="display: inline-block; width: 10px; height: 10px;"></span> <span class="mr-2">Team Leader</span>
                        <span class="legend bg-success" style="display: inline-block; width: 10px; height: 10px;"></span> <span class="mr-2">Team Member</span>
                    </div>
                    <hr class="bg-secondary">
                    <div class="chart-container "></div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop