@extends('layouts.frontend.master')

@section('title', 'My Profile')

@section('page-heading-title')
<div class="page-color-title p-4">
    <h1 class="heading">{{__('My Profile') }}</h1>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/css/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" />
<link rel="stylesheet" href="{{ asset('frontend/vendor/select2/css/select2.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/vendor/select2/css/select2-bootstrap4.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/vendor/select2/css/custom.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/2fa.css') }}">
<link rel="stylesheet" href="{{asset('frontend/css/csr-central-dashboard.css')}}">
@endpush


@section('content')
<section>
<!-- mx-xl-1 mx-lg-5 mx-lg-1  mx-md-1 -->
    <div class="">
        <div class="container-fluid" id="csrnow_settings">
            <div class="row flex-nowrap">
                <!-- TAB LINKS AREA -->
                <div class="sidebar col-auto px-sm-0 px-0 bg-light">
                    <div class="d-flex flex-column mt-4 nav-menu">

                        <ul class="nav nav-tabs flex-column mb-sm-auto mb-0 tab_menu pt-2 nav-sidebar" id="myTab">
                            <li class="nav-item">
                                <a id="import_tab" href="#personal_information_data" class="nav-link {{($activeTab == '#personal_information_data') ? 'active' : ''}}" data-bs-toggle="tab"
                                    data-bs-target="#personal_information_data">
                                <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/personal-information.svg') }}" data-active-img="{{ url('frontend/images/profile-ico/wpersonal-information.svg') }}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Personal Information')}}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a id="company_information_tab" href="#company_information_data" class="nav-link {{($activeTab == '#company_information_data') ? 'active' : ''}}"
                                    data-bs-toggle="tab" data-bs-target="#company_information_data">
                                    <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/wcompany-information.svg') }}" data-active-img="{{ url('frontend/images/profile-ico/company-information.svg') }}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Company Information')}}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a id="change_email_tab" href="#change_email_data" class="nav-link {{($activeTab == '#change_email_data') ? 'active' : ''}}"
                                    data-bs-toggle="tab" data-bs-target="#change_email_data">
                                <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/mail.svg') }}" data-active-img="{{ url('frontend/images/profile-ico/wmail.svg') }}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Change Email')}}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a id="change_password_tab" href="#change_password_data" class="nav-link {{($activeTab == '#change_password_data') ? 'active' : ''}}"
                                    data-bs-toggle="tab" data-bs-target="#change_password_data">
                                <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/emailpassword.svg')}}"
                                data-active-img="{{ url('frontend/images/profile-ico/wemailpassword.svg')}}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Change Login Password')}}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a id="one_time_passcode_tab" href="#one_time_passcode_data" class="nav-link {{($activeTab == '#one_time_passcode_data') ? 'active' : ''}}"
                                    data-bs-toggle="tab" data-bs-target="#one_time_passcode_data">
                                <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/one-time-password.svg') }}" data-active-img="{{ url('frontend/images/profile-ico/wone-time-password.svg') }}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('One-Time Passcode')}}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a id="export_tab" href="#google_fa_data" class="nav-link {{($activeTab == '#google_fa_data') ? 'active' : ''}}" data-bs-toggle="tab"
                                    data-bs-target="#google_fa_data">
                                <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/2fa.svg') }}" data-active-img="{{ url('frontend/images/profile-ico/w2fa.svg') }}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Google 2FA')}}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a id="preference_tab" href="#preference_data" class="nav-link {{($activeTab == '#preference_data') ? 'active' : ''}}" data-bs-toggle="tab"
                                    data-bs-target="#preference_data">
                                <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/preferences.svg') }}" data-active-img="{{ url('frontend/images/profile-ico/wpreferences.svg') }}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Preferences')}}</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a id="wallet_tab" href="#wallet_data" class="nav-link {{ ($activeTab == 'wallet_data') ? 'active' : ''}}" data-bs-toggle="tab"
                                    data-bs-target="#wallet_data">
                                <img class='nav-icon' data-img="{{ url('frontend/images/profile-ico/wallet-filled-money.svg') }}" data-active-img="{{ url('frontend/images/profile-ico/wwallet-filled-money.svg') }}"/>
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Wallet Address')}}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="collapseToggle tooglebtnico active position-sticky">
                        <img id="toggleIcon" src="{{url('frontend/images/sidebar.svg')}}" class="toogleicon m-auto" />
                    </div>
                    <div class="mob-dropdown">
                        <div class="form-select-container">
                            <select class="select-nav" id="mob-options">
                                <option value="personal_information_data" class="option-placeholder">{{__('Personal information')}}</option>

                                <option value="#personal_information_data" selected="selected">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Personal Information')}}</span>
                                </option>
                                <option value="#company_information_data">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Company Information')}}</span>
                                </option>
                                <option value="#change_email_data">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Change Email')}}</span>
                                </option>
                                <option value="#change_password_data">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Change Login Password')}}</span>
                                </option>
                                <option value="#one_time_passcode_data">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('One-Time Passcode')}}</span>
                                </option>
                                <option value="#google_fa_data">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Google 2FA')}}</span>
                                </option>
                                <option value="#preference_data">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Preferences')}}</span>
                                </option>
                                <option value="#wallet_data">
                                    <span class="ms-1 d-none d-md-inline menuText">{{__('Wallet Address')}}</span>
                                </option>

                            </select>
                        </div>
                    </div>

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

                <!-- TAB CONTENT AREA -->
                <div class="col py-3 mt-2">
                    <div class="container-fluid mobp-0">
                        <div class="tab-content" id="renderable">
                            <div class="tab-pane fade {{ ($activeTab == '') ? 'show active' : ''}}" id="personal_information_data">
                                <div class="row">
                                    <div class="col-lg-12 ">
                                        <div class="box">
                                            <div class="box-header with-border">
                                                <h4 class="box-title">{{__('Update Profile Details')}}</h4>
                                            </div>
                                            @include('frontend.auth.profile')
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12 ">
                                        <div class="box">
                                            <div class="box-header with-border">
                                                <h4 class="box-title">{{ __('Sponsor Link') }}</h4>
                                            </div>
                                            <div class="card-body">
                                                <p class="m-0 p-0 mb-1">{{ __('Your Independent Associate Sponsor Link') }}</p>
                                                <p class="h5"><a style="overflow-wrap: break-word;" href="javascript:void(0)" class="h5 text-decoration-underline text-primary break-words" >{{ route('sponser', Auth::user()->username) }}</a></p>
                                                <a href="javascript:void(0)" class="btn btn-submit btn-rounded btn-outline sponser_btn mt-2" onclick="navigator.clipboard.writeText('{{ route('sponser', Auth::user()->username) }}');">Copy Link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="company_information_data">
                                @include('frontend.guest.retirement_of_csr.company-information')
                            </div>

                            <div class="tab-pane fade" id="change_email_data">
                                @include('frontend.auth.change-email')
                            </div>
                            <div class="tab-pane fade" id="change_password_data">
                                @include('frontend.auth.change-login-password')
                            </div>
                            <div class="tab-pane fade" id="one_time_passcode_data">
                                @include('frontend.auth.one-time-passcode')
                            </div>

                            <div class="tab-pane fade" id="google_fa_data">
                               @include('frontend.auth.2fastartmember')
                            </div>

                            <div class="tab-pane fade" id="preference_data">
                                <div class="row">
                                    <div class="col-lg-12 col-12">
                                        <div class="box preference">
                                            <div class="box-header with-border pb-3">
                                                <h4 class="box-title" style="text-transform: capitalize !important;">
                                                {{ __('Preferences') }}
                                                </h4>
                                            </div>

                                            <div class="form-check form-switch">
                                                <div class="checkbox">
                                                    
                                                        @if (readOnlyMode())
                                                        <div onClick="preferenceToggleReadOnly()">
                                                            <input class="form-check-input" type="checkbox" name="preference" id="preference"
                                                                data-toggle="toggle" data-on="Right" data-off="Left"
                                                                data-width="100" data-offstyle="primary"
                                                                data-onstyle="primary" {{ optional(Auth::user()->userSettings)->preference == 'Right' ? 'checked' : '' }} >
                                                        </div>
                                                        @else
                                                        <div>
                                                            <input class="form-check-input" type="checkbox" name="preference" id="preference"
                                                                data-toggle="toggle" data-on="Right" data-off="Left"
                                                                data-width="100" data-offstyle="primary"
                                                                data-onstyle="primary" {{ optional(Auth::user()->userSettings)->preference == 'Right' ? 'checked' : '' }} onChange="preferenceToggle()">
                                                        </div>
                                                        @endif
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade {{ ($activeTab == 'add-wallet') ? 'show active' : ''}}" id="wallet_data">
                                @include('frontend.member.wallet_address.index')
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END -->
            </div>
        </div>
    </div>
