@extends('adminlayout.admin')

 @section('content')
    <div class="nk-content nk-content-fluid">
        <div class="container-xl wide-lg">
            <div class="nk-content-body">
                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-aside-wrap">
                            <div class="card-inner card-inner-lg">
                                <div class="nk-block-head nk-block-head-lg">
                                    <div class="nk-block-between">
                                        <div class="nk-block-head-content">
                                            <h4 class="nk-block-title">Security Settings</h4>
                                            <div class="nk-block-des">
                                                <p>These settings are helps you keep your account secure.</p>
                                            </div>
                                        </div>
                                        <div class="nk-block-head-content align-self-start d-lg-none">
                                            <a href="#" class="toggle btn btn-icon btn-trigger mt-n1" data-target="userAside"><em class="icon ni ni-menu-alt-r"></em></a>
                                        </div>
                                    </div>
                                </div><!-- .nk-block-head -->
                                <div class="nk-block">
                                    <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>You can save your all activity logs 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" class="custom-control-input" checked="" id="activity-log">
                                                                    <label class="custom-control-label" for="activity-log"></label>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div> --><!-- .card-inner -->
                                            <div class="card-inner">
                                                <div class="between-center flex-wrap 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  class="btn btn-primary " style="color: #fff" data-toggle="modal" data-target="#user-password">Change Password</a>
                                                            </li>
                                                            <!-- <li>
                                                                <em class="text-soft text-date fs-12px">Last changed: <span>Oct 2, 2019</span></em>
                                                            </li> -->
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
										<div class="card-inner">
                                                <div class="between-center flex-wrap g-3">
                                                    <div class="nk-block-text">
                                                        <h6>Change Pin</h6>
                                                        <p>Set a unique pin 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  class="btn btn-primary " style="color: #fff" data-toggle="modal" data-target="#user-pin">Change Pin</a>
                                                            </li>
                                                            <!-- <li>
                                                                <em class="text-soft text-date fs-12px">Last changed: <span>Oct 2, 2019</span></em>
                                                            </li> -->
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
											<!-- .card-inner -->
                                            <!-- <div class="card-inner">
                                                <div class="between-center flex-wrap flex-md-nowrap g-3">
                                                    <div class="nk-block-text">
                                                        <h6>2 Factor Auth &nbsp; <span class="badge badge-success ml-0">Enabled</span></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 app. You can receive this code by in mobile app. </p>
                                                    </div>
                                                    <div class="nk-block-actions">
                                                        <a href="#" class="btn btn-primary">Disable</a>
                                                    </div>
                                                </div>
                                            </div> --><!-- .card-inner -->
                                        </div><!-- .card-inner-group -->
                                    </div><!-- .card -->
                                </div><!-- .nk-block -->
                            </div>
                            
                            <!-- aside for user profile start here -->

                            @include('include.userprofile-link')<!-- card-aside -->

                            <!-- aside for user profile end here -->
                            
                        </div><!-- .card-aside-wrap -->
                    </div><!-- .card -->
                </div><!-- .nk-block -->
            </div>
        </div>
    </div>
    <!-- password change modal start here -->


    <div class="modal fade" role="dialog" id="user-password">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-body modal-body-lg">
                    <h5 class="title">Change Your Password</h5>
                    <ul class="nk-nav nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#personal-document">Password</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#address">Address</a>
                        </li> -->
                    </ul><!-- .nav-tabs -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="personal-document">
                            <form action="{{route('updateuseraccount')}}" method="post">
                                @csrf
                            <div class="row gy-4">

                                
                                
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="form-label-group">
                                            <label class="form-label" for="password">Change Passcode</label>
                                            
                                        </div>
                                        <div class="form-control-wrap">
                                            <a tabindex="-1" href="#" class="form-icon form-icon-right passcode-switch lg" data-target="password">
                                                <em class="passcode-icon icon-show icon ni ni-eye"></em>
                                                <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                                            </a>

                                            <input name="password" autocomplete="new-password" type="password"  class="form-control form-control-lg" required id="password" placeholder="Enter your passcode">
                                            <input type="hidden" name="url" value="{{url()->current()}}">
                                        </div>
                                    </div>
                                </div>


                                
                                
                                
                                <div class="col-12">
                                    <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                        <li>
                                            <button type="submit" class="btn btn-lg btn-primary">Change  Password</button>
                                        </li>
                                        <li>
                                            <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            </form>
                        </div><!-- .tab-pane -->
                        
                    </div><!-- .tab-content -->
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    <!-- modal end here -->

	<!-- pin change modal start here -->


    <div class="modal fade" role="dialog" id="user-pin">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-body modal-body-lg">
                    <h5 class="title">Change Your Pin</h5>
                    <ul class="nk-nav nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#personal-document">Pin</a>
                        </li>
                        <!-- <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#address">Address</a>
                        </li> -->
                    </ul><!-- .nav-tabs -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="personal-document">
                            <form action="" method="post">
                                @csrf
                            <div class="row gy-4">
                                
                                <div class="col-md-6 pinsection" >
								<div class="pinerror alert-msg" style="color:red;"></div>
                                    <div class="form-group">
                                        <div class="form-label-group">
                                            <label class="form-label" for="pin">Change Pin</label>
                                            
                                        </div>
                                        <div class="form-control-wrap">
                                            <a tabindex="-1" href="#" class="form-icon form-icon-right passcode-switch lg" data-target="pin">
                                                <em class="passcode-icon icon-show icon ni ni-eye"></em>
                                                <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                                            </a>

                                            <input name="pin" autocomplete="new-pin" type="password"  class="form-control form-control-lg" required id="pin" placeholder="Enter your pin">
                                            <input type="hidden" name="url" value="{{url()->current()}}">
                                        </div>
                                    </div>
                                </div>
								
								 <div class="col-md-6 otpsection" style="display:none;">
								 <div class="otperror alert-msg" style="color:red;"></div>
								 <div class="otpsuccess alert-msg" style="color:green;"></div>
								 
                                    <div class="form-group">
                                        <div class="form-label-group">
                                            <label class="form-label" for="pinotp">Otp</label>
                                            
                                        </div>
                                        <div class="form-control-wrap">
                                            <a tabindex="-1" href="#" class="form-icon form-icon-right passcode-switch lg" data-target="pinotp">
                                                <em class="passcode-icon icon-show icon ni ni-eye"></em>
                                                <em class="passcode-icon icon-hide icon ni ni-eye-off"></em>
                                            </a>

                                            <input name="pinotp" autocomplete="new-pinotp" type="password"  class="form-control form-control-lg" required id="pinotp" placeholder="Enter otp">
                                            
                                        </div>
                                    </div>
                                </div>


                                
                                
                                
                                <div class="col-12">
                                    <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                        <li class="pinsection">
                                            <button type="button" class="btn btn-lg btn-primary" onclick="sendOtp()">Change Pin</button>
                                        </li>
										 <li class="otpsection" style="display:none;">
                                            <button type="button" class="btn btn-lg btn-primary" onclick="changePin()">Submit</button>
                                        </li>
										
                                        <li>
                                            <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            </form>
                        </div><!-- .tab-pane -->
                        
                    </div><!-- .tab-content -->
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>

    <!-- Pin modal end here -->
