@extends('layout.desktop.main')
@section('content')
    <main>
        <div class="container" style="margin-bottom: 20px;">
            @include('layout.desktop.running_text')
            <nav class="app-breadcrumbs app-breadcrumbs--d">
                <ul>
                    <li data-pos="start" class="nav-observer"></li>
                    <li class="nav-item nav-item--home"><a href="/" class="app-link--active" name="Beranda">
                            Beranda
                        </a></li>
                    <li class="nav-item nav-item--fill"><i data-v-0e010622="" class="fas fa-chevron-right fa-xs"></i></li>
                    <li class="nav-item"><a href="/profile" aria-current="page"
                            class="app-link--exact-active app-link--active" name="Akun Saya" data-ref="akun saya">
                            Akun Saya
                        </a></li> <!---->
                    <li data-pos="end" class="nav-observer"></li>
                </ul>
            </nav>
            <section data-v-b4df4980="" class="account account--d">
                <header data-v-b4df4980="" class="page-header"><i class="fas fa-user fa-lg"></i>
                    <h3 data-v-b4df4980="">Akun Saya</h3>
                </header>
                <form data-v-b4df4980="" class="user-form">
                    <h4 data-v-b4df4980="" class="form-heading">Perbarui detail akun</h4>
                    <div data-v-b4df4980="" class="account--locked">
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>Username</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->username }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-user fa-xs"></i>
                            </div>
                        </div>
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>Nama</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->fullName }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-user fa-xs"></i>
                            </div>
                        </div>
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>E-mail</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->email }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-envelope fa-xs"></i>
                            </div>
                        </div>
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>Nomor Telepon</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->phone }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-phone fa-xs"></i>
                            </div>
                        </div>
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>Referral</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->ref }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-share fa-xs"></i>
                            </div>
                        </div>
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>Referral Link</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->ref_link }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-share fa-xs"></i>
                            </div>
                        </div>
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>Level</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->level }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-star fa-xs"></i>
                            </div>
                        </div>
                        <div data-v-b4df4980="" class="input__placeholder">
                            <label>Join Date</label>
                            <div class="input__root">
                                <span class="input">{{ Auth()->user()->created_at }}</span>
                                <i data-v-0e010622="" class="input__icon fas fa-clock fa-xs"></i>
                            </div>
                        </div>
                    </div>
                </form>
                <div data-v-b4df4980="" class="account__bank">
                    <h4 data-v-b4df4980="" class="form-heading">Informasi Bank</h4>
                    <div data-v-b4df4980="" class="input__placeholder"><label>Bank</label>
                        <div class="input__root"><span class="input">{{ Auth()->user()->bank }}</span> <i
                                data-v-0e010622="" class="input__icon fas fa-university fa-xs"></i> <!----></div>
                    </div>
                    <div data-v-b4df4980="" class="input__placeholder"><label>Nama Rekening</label>
                        <div class="input__root"><span class="input">{{ Auth()->user()->username }}</span> <i
                                data-v-0e010622="" class="input__icon fas fa-university fa-xs"></i> <!----></div>
                    </div>
                    <div data-v-b4df4980="" class="input__placeholder"><label>Nomor Rekening</label>
                        <div class="input__root"><span class="input">{{ Auth()->user()->accNumber }}</span> <i
                                data-v-0e010622="" class="input__icon fas fa-university fa-xs"></i> <!----></div>
                    </div>
                </div>
                <form data-v-b4df4980="" class="reset-password-form" action="/change-password" method="POST">
                    @csrf
                    <h4 data-v-b4df4980="" class="form-heading">Ganti Password</h4>

                    <div data-v-b4df4980="" class="input__container input__password">
                        <label>Password saat ini</label>
                        <div class="input__root">
                            <input type="password" autocomplete="off" class="input" name="OldPassword"
                                id="oldPassword">
                            <button type="button" class="input__icon input__icon--pv btn--flex"
                                onclick="togglePassword('oldPassword', this)">
                                <i class="fas fa-eye fa-xs"></i>
                            </button>
                            <i data-v-0e010622="" class="input__icon fas fa-key fa-xs"></i>
                        </div>
                    </div>

                    <div data-v-b4df4980="" class="input__container input__password">
                        <label>Password baru</label>
                        <div class="input__root">
                            <input type="password" autocomplete="off" class="input" name="NewPassword"
                                id="newPassword">
                            <button type="button" class="input__icon input__icon--pv btn--flex"
                                onclick="togglePassword('newPassword', this)">
                                <i class="fas fa-eye fa-xs"></i>
                            </button>
                            <i data-v-0e010622="" class="input__icon fas fa-key fa-xs"></i>
                        </div>
                    </div>

                    <div data-v-b4df4980="" class="input__container input__password">
                        <label>Masukkan kembali Password baru</label>
                        <div class="input__root">
                            <input type="password" autocomplete="off" class="input" name="ConfirmPassword"
                                id="confirmPassword">
                            <button type="button" class="input__icon input__icon--pv btn--flex"
                                onclick="togglePassword('confirmPassword', this)">
                                <i class="fas fa-eye fa-xs"></i>
                            </button>
                            <i data-v-0e010622="" class="input__icon fas fa-key fa-xs"></i>
                        </div>
                    </div>

                    <div data-v-b4df4980="" class="alert alert--info">
                        <i class="fas fa-info-circle fa-lg"></i>
                        <p>Password wajib memiliki minimal 8 karakter, dan wajib memiliki minimal 1 huruf dan 1 angka.
                            Karakter spesial yang diperbolehkan adalah ! @ # $ % ^ * _ | , .</p>
                    </div>

                    <button data-v-b4df4980="" type="submit" class="btn btn--block btn--success">
                        <span data-v-b4df4980="">Simpan</span>
                    </button>
                </form>
            </section>
        </div>
    </main>
    <script>
        function togglePassword(inputId, toggleButton) {
            const input = document.getElementById(inputId);
            const icon = toggleButton.querySelector('i');

            if (input.type === "password") {
                input.type = "text";
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = "password";
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }
    </script>
@endsection