</section>
@include('frontend.member.wallet_address.add-wallet-address-model')

@endsection
@push('scripts')

<script>
    var selectedCountryId = "{{ $user->userAddress->country_id ?? '' }}";
    var selectedStateId = "{{ $user->userAddress->state_id ?? '' }}";
    var selectedCityId = "{{ $user->userAddress->city_id ?? '' }}";
</script>

<script src="{{ asset('frontend/js/client-asset.js') }}"></script>
<script src="{{asset('frontend/js/bootstrap-v5.1.3/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('frontend/js/jqueryui/jquery-ui.min.js')}}"></script>
<script src="{{ asset('frontend/vendor/select2/js/select2.full.js') }}"></script>
<script src="{{ asset('frontend/vendor/select2/custom.js') }}"></script>
<script src="{{ asset('frontend/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('frontend/js/pages-js/company-information.js') }}"></script>
<script>
    let readOnlyMode = "{{ readOnlyMode() ?? '' }}";
    let email = "{{ auth()->user()->email }}";
</script>
<script src="{{ asset('frontend/js/pages-js/parent-blade.js') }}"></script>
<script src="{{ asset('frontend/js/pages-js/frontuser-profile.js') }}"></script>
<script src="{{asset('frontend/js/google2fa.js')}}"></script>
<script src="{{asset('frontend/js/fees-withdrawal.js')}}"></script>
<script src="{{asset('frontend/js/add-wallet.js')}}"></script>


