@extends('frontend.layouts.main')
@section('content')
@mobile
                <div id="content-primary" class="p-0">
                
                                        
                        <div class="content-body" style="position: relative">
                                <div class="content-area">
                                    <div id="content" class="content-box">
                                        
                                                                                
                                    </div>
                                </div>
                        </div>
                    

                                    </div>
@endmobile
@desktop
<div id="content-primary" class="p-0">
                
                                        
                        <div class="content-body" style="position: relative">
                                <div class="content-area">
                                    <div id="content" class="content-box">
                                        
                                            <style>
    .error-msg { color: red; font-size: 12px; margin-top: 3px; display: none; }
    .error-border { border-color: red !important; }
    .valid-border { border-color: green !important; }
    </style>
    <div id="desktopregister" class="panel panel-default panelbg ptsans">
              <div class="panel-body panelbg">
              <div style="margin-bottom:16px; font-weight: bold; font-size: 1.5rem"><i class="bi bi-person-fill"></i> Daftar</div>
                                @desktop
                            <div id="msgbox" style="font-size: 1rem; width: 100%; display:none;" class="alert alert-sm"></div>
                        @enddesktop
              		<form class="form-group-sm" id="formRegister" action="{{ route('api.register') }}" method="POST">
              		    @csrf
                    <input type="hidden" name="ipAddress" value="{{ request()->ip() }}">
                    <input type="hidden" name="token" value="{{ csrf_token() }}">
              		<div class="form-group-sm" id="input-username">
              		<label>Username</label><input type="text" class="form-control has-success" name="username" id="reg_username" placeholder="Username 6-16 karakter standar (A~Z, a~z, 0~9) dan tanpa spasi">
              		<div class="error-msg" id="err_username"></div>
                    </div>
                    <div class="row" style="margin-top:10px">
                        <div class="form-group-sm col-md-3" id="input-pass">
                        <label>Password</label><input type="password" id="reg_pass" name="password" class="form-control" placeholder="Password (6 karakter atau lebih)">
                        <div class="error-msg" id="err_password"></div>
                        </div>
                        <div class="form-group-sm col-md-3" id="input-passcon">
                        <label>Konfirmasi Password</label><input type="password" id="reg_passcon" name="cpassword" class="form-control" placeholder="Password sekali lagi">
                        <div class="error-msg" id="err_passcon"></div>
                        </div>
                        <div class="form-group-sm col-md-3" id="input-email">
                        <label>Email</label><input type="text" id="reg_email" name="email" class="form-control" placeholder="Masukkan Email">
                        <div class="error-msg" id="err_email"></div>
                        </div>
                        <div class="form-group-sm col-md-3" id="input-telpon">
                        <label>Telpon</label><input type="text" id="reg_telpon" inputmode="numeric" name="phone" class="form-control" placeholder="Masukkan Telpon">
                        <div class="error-msg" id="err_telpon"></div>
                        </div>
					</div>
                    <div class="row" style="margin-top:10px">
                        <div class="form-group-sm col-md-3" id="input-bank">
                        <label>Bank</label>
                        	<select class="form-control" name="bankName" id="reg_bank">
                        		<option value="">Pilih Bank</option>
										 											<option value="BCA">BCA</option>
																					<option value="Mandiri">Mandiri</option>
																					<option value="BNI">BNI</option>
																					<option value="BRI">BRI</option>
																					<option value="CIMB">CIMB</option>
																					<option value="BSI">BSI</option>
																					<option value="JAGO">JAGO</option>
																					<option value="DANA">DANA</option>
																					<option value="OVO">OVO</option>
																					<option value="GOPAY">GOPAY</option>
																					<option value="LinkAja">LinkAja</option>
																					<option value="Lain-lain">Lain-lain</option>
										                            </select>
                            <div class="error-msg" id="err_bank"></div>
                        </div>
                        <div class="form-group-sm col-md-3" id="input-rek">
                        <label>No Rekening</label><input type="text" inputmode="numeric" name="accNumber" id="reg_rek" class="form-control" placeholder="Masukkan nomor rekening">
                        <div class="error-msg" id="err_rek"></div>
                        </div>
                        <div class="form-group-sm col-md-3" id="input-nama">
                        <label>Nama sesuai Rekening</label><input name="accName" type="text" id="reg_nama" class="form-control" placeholder="Nama sesuai Rekening">
                        <div class="error-msg" id="err_nama"></div>
                        </div>
                        @if(!empty(request()->query('ref')))
                         <div class="form-group-sm col-md-3" id="input-ref">
                        <label>Referal</label><input name="referral" type="text" id="reg_ref" class="form-control"  placeholder="Username Referal bila ada" value="{{ e(request()->query('ref')) }}" readonly="">
                        <div class="error-msg" id="err_ref"></div>
                        </div>
                        @else
                        <div class="form-group-sm col-md-3" id="input-ref">
                        <label>Referal</label><input name="referral" type="text" id="reg_ref" class="form-control"  placeholder="Username Referal bila ada">
                        <div class="error-msg" id="err_ref"></div>
                        </div>
                        @endif
					</div>
					                     <div class="row" style="margin-top:10px">
                     	 <div class="form-group-sm col-md-3" id="input-verifikasi">
                        <label>Verifikasi</label><input type="text" name="captcha" id="reg_verifikasi" maxlength="32" class="form-control" placeholder="Isi karakter di samping">
                        <div class="error-msg" id="err_verifikasi"></div>
                        </div>
                        <div class="form-group-sm col-md-3">
                        <label>&nbsp;</label><span id="capverifikasi"><img id="capreg" src="/capreg?r={{ rand() }}" width="100%" height="30" style="border:1px #999 solid;"></span>
                        </div>
                       
					</div>
					<script>
					    document.getElementById('capreg').onclick = function() {
                                var img = document.getElementById('capreg');
                                // Append a random number to the URL to prevent caching
                                img.src = '/capreg?r=' + Math.random();
                                return false; // Prevent default anchor behavior
                            };
                            //$('#capreg').trigger('click');
					</script>
										<div style="margin-top:15px">
						<label class="checkbox-inline" style="display: flex; gap: 4px">
						    <input type="checkbox" checked disabled>
						    <div>Dengan ini saya menyatakan bahwa saya telah membaca dan menyetujui <a href="javascript:showInformasi('privasi')" style="color: var(--primary-color)">Kebijakan Privasi</a> pada Situs ini.</div>
						    </label>
						
					</div>
                    	<button type="submit" class="btn btn-masuk fw-bold" style="margin-top:20px; width:200px; text-align: center; display: grid; place-items: center; line-height: var(--text-size-default); height: 40px" >Daftar</button>
                    </form>
              </div>
     </div>
     
