@extends('admin.layouts.app')

@section('title', 'Change Password')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white tracking-tight">Account Security</h1>
        <p class="text-slate-400 mt-1">Update your password to keep your account secure.</p>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm flex items-center gap-3">
            <i data-lucide="check-circle" class="w-5 h-5"></i>
            {{ session('success') }}
        </div>
    @endif

    <div class="glass-card rounded-3xl p-8 shadow-2xl">
        <form action="{{ route('admin.settings.update-password') }}" method="POST" class="space-y-6" x-data="passwordValidator()">
            @csrf
            
            <!-- Current Password -->
            <div class="space-y-2">
                <label for="current_password" class="text-sm font-medium text-slate-400 ml-1">Current Password</label>
                <div class="relative group">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-500 group-focus-within:text-blue-400 transition-colors">
                        <i data-lucide="lock" class="w-5 h-5"></i>
                    </div>
                    <input type="password" id="current_password" name="current_password" required
                        class="w-full bg-slate-900/50 border @error('current_password') border-red-500/50 @else border-slate-700 @enderror text-white rounded-xl py-3.5 pl-12 pr-4 outline-none transition-all focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10 placeholder:text-slate-600">
                </div>
                @error('current_password')
                    <p class="text-red-400 text-xs mt-1 ml-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="h-[1px] bg-slate-800 my-2"></div>

            <!-- New Password -->
            <div class="space-y-2">
                <label for="password" class="text-sm font-medium text-slate-400 ml-1">New Password</label>
                <div class="relative group">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-500 group-focus-within:text-blue-400 transition-colors">
                        <i data-lucide="shield-check" class="w-5 h-5"></i>
                    </div>
                    <input type="password" id="password" name="password" required
                        x-model="password"
                        @input="checkStrength()"
                        class="w-full bg-slate-900/50 border @error('password') border-red-500/50 @else border-slate-700 @enderror text-white rounded-xl py-3.5 pl-12 pr-4 outline-none transition-all focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10 placeholder:text-slate-600">
                </div>
                @error('password')
                    <p class="text-red-400 text-xs mt-1 ml-1">{{ $message }}</p>
                @enderror

                <!-- Strength Meter -->
                <div class="mt-4 p-4 rounded-2xl bg-slate-900/30 border border-slate-800/50">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-[10px] uppercase font-bold tracking-widest text-slate-500">Security Strength</span>
                        <span class="text-xs font-bold" :class="strengthTextClass" x-text="strengthText">Very Weak</span>
                    </div>
                    <div class="flex gap-1.5 h-1.5">
                        <div class="flex-1 rounded-full transition-all duration-500" :class="strengthScore >= 1 ? strengthColor : 'bg-slate-800'"></div>
                        <div class="flex-1 rounded-full transition-all duration-500" :class="strengthScore >= 2 ? strengthColor : 'bg-slate-800'"></div>
                        <div class="flex-1 rounded-full transition-all duration-500" :class="strengthScore >= 3 ? strengthColor : 'bg-slate-800'"></div>
                        <div class="flex-1 rounded-full transition-all duration-500" :class="strengthScore >= 4 ? strengthColor : 'bg-slate-800'"></div>
                        <div class="flex-1 rounded-full transition-all duration-500" :class="strengthScore >= 5 ? strengthColor : 'bg-slate-800'"></div>
                    </div>
                    
                    <ul class="mt-4 space-y-2">
                        <template x-for="req in requirements" :key="req.label">
                            <li class="flex items-center gap-2 text-[11px] transition-colors" :class="req.met ? 'text-emerald-400' : 'text-slate-500'">
                                <i :data-lucide="req.met ? 'check-circle' : 'circle'" class="w-3.5 h-3.5"></i>
                                <span x-text="req.label"></span>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>

            <!-- Confirm Password -->
            <div class="space-y-2">
                <label for="password_confirmation" class="text-sm font-medium text-slate-400 ml-1">Confirm New Password</label>
                <div class="relative group">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-500 group-focus-within:text-blue-400 transition-colors">
                        <i data-lucide="lock" class="w-5 h-5"></i>
                    </div>
                    <input type="password" id="password_confirmation" name="password_confirmation" required
                        class="w-full bg-slate-900/50 border border-slate-700 text-white rounded-xl py-3.5 pl-12 pr-4 outline-none transition-all focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10 placeholder:text-slate-600">
                </div>
            </div>

            <button type="submit" 
                class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-semibold py-4 rounded-xl shadow-lg shadow-blue-500/20 active:scale-[0.98] transition-all flex items-center justify-center gap-2 mt-8">
                <i data-lucide="refresh-cw" class="w-5 h-5"></i>
                Update Password
            </button>
        </form>
    </div>
</div>

<script>
    function passwordValidator() {
        return {
            password: '',
            strengthScore: 0,
            strengthText: 'Very Weak',
            strengthColor: 'bg-red-500',
            strengthTextClass: 'text-red-500',
            requirements: [
                { label: 'At least 8 characters long', met: false, regex: /.{8,}/ },
                { label: 'Contains uppercase letter', met: false, regex: /[A-Z]/ },
                { label: 'Contains lowercase letter', met: false, regex: /[a-z]/ },
                { label: 'Contains a number', met: false, regex: /[0-9]/ },
                { label: 'Special character (@, #, $, etc.)', met: false, regex: /[^A-Za-z0-9]/ }
            ],
            checkStrength() {
                let score = 0;
                this.requirements.forEach(req => {
                    req.met = req.regex.test(this.password);
                    if (req.met) score++;
                });

                this.strengthScore = score;
                
                if (score <= 1) {
                    this.strengthText = 'Very Weak';
                    this.strengthColor = 'bg-rose-500';
                    this.strengthTextClass = 'text-rose-500';
                } else if (score === 2) {
                    this.strengthText = 'Weak';
                    this.strengthColor = 'bg-orange-500';
                    this.strengthTextClass = 'text-orange-500';
                } else if (score === 3) {
                    this.strengthText = 'Fair';
                    this.strengthColor = 'bg-yellow-500';
                    this.strengthTextClass = 'text-yellow-500';
                } else if (score === 4) {
                    this.strengthText = 'Strong';
                    this.strengthColor = 'bg-blue-500';
                    this.strengthTextClass = 'text-blue-500';
                } else {
                    this.strengthText = 'Very Strong';
                    this.strengthColor = 'bg-emerald-500';
                    this.strengthTextClass = 'text-emerald-500';
                }
                
                // Refresh Lucide icons for the checking marks
                setTimeout(() => lucide.createIcons(), 10);
            }
        }
    }
</script>
@endsection