@extends('layouts.auth-app')

@push('style')
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    body {
        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background-color: #000;
        color: #fff;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .card {
        width: 100%;
        max-width: 380px;
        background: #1c1c1e;
        border-radius: 14px;
        padding: 32px 28px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    .card-header { text-align: center; margin-bottom: 28px; }

    .card-header h1 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }

    .card-header p { font-size: 13px; color: #8a8a8e; line-height: 1.6; }

    .form-group { margin-bottom: 18px; }

    .form-group label { display: block; font-size: 13px; color: #c7c7cc; margin-bottom: 8px; }

    .input-box { position: relative; }

    .input-box input {
        width: 100%;
        background: #0e0e10;
        border: 1px solid transparent;
        border-radius: 30px;
        padding: 14px 46px 14px 18px;
        color: #fff;
        font-size: 14px;
        outline: none;
        transition: border-color 0.25s, background-color 0.25s;
    }

    .input-box input::placeholder { color: #6e6e73; }

    .input-box input:focus { border-color: #8b5cf6; background: #131316; }

    .toggle-eye {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #8a8a8e;
        display: flex;
        align-items: center;
        padding: 4px;
    }

    .field-error {
        color: #ff453a;
        font-size: 12px;
        margin-top: 6px;
        display: block;
    }

    .btn-reset {
        width: 100%;
        background: #8b5cf6;
        color: #fff;
        border: none;
        border-radius: 30px;
        padding: 14px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
        margin-top: 6px;
        margin-bottom: 16px;
    }

    .btn-reset:hover { background: #7c3aed; }
    .btn-reset:active { transform: scale(0.99); }

    .back-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: #bababa;
        font-size: 13px;
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .back-link:hover { opacity: 0.8; }

    @media (max-width: 420px) {
        .card { padding: 26px 20px; border-radius: 12px; }
        .card-header h1 { font-size: 20px; }
    }
</style>
@endpush

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

    <div class="card-header">
        <img src="{{ asset('images/logo-img.png') }}" alt="Logo" style="height:40px; margin-bottom:16px;">
        <h1>Reset Password</h1>
        <p>Please enter a new, secure password to regain access to your administrator account.</p>
    </div>

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

        {{-- Pass token + email through hidden fields --}}
        <input type="hidden" name="token" value="{{ $token }}">
        <input type="hidden" name="email" value="{{ $email }}">

        <div class="form-group">
            <label for="password">New Password</label>
            <div class="input-box">
                <input
                    type="password"
                    id="password"
                    name="password"
                    placeholder="••••••••••"
                    autocomplete="new-password"
                    required
                >
                <button type="button" class="toggle-eye" onclick="togglePwd('password', this)" aria-label="Toggle password visibility">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
            @error('password')
                <span class="field-error">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group">
            <label for="password_confirmation">Confirm Password</label>
            <div class="input-box">
                <input
                    type="password"
                    id="password_confirmation"
                    name="password_confirmation"
                    placeholder="••••••••••"
                    autocomplete="new-password"
                    required
                >
                <button type="button" class="toggle-eye" onclick="togglePwd('password_confirmation', this)" aria-label="Toggle confirm password visibility">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
            @error('password_confirmation')
                <span class="field-error">{{ $message }}</span>
            @enderror
        </div>

        <button type="submit" class="btn-reset">Reset Password</button>

    </form>
    {{-- //back to forgot password page --}}
    <a href="{{ route('password.request') }}" class="back-link">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        Back to Forgot Password
    </a>

</div>

<script>
    // Takes the input ID directly — no fragile DOM traversal
    function togglePwd(inputId, btn) {
        const input = document.getElementById(inputId);
        const isHidden = input.type === 'password';
        input.type = isHidden ? 'text' : 'password';
        btn.innerHTML = isHidden
            ? `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>`;
    }
</script>
@endsection