@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-logo{display:flex;justify-content:center;margin-bottom:22px}
.auth-logo-mark{
    width:42px;height:42px;border-radius:11px;
    background:var(--accent);display:flex;align-items:center;justify-content:center;
}
.auth-logo-text{font-size:18px;font-weight:800;letter-spacing:-.5px}
.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}

.auth-toggle{
    display:flex;background:var(--elevated);border-radius:8px;padding:3px;
    margin-bottom:22px;
}
.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: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-row{display:flex;align-items:center;justify-content:space-between}
.auth-remember{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.auth-remember input{accent-color:var(--accent);width:13px;height:13px}
.auth-forgot{font-size:12px;font-weight:600;color:var(--accent);text-decoration:none}
.auth-forgot:hover{color:var(--accent-d)}

.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);border-color:var(--border2);color:var(--text)}

.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-panel-bottom a:hover{color:var(--accent-d)}

.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="{{ 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">Masuk ke akun kamu</div>
                <div class="auth-subhead">Masukkan email dan sandi untuk melanjutkan</div>

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

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

                <form method="POST" action="{{ route('login') }}" 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>

                    <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="pwIn" class="auth-input"
                                   required placeholder="••••••••">
                            <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-row">
                        <label class="auth-remember">
                            <input type="checkbox" name="remember">
                            Ingat saya
                        </label>
                        @if(Route::has('password.request'))
                        <a href="{{ route('password.request') }}" class="auth-forgot">Lupa sandi?</a>
                        @endif
                    </div>

                    <button type="submit" class="auth-submit">Masuk</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>
                        Lanjutkan dengan Google
                    </a>
                </form>
            </div>

            <div class="auth-panel-bottom">
                Belum punya akun? <a href="{{ route('register') }}">Daftar sekarang</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