@extends('layouts.app')

@section('content')
    <div class="container">
        @include('desktop.partials.runningtext')
        @include('desktop.partials.breadcrumb')
        <section class="register register--d">
            <header class="page-header">
                <i class="icon-register icon--2x"></i>
                <h3>Daftar</h3>
            </header>
            <form class="register-form-1" method="POST" action="{{ route('register.store') }}">
            	@csrf
                <div class="register-form-1__fields">
                    <div class="fields__group">
                        <h4 class="field__header">Informasi Akun</h4>
                        <div class="input__container input-username">
                            <label>Username</label>
                            <div class="input__root">
                                <input type="text" name="username" autocomplete="off" class="input">
                                <i class="input__icon icon-username icon--xs"></i>
                            </div>
                        </div>
                        <div class="input__container input__password">
                            <label>Password</label>
                            <div class="input__root">
                                <input type="password" name="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</label>
                            <div class="input__root">
                                <input type="password" name="password_confirmation" autocomplete="do-not-autofill" 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. Karakter spesial yang diperbolehkan adalah ! @ # $ % ^ * _ | , .</p>
                        </div>
                        <div class="input__container">
                            <label>Kode Referral</label>
                            <div class="input__root">
                                <input type="text" autocomplete="off" name="referral" disabled="disabled" class="input">
                                <i class="input__icon icon-referral icon--xs"></i>
                            </div>
                        </div>
                        <div class="captcha captcha--d" placeholder="Captcha" value="">
                            <!---->
                            <div class="captcha__root">
                                <div class="captcha__input input__root">
                                    <input type="text" name="captcha" autocomplete="off" placeholder="Captcha" class="input">
                                    <i class="input__icon icon-user-check icon--xs"></i>
                                </div>
                                <button type="button" id="reloadCaptcha" class="btn btn--sm-round btn--flex btn--brand">
                                    <i class="icon-sync icon--md"></i>
                                </button>
                                <div class="captcha__image">
									 <img id="captchaImage" alt="captcha" class="">
								</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="fields__group">
                            <h4 class="field__header">Informasi Pribadi</h4>
                            <div class="input__container input-fullname">
                                <label>Nama Lengkap</label>
                                <div class="input__root">
                                    <input type="text" name="fullname" autocomplete="off" class="input">
                                    <i class="input__icon icon-login icon--xs"></i>
                                </div>
                            </div>
                            <div class="input__container">
                                <label>E-mail</label>
                                <div class="input__root">
                                    <input type="email" name="email" autocomplete="off" class="input">
                                    <i class="input__icon icon-at icon--xs"></i>
                                </div>
                            </div>
                            <div class="input__container input-phone">
                                <label>Nomor Telepon</label>
                                <div class="input__root">
                                    <input type="tel" name="no_handphone" class="input">
                                    <i class="input__icon icon-mobile icon--md"></i>
                                    <div class="input-phone__country">+62</div>
                                </div>
                            </div>
                        </div>
						<div class="fields__group">
                            <h4 class="field__header">Informasi Pembayaran</h4>
                            <div class="select__container input__container">
                                <label>Metode Pembayaran</label>
                                <div class="input__root">
                                    <select id="paymentMethod" name="payment_method" class="input input__select">
                                        <option value="">Pilih Metode Pembayaran</option>
                                        <option value="bank">Bank</option>
                                        <option value="e-money">E-money</option>
                                    </select>
                                    <i class="input__icon icon-bank icon--xs"></i>
                                    <i class="select__arrow icon-arrow-down icon--xs"></i>
                                </div>
                            </div>
                            <div id="bankField" class="select__container input__container" style="display:none;">
                                <label>Bank</label>
                                <div class="input__root">
                                    <select id="bankSelect" name="bank" class="input input__select">
                                        <option value="">Pilih Bank</option>
                                        <option value="BCA">BCA</option>
			                            <option value="BRI">BRI</option>
			                            <option value="BNI">BNI</option>
			                            <option value="MANDIRI">Mandiri</option>
			                            <option value="JAGO">Jago</option>
			                            <option value="HSBC">HSBC</option>
			                            <option value="SEABANK">Seabank</option>
			                            <option value="BSI">BSI</option>
			                            <option value="DANAMON">Danamon</option>
			                            <option value="PERMATA">Permata</option>
			                            <option value="CIMB">CIMB</option>
			                            <option value="PANIN">Panin</option>
			                            <option value="ALADIN">BANK ALADIN</option>
			                            <option value="ALLO">BANK ALLO</option>
			                            <option value="BTN">BANK BTN</option>
			                            <option value="BCADIGITAL">BCA DIGITAL</option>
			                            <option value="DKI">BANK DKI</option>
			                            <option value="SINARMAS">Sinarmas</option>
			                            <option value="MUAMALAT">BANK MUAMALAT</option>
			                            <option value="UOB">BANK UOB</option>
			                            <option value="OTHER">Other Banks</option>
			                            <option value="MAYBANK">Maybank</option>
			                            <option value="BILL">BII</option>
                                    </select>
                                    <i class="input__icon icon-bank icon--xs"></i>
                                    <i class="select__arrow icon-arrow-down icon--xs"></i>
                                </div>
                            </div>
                            <div id="emoneyField" class="select__container input__container" style="display:none;">
                                <label>E-Wallet</label>
                                <div class="input__root">
                                    <select id="emoneySelect" name="emoney" class="input input__select">
                                        <option value="">Pilih E-Wallet</option>
                                        <option value="DANA">DANA</option>
			                            <option value="OVO">OVO</option>
			                            <option value="GOPAY">GoPay</option>
			                            <option value="SHOPEEPAY">ShopeePay</option>
			                            <option value="LINKAJA">LinkAja</option>
                                    </select>
                                    <i class="input__icon icon-bank icon--xs"></i>
                                    <i class="select__arrow icon-arrow-down icon--xs"></i>
                                </div>
                            </div>
                            <div id="rekeningField" style="display:none;">
                                <div class="input__container">
                                    <label>Nama Rekening</label>
                                    <div class="input__root">
                                        <input type="text" name="nama_rekening" class="input" autocomplete="off">
                                        <i class="input__icon icon-bank icon--xs"></i>
                                    </div>
                                </div>
                                <div class="alert alert--info">
                                    <i class="icon-info icon--lg"></i>
                                    <p>Nama rekening harus sama/sesuai dengan yang terdaftar pada rekening tersebut.</p>
                                </div>
                                <div class="input__container">
                                    <label>Nomor Rekening</label>
                                    <div class="input__root">
                                        <input type="text" name="nomor_rekening" class="input" autocomplete="off">
                                        <i class="input__icon icon-bank icon--xs"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit" disabled=""class="btn btn--block btn--brand">
                    <span>Daftar</span>
                </button>
            </form>
        </section>
    </div>
<script>
document.addEventListener("DOMContentLoaded", () => {
    const captchaImg = document.getElementById("captchaImage");
    const reloadBtn = document.getElementById("reloadCaptcha");

    if (!captchaImg || !reloadBtn) return;

    const loadCaptcha = async () => {
        try {
            captchaImg.style.opacity = "0.5";

            const res = await fetch("{{ route('captcha.generate') }}", {
                method: "GET",
                headers: { "Accept": "application/json" },
                cache: "no-store"
            });

            const data = await res.json();

            if (data.image) {
                captchaImg.src = data.image;
            }

            captchaImg.style.opacity = "1";
        } catch (err) {
            console.error("Captcha gagal:", err);
            captchaImg.style.opacity = "1";
        }
    };

    loadCaptcha();
    reloadBtn.addEventListener("click", (e) => {
        e.preventDefault();
        loadCaptcha();
    });
});
</script>
@endsection