@extends('layouts.auth')
@section('title', 'Reset Password')

@section('content')
    <div class="mb-8">
        <h2 class="font-display text-2xl font-bold text-surface-900 tracking-tight">Reset password</h2>
        <p class="mt-1.5 text-sm text-surface-500">Choose a strong new password for your account.</p>
    </div>

    @if($errors->any())
        <div class="mb-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4">
            <svg class="mt-0.5 w-4 h-4 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            <ul class="space-y-0.5 text-sm text-red-700">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('password.update') }}" class="enhanced-form space-y-5">
        @csrf

        <input type="hidden" name="token" value="{{ $token }}">

        <x-input
            name="email"
            label="Email address"
            type="email"
            :value="$email"
            readonly
        />

        <div x-data="{ password: '', strength: 0 }">
            <label for="password" class="form-label">
                New Password <span class="text-red-500">*</span>
            </label>
            <input
                type="password"
                id="password"
                name="password"
                x-model="password"
                @input="strength = password.length < 1 ? 0 : password.length < 6 ? 1 : password.length < 10 ? 2 : 3"
                placeholder="********"
                required
                class="form-input {{ $errors->has('password') ? 'form-input-error' : '' }}"
            />

            <div class="mt-2 flex gap-1.5" x-show="password.length > 0">
                <div class="h-1 flex-1 rounded-full transition-colors duration-300"
                    :class="strength >= 1 ? 'bg-red-400' : 'bg-surface-200'"></div>
                <div class="h-1 flex-1 rounded-full transition-colors duration-300"
                    :class="strength >= 2 ? 'bg-amber-400' : 'bg-surface-200'"></div>
                <div class="h-1 flex-1 rounded-full transition-colors duration-300"
                    :class="strength >= 3 ? 'bg-emerald-400' : 'bg-surface-200'"></div>
            </div>
            <p class="mt-1 text-xs transition-colors duration-200" x-show="password.length > 0"
                :class="{
                    'text-red-600': strength === 1,
                    'text-amber-600': strength === 2,
                    'text-emerald-600': strength === 3,
                }"
                x-text="strength === 1 ? 'Weak password' : strength === 2 ? 'Medium strength' : 'Strong password'"
            ></p>

            @error('password')
                <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="password_confirmation" class="form-label">
                Confirm Password <span class="text-red-500">*</span>
            </label>
            <input
                type="password"
                id="password_confirmation"
                name="password_confirmation"
                placeholder="********"
                required
                class="form-input"
            />
        </div>

        <button type="submit" class="btn-primary w-full justify-center py-2.5 shadow-glow">
            Reset Password
        </button>
    </form>
@endsection