@extends('layouts.app')
@section('content')
    <div class="container">
        @include('desktop.partials.runningtext')
        @include('desktop.partials.breadcrumb')
        <section data-v-030d15ef="" class="account account--d">
            <header data-v-030d15ef="" class="page-header"><i data-v-0e010622="" data-v-030d15ef=""
                    class="icon-username icon--2x"></i>
                <h3 data-v-030d15ef="">Akun Saya</h3>
            </header>
            <form class="user-form">
                <h4 class="form-heading">Perbarui detail akun</h4>
                <div class="account--locked">
                    <div class="input__placeholder">
                        <label>Username</label>
                        <div class="input__root">
                            <span class="input">{{ $user->username }}</span>
                            <i class="input__icon icon-username icon--xs"></i>
                        </div>
                    </div>
                    <div class="input__placeholder">
                        <label>Nama</label>
                        <div class="input__root">
                            <span class="input">{{ $user->fullname }}</span>
                            <i class="input__icon icon-login icon--xs"></i>
                        </div>
                    </div>
                    <div class="input__placeholder">
                        <label>E-mail</label>
                        <div class="input__root">
                            <span class="input">{{ $user->email }}</span>
                            <i class="input__icon icon-at icon--xs"></i>
                        </div>
                    </div>
                    <div class="input__placeholder">
                        <label>Nomor Telepon</label>
                        <div class="input__root">
                            <span class="input">+62 {{ $user->no_handphone }}</span>
                            <i class="input__icon icon-mobile icon--xs"></i>
                        </div>
                    </div>
                    <div data-v-030d15ef="" class="input__container date-select">
                        <label>Pilih Tanggal lahir</label>
                        <div class="input__root">
                            <div class="vdp-datepicker date-select__wrapper">
                                <div class="">

                                    <input type="text" open-date="Thu Apr 24 2008 09:27:04 GMT+0700 (Indochina Time)"
                                        placeholder="Pilih Tanggal lahir" readonly="readonly" autocomplete="off"
                                        class="input" disabled="">

                                </div>
                                <div class="date-select__calendar surface vdp-datepicker__calendar" style="display: none;">
                                    <header>
                                        <span class="prev">&lt;</span>
                                        <span class="day__month_btn up">Apr 2008</span>
                                        <span class="next disabled">&gt;</span>
                                    </header>
                                    <div class="">
                                        <span class="cell day-header">Min</span>
                                        <span class="cell day-header">Sen</span>
                                        <span class="cell day-header">Sel</span>
                                        <span class="cell day-header">Rab</span>
                                        <span class="cell day-header">Kam</span>
                                        <span class="cell day-header">Jum</span>
                                        <span class="cell day-header">Sab</span>
                                        <span class="cell day blank"></span>
                                        <span class="cell day blank"></span>
                                        <span class="cell day">1</span>
                                        <span class="cell day">2</span>
                                        <span class="cell day">3</span>
                                        <span class="cell day">4</span>
                                        <span class="cell day weekend sat">5</span>
                                        <span class="cell day weekend sun">6</span>
                                        <span class="cell day">7</span>
                                        <span class="cell day">8</span>
                                        <span class="cell day">9</span>
                                        <span class="cell day">10</span>
                                        <span class="cell day">11</span>
                                        <span class="cell day weekend sat">12</span>
                                        <span class="cell day weekend sun">13</span>
                                        <span class="cell day">14</span>
                                        <span class="cell day">15</span>
                                        <span class="cell day">16</span>
                                        <span class="cell day">17</span>
                                        <span class="cell day">18</span>
                                        <span class="cell day weekend sat">19</span>
                                        <span class="cell day weekend sun">20</span>
                                        <span class="cell day">21</span>
                                        <span class="cell day">22</span>
                                        <span class="cell day">23</span>
                                        <span class="cell day">24</span>
                                        <span class="cell day disabled">25</span>
                                        <span class="cell day disabled weekend sat">26</span>
                                        <span class="cell day disabled weekend sun">27</span>
                                        <span class="cell day disabled">28</span>
                                        <span class="cell day disabled">29</span>
                                        <span class="cell day disabled">30</span>
                                    </div>
                                </div>
                                <div class="date-select__calendar surface vdp-datepicker__calendar" style="display: none;">
                                    <header>
                                        <span class="prev">&lt;</span>
                                        <span class="month__year_btn up">2008</span>
                                        <span class="next disabled">&gt;</span>
                                    </header>
                                    <span class="cell month">Januari</span>
                                    <span class="cell month">Februari</span>
                                    <span class="cell month">Maret</span>
                                    <span class="cell month">April</span>
                                    <span class="cell month disabled">Mei</span>
                                    <span class="cell month disabled">Juni</span>
                                    <span class="cell month disabled">Juli</span>
                                    <span class="cell month disabled">Agustus</span>
                                    <span class="cell month disabled">September</span>
                                    <span class="cell month disabled">Oktober</span>
                                    <span class="cell month disabled">November</span>
                                    <span class="cell month disabled">Desember</span>
                                </div>
                                <div class="date-select__calendar surface vdp-datepicker__calendar"
                                    style="display: none;">
                                    <header>
                                        <span class="prev">&lt;</span>
                                        <span>2000 - 2009</span>
                                        <span class="next disabled">&gt;</span>
                                    </header>
                                    <span class="cell year">2000</span>
                                    <span class="cell year">2001</span>
                                    <span class="cell year">2002</span>
                                    <span class="cell year">2003</span>
                                    <span class="cell year">2004</span>
                                    <span class="cell year">2005</span>
                                    <span class="cell year">2006</span>
                                    <span class="cell year">2007</span>
                                    <span class="cell year">2008</span>
                                    <span class="cell year disabled">2009</span>
                                </div>
                            </div>
                            <i data-v-0e010622="" class="input__icon icon-calendar icon--xs"></i>
                        </div>
                    </div>
                    <div data-v-030d15ef="" class="input__container">
                        <label>Kota</label>
                        <div class="input__root">
                            <input type="text" autocomplete="off" class="input" disabled="">
                            <i data-v-0e010622="" class="input__icon icon-location-arrow icon--xs"></i>
                        </div>
                    </div>
                    <div data-v-030d15ef="" class="input__container" style="grid-column: 1 / -1;">
                        <label>Alamat</label>
                        <div class="input__root">
                            <input type="text" autocomplete="off" class="input" disabled="">
                            <i data-v-0e010622="" class="input__icon icon-building icon--xs"></i>
                        </div>
                    </div>
                    <div data-v-030d15ef="" class="input-confirm input-confirm--confirmed"><label for="notifications" class="input-confirm__label"><i data-v-0e010622="" class="icon-square-check icon--md"></i> <span>Terima notifikasi pemberitahuan untuk Deposit, Withdraw, Taruhan Selesai dan Hadiah Promo.</span></label> <input id="notifications" type="checkbox"></div>
                </div>
                <button type="submit" disabled class="btn btn--block btn--success">
                    <span>Simpan</span>
                </button>
            </form>
            <div class="account__bank">
                <h4 class="form-heading">Informasi Bank</h4>
                <div class="input__placeholder">
                    <label>Bank</label>
                    <div class="input__root">
                        <span class="input">{{ $bank->bank }}</span>
                        <i class="input__icon icon-bank icon--xs"></i>
                    </div>
                </div>
                <div class="input__placeholder">
                    <label>Nama Rekening</label>
                    <div class="input__root">
                        <span class="input">{{ $bank->nama_rekening }}</span>
                        <i class="input__icon icon-bank icon--xs"></i>
                    </div>
                </div>
                <div class="input__placeholder">
                    <label>Nomor Rekening</label>
                    <div class="input__root">
                        <span class="input">{{ $bank->nomor_rekening }}</span>
                        <i class="input__icon icon-bank icon--xs"></i>
                    </div>
                </div>
            </div>
            <form method="POST" action="{{ route('profile.password') }}" class="reset-password-form">
                @csrf

                <h4 class="form-heading">Ganti Password</h4>

                <div class="input__container input__password">
                    <label>Password saat ini</label>
                    <div class="input__root">
                        <input type="password" name="current_password" autocomplete="off" class="input">
                        <button type="button" class="input__icon input__icon--pv btn--flex">
                            <i class="icon-eye-slash icon--md"></i>
                        </button>
                        <i class="input__icon icon-key icon--xs"></i>
                    </div>
                </div>

                <div class="input__container input__password">
                    <label>Password baru</label>
                    <div class="input__root">
                        <input type="password" name="new_password" autocomplete="off" class="input">
                        <button type="button" class="input__icon input__icon--pv btn--flex">
                            <i class="icon-eye-slash icon--md"></i>
                        </button>
                        <i class="input__icon icon-key icon--xs"></i>
                    </div>
                </div>

                <div class="input__container input__password">
                    <label>Masukkan kembali Password baru</label>
                    <div class="input__root">
                        <input type="password" name="new_password_confirmation" autocomplete="off" class="input">
                        <button type="button" class="input__icon input__icon--pv btn--flex">
                            <i class="icon-eye-slash icon--md"></i>
                        </button>
                        <i class="input__icon icon-key icon--xs"></i>
                    </div>
                </div>

                <div class="alert alert--info">
                    <i class="icon-info icon--lg"></i>
                    <p>Password wajib memiliki minimal 8 karakter, dan wajib memiliki minimal 1 huruf dan 1 angka.</p>
                </div>

               	<button type="submit" class="btn btn--block btn--success" disabled id="submitPasswordBtn">
                <span>Simpan</span>
            </button>
			</form>
		</section>
    </div>
 <script>
