@extends('layouts.engine')
@section('content')
                    <div class="nk-content nk-content-fluid">
                        <div class="container-xl wide-lg">
                            <div class="nk-content-body">
                                <div class="nk-block-head">
                                    <div class="nk-block-head-content">
                                        <div class="nk-block-head-sub"><span>Account Setting</span></div>
                                        <h2 class="nk-block-title fw-normal">Security</h2>
                                        <div class="nk-block-des">
                                            <p>
                                                You have full control to manage your own account. <span class="text-primary"><em class="icon ni ni-info"></em></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="nk-nav nav nav-tabs">
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/profile') }}">Personal</a></li>
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/security') }}">Security</a></li>
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/notification') }}">Notifications</a></li>
                                    <li class="nav-item"><a class="nav-link" href="{{ url('/users/settings/api') }}">Api</a></li>
                                </ul>
                                <div class="nk-block">
                                    <div class="nk-block-head">
                                        <div class="nk-block-head-content">
                                            <h5 class="nk-block-title">Security Settings</h5>
                                            <div class="nk-block-des"><p>These settings helps you keep your account secure.</p></div>
                                        </div>
                                    </div>
                                    <div class="card card-bordered">
                                        <div class="card-inner-group" id="st">
                                            <settings-component></settings-component>
                                            <div class="card-inner">
                                                <div class="between-center flex-wrap flex-md-nowrap g-3">
                                                    <div class="nk-block-text">
                                                        <h6>Change Password</h6>
                                                        <p>Set a unique password to protect your account.</p>
                                                    </div>
                                                    <div class="nk-block-actions flex-shrink-sm-0">
                                                        <ul class="align-center flex-wrap flex-sm-nowrap gx-3 gy-2">
                                                            <li class="order-md-last"><a href="#cpassword" data-bs-dismiss="modal" data-bs-toggle="modal" class="btn btn-primary">Change Password</a></li>
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-inner">
                                                <div class="between-center flex-wrap flex-md-nowrap g-3">
                                                    <div class="nk-block-text">
                                                        <h6>My Secret Phrase</h6>
                                                        <p>Alternate means of recovering your lost account.</p>
                                                    </div>
                                                    <div class="nk-block-actions flex-shrink-sm-0">
                                                        <ul class="align-center flex-wrap flex-sm-nowrap gx-3 gy-2">
                                                            <li class="order-md-last"><a data-bs-dismiss="modal" data-bs-toggle="modal" href="#myphrase" class="btn btn-danger">Show Secret Phrase</a></li>
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--<div class="nk-block-head nk-block-head-sm">-->
                                    <!--    <div class="nk-block-head-content">-->
                                    <!--        <div class="nk-block-title-group">-->
                                    <!--            <h6 class="nk-block-title title">Recent Activity</h6>-->
                                    <!--            <a href="profile-activity.html" class="link">See full log</a>-->
                                    <!--        </div>-->
                                    <!--        <div class="nk-block-des"><p>This information about the last login activity on your account.</p></div>-->
                                    <!--    </div>-->
                                    <!--</div>-->
                                    <!--<div class="card card-bordered">-->
                                    <!--    <table class="table table-ulogs">-->
                                    <!--        <thead class="table-light">-->
                                    <!--            <tr>-->
                                    <!--                <th class="tb-col-os">-->
                                    <!--                    <span class="overline-title">Browser <span class="d-sm-none">/ IP</span></span>-->
                                    <!--                </th>-->
                                    <!--                <th class="tb-col-ip"><span class="overline-title">IP</span></th>-->
                                    <!--                <th class="tb-col-time"><span class="overline-title">Time</span></th>-->
                                    <!--                <th class="tb-col-action"><span class="overline-title">&nbsp;</span></th>-->
                                    <!--            </tr>-->
                                    <!--        </thead>-->
                                    <!--        <tbody>-->
                                    <!--            <tr>-->
                                    <!--                <td class="tb-col-os">Chrome on Window</td>-->
                                    <!--                <td class="tb-col-ip"><span class="sub-text">192.149.122.128</span></td>-->
                                    <!--                <td class="tb-col-time"><span class="sub-text">11:34 PM</span></td>-->
                                    <!--                <td class="tb-col-action"></td>-->
                                    <!--            </tr>-->
                                    <!--            <tr>-->
                                    <!--                <td class="tb-col-os">Mozilla on Window</td>-->
                                    <!--                <td class="tb-col-ip"><span class="sub-text">86.188.154.225</span></td>-->
                                    <!--                <td class="tb-col-time">-->
                                    <!--                    <span class="sub-text">Nov 20, 2019 <span class="d-none d-sm-inline-block">10:34 PM</span></span>-->
                                    <!--                </td>-->
                                    <!--                <td class="tb-col-action">-->
                                    <!--                    <a href="#" class="link-cross me-sm-n1"><em class="icon ni ni-cross"></em></a>-->
                                    <!--                </td>-->
                                    <!--            </tr>-->
                                    <!--            <tr>-->
                                    <!--                <td class="tb-col-os">Chrome on iMac</td>-->
                                    <!--                <td class="tb-col-ip"><span class="sub-text">192.149.122.128</span></td>-->
                                    <!--                <td class="tb-col-time">-->
                                    <!--                    <span class="sub-text">Nov 12, 2019 <span class="d-none d-sm-inline-block">08:56 PM</span></span>-->
                                    <!--                </td>-->
                                    <!--                <td class="tb-col-action">-->
                                    <!--                    <a href="#" class="link-cross me-sm-n1"><em class="icon ni ni-cross"></em></a>-->
                                    <!--                </td>-->
                                    <!--            </tr>-->
                                    <!--        </tbody>-->
                                    <!--    </table>-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="myphrase">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-body modal-body-lg">
                        <div class="nk-block-head nk-block-head-xs text-center">
                            <h5 class="nk-block-title">Secret Phrase</h5>
                            <div class="nk-block-text">
                                <div class="caption-text">In the next step you will see secret phrase (12 Words)<br> that allows you to recover a wallet</div>
                            </div>
                        </div>
                        <div class="nk-block">
                            <div class="nk-block-text">
                                <div class="caption-text bg-danger text-ellipsis text-white mt-4" style="border-radius:10px; padding:15px"> If you expose or share your secret phrase to anybody,<br> your funds can get stolen. <br> {{ config('app.name') }} support will NEVER reach out to ask for it.</div>
                            </div>
                            <div class="buysell-field form-action text-center mt-4">
                                <div><a class="btn btn-primary btn-lg" data-bs-dismiss="modal" data-bs-toggle="modal" href="#seedphrase">CONTINUE</a></div>
                                <div class="pt-3"><a href="#" data-bs-dismiss="modal" class="link link-danger">Cancel</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" tabindex="-1" role="dialog" id="seedphrase">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-body modal-body-lg text-center">
                        <div class="nk-modal">
                            <em class="nk-modal-icon icon icon-circle icon-circle-xxl ni ni-check bg-success"></em>
                            <h4 class="nk-modal-title">Your Secret Phrase</h4>
                            <div class="nk-modal-text">
                                <p class="caption-text">Write down or copy these words in the right order and save them somewhere safe.</p>
                                @php
                                $p = Auth::user()->seedphrase;
                                $seedp = explode(" ",$p)
                                
                                @endphp
                                @foreach($seedp as $sp)
                                    <a href="javascript;;" style="pointer-events: none;" class="btn btn-dim btn-secondary mt-2">{{ $loop->iteration }}. {{ $sp }}</a>
                                @endforeach
                            </div>
                            
                        </div>
                    </div>
                    <div class="modal-footer bg-lighter bg-warning">
                        <div class="text-center w-100">
                            <p>DO NOT share your phrase to anyone as this gives full access to your wallet</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="pwd1">
        <div class="modal fade" tabindex="-1" role="dialog" id="cpassword">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                    <div class="modal-body modal-body-lg">
                        <div class="nk-block-head nk-block-head-xs text-center">
                            <h5 class="nk-block-title">Change your password</h5>
                        </div>
                        
                        <password-component></password-component>
                        
                    </div>
                </div>
            </div>
        </div>
        </div>
@endsection
@section('scripts')
    <script src="{{ asset('assets/vue/settings.js') }}"></script>
    <script src="{{ asset('assets/vue/password.js') }}"></script>
    <script>
        new Vue({ el: '#st' })
        new Vue({ el: '#pwd1' })
    </script>   
@endsection