<script type="text/javascript">
    jQuery.getScript("https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js", function() {
        web3 = new Web3(new Web3.providers.HttpProvider("https://sepolia.infura.io/v3/28db03efbc5b42839ebb7d5965c1748d"));
    });
    $('.collapseToggle').on('click', function() {
	$(".sidebar").toggleClass('sidebar--Collapse');
	$('.main').toggleClass('main--slide');	$('#toggleIcon').toggleClass('rotate');
});
</script>
<script>
$(document).ready(function(){
    setNavActiveImg();

    $(document).on('click','.nav-link',function(){
        $('.nav-link').removeClass('active');
        $(this).addClass('active');
        setNavActiveImg();
    });
});

function setNavActiveImg(){
    $('.nav-link').each(function(key,index) {
        var img = $(index).find('.nav-icon').attr('data-img');
        $(index).find('.nav-icon').attr('src',img);
    });
    var img = $('.nav-link.active').find('.nav-icon').attr('data-active-img');
    $('.nav-link.active').find('.nav-icon').attr('src',img);
}
</script>


<script>
    document.getElementById('mob-options').onchange = function() {

    var tabId = this.value;
    var tabLink = document.querySelector('a[href="' + tabId + '"]');

    if (tabLink) {
        tabLink.click(); // Triggers the tab to become active
    }
};
</script>
@endpush