document.addEventListener('DOMContentLoaded', function () {

    const form = document.querySelector('.reset-password-form');
    if (!form) return;

    const btn = form.querySelector('#submitPasswordBtn');
    const current = form.querySelector('[name="current_password"]');
    const newPass = form.querySelector('[name="new_password"]');
    const confirm = form.querySelector('[name="new_password_confirmation"]');

    let currentValid = false;

    function setInvalid(input) {
        input.classList.remove('input--valid');
        input.classList.add('input--invalid');
    }

    function setValid(input) {
        input.classList.remove('input--invalid');
        input.classList.add('input--valid');
    }

    // ================= CHECK PASSWORD LAMA =================
    function checkCurrentPassword(value) {

        if (!value) {
            currentValid = false;
            setInvalid(current);
            return;
        }

        fetch("{{ route('check.password') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({ password: value })
        })
        .then(res => res.json())
        .then(res => {

            currentValid = res.valid;

            if (currentValid) {
                setValid(current);
            } else {
                setInvalid(current);
            }

            validateAll();
        })
        .catch(() => {
            currentValid = false;
            setInvalid(current);
        });
    }

    // ================= VALIDASI PASSWORD BARU =================
    function validateNewPassword() {

        const n = newPass.value.trim();

        if (!n) {
            newPass.classList.remove('input--valid', 'input--invalid');
            return false;
        }

        if (n.length < 8 || !/(?=.*[A-Za-z])(?=.*\d)/.test(n)) {
            setInvalid(newPass);
            return false;
        }

        setValid(newPass);
        return true;
    }

    // ================= VALIDASI CONFIRM REALTIME =================
    function validateConfirmPassword() {

        const n = newPass.value.trim();
        const cf = confirm.value.trim();

        if (!cf) {
            confirm.classList.remove('input--valid', 'input--invalid');
            return false;
        }

        if (n !== cf) {
            setInvalid(confirm);
            return false;
        }

        setValid(confirm);
        return true;
    }

    // ================= VALIDASI SEMUA =================
    function validateAll() {

        const c = current.value.trim();

        let valid = true;

        if (!c || !currentValid) valid = false;
        if (!validateNewPassword()) valid = false;
        if (!validateConfirmPassword()) valid = false;

        btn.disabled = !valid;
    }

    // ================= EVENTS =================

    current.addEventListener('input', function () {
        checkCurrentPassword(this.value);
    });

    newPass.addEventListener('input', function () {
        validateNewPassword();
        validateConfirmPassword();
        validateAll();
    });

    confirm.addEventListener('input', function () {
        validateConfirmPassword();
        validateAll();
    });

});
</script>
@endsection