@extends('layouts.login-tailwind')
@section('title', __('Reset Password'))

@section('styles')
<style>
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-family: inherit;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 40px;
    margin: 24px 16px;
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}
.auth-logo img { max-width: 160px; max-height: 48px; object-fit: contain; }

.auth-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--accent);
}

.auth-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    text-align: center;
}
.auth-sub {
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
    margin: 0 0 28px;
    line-height: 1.6;
}

.auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.auth-label { font-size: 12px; font-weight: 500; color: var(--text-2); }

.auth-input-wrap { position: relative; }
.auth-input {
    display: block;
    width: 100%;
    padding: 9px 38px 9px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    transition: border-color .15s;
}
.auth-input:focus { outline: none; border-color: var(--accent); }
.auth-input::placeholder { color: var(--text-3); }

.pass-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-3);
    display: flex;
    align-items: center;
}
.pass-toggle:hover { color: var(--text-2); }
.pass-toggle .icon-eye-off { display: none; }
.pass-toggle.visible .icon-eye { display: none; }
.pass-toggle.visible .icon-eye-off { display: block; }

.auth-submit {
    width: 100%;
    padding: 11px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    font-family: inherit;
    margin-top: 4px;
}
.auth-submit:hover { opacity: .88; }
</style>
@endsection

@section('content')
<div class="auth-card">

    <div class="auth-logo">
        {!! render_image_markup_by_attachment_id(get_static_option('site_logo')) !!}
    </div>

    <div class="auth-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:22px;height:22px"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
    </div>

    <h1 class="auth-title">{{ __('Reset Password') }}</h1>
    <p class="auth-sub">{{ __('Choose a strong new password for your account.') }}</p>

    <x-validation.error />

    <form method="POST" action="{{ route('admin.forgot.password.reset') }}">
        @csrf

        <div class="auth-field">
            <label class="auth-label" for="password">{{ __('New Password') }}</label>
            <div class="auth-input-wrap">
                <input class="auth-input" type="password" id="password" name="password"
                       placeholder="{{ __('Enter new password') }}" autocomplete="new-password">
                <button type="button" class="pass-toggle" data-target="password" tabindex="-1">
                    <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                    <svg class="icon-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                </button>
            </div>
        </div>

        <div class="auth-field">
            <label class="auth-label" for="confirm_password">{{ __('Confirm New Password') }}</label>
            <div class="auth-input-wrap">
                <input class="auth-input" type="password" id="confirm_password" name="confirm_password"
                       placeholder="{{ __('Confirm new password') }}" autocomplete="new-password">
                <button type="button" class="pass-toggle" data-target="confirm_password" tabindex="-1">
                    <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                    <svg class="icon-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                </button>
            </div>
        </div>

        <button type="submit" class="auth-submit">{{ __('Reset Password') }}</button>
    </form>

</div>
@endsection

@section('scripts')
<script>
(function () {
    document.querySelectorAll('.pass-toggle').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var inp = document.getElementById(this.dataset.target);
            inp.type = inp.type === 'password' ? 'text' : 'password';
            this.classList.toggle('visible');
        });
    });
}());
</script>
@endsection