@extends('layouts.master')

@section('title', 'Moving Line')

@push('styles')
@endpush

@section("content")
    <section class="mb-3">
        <div class="card">
            <div class="card-body">
                @if($processingMovingLine == 'yes')
                    <h4 class="text-center">{{ __('Please wait while we generate the new results. This may take around 10 minutes.') }}</h4>
                    @else
                    <form class="form" method="post" action="{{ route('admin.moving-line.startProcess') }}" id="movingLineForm">
                        @csrf
                        <div class="row">
                            <div class="col-12 col-md-6 ccol-sm-12">
                                <div class="row mt-2">
                                    <div class="col-12 col-md-12 form-group">
                                        <div class="form-group">
                                            <div class="relative z-0 w-full mb-1 group">
                                                <label for="user_id" class="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 z-50 custom-label" for="user_id">{{__('User')}}  <span class="text-danger">*</span></label>
                                                <select id="user_id" name="user_id" 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 select2">
                                                </select>
                                                <span class="user_id_error error text-danger"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12 form-group">
                                        <div class="form-group">
                                            <div class="relative z-0 w-full mb-1 group">
                                                <label for="sponsor_id" class="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 z-50 custom-label" for="sponsor_id">{{__('Placement Sponsor')}}  <span class="text-danger">*</span></label>
                                                <select id="sponsor_id" name="sponsor_id" 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 select2">
                                                </select>
                                                <span class="sponsor_id_error error text-danger"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12 form-group">
                                        <div class="form-group">
                                            <div class="relative z-0 w-full mb-1 group">
                                                <label for="personal_sponsor_id" class="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 z-50 custom-label" for="personal_sponsor_id">{{__('Personal Sponsor')}}  <span class="text-danger">*</span></label>
                                                <select id="personal_sponsor_id" name="personal_sponsor_id" 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 select2">
                                                </select>
                                                <span class="personal_sponsor_id_error error text-danger"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" id="submitBtn"
                                                class="btn btn-rounded btn-primary btn-outline btn-submit"><i
                                                class="ti-save-alt"></i>
                                            {!! renderIconHtml('update') !!}{{__('Update')}} </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    @if($processingMovingLine == 'failed')
                        <h5 class="fw-bold mt-3 text-danger">{{ __('Last moving line operation failed.') }}</h5>
                    @endif
                @endif
            </div>
        </div>
    </section>

    @if(isset($selectedUser) && !empty($selectedUser))
        <section class="main_section ">
            <div class="card mb-3">
                <div class="card-body">
                    <form method="get" id="search-forms" class="mb-3">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-2 col-lg-2">
                                <div class="form-group">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label class="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 z-50 custom-label" for="member_searchid">{{__('Username')}}</label>
                                        <select name="member_searchid" id="member_searchid" 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 js-data-member-search-id-ajax select-form">
                                            @if ($selectedUser)
                                                <option value="{{ basicEncrypt($selectedUser->user_id) }}" data-id="{{ $selectedUser->user_id }}" selected="selected">
                                                    {{ $selectedUser->user->details->username }}
                                                </option>
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <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-2 col-lg-2">
                                <div class="form-group">
                                    <div class="relative z-0 w-full mb-1 group">
                                        <label class="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 z-50 custom-label" for="member_searchid">{{ __('Exclude User') }}</label>
                                        <select name="exclude_user[]" id="exclude_user" multiple 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 select-form">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-2 col-lg-2">
                                <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-2 col-lg-2">
                                <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>GM
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary my-1" id="btn-network-chart">{!! renderIconHtml('save') !!}{{__('Submit')}}</button>
                        <a href="{{url('admin/member/moving-line')}}" class="btn btn-danger">{!! renderIconHtml('delete') !!}{{__('Clear')}}</a>
                    </form>
                    <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 ="p-2 m-1 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 ="p-2 m-1 rounded">{{$status}} </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="offset" id="offset">
                    </div>
                </div>
            </div>
            <!-- START for 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({{ $selectedUser->id ?? '' }}).render()">
                            <i class="bi bi-text-center"></i> {{__('Center')}}
                        </button>
                        <button class="floating-button btn btn-outline-primary" id="getPDF" onclick="downloadHighResPdf()">
                            <i class="bi bi-filetype-pdf"></i> {{__('Create PDF')}}
                        </button>
                        <button class="floating-button btn btn-outline-primary" id="getPDF2" onclick="downloadHighResPdfWithContent()">
                            <i class="bi bi-filetype-pdf"></i> {{__('Create PDF With Summary')}}
                        </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>
            <!-- END for chart -->
        </section>
    @endif
