@extends('layouts.app')
@section('content')
    <div class="container">
		     <section class="account">
		    <header class="page-header">
		        <i class="icon-username icon--lg"></i>
		        <h3>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>
		        <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