@extends('layouts.doctor')

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

@section('content')
<div class="max-w-2xl mx-auto space-y-6">
    <div class="bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden" 
        x-data="{ 
            password: '',
            get strength() {
                if (!this.password) return 0;
                let score = 0;
                if (this.password.length >= 8) score += 25;
                if (/[a-z]/.test(this.password) && /[A-Z]/.test(this.password)) score += 25;
                if (/[0-9]/.test(this.password)) score += 25;
                if (/[@$!%*#?&]/.test(this.password)) score += 25;
                return score;
            },
            get strengthLabel() {
                if (this.strength === 0) return 'None';
                if (this.strength <= 25) return 'Weak';
                if (this.strength <= 50) return 'Fair';
                if (this.strength <= 75) return 'Good';
                return 'Strong';
            },
            get strengthColor() {
                if (this.strength <= 25) return 'bg-red-500';
                if (this.strength <= 50) return 'bg-orange-500';
                if (this.strength <= 75) return 'bg-blue-500';
                return 'bg-emerald-500';
            }
        }">
        <div class="p-8 border-b border-slate-100 bg-slate-50/50">
            <h3 class="text-xl font-black text-slate-800 tracking-tight">Update Password</h3>
            <p class="text-sm text-slate-500 font-medium">Protect your clinical account with a strong password.</p>
        </div>

        <form method="POST" action="{{ route('doctor.settings.password.update') }}" class="p-8 space-y-6">
            @csrf
            
            @if($errors->any())
                <div class="p-4 bg-red-50 border border-red-200 text-red-700 rounded-2xl text-sm">
                    <ul class="space-y-1">
                        @foreach($errors->all() as $error)
                            <li class="flex items-center gap-2">
                                <span class="h-1.5 w-1.5 bg-red-500 rounded-full"></span>
                                {{ $error }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="space-y-2">
                <label for="current_password" class="block text-xs font-black text-slate-500 uppercase tracking-[0.2em]">Current Password</label>
                <input id="current_password" name="current_password" type="password" required
                    class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all font-bold placeholder:text-slate-300"
                    placeholder="••••••••">
            </div>

            <div class="space-y-4">
                <div class="space-y-2">
                    <label for="password" class="block text-xs font-black text-slate-500 uppercase tracking-[0.2em]">New Password</label>
                    <input id="password" name="password" type="password" required x-model="password"
                        class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all font-bold placeholder:text-slate-300"
                        placeholder="••••••••">
                </div>

                <!-- Password Strength Meter -->
                <div class="space-y-2" x-show="password.length > 0">
                    <div class="flex justify-between items-center text-[10px] font-black uppercase tracking-widest">
                        <span class="text-slate-400">Strength: <span :class="strengthColor.replace('bg-', 'text-')" x-text="strengthLabel"></span></span>
                        <span class="text-slate-400" x-text="strength + '%'"></span>
                    </div>
                    <div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
                        <div class="h-full transition-all duration-500" :class="strengthColor" :style="'width: ' + strength + '%'"></div>
                    </div>
                    <ul class="grid grid-cols-2 gap-x-4 gap-y-1 mt-2">
                        <li class="flex items-center gap-2 text-[10px] font-bold" :class="password.length >= 8 ? 'text-emerald-600' : 'text-slate-400'">
                            <span class="h-1 w-1 rounded-full bg-current"></span> 8+ Characters
                        </li>
                        <li class="flex items-center gap-2 text-[10px] font-bold" :class="/[A-Z]/.test(password) && /[a-z]/.test(password) ? 'text-emerald-600' : 'text-slate-400'">
                            <span class="h-1 w-1 rounded-full bg-current"></span> Upper & Lower
                        </li>
                        <li class="flex items-center gap-2 text-[10px] font-bold" :class="/[0-9]/.test(password) ? 'text-emerald-600' : 'text-slate-400'">
                            <span class="h-1 w-1 rounded-full bg-current"></span> One Number
                        </li>
                        <li class="flex items-center gap-2 text-[10px] font-bold" :class="/[@$!%*#?&]/.test(password) ? 'text-emerald-600' : 'text-slate-400'">
                            <span class="h-1 w-1 rounded-full bg-current"></span> Special Character
                        </li>
                    </ul>
                </div>
            </div>

            <div class="space-y-2">
                <label for="password_confirmation" class="block text-xs font-black text-slate-500 uppercase tracking-[0.2em]">Confirm New Password</label>
                <input id="password_confirmation" name="password_confirmation" type="password" required
                    class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none transition-all font-bold placeholder:text-slate-300"
                    placeholder="••••••••">
            </div>

            <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-100">
                <a href="{{ route('doctor.dashboard') }}" class="px-6 py-3 text-sm font-bold text-slate-500 hover:text-slate-800 transition-colors">
                    Cancel
                </a>
                <button type="submit" class="px-8 py-3 bg-indigo-600 text-white text-sm font-black rounded-2xl hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100">
                    Update Password
                </button>
            </div>
        </form>
    </div>
</div>
@endsection