@extends('wallet.layouts.master')
@section('title','Account Settings')
@section('description', 'Wallet Account Settings. Update your profile data. Set permissions and Multi-factor authentication')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('dashboard_d/assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('content')
    <main class='w-100 p-3'>
        <input type="hidden" value="{{Auth::user()->id}}" id="user_id">
        <div class="heading d-flex justify-content-between align-items-center gap-3 px-1">
            <h2 class='fw-bold fs-2'>Account Settings</h2>
        </div>

        <div class="mt-32">
            <nav>
                <div class="nav nav-tabs border-secondary border-opacity-50 overflow-x-scroll overflow-y-hidden" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-general-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-general" type="button" role="tab" aria-controls="nav-general"
                            aria-selected="true"><span class="material-symbols-outlined">account_circle</span> General
                    </button>
                    @if(Auth::user()->hasRole('Company'))
                    <button class="nav-link" id="nav-support-email-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-support-email" type="button" role="tab" aria-controls="nav-support-email"
                            aria-selected="false"><span class="material-symbols-outlined">mail</span>
                        Support Email
                    </button>
                    <button class="nav-link" id="nav-crypto-wallet-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-crypto-wallet" type="button" role="tab" aria-controls="nav-crypto-wallet"
                            aria-selected="false"><span class="material-symbols-outlined">account_balance_wallet</span>
                        CryptoAPIs
                    </button>
                    @endif
                    <button class="nav-link" id="nav-notification-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-notification" type="button" role="tab" aria-controls="nav-notification"
                            aria-selected="false"><span class="material-symbols-outlined">notification_add</span>
                        Notifications
                    </button>
                    @if(!Auth::user()->hasRole('Company'))
                    <button class="nav-link" id="nav-verification-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-verification" type="button" role="tab" aria-controls="nav-verification"
                            aria-selected="false"><span class="material-symbols-outlined">fingerprint</span>
                        Verification
                    </button>

                    <button class="nav-link text-nowrap" id="nav-paymentMethod-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-paymentMethod" type="button" role="tab"
                            aria-controls="nav-paymentMethod" aria-selected="false"><span
                            class="material-symbols-outlined">assured_workload</span> Payment Method
                    </button>
                    @endif
                    <button class="nav-link" id="nav-security-tab" data-bs-toggle="tab" data-bs-target="#nav-security"
                            type="button" role="tab" aria-controls="nav-security" aria-selected="false"><span
                            class="material-symbols-outlined">lock</span> Security
                    </button>
                </div>
            </nav>

            <div class='mt-24'>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active dark-card rounded-4 shadow p-32" id="nav-general"
                         role="tabpanel" aria-labelledby="nav-general-tab" tabindex="0">
                        <div class="row">
                            <div class="col-lg-4">
                                <h6 class='fw-bold fs-20'>Basic Details</h6>
                            </div>
                            <div class="col-lg-8">
                                <form id="update_account_settings">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" placeholder="" value="{{Auth::user()->fname}}"
                                                       id="fname">
                                                <label for="fname">First Name</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" placeholder="" value="{{Auth::user()->lname}}"
                                                       id="lname">
                                                <label for="lname">Last Name</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="email" value="{{Auth::user()->email}}" placeholder=""
                                                       disabled id="email">
                                                <label for="email">Email Address</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" placeholder="" value="{{Auth::user()->phone}}"
                                                       id="phone">
                                                <label for="phone">Phone number</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" value="{{Auth::user()->telegram_id}}" placeholder=""
                                                       disabled id="telegram_id">
                                                <label for="telegram_id">Telegram ID</label>
                                            </div>
                                        </div>

                                        @role('User')
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="date" max="{{date('Y-m-d')}}" required placeholder=""
                                                       value="{{Auth::user()->dob}}"
                                                       id="dob">
                                                <label for="dob">Date of Birth</label>
                                            </div>
                                        </div>
                                        @endrole

                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" placeholder="" value="{{Auth::user()->country}}"
                                                       id="country">
                                                <label for="country">Country</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" placeholder="" value="{{Auth::user()->city}}"
                                                       id="city">
                                                <label for="city">City</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" placeholder="" value="{{Auth::user()->country}}"
                                                       id="postal_code">
                                                <label for="postal_code">Postal Code</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="floating-input">
                                                <input type="text" placeholder="" value="{{Auth::user()->address}}"
                                                       id="address">
                                                <label for="address">Full Address</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="floating-input">
                                            <textarea id="notes" placeholder='' class='resize-none'
                                                      rows='4'>{{Auth::user()->notes}}</textarea>
                                                <label for="notes">About Self</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mx-auto">
                                        <button class='button float-end px-5' id="update_account_settings_btn" type='submit'>Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade dark-card rounded-4 p-20" id="nav-notification" role="tabpanel"
                         aria-labelledby="nav-notification-tab" tabindex="0">
                        <div class="">
                            <h4 class='fw-bold p-24'>Notifications Setting</h4>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="shadow bg-line-dark rounded-4 p-3">
                                    <div>
                                        <h5 class="fw-bold">How you want to receive notifications</h5>
                                    </div>
                                    <div class="">
                                        <form id="permission-settings-form">
                                            <div
                                                class="single-notify border-bottom pb-24 mt-24 border-light border-opacity-25 d-flex align-items-center justify-content-between">
                                                <div>
                                                    <h5 class='fw-bold mb-3'>On Email</h5>
                                                    <p class='text-clr'>Receive notifications on email.</p>
                                                </div>
                                                <div>
                                                    <label class="ui-switch" for="notifications_on_email">
                                                        <input type="checkbox" name="notifications_on_email"
                                                            value="Notifications On Email" {{ Auth::user()->can('Notifications On Email') ? 'checked' : '' }}
                                                            id="notifications_on_email">
                                                        <div class="slider">
                                                            <div class="circle"></div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                            <div
                                                class="single-notify border-bottom pb-24 mt-24 border-light border-opacity-25 d-flex align-items-center justify-content-between">
                                                <div>
                                                    <h5 class='fw-bold mb-3'>On SMS</h5>
                                                    <p class='text-clr'>Receive notifications on sms.</p>
                                                </div>
                                                <div>
                                                    <label class="ui-switch" id="notifications_on_sms">
                                                        <input type="checkbox" name="notifications_on_sms"
                                                            value="Notifications On SMS" {{ Auth::user()->can('Notifications On SMS') ? 'checked' : '' }}
                                                            id="notifications_on_sms">
                                                        <div class="slider">
                                                            <div class="circle"></div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                            <div
                                                class="single-notify border-bottom pb-24 mt-24 border-light border-opacity-25 d-flex align-items-center justify-content-between">
                                                <div>
                                                    <h5 class='fw-bold mb-3'>On Both</h5>
                                                    <p class='text-clr'>Receive notifications on email and sms.</p>
                                                </div>
                                                <div>
                                                    <label class="ui-switch" id="account_changes">
                                                        <input type="checkbox" name="transaction_received"
                                                            value="Notifications On Both" {{ Auth::user()->can('Notifications On Both') ? 'checked' : '' }}
                                                            id="transaction_received">
                                                        <div class="slider" id="account_changes">
                                                            <div class="circle"></div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mt-3 mt-lg-0">
                                <div class="shadow bg-line-dark rounded-4 p-3">
                                    <h5 class="fw-bold">Set notifications</h5>
                                    <div class="">
                                        <form id="permission-settings-form">
                                            <div
                                                class="single-notify border-bottom pb-24 mt-24 border-light border-opacity-25 d-flex align-items-center justify-content-between">
                                                <div>
                                                    <h5 class='fw-bold mb-3'>Transaction Received</h5>
                                                    <p class='text-clr'>Receive an email when transactions is received.</p>
                                                </div>
                                                <div>
                                                    <label class="ui-switch" for="transaction_received">
                                                        <input type="checkbox" name="transaction_received"
                                                            value="Transaction Received" {{ Auth::user()->can('Transaction Received') ? 'checked' : '' }}
                                                            id="transaction_received">
                                                        <div class="slider">
                                                            <div class="circle"></div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                            <div
                                                class="single-notify border-bottom pb-24 mt-24 border-light border-opacity-25 d-flex align-items-center justify-content-between">
                                                <div>
                                                    <h5 class='fw-bold mb-3'>Transaction Sent</h5>
                                                    <p class='text-clr'>Receive an email when transactions is sent.</p>
                                                </div>
                                                <div>
                                                    <label class="ui-switch" id="notifications_on_both">
                                                        <input type="checkbox" name="notifications_on_both"
                                                            value="Transaction Sent" {{ Auth::user()->can('Transaction Sent') ? 'checked' : '' }}
                                                            id="notifications_on_both">
                                                        <div class="slider">
                                                            <div class="circle"></div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                            <div
                                                class="single-notify border-bottom pb-24 mt-24 border-light border-opacity-25 d-flex align-items-center justify-content-between">
                                                <div>
                                                    <h5 class='fw-bold mb-3'>Account Changes</h5>
                                                    <p class='text-clr'>Receive an email when there is a change to your
                                                        account.</p>
                                                </div>
                                                <div>
                                                    <label class="ui-switch" id="account_changes">
                                                        <input type="checkbox" name="transaction_received"
                                                            value="Account Changes" {{ Auth::user()->can('Account Changes') ? 'checked' : '' }}
                                                            id="transaction_received">
                                                        <div class="slider" id="account_changes">
                                                            <div class="circle"></div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade dark-card rounded-4 shadow p-32" id="nav-verification" role="tabpanel"
                         aria-labelledby="nav-verification-tab" tabindex="0">
                        <div class='pb-24'>
                            <h6 class='fs-18 fw-bold'>Verification</h6>
                            <p class='text-clr fs-14'>Verify your account with KYC to unlock all features.</p>
                        </div>
                        <hr class='opacity-25 mb-0'>
                        <div class="steps mt-32">
                            <div class="step">
                                <div class='circle clear'><span class="material-symbols-outlined">check</span></div>
                                <div class="text">Basic Details</div>
                            </div>
                            <div class="step">
                                <div class='circle current'>2</div>
                                <div class="text">Multi-factor authentication</div>
                            </div>
                            <div class="step">
                                <div class='circle pending'>3</div>
                                <div class="text">KYC Verification</div>
                            </div>
                        </div>
                        <div class='no-found text-center pt-32 pb-32'>
                            <img class='w-250 mt-3 object-fit-contain opacity-50'
                                 src="{{asset('wallet_d/assets/images/two-factor.png')}}" alt="you lost">
                            <h2 class='fw-bold mt-3'>Complete Two-Factor Authentication</h2>
                            <p class='fw-500 my-3'>You must activate two-factor authentication before you can
                                continue.</p>
                            <button class='button px-md-5'>Complete Two-Factor Authentication</button>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-paymentMethod" role="tabpanel"
                         aria-labelledby="nav-paymentMethod-tab" tabindex="0">
                        <div class="dark-card rounded-4 shadow mt-32 p-32">
                            <div class="d-flex align-items-center justify-content-between p-24">
                                <div class="col-lg-8 mx-auto">
                                    <h5 class='fw-bold'>Payment Methods</h5>
                                    <small class='text-clr'>You can add or remove your payment methods here.</small>
                                </div>
                                {{--                                <div>--}}
                                {{--                                    <button data-bs-toggle="modal" data-bs-target="#2fa_email"--}}
                                {{--                                            class='btn btn-outline-primary fs-small d-flex align-items-center rounded-5'>--}}
                                {{--                                        <i class="material-symbols-outlined me-2">add</i>Add New--}}
                                {{--                                    </button>--}}
                                {{--                                </div>--}}
                            </div>
                            <div>
                                <nav class="col-lg-8 mx-auto">
                                    <div class="nav nav-tabs border-secondary border-opacity-50" id="nav-tab"
                                         role="tablist">
                                        <button class="nav-link active col-6 justify-content-center"
                                                id="nav-creditCard-tab"
                                                data-bs-toggle="tab" data-bs-target="#nav-creditCard" type="button"
                                                role="tab"
                                                aria-controls="nav-creditCard" aria-selected="true"> Credit Card
                                        </button>
                                        <button class="nav-link col-6 justify-content-center" id="nav-bankAccount-tab"
                                                data-bs-toggle="tab" data-bs-target="#nav-bankAccount" type="button"
                                                role="tab"
                                                aria-controls="nav-bankAccount" aria-selected="false"> Bank Account
                                        </button>
                                    </div>
                                </nav>
                                <div class="tab-content mt-28" id="nav-tabContent">
                                    <div class="tab-pane fade show active" id="nav-creditCard" role="tabpanel"
                                         aria-labelledby="nav-creditCard-tab" tabindex="0">
                                        <div class="row justify-content-center">
                                            <div class="col-lg-8">
                                                <form id="save_credit_card">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="floating-input">
                                                                <input type="text"
                                                                       maxlength="19"
                                                                       placeholder=""
                                                                       required name="card_number"
                                                                       value="{{ $credit_card ? Crypt::decryptString($credit_card->card_number ?? '') : ''}}"
                                                                       id="card_number">
                                                                <label for="card_number">Card Number</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="floating-input">
                                                                <input type="text" placeholder=""
                                                                       value="{{ $credit_card ? Crypt::decryptString($credit_card->card_holder ?? '') : ''}}"
                                                                       required name="card_holder"
                                                                       id="card_holder">
                                                                <label for="card_holder">Card Holder</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="floating-input">
                                                                <input type="text" placeholder="" required

                                                                       value="{{ $credit_card ? Crypt::decryptString($credit_card->expiry_date ?? '') : ''}}"
                                                                       name="expiry_date"
                                                                       id="expiry_date">
                                                                <label for="expiry_date">Expiry Date</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="floating-input">
                                                                <input type="text" required
                                                                       value="{{ $credit_card ? Crypt::decryptString($credit_card->cvv ?? '') : ''}}"
                                                                       placeholder="" id="cvv">
                                                                <label for="cvv">CVV</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 pb-3">
                                                            <small class='text-clr fs-12'>Your data is encrypted and
                                                                stored
                                                                securely using AES-256 encryption.</small>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="floating-input">
                                                        <textarea id="card_notes" placeholder='' class='resize-none'
                                                                  rows='5'>{{$credit_card->card_notes ?? ''}}</textarea>
                                                                <label for="card_notes">Notes</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="text-center">
                                                        <button class='button px-5' id="save_credit_card_btn"
                                                                type='submit'>
                                                            {{$credit_card ? 'Update' : 'Add'}} Credit Card
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="nav-bankAccount"
                                         role="tabpanel"
                                         aria-labelledby="nav-bankAccount-tab" tabindex="0">
                                        <div class="row justify-content-center">
                                            <div class="col-lg-8">
                                                <form id="save_bank_account">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="floating-input">
                                                                <input type="text" required placeholder=""
                                                                       value="{{ $bank_account ? Crypt::decryptString($bank_account->bank_name ?? '') : ''}}"
                                                                       id="bank_name">
                                                                <label for="bank_name">Bank Name</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="floating-input">
                                                                <input type="text" required placeholder=""
                                                                       value="{{ $bank_account ? Crypt::decryptString($bank_account->account_number ?? '') : ''}}"
                                                                       id="account_number">
                                                                <label for="account_number">Account Number</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mb-3 mb-md-0">
                                                            <div class="d-flex justify-content-between gap-3 align-items-center mt-2">
                                                                <p class='text-clr'>Enable SEPA.</p>
                                                                <label class="ui-switch end-0 strat-auto" for="sepa">
                                                                    <input type="checkbox"
                                                                            {{$bank_account ? $bank_account->sepa ? 'checked' : '' : ''}} name="sepa"
                                                                            id="sepa">
                                                                    <div class="slider">
                                                                        <div class="circle"></div>
                                                                    </div>

                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="floating-input">
                                                                <input type="text" required placeholder=""
                                                                       value="{{ $bank_account ? Crypt::decryptString($bank_account->swift ?? '') : ''}}"
                                                                       id="swift">
                                                                <label for="swift">Swift Code</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 pb-3">
                                                            <small class='text-clr fs-12'>Your data is encrypted and
                                                                stored
                                                                securely using AES-256 encryption.</small>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="floating-input">
                                                        <textarea id="bank_notes" placeholder='' class='resize-none'
                                                                  rows='5'>{{$bank_account->bank_notes ?? ''}}</textarea>
                                                                <label for="bank_notes">Notes</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button class='button px-5' id="save_bank_account_btn"
                                                            type='submit'>
                                                        {{$bank_account ? 'Update' : 'Add'}} Payment Method
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if(Auth::user()->hasRole('Company'))
                    <div class="tab-pane fade dark-card rounded-4 shadow p-32" id="nav-support-email" role="tabpanel"
                         aria-labelledby="nav-support-email-tab" tabindex="0">
                        <div class="row">
                            <div class="col-lg-4">
                                <h6 class="fw-bold fs-20">Support Email</h6>
                                <p class="text-clr mt-2">Email Support sends and receives with this mailbox.</p>
                            </div>
                            <div class="col-lg-8">
                                <form method="POST" action="{{ route('update_support_mailbox') }}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="email" name="email" id="support_email" required placeholder=""
                                                       value="{{ old('email', $mailbox->email ?? '') }}">
                                                <label for="support_email">Email Address</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="password" name="password" id="support_password" placeholder=""
                                                       autocomplete="new-password" {{ empty($mailbox) ? 'required' : '' }}>
                                                <label for="support_password">{{ empty($mailbox) ? 'Password' : 'Password (leave blank to keep)' }}</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" name="imap_host" id="imap_host" required placeholder=""
                                                       value="{{ old('imap_host', $mailbox->imap_host ?? 'mail.lucidemail.com') }}">
                                                <label for="imap_host">IMAP Host</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="floating-input">
                                                <input type="number" name="imap_port" id="imap_port" required placeholder=""
                                                       value="{{ old('imap_port', $mailbox->imap_port ?? 993) }}">
                                                <label for="imap_port">IMAP Port</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="floating-input">
                                                <select name="imap_encryption" id="imap_encryption">
                                                    @foreach(['ssl' => 'SSL/TLS', 'tls' => 'STARTTLS', 'starttls' => 'STARTTLS (explicit)'] as $value => $label)
                                                        <option value="{{ $value }}" @selected(old('imap_encryption', $mailbox->imap_encryption ?? 'ssl') === $value)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                                <label for="imap_encryption">IMAP Security</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="floating-input">
                                                <input type="text" name="smtp_host" id="smtp_host" required placeholder=""
                                                       value="{{ old('smtp_host', $mailbox->smtp_host ?? 'mail.lucidemail.com') }}">
                                                <label for="smtp_host">SMTP Host</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="floating-input">
                                                <input type="number" name="smtp_port" id="smtp_port" required placeholder=""
                                                       value="{{ old('smtp_port', $mailbox->smtp_port ?? 587) }}">
                                                <label for="smtp_port">SMTP Port</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="floating-input">
                                                <select name="smtp_encryption" id="smtp_encryption">
                                                    @foreach(['tls' => 'STARTTLS', 'ssl' => 'SSL/TLS', 'starttls' => 'STARTTLS (explicit)'] as $value => $label)
                                                        <option value="{{ $value }}" @selected(old('smtp_encryption', $mailbox->smtp_encryption ?? 'tls') === $value)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                                <label for="smtp_encryption">SMTP Security</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mx-auto">
                                        <button class="button float-end px-5" type="submit">Save mailbox</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    @endif
                    @if(Auth::user()->hasRole('Company'))
                    <div class="tab-pane fade dark-card rounded-4 shadow p-32" id="nav-crypto-wallet" role="tabpanel"
                         aria-labelledby="nav-crypto-wallet-tab" tabindex="0">
                        <div class="row">
                            <div class="col-lg-4">
                                <h6 class="fw-bold fs-20">CryptoAPIs account</h6>
                                <p class="text-clr mt-2">Each company uses its own cryptoapis.io key. The HD wallet and gas address stay on this company.</p>
                            </div>
                            <div class="col-lg-8">
                                <form method="POST" action="{{ route('update_crypto_wallet') }}">
                                    @csrf
                                    <div class="mb-3">
                                        <label class="form-label" for="crypto_api_key">API key</label>
                                        <input type="password" class="form-control" name="api_key" id="crypto_api_key"
                                               autocomplete="new-password" required
                                               placeholder="{{ !empty($cryptoWallet) ? $cryptoWallet->apiKeyHint() : 'Paste the company API key' }}">
                                        <div class="form-text">Leave the current key in place only if you are replacing it. The seed is never shown.</div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="text-muted small">HD wallet</div>
                                        <div>{{ !empty($cryptoWallet) ? 'Configured' : 'Will be created when you save the key' }}</div>
                                    </div>
                                    <button class="btn btn-primary" type="submit">Save CryptoAPIs account</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="tab-pane fade" id="nav-security" role="tabpanel" aria-labelledby="nav-security-tab"
                         tabindex="0">
                        <div class="dark-card rounded-4 shadow p-28">
                            <div class='pb-24'>
                                <h6 class='fs-18 fw-bold'>Login history</h6>
                                <p class='text-clr fs-14 mb-3'>Your recent login activity</p>
                                <div class="shadow bg-line-dark rounded-4 p-3">
                                    <div class="table-responsive">
                                        <table class="display table table-bordered" id="deafult_ordering_table" style="width:100%">
                                            <colgroup>
                                                <col span="1" style="width: 15%;">
                                                <col span="1" style="width: 15%;">
                                                <col span="1" style="width: 50%;">
                                                <col span="1" style="width: 20%;">
                                            </colgroup>
                                            <thead>
                                            <tr>
                                                <th>Login type</th>
                                                <th>IP Address</th>
                                                <th>Client</th>
                                                <th>Date Time</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($logs as $log)
                                                <tr>
                                                    <td>{{$log->type}}</td>
                                                    <td>{{$log->ip}}</td>
                                                    <td>{{$log->client}}</td>
                                                    <td>{{$log->created_at}}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-32">
                            <div class="col-md-6">
                                <div class="dark-card rounded-4 shadow pt-32 overflow-hidden">
                                    <div class='p-3 pt-0 ms-4'>
                                        <h5 class='fs-18 fw-bold'>Multi-factor authentication</h5>
                                    </div>
                                    <div class="row pl-32 pr-32">
                                        <div class="col-lg-6">
                                            <div class="rounded-20 p-24 py-5 rounded-20 border border-light border-opacity-25 h-100">

                                                <div id="google_2FA_enable">
                                                    @if(Auth::user()->google_2fa_enable)
                                                        <p class='text-success d-flex align-items-center gap-2'><span class="p-1 bg-success rounded-5"></span> On</p>
                                                    @else
                                                        <p class='text-danger d-flex align-items-center gap-2'><span class="p-1 bg-danger rounded-5"></span> Off</p>
                                                    @endif
                                                </div>
                                                <h6 class='mt-3 fw-bold'>Authenticator App</h6>
                                                <p class='mt-3 text-clr fs-14'>Use an authenticator to generate one time codes.</p>

                                                <button onclick="enableGoogle2FA()" id="enableGoogle2FA_btn"
                                                        class=' {{Auth::user()->google_2fa_enable ? 'd-none' : ''}} mt-28 btn btn-outline-primary d-flex align-items-center gap-2 rounded-5 px-4 fs-14'>
                                                    Set Up <span class="material-symbols-outlined fs-5">east</span>
                                                </button>

                                                    <button id="disableGoogle2FA_btn" onclick="disableGoogle2FA(1)"
                                                            class=' {{Auth::user()->google_2fa_enable ? '' : 'd-none'}} mt-28 btn btn-outline-primary d-flex align-items-center gap-2 rounded-5 px-4 fs-14'>
                                                        Disable <span class="material-symbols-outlined fs-5">east</span>
                                                    </button>

                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="rounded-20 p-24 py-5 rounded-20 border border-light border-opacity-25 h-100">

                                                <div id="email_2FA_enable">
                                                    @if(Auth::user()->email_2FA_enable)
                                                        <p class='text-success d-flex align-items-center gap-2'><span class="p-1 bg-success rounded-5"></span> On</p>
                                                    @else
                                                        <p class='text-danger d-flex align-items-center gap-2'><span class="p-1 bg-danger rounded-5"></span> Off</p>
                                                    @endif
                                                </div>

                                                <h6 class='mt-3 fw-bold'>Email Authentication</h6>
                                                <p class='mt-3 text-clr fs-14'>Use your email to receive security code.</p>

                                                <button id="send_2FA_email_code_btn" onclick="send2FAemailcode()"
                                                    class=' {{Auth::user()->email_2FA_enable ? 'd-none' : ''}} mt-28 btn btn-outline-primary d-flex align-items-center gap-2 rounded-5 px-4 fs-14'>
                                                    Set Up <span class="material-symbols-outlined fs-5">east</span>
                                                </button>

                                                <button id="disable_email_2fa" onclick="disable_email_2fa(1)"
                                                        class=' {{Auth::user()->email_2FA_enable ? '' : 'd-none'}} mt-28 btn btn-outline-primary d-flex align-items-center gap-2 rounded-5 px-4 fs-14'>
                                                    Disable <span class="material-symbols-outlined fs-5">east</span>
                                                </button>

                                            </div>
                                        </div>
                                    </div>
                                    <p class='bg-dark rounded-3 p-2 mt-24'>
                                        <small class='text-clr d-flex align-items-center gap-2 '>
                                            <span class="material-symbols-outlined">note_alt</span>
                                            <b>Tip.</b> Only one 2FA method can be active at a time.
                                        </small>
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <form id="update_password" class='dark-card rounded-4 shadow p-32 h-100'>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="floating-input">
                                                <input required type="password" placeholder="" name="old_password"
                                                       id="old_password">
                                                <label for="old_password">Old Password</label>
                                            </div>
                                        </div>
                                        <div class="col-12 text-center position-relative">
                                            <hr>
                                            <span class='fs-14 bg-site position-absolute px-1 text-clr'
                                                  style='top: 3px; left: 43%;'>New Password</span>
                                        </div>
                                        <div class="col-12 mt-3">
                                            <div class="floating-input">
                                                <input required type="password" placeholder="" name="new_password"
                                                       id="new_password">
                                                <label for="new_password">New Password</label>
                                            </div>
                                        </div>
                                        <div class="col-12 mt-2">
                                            <div class="floating-input">
                                                <input required type="password" placeholder="" name="confirm_password"
                                                       id="confirm_password">
                                                <label for="confirm_password">New Confirm Password</label>
                                            </div>
                                        </div>
                                        <div class="col-12 mt-3">
                                            <button class='button float-end px-5' id="update_pass_btn" type='submit'>
                                                Change Password
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dark-card rounded-4 d-none shadow mt-32">
            <h5 class='fw-bold p-24'>Transactions</h5>
            <div class='no-found text-center opacity-50 pt-32 pb-32'>
                <img class='w-250 object-fit-contain' src="{{asset('wallet_d/assets/images/you_lost.png')}}"
                     alt="you lost">
                <h4 class='fw-bold'>Oops! Nothing is here.</h4>
                <p class='fw-500'>We couldn't find any transactions.</p>
            </div>
            <hr class='m-0'>
            <div class="d-flex gap-3 p-16 flex-wrap">
                <div class="btn btn-dark d-flex align-items-center gap-2 rounded-5 px-3 fs-14 fw-600">See All <span
                        class="material-symbols-outlined">arrow_right_alt</span></div>
            </div>
        </div>
    </main>
    <!------Modals------>
    <div class="modal fade" id="2fa_email" tabindex="-1" aria-labelledby="2fa_emailLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-8">
                <div class="modal-header border-0 pb-2">
                    <h6 class="modal-title fw-bold" id="2fa_emailLabel">Email Authentication</h6>
                    <button type="button" class="btn-close invert" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-0">
                    <div>
                        <div class="col-12">
                            <form id="verify_2fa_email_code">
                                <div class="row">
                                    <div class="col-12 pb-3 my-2">
                                        <p class='text-clr fs-14'>
                                            We sent a 6-digit code to your email address.
                                            Please enter it below to confirm your identity.
                                        </p>
                                    </div>
                                    <div class="col-12">
                                        <div class="floating-input">
                                            <input type="text" maxlength="6" minlength="6"  required name="email_2FA_code" id="email_2FA_code">
                                            <label for="email_2FA_code">2FA Code</label>
                                        </div>
                                    </div>
                                </div>
                                <button class='button w-100 px-5' id="verify_2fa_email_code_btn" type='submit'>
                                    Confirm
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Google 2FA -->
    <div class="modal fade" id="2fa_google" tabindex="-1" aria-labelledby="2faGoogleLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-2">
                    <h6 class="modal-title fw-bold" id="2faGoogleLabel">Enable Google 2FA</h6>
                    <button type="button" class="btn-close invert" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="verify_2fa_google_code">
                        <div class="row">
                            <div class="col-12 p-3 text-center">
                                <img src="" id="qr_image" alt="QR Code">
                                <div id="qr_image_container"></div>
                            </div>
                            <div class="col-12 pb-3">
                                <p class='text-clr fs-14'>Scan this code with your preferred authenticator app.</p>
                            </div>
                            <div class="col-12 pb-20 d-flex align-items-center gap-2">
                                <p id="secret" class="text-clr fs-14 border border-light rounded-3 p-1 px-2 border-opacity-10"></p>
                                <!-- <i class="ms-2 fa fs-2 fa-copy" style="cursor: pointer;"></i> -->
                                <span class="material-symbols-outlined crsr-pntr" onclick="copyToClipboard(this)">content_copy</span>
                            </div>
                            <div class="col-12">
                                <div class="floating-input">
                                    <input type="text" maxlength="6" minlength="6" required name="google_2FA_code" id="google_2FA_code">
                                    <label for="google_2FA_code">2FA Code</label>
                                </div>
                            </div>
                        </div>
                        <button class='button w-100 px-5' id="verify_2fa_google_code_btn" type='submit'>
                            Confirm
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{ asset('dashboard_d/assets/js/vendor/datatables.min.js') }}"></script>
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>--}}
    <script>
        // $(document).ready(function () {
        //
        //     $('#expiry_date').mask('00/00', {placeholder: "MM/YY"});
        //     $('#card_number').mask('0000 0000 0000 0000', {placeholder: "#### #### #### ####"});
        // });
        $(document).ready(function () {
            $("#account-settings-page").addClass('active')
            // ordering or sorting
            $('#deafult_ordering_table').DataTable({
                // "order": [
                //     [1, "ASC"]
                // ]
            });
        });
    </script>
    <!-- Add a function to copy the secret to clipboard -->
    <script>
        function copyToClipboard(e) {
            e.innerText = "check";
            var secret = document.getElementById('secret').innerText;
            navigator.clipboard.writeText(secret).then(function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Copied',
                    text: 'Secret copied to clipboard!',
                });
                setTimeout(() => {
                    e.innerText = "content_copy";
                }, 2000);
            }).catch(function(error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to copy the secret.',
                });
            });
        }
    </script>

@endsection