@extends('layouts.master')
@section('title', 'View Member')
@push('styles')
    <link rel="stylesheet" href="{{ asset('backend/css/pages-css/networkd3.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/css/pages-css/member-dashboard.css') }}">
    <style>
        .table-responsive .columns.columns-right.btn-group.float-right{
            right: 0 !important;
            position: unset !important;
        }
        #custom_toolbar {
            width: 100%;
            text-align: unset !important;
            position: unset !important;
            right: 0 !important;
        }

        .table-fixed tbody{
            display: block;
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .table-fixed thead,.table-fixed tbody tr{
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .table-fixed thead{
            position: relative;
        }
        .z-10{
            z-index: 999999;
        }
    </style>
@endpush

@section('breadcrumb-text')
    <h1 class="w-100">
        Member : {{ ucwords($member->user->details->first_name ?? '') }} {{ ucwords($member->user->details->last_name ?? '') }}
        <a href="{{route('admin.members.index')}}" data-toggle="tooltip" data-placement="top" title="Back" class="btn btn-primary float-end">
            {!! renderIconHtml('back') !!}Back
        </a>
    </h1>
@endsection

@section("content")
    <div class="card p-2 mb-2 w-fits">
        <ul class="nav nav-pills profile-nav justify-content-start" id="profileTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active show" data-toggle="tab" href="#MemberDetails" role="tab" aria-controls="MemberDetails" aria-selected="true">{{ __('Member Details') }}</a>
            </li>
            @can('members-bv-list')
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#Bv" role="tab" aria-controls="Bv" aria-selected="false">{{ __('BV') }}</a>
                </li>
            @endcan
            @can('members-transaction-view')
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#Financial" role="tab" aria-controls="Financial" aria-selected="false">{{ __('Financial') }}</a>
                </li>
            @endcan
            @can('members-invoices-view')
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#Invoices" role="tab" aria-controls="Invoices" aria-selected="false">{{ __('Invoices') }}</a>
            </li>
            @endcan
            @can('members-gift-codes-view')
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#GiftCodes" role="tab" aria-controls="GiftCodes" aria-selected="false">{{ __('Gift Codes') }}</a>
            </li>
            @endcan

            @can('members-kyc-view')
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#KYCKYB" role="tab" aria-controls="KYC" aria-selected="false">{{ __('KYC/KYB') }}</a>
                </li>
            @endcan
            @can('members-team-structure-view')
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#TeamStructure" role="tab" aria-controls="TeamStructure" aria-selected="false">{{ __('Team Structure') }}</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#NetWorkChart" role="tab" aria-controls="Upline" aria-selected="false">{{ __('Network Chart') }}</a>
                </li>
            @endcan
            @can('internal-notes-list')
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#InternalNotes" role="tab" aria-controls="InternalNotes" aria-selected="false">{{ __('Internal Notes') }}</a>
                </li>
            @endcan
            @can('business-license-list')
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#BusinessLicence" role="tab" aria-controls="BusinessLicence" aria-selected="false">{{ __('Business Licence') }}</a>
            </li>
            @endcan
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#Security" role="tab" aria-controls="Security" aria-selected="false">{{ __('Security') }}</a>
            </li>
            @can('members-activity-list')
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#ActivityDetails" role="tab" aria-controls="ActivityDetails" aria-selected="false">{{ __('Activity') }}</a>
                </li>
            @endcan
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#LoginDetails" role="tab" aria-controls="LoginDetails" aria-selected="false">{{ __('Logins') }}</a>
            </li>
            @can('support-ticket-list')
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#TicketList" role="tab" aria-controls="TicketList" aria-selected="false">{{ __('Tickets') }}</a>
            </li>
            @endcan

            @can('members-assign-role')
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#assignRole" role="tab" aria-controls="assignRole" aria-selected="false">{{ __('Assign Role') }}</a>
                </li>
            @endcan
        </ul>
    </div>

    <div class="tab-content p-0" id="profileTabContent">
        <div class="tab-pane fade active show bordered-row" id="MemberDetails" role="tabpanel" aria-labelledby="timeline-tab">
            <div class="row px-1">
                <div class="col-md-6 col-sm-12 col-12 p-2 pt-0 mb-2">
                    @include('backend.member.tabs.user_details')
                </div>
                <div class="col-md-6 col-sm-12 col-12 p-2 pt-0 mb-2">
                    @include('backend.member.tabs.personal_details')
                </div>
                <div class="col-md-6 col-sm-12 col-12 p-2 pt-0 mb-2">
                    @include('backend.member.tabs.user_access_setting')
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="Bv" role="tabpanel" aria-labelledby="timeline-tab">
            @can('members-bv-list')
                @include('backend.member.tabs.bv')
            @endcan
        </div>
        <div class="tab-pane fade" id="Financial" role="tabpanel" aria-labelledby="timeline-tab">
            @include('backend.member.tabs.financial')
        </div>
        <div class="tab-pane fade" id="Invoices" role="tabpanel" aria-labelledby="timeline-tab">
            @can('members-invoices-view')
                @include('backend.member.tabs.invoices')
            @endcan
        </div>
        <div class="tab-pane fade" id="GiftCodes" role="tabpanel" aria-labelledby="timeline-tab">
            @can('members-gift-codes-view')
                @include('backend.member.tabs.gift_codes')
            @endcan
        </div>
        <div class="tab-pane fade" id="KYCKYB" role="tabpanel" aria-labelledby="timeline-tab">
            @can('members-kyc-view')
                @include('backend.member.tabs.kyc')
            @endcan
        </div>
        <div class="tab-pane fade" id="TeamStructure" role="tabpanel" aria-labelledby="timeline-tab">
            @can('members-team-structure-view')
                @include('backend.member.tabs.team-structure')
            @endcan
        </div>
        <div class="tab-pane fade" id="NetWorkChart" role="tabpanel" aria-labelledby="timeline-tab">
            @can('members-team-structure-view')
                @include('backend.member.tabs.network-chart')
            @endcan
        </div>
        <div class="tab-pane fade" id="InternalNotes" role="tabpanel" aria-labelledby="timeline-tab">
            @can('internal-notes-create')
                @include('backend.member.internal_notes.create')
            @endcan

            <div id="contentEditRecord" class="contentEditRecord"></div>

            <div class="card">
                <div class="card-body">
                    @can('internal-notes-list')
                        @include('backend.member.internal_notes.list')
                    @endcan
                </div>
            </div>
        </div>
        @can('business-license-list')
        <div class="tab-pane fade" id="BusinessLicence" role="tabpanel" aria-labelledby="timeline-tab">
            @include('backend.member.tabs.business_license')
        </div>
        @endcan
        <div class="tab-pane fade" id="Security" role="tabpanel" aria-labelledby="timeline-tab">
            @include('backend.member.tabs.password_reset')
        </div>
        <div class="tab-pane fade" id="ActivityDetails" role="tabpanel" aria-labelledby="timeline-tab">
            @include('backend.member.tabs.activity')
        </div>
        <div class="tab-pane fade" id="LoginDetails" role="tabpanel" aria-labelledby="timeline-tab">
            @include('backend.member.tabs.login_details')
        </div>
        @can('support-ticket-list')
            <div class="tab-pane fade" id="TicketList" role="tabpanel" aria-labelledby="timeline-tab">
                @include('backend.member.tabs.tickets')
            </div>
        @endcan

        @can('members-assign-role')
            <div class="tab-pane fade" id="assignRole" role="tabpanel" aria-labelledby="assignRole-tab">
                @include('backend.member.tabs.assign_role')
            </div>
        @endcan

    </div>

    <input type="hidden" value="{{basicEncrypt($member->user_id)}}" id="encryptedUserId">
    <input type="hidden" value="{{basicEncrypt($member->member_id)}}" id="encryptedId">
    <input type="hidden" value="{{route('admin.member.addTeamSiteLicense')}}" id="teamSiteLicense">

@endsection

@push('scripts')
    <script>
        let wallets = @json($wallets);
        let searched_member = "{{ basicEncrypt($member->user->id ?? '') }}";
        var bvDescriptions =  JSON.parse('{!! json_encode($bvDescriptions ?? []) !!}');
        var actionTypes =  JSON.parse('{!! json_encode($actionTypes ?? []) !!}');
        let fa_setting = JSON.parse('{!! json_encode(Auth::user()->setting->fa_setting ?? []) !!}');
        let fa3_setting = JSON.parse('{!! json_encode(Auth::user()->setting->fa3_setting ?? []) !!}');
        var log = JSON.parse('{!! json_encode($logName) !!}');
        setTimeout(function () {
            @if(isset($member->user->details->address->country_id) && !empty($member->user->details->address->country_id))
            get_state_dropdown("{{ $member->user->details->address->state_id ?? '' }}","{{ $member->user->details->address->country_id ?? '' }}",'#editBasicInformationModal #state_id');
            @endif
        },2000)
    </script>

    <script src="{{asset('backend/js/pages-js/member.js')}}"></script>

    <script src="{{ asset('backend/js/pages-js/internal-notes.js') }}"></script>
    <script src="{{ asset('backend/js/pages-js/financial.js') }}"></script>
    <script src="{{ asset('backend/js/pages-js/team-structure.js') }}"></script>
    <script src="{{ asset('backend/js/pages-js/ticket.js') }}"></script>

    {{--START for network chart--}}
    <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 src="{{ asset('backend/js/pages-js/network-chart.js') }}"></script>
@endpush