<script>
(function(){
  function root(){ return document.getElementById('desktopregister'); }
  function q(id){ return root()?.querySelector('#'+id) || null; }
  function qe(sel){ return root()?.querySelector(sel) || null; }

  function showError(field,msg){
    const err = qe('#err_'+field), inp = q('reg_'+field);
    if (err){ err.textContent = msg; err.style.display = 'block'; }
    if (inp){ inp.classList.remove('valid-border'); inp.classList.add('error-border'); }
  }
  function clearError(field){
    const err = qe('#err_'+field), inp = q('reg_'+field);
    if (err) err.style.display = 'none';
    if (inp){ inp.classList.remove('error-border'); inp.classList.add('valid-border'); }
  }

  // validator functions
  function vUsername(){
    const v = (q('reg_username')?.value||'').trim();
    if(!v) return showError('username','Username tidak boleh kosong'), false;
    if(v.length<6) return showError('username','Username minimal 6 karakter'), false;
    if(v.length>16) return showError('username','Username maksimal 16 karakter'), false;
    if(!/^[A-Za-z0-9]+$/.test(v)) return showError('username','Hanya huruf/angka'), false;
    clearError('username'); return true;
  }
  function vPass(){
    const v = q('reg_pass')?.value||'';
    if(!v) return showError('password','Password tidak boleh kosong'), false;
    if(v.length<6) return showError('password','Password minimal 6 karakter'), false;
    clearError('password'); return true;
  }
  function vPasscon(){
    const p1=q('reg_pass')?.value||'', p2=q('reg_passcon')?.value||'';
    if(!p2) return showError('passcon','Konfirmasi password kosong'), false;
    if(p1!==p2) return showError('passcon','Konfirmasi tidak sama'), false;
    clearError('passcon'); return true;
  }
  function vEmail(){
    const v=(q('reg_email')?.value||'').trim();
    if(!v) return showError('email','Email tidak boleh kosong'), false;
    if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) return showError('email','Format email salah'), false;
    clearError('email'); return true;
  }
  function vTelp(){
    const el=q('reg_telpon'); if(!el) return true;
    el.value=el.value.replace(/\D/g,'');
    if(!el.value) return showError('telpon','Telpon kosong'), false;
    if(el.value.length<10) return showError('telpon','Telpon minimal 10 digit'), false;
    clearError('telpon'); return true;
  }
  function vBank(){
    if(!q('reg_bank')?.value) return showError('bank','Pilih bank'), false;
    clearError('bank'); return true;
  }
  function vRek(){
    const el=q('reg_rek'); if(!el) return true;
    el.value=el.value.replace(/\D/g,'');
    if(!el.value) return showError('rek','Rekening kosong'), false;
    if(el.value.length<8) return showError('rek','Minimal 8 digit'), false;
    clearError('rek'); return true;
  }
  function vNama(){
    const v=(q('reg_nama')?.value||'').trim();
    if(!v) return showError('nama','Nama kosong'), false;
    if(v.length<3) return showError('nama','Nama minimal 3 karakter'), false;
    if(!/^[a-zA-Z\s]+$/.test(v)) return showError('nama','Nama hanya boleh huruf'), false;
    clearError('nama'); return true;
  }
  function vVerifOpt(){
    const el = q('reg_verifikasi'); if (!el) return true;
    const v = (el.value || '').trim();
    if (!v) return showError('verifikasi','Kode verifikasi harus diisi'), false;
    clearError('verifikasi'); return true;
  }

  function validateAll(){
    return vUsername() & vPass() & vPasscon() & vEmail() & vTelp() & vBank() & vRek() & vNama();
  }

  function attach(id, validator, opts){
    const el=q(id); if(!el) return;
    const run=()=>validator();
    el.addEventListener('focus',run);
    if(!opts||opts.input!==false) el.addEventListener('input',run);
    el.addEventListener('blur',run);
    if(opts&&opts.change) el.addEventListener('change',run);
  }

  document.addEventListener('DOMContentLoaded',function(){
    attach('reg_username',vUsername);
    attach('reg_pass',vPass);
    attach('reg_passcon',vPasscon);
    attach('reg_email',vEmail);
    attach('reg_telpon',vTelp);
    attach('reg_bank',vBank,{input:false,change:true});
    attach('reg_rek',vRek);
    attach('reg_nama',vNama);
    attach('reg_verifikasi',vVerifOpt);

    const f=q('formRegister');
    if (f) {
        f.addEventListener('submit', function(e) {
            e.preventDefault(); // Mencegah submit form standar

            // 1. Jalankan Validasi Client-side
            if (!validateAll()) {
                // Scroll ke error pertama jika ada
                const firstErr = qe('.error-border');
                if (firstErr) firstErr.focus();
                return false;
            }

            // 2. Persiapan UI & Data
            const submitBtn = f.querySelector('button[type="submit"]');
            const msgBox = document.getElementById('msgbox');
            const originalBtnText = submitBtn.innerHTML;
            const formData = new FormData(f);

            // Set Loading State
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Memproses...';
            
            // Reset msgbox (menghapus pesan lama jika ada)
            msgBox.style.display = 'none';
            msgBox.classList.remove('alert-danger', 'alert-success', 'alert-warning');
            // --- PERBAIKAN CSRF ---
            // 1. Ambil token langsung dari Meta Tag (paling stabil) atau input hidden
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') 
                              || f.querySelector('input[name="_token"]')?.value 
                              || f.querySelector('input[name="token"]')?.value;

            // 2. Tambahkan ke FormData jika belum ada
            if (!formData.has('_token')) {
                formData.append('_token', csrfToken);
            }

            // 3. Eksekusi AJAX
            fetch(f.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken // Kirim juga lewat header untuk keamanan ekstra
                }
            })
            .then(async (response) => {
                const data = await response.json();
                
                if (response.ok && data.success) {
                    // BERHASIL
                    msgBox.classList.add('alert-success');
                    msgBox.innerHTML = '<strong>Berhasil!</strong> ' + (data.message || 'Pendaftaran sukses.');
                    msgBox.style.display = 'block';
                    
                    f.reset(); // Reset form

                    if (data.redirect_url) {
                        setTimeout(() => window.location.href = data.redirect_url, 2000);
                    }
                } else {
                    // GAGAL (LOGIKA SERVER ATAU VALIDASI LARAVEL)
                    msgBox.classList.add('alert-danger');
                    let errorMsg = data.message || 'Terjadi kesalahan pada data Anda.';
                    
                    // Jika ada error spesifik per field dari Laravel (422)
                    if (data.errors) {
                        Object.keys(data.errors).forEach(field => {
                            showError(field, data.errors[field][0]);
                        });
                        errorMsg = 'Periksa kembali kolom yang bertanda merah.';
                    }

                    msgBox.innerHTML = '<strong>Gagal!</strong> ' + errorMsg;
                    msgBox.style.display = 'block';
                    
                    // Refresh Captcha
                    document.getElementById('capreg').click();
                }
            })
            .catch(error => {
                // ERROR JARINGAN / SERVER MATI
                console.error('AJAX Error:', error);
                msgBox.classList.add('alert-danger');
                msgBox.innerHTML = '<strong>Error!</strong> Tidak dapat terhubung ke server.';
                msgBox.style.display = 'block';
            })
            .finally(() => {
                // Kembalikan tombol
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalBtnText;
            });
        });
    }
  });
})();
</script>

                                        
                                    </div>
                                </div>
                        </div>
                    

                                    </div>
@enddesktop
@endsection