@endsection

@push('scripts')
    @if(isset($selectedUser) && !empty($selectedUser))
    <script src="{{ asset('backend/js/netwok-chart/d3.v7.min.js') }}"></script>
    <script src="{{ asset('backend/js/netwok-chart/d3-org-chart@3.js') }}"></script>
    <script src="{{ asset('backend/js/netwok-chart/d3-flextree.js') }}"></script>
    <script src="{{ asset('backend/js/jspdf/jspdf.umd.min.js') }}"></script>

    <script>
        let networkChartUrl = "{{ route('admin.moving-line.hierarchyMember') }}";
        let selectedExcludeUserId = {!! json_encode(explode(',', $selectedExcludeUserId ?? '')) !!};
    </script>

    <script src="{{ asset('backend/js/pages-js/network-chart.js') }}"></script>
    @endif

    <script>
        $(document).on("submit", "#movingLineForm", function (event) {
            event.preventDefault();
            let url = $(this).attr("action");
            let formData = $(this)[0];
            let data = new FormData(formData);
            let formId = $(this).attr("id");

            let saveBtn = $("#movingLineForm #submitBtn");
            let saveBtnText = saveBtn.html();
            saveBtn.attr("disabled", true).html('<i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;Loading...');

            $.ajax({
                url: url,
                type: "POST",
                data: data,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                contentType: false,
                processData: false,
                success: function (response) {
                    $(".error").text(""); // remove old errorss
                    if (response.success) {
                        swalMsg(response.msg,'success');
                        setTimeout(function (){
                            window.location.reload();
                        },5000);
                    } else {
                        saveBtn.attr("disabled", false).html(saveBtnText);
                        swalMsg(response.msg,'error');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (globalErrorHandler(jqXHR.responseJSON)) return false;
                    saveBtn.attr("disabled", false).html(saveBtnText);
                    if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                        $("#" + formId + " .error").text("");
                        for (const key in jqXHR.responseJSON.errors) {
                            if ($("#movingLineForm ." + key + "_error")) {
                                $("#movingLineForm ." + key + "_error").text(
                                    jqXHR.responseJSON.errors[key]
                                );
                            }
                        }
                    }
                },
            });
        });


        $('#user_id').select2({
            ajax: {
                url: baseURL + "admin/moving-line/user-search",
                dataType: 'json',
                processResults: function (data) {
                    return {
                        results: data.items
                    };
                }
            },
            placeholder: 'Select User',
            minimumInputLength: 1,
        }).on('select2:select', function (e) {
            // Get the selected data
            var selectedData = e.params.data;

            setTimeout(function (){
                // Update the sponsor select2 dropdown
                $('#sponsor_id').val(selectedData.sponsor_id).trigger('change');  // This updates the value and triggers the select2 change event

                // Manually set the text for the sponsor_id select2 option
                var sponsorOption = new Option(selectedData.sponsor_name, selectedData.sponsor_id, true, true);
                $('#sponsor_id').append(sponsorOption).trigger('change'); // Append the new option and trigger change

                // Update the personal sponsor select2 dropdown
                $('#personal_sponsor_id').val(selectedData.personal_sponsor_id).trigger('change');  // This updates the value and triggers the select2 change event

                // Manually set the text for the personal_sponsor_id select2 option
                var personalSponsorOption = new Option(selectedData.personal_sponsor_name, selectedData.personal_sponsor_id, true, true);
                $('#personal_sponsor_id').append(personalSponsorOption).trigger('change'); // Append the new option and trigger change
            });
        });

        $('#sponsor_id').select2({
            ajax: {
                url: baseURL + "admin/moving-line/user-search",
                dataType: 'json',
                data: function (params) {
                    // Pass the search term and user_id
                    return {
                        term: params.term, // this is the search query
                        user_id: $("#user_id").val() // pass the user_id
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.items
                    };
                }
            },
            placeholder: 'Select Sponsor',
            minimumInputLength: 1,
        });

        $('#personal_sponsor_id').select2({
            ajax: {
                url: baseURL + "admin/moving-line/user-search",
                dataType: 'json',
                data: function (params) {
                    // Pass the search term and user_id
                    return {
                        term: params.term, // this is the search query
                        user_id: $("#user_id").val() // pass the user_id
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.items,
                        user_id: $("#user_id").val()
                    };
                }
            },
            placeholder: 'Select Personal Sponsor',
            minimumInputLength: 1,
        });
    </script>
@endpush