@extends('layouts.master')

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

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

@section('breadcrumb-text')
    <div class="w-100 d-flex justify-content-between">
        <div>
            <h2 class="p-0 m-0">{{ __('Network Chart') }}</h2>
        </div>

        <button class="btn btn-primary" id="hideShowFilterBtn" style="max-height: 35px !important;" data-toggle="tooltip"
            data-placement="top" title="Show Filter"><i class="bi bi-funnel"></i> {{ __('Show Filter') }}</button>
    </div>
@endsection

@section('content')
    <section>
        <!-- TAB CONTENT AREA -->
        <div class="tab-content p-0" id="renderable">
            <div id="network_chart">
                <div class="card mb-3" id="filterCard" style="display: none">
                    <div class="card-body">
                        <form method="get" id="search-forms" class="p-2">
                            <div class="row">
                                <div class="col-12 col-sm-6 col-md-2 col-lg-2">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <input type="text"
                                            class="phone-validation form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11"
                                            value="{{ $tsv ?? '' }}" id="tsv" name="tsv" placeholder="" />
                                        <label for="tsv"
                                            class="ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Min. Tsv') }}<span
                                                class="text-danger">*</span></label>
                                        <div class="text-danger error tsv_error"></div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="status"
                                            class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Status') }}</label>
                                        <select name="status[]" id="status"
                                            class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form"
                                            multiple>
                                            <option value="pending" {{ in_array('pending', $status) ? 'selected' : '' }}>
                                                {{__('Pending')}}
                                            </option>
                                            <option value="active" {{ in_array('active', $status) ? 'selected' : '' }}>
                                                {{__('Active')}}
                                            </option>
                                            <option value="deleted" {{ in_array('deleted', $status) ? 'selected' : '' }}>
                                                {{__('Deleted')}}
                                            </option>
                                            <option value="suspended" {{ in_array('suspended', $status) ? 'selected' : '' }}>{{__('Suspended')}}</option>
                                            <option value="abandoned" {{ in_array('abandoned', $status) ? 'selected' : '' }}>{{__('Abandoned')}}</option>
                                            <option value="lockout" {{ in_array('lockout', $status) ? 'selected' : '' }}>
                                                {{__('Lockout')}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label for="rank"
                                            class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Rank') }}</label>
                                        <select name="rank[]" id="rank"
                                            class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form"
                                            multiple>
                                            <option value="0" {{ in_array(0, $rank) ? 'selected' : '' }}>0</option>
                                            <option value="1" {{ in_array(1, $rank) ? 'selected' : '' }}>1</option>
                                            <option value="2" {{ in_array(2, $rank) ? 'selected' : '' }}>2</option>
                                            <option value="3" {{ in_array(3, $rank) ? 'selected' : '' }}>3</option>
                                            <option value="4" {{ in_array(4, $rank) ? 'selected' : '' }}>4</option>
                                            <option value="5" {{ in_array(5, $rank) ? 'selected' : '' }}>5</option>
                                            <option value="6" {{ in_array(6, $rank) ? 'selected' : '' }}>6</option>
                                            <option value="7" {{in_array(7, $rank) ? 'selected' : '' }}>7</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-6 col-md-2 col-lg-2">
                                    <button type="submit" class="btn btn-primary my-1"
                                            id="btn-network-chart">{!! renderIconHtml('save') !!}{{__('Submit')}}</button>
                                    <a href="{{url('member/my-team/network-chart')}}"
                                       class="btn btn-danger bg-danger border-0 text-white">{!! renderIconHtml('delete') !!}{{__('Clear')}}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                @php
                                    $rankArr = [
                                        "#FF4C00",
                                        "#00FF7F",
                                        "#005CFF",
                                        "#FFD700",
                                        "#FF7CFF",
                                        "#AA00FF",
                                        "#00B2B2",
                                        "#5C7C00",
                                    ];

                                    $statusColors = [
                                        "pending" => "#FFD700",
                                        "active" => "#008000",
                                        "deleted" => "#A9A9A9",
                                        "suspended" => "#CC8400",
                                        "abandoned" => "#A10000",
                                        "lockout" => "#0000FF",
                                    ];
                                @endphp

                                <div class="d-flex">
                                    <div>
                                        <p class="mb-0">{{__('Color Representation for rank')}}</p>
                                        <div class="d-flex flex-wrap text-white">
                                            @foreach($rankArr as $index => $color)
                                                <div style="background:{{$color}};" class="px-3 py-1 m-1 mb-0 rounded">
                                                    {{$index}} Rank
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class='ms-4'>
                                        <p class="mb-0">{{__('Color Representation for status')}}</p>
                                        <div class="d-flex flex-wrap text-white">
                                            @foreach ($statusColors as $status => $color)
                                                <div style="background:{{$color}};" class="px-3 py-1 m-1 mb-0 rounded">
                                                    {{$status}}
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="offset" id="offset">
                            </div>
                        </div>
                    </div>
                </div>


                <div class="grid grid-cols-1 gap-4">
                    <div class="card col-span-1">
                        <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>

        </div>
        <!-- END -->

    </section>
    <div id="right-sidebar" class="card overflow-y-auto"
        style="padding: 0px 0px;position: absolute;right: 0;top: 0;min-width: 371px;max-height: 80%;">


        <div class="flex justify-between items-center p-3 pb-4 gap-4" id="collapseSidebarBtn" style="display: none">
            <button  class="btn btn-outline-primary w-full" onclick="collapseRightSidebar('hide');"
              >
                <i class="fas fa-compress"></i>
                <span> {{__('Collapse')}}</span>
            </button>
        </div>
    </div>

    <div id="collapseSidebarBtnOuter" style=" position: fixed;display: none;
        top: 20%;
        right: 0%;
        background: #FFFFFF;
        padding: 10px;
        box-shadow: 0 2px 4px 0px #bfbfbf;
        border-radius: 0 8px 0 8px;"  >
        <button class="btn btn-outline-primary" onclick="collapseRightSidebar('show');">
            <i class="fas fa-expand mr-1"></i><span>{{__('Expand')}}</span>
        </button>
    </div>

@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>
        let selectedExcludeUserId = {!! json_encode(explode(',', $selectedExcludeUserId ?? '')) !!};
    </script>

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