@extends('layouts.master')

@section('title', __('Network Chart'))

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/styles/css/page-css/networkd3.css') }}">
@endpush

@section('content')
<section>
    <div class="container-fluid p-0">
    <!-- TAB CONTENT AREA -->
        <div class="tab-content p-0" id="renderable">
            <div id="network_chart">
                <div class="card">
                    <div class="card-body" style="position: relative;">
                        <!-- Floating Action Buttons -->
                        <div class="floating-buttons">
                            <button class="floating-button btn btn-outline-primary" onclick="chart.fit()">
                                <i class="bi bi-arrow-repeat"></i> {{__('Reset View')}}
                            </button>
                            <button class="floating-button btn btn-outline-primary" onclick="chart.zoomOut()">
                                <i class="bi bi-dash"></i> {{__('Zoom Out')}}
                            </button>
                            <button class="floating-button btn btn-outline-primary" onclick="chart.zoomIn()">
                                <i class="bi bi-plus-lg"></i> {{__('Zoom In')}}
                            </button>
                            <button class="floating-button btn btn-outline-primary" onclick="chart.expandAll(); chart.fit();">
                                <i class="bi bi-arrows-angle-expand"></i> {{__('Expand All')}}
                            </button>
                            <button class="floating-button btn btn-outline-primary" onclick="collapseAndFit(); collapse=true;">
                                <i class="bi bi-arrows-angle-contract"></i> {{__('Collapse All')}}
                            </button>
                            <button class="floating-button btn btn-outline-primary" onclick="chart.fit()">
                                <i class="bi bi-plus-square"></i> {{__('Fit')}}
                            </button>
                            <button class="floating-button btn btn-outline-primary" onclick="chart.setCentered({{ Auth::user()->member->id ?? '' }}).render()">
                                <i class="bi bi-text-center"></i> {{__('Center')}}
                            </button>
                        </div>

                        <div class="text-center w-100 m-4" id="loader-chart">
                            <div class="loader spinner-bubble spinner-bubble-primary"></div>
                        </div>
                        <div class="" style="overflow-y: scroll;width:100%">
                            <div id="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- END -->
    </div>
</section>
@endsection
@push('scripts')
    <script src="{{ asset('frontend/js/netwok-chart/d3.v7.min.js') }}"></script>
    <script src="{{ asset('frontend/js/netwok-chart/d3-org-chart@3.js') }}"></script>
    <script src="{{ asset('frontend/js/netwok-chart/d3-flextree.js') }}"></script>

    <script src="{{ asset('frontend/js/page-js/network-chart.js') }}"></script>
@endpush
