@extends('layouts.admin')

@section('title', 'Change Password')
@section('header', 'Settings / Change Password')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-8 py-6 border-b border-slate-200">
            <h3 class="text-lg font-semibold text-slate-800">Update Password</h3>
            <p class="text-sm text-slate-500 mt-1">Ensure your account is using a long, random password to stay secure.</p>
        </div>
        
        <form action="{{ route('admin.settings.password.update') }}" method="POST" class="p-8 space-y-6">
            @csrf
            
            <div>
                <label for="current_password" class="block text-sm font-medium text-slate-700">Current Password</label>
                <input type="password" name="current_password" id="current_password" required
                    class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                @error('current_password')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div x-data="{ 
                password: '',
                strength: 0,
                calculateStrength() {
                    let s = 0;
                    if (this.password.length > 7) s++;
                    if (/[A-Z]/.test(this.password)) s++;
                    if (/[0-9]/.test(this.password)) s++;
                    if (/[^A-Za-z0-9]/.test(this.password)) s++;
                    this.strength = s;
                }
            }">
                <label for="password" class="block text-sm font-medium text-slate-700">New Password</label>
                <input type="password" name="password" id="password" required x-model="password" @input="calculateStrength()"
                    class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
                
                <!-- Password Strength Indicator -->
                <div class="mt-3 flex gap-1 h-1.5">
                    <div :class="strength >= 1 ? 'bg-red-500' : 'bg-slate-200'" class="flex-1 rounded-full transition-colors"></div>
                    <div :class="strength >= 2 ? 'bg-orange-500' : 'bg-slate-200'" class="flex-1 rounded-full transition-colors"></div>
                    <div :class="strength >= 3 ? 'bg-yellow-500' : 'bg-slate-200'" class="flex-1 rounded-full transition-colors"></div>
                    <div :class="strength >= 4 ? 'bg-green-500' : 'bg-slate-200'" class="flex-1 rounded-full transition-colors"></div>
                </div>
                <p class="mt-2 text-xs text-slate-500" x-text="['Weak', 'Fair', 'Good', 'Strong'][strength - 1] || 'Enter a password'"></p>
                
                @error('password')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password_confirmation" class="block text-sm font-medium text-slate-700">Confirm New Password</label>
                <input type="password" name="password_confirmation" id="password_confirmation" required
                    class="mt-1 block w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all">
            </div>

            <div class="flex justify-end pt-4">
                <button type="submit" class="px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-xl hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500/20 transition-all transform active:scale-95">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
@endsection