@extends('template.coin.layouts.base')

@section('title', __('Security Settings'))

@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
@endsection

@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">
                    <h2 class="nk-block-title fw-normal">Profile Info</h2>
                    <div class="nk-block-des">
                        <p>You have full control to manage your own account setting.</p>
                    </div>
                </div>
            </div>
            <ul class="nk-nav nav nav-tabs">
                <li class="nav-item active">
                    <a class="nav-link " href="{{secure_url('profile')}}">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{secure_url('profile/account')}}">Accounts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="{{secure_url('profile/security')}}">Security</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{secure_url('profile/activity')}}">Activity</a>
                </li>
            </ul>
            <div class="nk-block">
                <div class="nk-block">
                 
                    @if(Session::has('errmessage'))
                    <div class="alert alert-danger alert-thick alert-plain">
                        <div class="alert-cta flex-wrap flex-md-nowrap g-2">
                            <div class="alert-text has-icon">
                                <em class="icon ni ni-info-fill text-danger"></em>
                                <p>{{Session::get('errmessage')}}</p>
                            </div>
                            
                        </div>
                    </div>
                    @endif
                    
                    @if(Session::has('sucmessage'))
                    <div class="alert alert-success alert-thick alert-plain">
                        <div class="alert-cta flex-wrap flex-md-nowrap g-2">
                            <div class="alert-text has-icon">
                                <em class="icon ni ni-info-fill text-success"></em>
                                <p>{{Session::get('sucmessage')}}</p>
                            </div>
                            
                        </div>
                    </div>
                    @endif
                </div>
    <div class="nk-block-head">
        <div class="nk-block-head-content">
            <h5 class="nk-block-title">Settings</h5>
            <div class="nk-block-des">
                <p>These settings are helps you keep your account secure.</p>
            </div>
        </div>
    </div>
    <div class="card card-bordered">
        <div class="card-inner-group">
            <div class="card-inner">
                <div class="between-center flex-wrap flex-md-nowrap g-3">
                    <div class="nk-block-text">
                        <h6>Save my Activity Logs</h6>
                        <p>Save your all <a href="{{secure_url('profile/activity')}}" class="link link-primary">activity logs</a> including unusual activity detected.</p>
                    </div>
                    <div class="nk-block-actions">
                        <ul class="align-center gx-3">
                            <li class="order-md-last">
                                <div class="custom-control custom-switch mr-n2">
                                    <input type="checkbox" name="activity_log" class="custom-control-input qup-profile"  id="activity-log" data-key="setting" @if($user->activity_log == 'on') checked="" @endif />
                                    <label class="custom-control-label" for="activity-log"></label>
                                </div>
                            </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>Email me if encounter unusual activity</h6>
                        <p>You will get email notification whenever encounter invalid login activity.</p>
                    </div>
                    <div class="nk-block-actions">
                        <ul class="align-center gx-3">
                            <li class="order-md-last">
                                <div class="custom-control custom-switch mr-n2">
                                    <input type="checkbox" name="unusual_activity" class="custom-control-input qup-profile"  id="unusual-activity" data-key="setting"  @if($user->unusual_activity == 'on') checked="" @endif />
                                    <label class="custom-control-label" for="unusual-activity"></label>
                                </div>
                            </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>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="javascript:void(0)" id="settings-change-password" data-bs-toggle="modal" data-bs-target="#change-password" class="btn btn-sm btn-primary">Change Password</a>
                            </li>
                            <li>
                                <em class="text-soft text-date fs-12px">Last changed: <span>@if(!empty($user->last_update_password))
                                {{__date_parse($user->last_update_password , 'M d, Y h:i A')}}
                                @else 
                                N/A
                                @endif</span></em>
                            </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>
                            2FA Authentication
                            @if($user->fa2_status == 'enabled')
                            <span class="badge badge-success">Enabled</span>
                            @else
                            <span class="badge badge-danger">Disabled</span>
                            
                            @endif
                        </h6>
                        <p>Secure your account with 2FA security. When it is activated you will need to enter not only your password, but also a special code using your mobile.</p>
                    </div>
                    <div class="nk-block-actions">
                        @if($user->fa2_status == 'enabled')
                        <a href="javascript:void(0)" id="settings-enable-2fa" data-toggle="modal" data-target="#enable-2fa" data-type="disable" class="btn btn-sm btn-primary">Disable</a>
                         @else
                        <a href="javascript:void(0)" id="settings-enable-2fa" data-toggle="modal" data-target="#enable-2fa" class="btn btn-sm btn-primary" data-type="enable" >Enable</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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



@endsection

@section('modals')
<div class="modal fade" tabindex="-1" role="dialog" id="change-password">
    <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-md">
                <h5 class="title">Change Password</h5>
                <form action="{{route('updatepass')}}" method="POST" class="form-validate is-alter mt-4 form-authentic" id="change-password-form" novalidate="novalidate">
                    @csrf
                    <div class="form-group">
                        <label class="form-label" for="current-password">Current Password <span class="text-danger">*</span></label>
                        <div class="form-control-wrap">
                            <input type="password" name="oldpass" class="form-control form-control-lg" id="current-password" placeholder="Enter Current Password" required="" maxlength="190" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="new-password">New Password <span class="text-danger">*</span></label>
                        <div class="form-control-wrap">
                            <input type="password" name="newpass" class="form-control form-control-lg" id="new-password" placeholder="Enter new password" required="" maxlength="190" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="new-password">Retype New Password <span class="text-danger">*</span></label>
                        <div class="form-control-wrap">
                            <input type="password" name="repassword" class="form-control form-control-lg" id="new-password-confirmation" placeholder="Retype new password" required="" maxlength="190" />
                        </div>
                    </div>
                    <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                        <li>
                            <button type="submit" id="update-password" class="btn btn-primary">Update Password</button>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-bs-dismiss="modal" class="link link-light">Cancel</a>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
    
    var toastLiveExample = document.getElementById('toast-container')

  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })

</script>
<script>
    $(function(){
        
        $('#activity-log').on('change' , function(){
            var url = "{{route('profile.security.activity')}}";
            var data = "_token={{csrf_token()}}&type=logs";
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                dataType: 'json',
                
                success: function(res){
                   // alert(res)
                }
            })
            
        });
        
        $('#unusual-activity').on('change' , function(){
            var url = "{{route('profile.security.activity')}}";
            var data = "_token={{csrf_token()}}&type=unusual";
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                dataType: 'json',
                
                success: function(res){
                   // alert(res)
                }
            })
            
        });
        
        $('#settings-enable-2fa').on('click', function(){
            var dataType = $(this).attr('data-type');
            if(confirm('Do you want to '+ dataType +' 2fa')){
                location.href = "{{secure_url('profile/security/2fa')}}";
            }
        })
        
    })
</script>
@endsection