@extends('layouts.app')

@push('styles')
<style>
.topbar,.bottom-nav,.drawer,.d-ov,.desk-sidebar{display:none!important}
.desk-main{padding:0!important}
.page-outer,.page-inner{display:block}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg)}
.auth-panel{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.auth-panel-top{padding:28px 28px 0}
.auth-logo{display:flex;justify-content:center;margin-bottom:20px}
.auth-logo-mark{width:42px;height:42px;border-radius:11px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.auth-heading{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);text-align:center;margin-bottom:4px}
.auth-subhead{font-size:13px;color:var(--muted);text-align:center;margin-bottom:20px}
.auth-toggle{display:flex;background:var(--elevated);border-radius:8px;padding:3px;margin-bottom:20px}
.auth-toggle a{flex:1;text-align:center;padding:8px;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;transition:background .14s,color .14s}
.auth-toggle a.active{background:var(--overlay);color:var(--text)}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-field{display:flex;flex-direction:column;gap:4px}
.auth-label{font-size:12px;font-weight:500;color:var(--text2)}
.auth-input-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border2);border-radius:var(--r);background:var(--elevated);padding:0 11px;transition:border-color .14s,box-shadow .14s}
.auth-input-wrap:focus-within{border-color:var(--accent)}
.auth-input-wrap i{color:var(--muted2);font-size:12px;flex-shrink:0}
.auth-input{flex:1;padding:9px 0;border:none;outline:none;background:transparent;font-size:14px;color:var(--text);font-family:inherit}
.auth-input::placeholder{color:var(--muted2)}
.auth-eye{background:transparent;border:none;cursor:pointer;color:var(--muted2);padding:0;font-size:12px}
.auth-eye:hover{color:var(--text2)}
.auth-hint{font-size:11px;color:var(--muted)}
.auth-submit{width:100%;padding:10px;border-radius:var(--r);background:var(--accent);color:#fff;border:none;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,transform .08s}
.auth-submit:hover{background:var(--accent-d)}
.auth-submit:active{transform:scale(.98)}
.auth-divider{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted2)}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-google{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:9px;border-radius:var(--r);background:var(--elevated);border:1px solid var(--border2);font-size:13px;font-weight:500;color:var(--text2);text-decoration:none;transition:background .12s,border-color .12s}
.auth-google:hover{background:var(--overlay);color:var(--text)}
.auth-panel-bottom{padding:14px 28px 22px;border-top:1px solid var(--border);margin-top:20px;background:var(--elevated);text-align:center;font-size:12px;color:var(--muted)}
.auth-panel-bottom a{color:var(--accent);font-weight:600;text-decoration:none}
.auth-err{padding:9px 11px;border-radius:var(--r);background:var(--danger-l);border:1px solid rgba(239,68,68,.2);color:var(--danger);font-size:12px;font-weight:500}
</style>
@endpush

@section('content')
@include('partials.auth-fit')
<div class="auth-wrap">
    <div style="width:100%;max-width:400px">

        <a href="{{ url('/') }}" style="display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);margin-bottom:16px;text-decoration:none;transition:color .12s" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--muted)'">
            <i class="fas fa-arrow-left" style="font-size:11px"></i> Kembali
        </a>

        <div class="auth-panel anim-up">
            <div class="auth-panel-top">
                <div class="auth-logo">
                    @php $logo = \App\Models\Setting::getValue('site_logo'); @endphp
                    @if($logo)
                        <img src="{{ asset('storage/'.$logo) }}" alt="{{ \App\Models\Setting::getValue('site_name','Nokos') }}"
                             style="height:36px;width:auto;object-fit:contain">
                    @else
                        <div class="auth-logo-mark">
                            <svg width="22" height="22" viewBox="0 0 16 16" fill="none">
                                <rect x="2" y="1" width="8" height="14" rx="2" stroke="white" stroke-width="1.6"/>
                                <circle cx="6" cy="12" r="1" fill="white"/>
                                <path d="M11 5h3M11 8h4M11 11h3" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                        </div>
                    @endif
                </div>

                <div class="auth-heading">Buat akun baru</div>
                <div class="auth-subhead">Daftar gratis dan mulai transaksi sekarang</div>

                <div class="auth-toggle">
                    <a href="{{ route('login') }}">Masuk</a>
                    <a href="{{ route('register') }}" class="active">Daftar</a>
                </div>

                @if($errors->any())
                <div class="auth-err" style="margin-bottom:14px">{{ $errors->first() }}</div>
                @endif

                <form method="POST" action="{{ route('register') }}" class="auth-form">
                    @csrf
                    <div class="auth-field">
                        <label class="auth-label">Nama Lengkap</label>
                        <div class="auth-input-wrap">
                            <i class="fas fa-user"></i>
                            <input type="text" name="name" class="auth-input"
                                   value="{{ old('name') }}" required autofocus placeholder="Nama kamu">
                        </div>
                    </div>

                    <div class="auth-field">
                        <label class="auth-label">Username</label>
                        <div class="auth-input-wrap">
                            <i class="fas fa-at"></i>
                            <input type="text" name="username" class="auth-input"
                                   value="{{ old('username') }}" required placeholder="username unik">
                        </div>
                        <span class="auth-hint">Huruf kecil, angka, underscore saja</span>
                    </div>

                    <div class="auth-field">
                        <label class="auth-label">Email</label>
                        <div class="auth-input-wrap">
                            <i class="fas fa-envelope"></i>
                            <input type="email" name="email" class="auth-input"
                                   value="{{ old('email') }}" required placeholder="contoh@email.com">
                        </div>
                    </div>

                    <div class="auth-field">
                        <label class="auth-label">Kata Sandi</label>
                        <div class="auth-input-wrap">
                            <i class="fas fa-lock"></i>
                            <input type="password" name="password" id="pw1" class="auth-input"
                                   required placeholder="Min. 8 karakter">
                            <button type="button" class="auth-eye" onclick="togglePw('pw1','eye1')">
                                <i id="eye1" class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="auth-field">
                        <label class="auth-label">Konfirmasi Sandi</label>
                        <div class="auth-input-wrap">
                            <i class="fas fa-lock"></i>
                            <input type="password" name="password_confirmation" id="pw2" class="auth-input"
                                   required placeholder="Ulangi sandi">
                            <button type="button" class="auth-eye" onclick="togglePw('pw2','eye2')">
                                <i id="eye2" class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <div style="font-size:11px;color:var(--muted);line-height:1.5">
                        Dengan mendaftar, kamu menyetujui
                        <a href="{{ route('terms') }}" target="_blank" rel="noopener" style="color:var(--accent)">Syarat &amp; Ketentuan</a> kami.
                    </div>

                    <button type="submit" class="auth-submit">Buat Akun</button>

                    <div class="auth-divider">atau</div>

                    <a href="{{ route('auth.google') }}" class="auth-google">
                        <svg width="16" height="16" viewBox="0 0 24 24">
                            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
                            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                        </svg>
                        Daftar dengan Google
                    </a>
                </form>
            </div>

            <div class="auth-panel-bottom">
                Sudah punya akun? <a href="{{ route('login') }}">Masuk sekarang</a>
            </div>
        </div>
    </div>
</div>
<script>
function togglePw(inputId,iconId){
    var i=document.getElementById(inputId),ico=document.getElementById(iconId);
    if(i.type==='password'){i.type='text';ico.className='fas fa-eye'}
    else{i.type='password';ico.className='fas fa-eye-slash'}
}
</script>
@endsection