@extends('frontend.userarea.layouts.main')
@section('content')

<div style="height:10px; background-color:#FFF" class="grabgtabbottom"></div>    

<div class="tab-content" style="visibility: visible;">
    <div id="dashboard_wrap" class="tab-pane fade in active">
        <div id="dashboard_statusdown" class="text-center"></div>
        <div id="dashboard">
            @include('frontend.userarea.transaction.navbar')
            
            <div class="tab-content" style="visibility: visible; margin-top: 10px;">
                <div id="password_tab" class="tab-pane fade active in">
                    <h4 class="hidden-xs hidden-sm" style="margin-left: 15px;">Ubah Password</h4>

                    <div class="row">
                        <div class="col-md-6 col-xs-12">
                            <div id="statusPassword"></div>
                            
                            <span id="pass_form">
                                <div class="panel panel-danger">
                                    <div class="panel-heading">
                                        <strong><span class="glyphicon glyphicon-pencil" style="margin-right: 5px;"></span>Ubah Password</strong>
                                    </div>
                                    
                                    <div class="panel-body">
                                        @if (\Session::has('success'))
                                            <div class="alert alert-success">
                                                <ul style="margin:0; padding-left:15px;"><li>{!! \Session::get('success') !!}</li></ul>
                                            </div>
                                        @elseif (\Session::has('error'))
                                            <div class="alert alert-danger">
                                                <ul style="margin:0; padding-left:15px;"><li>{!! \Session::get('error') !!}</li></ul>
                                            </div>
                                        @endif

                                        <form class="pass_form" action="/api/account/setPassword" method="POST">
                                            @csrf
                                            <div class="form-group">
                                                <label>Password Sekarang</label>
                                                <input type="password" class="form-control passnow" name="oldpassword" placeholder="Masukkan Password Sekarang" required>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Password Baru</label>
                                                <input type="password" class="form-control passnew" name="password" placeholder="Min. 6 Karakter" minlength="6" required>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Konfirmasi Password Baru</label>
                                                <input type="password" class="form-control passnewcon" name="newpassword" placeholder="Masukkan Password Baru Sekali Lagi" minlength="6" required>
                                            </div>
                                            
                                            <div class="row" style="margin-top: 20px;">
                                                <div class="col-xs-6">
                                                    <button type="reset" class="btn btn-info btn-block" style="font-weight: bold; padding: 10px;">Reset</button>
                                                </div>
                                                <div class="col-xs-6">
                                                    <button type="submit" class="btn btn-success btn-block" style="font-weight: bold; padding: 10px;">Simpan</button>
                                                </div>
                                            </div>
                                        </form>                                         
                                    </div>
                                </div>
                            </span>
                        </div>

                        <div class="col-md-6 col-xs-12">
                            <div class="panel" style="margin-top: 0px; border-radius: 8px; overflow: hidden; border: 1px solid #444; background-color: #23272a;">
                                <div class="panel-heading" style="font-size: 16px; font-weight: bold; padding: 10px 15px; background-color: #1a1c1e; color: #5bc0de; border-bottom: 1px solid #333;">
                                    <span class="glyphicon glyphicon-info-sign" style="margin-right: 5px;"></span> Keamanan Akun
                                </div>
                                <div class="panel-body" style="font-size: 13px; line-height: 1.6; background-color: #23272a; color: #d1d5db;">
                                    
                                    <div class="alert" style="padding: 10px; margin-bottom: 15px; border-radius: 5px; background-color: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.3); color: #ff6b6b;">
                                        <strong style="color: #ff8787;"><span class="glyphicon glyphicon-warning-sign"></span> PERHATIAN!</strong><br>
                                        Pihak kami <strong>tidak bertanggung jawab</strong> atas kelalaian Anda dalam merahasiakan password. Jangan pernah memberikan password Anda kepada siapapun, termasuk kepada pihak yang mengaku sebagai admin.
                                    </div>

                                    <ul class="list-group" style="margin-bottom: 15px; box-shadow: none;">
                                        <li class="list-group-item" style="padding: 8px 15px; background-color: #2c2f33; border: 1px solid #444; border-left: 4px solid #5bc0de; border-radius: 0; color: #d1d5db;">
                                            <span class="glyphicon glyphicon-lock" style="color: #5bc0de; margin-right: 5px;"></span> 
                                            Gunakan kombinasi huruf besar, kecil, dan angka untuk keamanan maksimal.
                                        </li>
                                        <li class="list-group-item" style="padding: 8px 15px; background-color: #2c2f33; border: 1px solid #444; border-left: 4px solid #5bc0de; border-radius: 0; border-top: 0; color: #d1d5db;">
                                            <span class="glyphicon glyphicon-refresh" style="color: #5bc0de; margin-right: 5px;"></span> 
                                            Ganti password Anda secara berkala (minimal 1 bulan sekali).
                                        </li>
                                    </ul>

                                    <div class="well well-sm" style="background-color: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.2); color: #ffd700; text-align: center; margin-bottom: 0; border-radius: 5px; box-shadow: none;">
                                        <span class="glyphicon glyphicon-earphone" style="font-size: 18px; margin-bottom: 5px; display: block;"></span>
                                        <p style="margin: 0; font-size: 13px;">Lupa password Anda? Hubungi <strong>Customer Service</strong> kami dengan menyertakan No. HP atau Email yang terdaftar.</p>
                                    </div>

                                </div>
                            </div>
                        </div> </div> <div class="row">
                        <div class="col-xs-12" style="margin-top: 15px;">
                            <a class="btn btn-primary btn-block hidden-md hidden-lg" href="{{ url()->previous() }}" role="button" style="font-weight:bold; margin-bottom: 20px;">
                                <span class="glyphicon glyphicon-menu-left"></span> Kembali
                            </a>
                            @include('frontend.userarea.desc')
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix visible-lg"></div>
</div>

@endsection