@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;min-height:44px;border:1px solid var(--border2);border-radius:var(--r);background:var(--elevated);padding:0 12px;transition:border-color .14s,box-shadow .14s}
.auth-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.auth-input-wrap i{color:var(--muted2);font-size:13px;flex-shrink:0}
.auth-input{flex:1;min-height:42px;padding:8px 0;border:none;outline:none;background:transparent;font-size:14px;color:var(--text);font-family:inherit}
.auth-input::placeholder{color:var(--muted2)}
.auth-submit{width:100%;min-height:44px;padding:11px;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">

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

        <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:var(--accent-l);">
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
                            <rect x="4" y="10" width="16" height="10" rx="2" stroke="var(--accent)" stroke-width="1.8"/>
                            <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round"/>
                            <circle cx="12" cy="15" r="1.5" fill="var(--accent)"/>
                        </svg>
                    </div>
                </div>

                <div class="auth-heading">Lupa Kata Sandi?</div>
                <div class="auth-subhead">Masukkan email akunmu, kami akan kirim kode verifikasi untuk mengatur ulang sandi.</div>

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

                <form method="POST" action="{{ route('password.email') }}" class="auth-form">
                    @csrf
                    <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 autofocus
                                   placeholder="contoh@email.com">
                        </div>
                    </div>

                    <button type="submit" class="auth-submit">Kirim Kode Verifikasi</button>
                </form>
            </div>

            <div class="auth-panel-bottom">
                Sudah ingat sandi? <a href="{{ route('login') }}">Masuk</a>
            </div>
        </div>
    </div>
</div>
@endsection