@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:380px;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-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:22px;line-height:1.6}
.auth-form{display:flex;flex-direction:column;gap:14px}
.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-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-panel-bottom{padding:14px 28px 22px;border-top:1px solid var(--border);margin-top:22px;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:380px">

        <div class="auth-panel anim-up">
            <div class="auth-panel-top">

                <div style="text-align:center;margin-bottom:20px;padding-top:4px">
                    <div style="display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(34,197,94,.12);">
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
                            <rect x="4" y="10" width="16" height="10" rx="2" stroke="#22c55e" stroke-width="1.8"/>
                            <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#22c55e" stroke-width="1.8" stroke-linecap="round"/>
                            <circle cx="12" cy="15" r="1.5" fill="#22c55e"/>
                        </svg>
                    </div>
                </div>

                <div class="auth-heading">Buat Sandi Baru</div>
                <div class="auth-subhead">Kode terverifikasi. Sekarang atur kata sandi baru untuk akunmu.</div>

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

                <form method="POST" action="{{ route('password.update') }}" class="auth-form">
                    @csrf
                    <div class="auth-field">
                        <label class="auth-label">Kata Sandi Baru</label>
                        <div class="auth-input-wrap">
                            <i class="fas fa-lock"></i>
                            <input type="password" name="password" id="pwIn" class="auth-input"
                                   required minlength="6" placeholder="Minimal 6 karakter">
                            <button type="button" class="auth-eye" onclick="togglePw('pwIn','pwEye')">
                                <i id="pwEye" class="fas fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

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

                    <button type="submit" class="auth-submit">Simpan Sandi Baru</button>
                </form>
            </div>

            <div class="auth-panel-bottom">
                <a href="{{ route('login') }}">Batal, kembali ke login</a>
            </div>
        </div>
    </div>
</div>

<script>
function togglePw(inputId, iconId){
    var i=document.getElementById(inputId);
    var 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