@extends('layouts.master')

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

@push('styles')
<style>
    #btnRight,#btnLeft{
        width:100px;
    }

    .password-div .form-control {
        border-bottom-right-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }

    .change_email_form .input-group:has(input:focus),
    #formChangePassword .input-group:has(input:focus) {
        color: #d9d5dd;
        background-color: #26222a;
        border-color: #a679d2;
        border-radius: 8px;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(28, 55, 80, 0.25);
    }
    .change_email_table{
        max-width: 60%;
    }

    .verification-text{
        border-radius: 5px;
    }
    .profile-nav{
        border-radius: 5% !important;
    }
    .breadcrumb ul li:after {
        background: none !important;
    }

    body .form-group label {
        font-weight: normal !important;
        font-size: .875rem !important;
    }

    .password-icon{
        position: absolute;
        top: 50%;
        right: 2px;
        border: unset;
        background: unset;
        display: flex;
        transform: translate(0, -50%);
        cursor: pointer;
    }

    .linked {
        color: #9B8B75;
        font-weight: 600;
    }
</style>
@endpush

@section('breadcrumb-text')
<div class="row w-100 m-0 p-0">
    <div class="col-12 col-md-2 col-lg-2 col-xl-2 col-sm-12 m-0 p-0">
        <h1 class="w-100 p-2">{{__('My Profile')}}</h1>
    </div>
    <div class="col-12 col-md-10 col-lg-10 col-xl-10 col-sm-12 m-0 p-0 d-flex justify-content-end">
        <div class="card profile-nav-section">
            <ul class="nav nav-pills profile-nav justify-content-start p-2 side-menu" id="myPillTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active show" data-toggle="pill" href="#profile_information" role="tab" aria-controls="homePIll" aria-selected="true"><i class="bi bi-person-down me-1"></i> {{ __('Personal Information') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#company_information" role="tab" aria-controls="profilePIll" aria-selected="false"><i class="bi bi-building me-1"></i> {{ __('Company Information') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#change_login_password" role="tab" aria-controls="profilePIll" aria-selected="false"><i class="bi bi-key me-1"></i> {{ __('Change Password') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#preference_tab" role="tab" aria-controls="profilePIll" aria-selected="false"><i class="bi bi-arrow-left-right me-1"></i> {{ __('Preferences') }}</a>
                </li>
            </ul>
        </div>
    </div>
</div>
@endsection

@section('content')
<section>
    <div class="container-fluid">
            <!-- TAB CONTENT AREA -->
                <div class="tab-content p-0" id="renderable">
                    <div class="tab-pane fade show active" id="profile_information">
                        @include('frontend.profile.profile')
                    </div>
                    <div class="tab-pane fade" id="company_information">
                        @include('frontend.profile.company-information')
                    </div>
                    <div class="tab-pane fade" id="change_login_password">
                        @include('frontend.profile.change-login-password')
                    </div>
                    <div class="tab-pane fade" id="preference_tab">
                        <div class="row">
                            <div class="col-lg-12 details preference">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-12 p-0">
                                        <div class="card">
                                            <div class="card-header" id="heading">
                                                <h4 class="box-title m-0 p-0">{{__('Preferences') }}</h4>
                                            </div>
                                            <div class="card-body">
                                                <p class="text-grey-600 mb-2">{{ __('Customise your dashboard by selecting the preferred position for action buttons.')}}</p>
                                                <button id="btnLeft" class="btn me-2 {{ optional(Auth::user()->setting)->preference == 'Left' ? 'btn-primary' : 'btn-outline-primary' }}" onclick="preferenceToggle('Left')" style="text-shadow: none;"><i class="bi bi-arrow-left-square"></i> {{ __('Left')}}</button>
                                                <button id="btnRight" class="btn {{ optional(Auth::user()->setting)->preference == 'Right' ? 'btn-primary' : 'btn-outline-primary' }}" onclick="preferenceToggle('Right')" style="text-shadow: none;"><i class="bi bi-arrow-right-square"></i> {{ __('Right')}}</button> &nbsp;
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <!-- END -->
    </div>
</section>

@endsection
@push('scripts')
<script src="{{ asset('frontend/js/page-js/client-asset.js') }}"></script>
<script src="{{ asset('frontend/styles/vendor/select2/custom.js') }}"></script>

<script>
    var selectedCountryId = "{{ $user->country_id ?? '' }}";
    var selectedStateId = "{{ $user->state_id ?? '' }}";
    var selectedCityId = "{{ $user->city_id ?? '' }}";
    var memberKycStatus = "{{ $member->kyc_status ?? '' }}";
    var isBusinessAccount = "{{  $user->is_business_account }}";
    $(document).ready(function(){
        if(isBusinessAccount == 0){
            $("a[href='#company_information']").closest('.nav-item').hide();
        }
    })
</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://goerli.infura.io/v3/161e66f35f0e461ca450b114bd1e4626"));
        });
</script>
<script>
    var readOnlyMode = "{{ readOnlyMode() ?? '' }}";
</script>
<script src="{{ asset('frontend/js/page-js/frontuser-profile.js') }}"></script>
@endpush