@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')
    <!-- Pass necessary Laravel variables to JavaScript -->
    <script>
        window.Laravel = {
            organogramApiKey: "{{ env('ORGANOGRAM_API_KEY') }}",
            organogramUrl: "{{ env('ORGANOGRAM_URL') }}"
        };
    </script>

    <!-- Include external JS files for D3.js and Select2 -->
    <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>

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

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div>
                    <div class="d-flex flex-wrap py-5 pl-5 ">
                        <button class="btn btn-default mr-2 mb-2 px-2"
                            onClick="fetchAndUpdate(1)">Home</button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.expandAll().render().fit()">
                            Expand All
                        </button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.collapseAll().render().fit()">
                            Collapse All
                        </button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.compact(false).render().fit()">
                            Horizontal
                        </button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.compact(true).render().fit()">
                            Vertical
                        </button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.layout('right').render().fit()">
                            Right
                        </button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.layout('top').render().fit()">
                            Top
                        </button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.layout('left').render().fit()">
                            Left
                        </button>
                        <button class="btn btn-default mr-2 mb-2"
                            onclick="chart.layout('bottom').render().fit()">
                            Bottom
                        </button>

                        @can('hr_manager_hq')
                            <div class="flex">
                                <button id="sync" class="btn btn-default mr-2 mb-2"
                                    onclick="{{ Http::withBasicAuth(env('EDI_SERVICE_USERNAME'), env('EDI_SERVICE_PASSWORD'))->withOptions(['verify' => false])->post('https://service.bt-ms.com:4647/service/organagram_refresh') }}"><i
                                        class="fa fa-sync"></i>
                                </button>
                                <button class="btn btn-default mr-2 mb-2"
                                    onclick="chart.exportImg({full:true})"><i class="fa fa-image"></i></button>
                            </div>

                            <script>
                                $(document).ready(function() {
                                    $("#sync").click(function() {
                                        $(this).find(".fa-sync").addClass("fa-spin");

                                        setTimeout(function() {
                                            $("#sync").find(".fa-sync").removeClass("fa-spin");
                                        }, 5000); // 5 seconds in milliseconds
                                    });
                                });
                            </script>
                        @endcan
                        {{-- Search using Select2 & json of users from controller --}}
                        <select name="search" class="custom-select sSelect col-md-3 mb-2">
                            <option value="1" {{ old('search') == '' ? 'selected' : '' }}>Please
                                select employee</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}">
                                    {{ $user->name }} - {{ $user->team }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>
@stop

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