<script>
 function sendOtp() {
	 $('.alert-msg').html('');
	 if($('#pin').val().trim()=='')
	 {
	   $('.pinerror').html('Please enter pin.');
	   return;
	 }
	   
         $.ajax({
                url: "{{ route('sendPinChangeOtp') }}",              
                type: "GET",
                context: this,
                success: function(result) {     
				    var arrayy = result.split('|||||');
                     result = arrayy[1];
                     result = JSON.parse(result);
                    console.log(result);
                    if (result.status == 1) {
						$('.pinsection').hide();
						$('.otpsection').show();
						 $('.otpsuccess').html(result.message);
                    } else {
                        $('.pinerror').html(result.message);
                    }
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
    }
	
function changePin() {
	 $('.alert-msg').html('');
	 var otp = $('#pinotp').val();
	 var pin = $('#pin').val();
	 if(otp.trim()=='')
	 {
	   $('.otperror').html('Please enter otp.');
	   return;
	 }
	   
         $.ajax({
                url: "{{ route('updateUserPin') }}",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },				
                type: "POST",
				 data: {
                    'otp': otp,
					'pin': pin
                },
                context: this,
                success: function(result) {     
				   
                     result = JSON.parse(result);
                    console.log(result);
                    if (result.status == 1) {					
						 $('.otpsuccess').html(result.message);
						 window.location.reload();
                    } else {
                        $('.otperror').html(result.message);
                    }
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
    }

</script>	
 @endsection