@extends('layouts.user')

@section('title', 'Security & PIN - AlephoraX communication')

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

@section('content')
<div class="max-w-xl mx-auto px-5 animate-fade-in">
    <!-- Back Button -->
    <a href="{{ route('user.account') }}" class="inline-flex items-center gap-2 text-slate-600 hover:text-slate-900 mb-6 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        <span class="font-medium">Back to Account Settings</span>
    </a>

    <!-- Password Change Form -->
    <div class="bg-white rounded-[2rem] border border-slate-100 shadow-sm overflow-hidden mb-8">
        <!-- Header -->
        <div class="p-6 border-b border-slate-100 bg-gradient-to-r from-purple-50 to-transparent">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-full bg-[#7D26C2]/10 flex items-center justify-center">
                    <svg class="w-6 h-6 text-[#7D26C2]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z M12 9v2m0 4h.01"/>
                    </svg>
                </div>
                <div>
                    <h3 class="font-bold text-slate-900 text-xl">Change Password</h3>
                    <p class="text-slate-500 text-sm">Update your password to keep your account secure</p>
                </div>
            </div>
        </div>

        <!-- Form -->
        <form method="POST" action="{{ route('password.update') }}" class="p-6 space-y-6">
            @csrf
            @method('PUT')

            <!-- Current Password -->
            <div class="space-y-2">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block px-1">Current Password</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <input type="password" name="current_password" id="current_password" class="w-full bg-white border border-slate-200 rounded-2xl py-4 pl-12 pr-12 text-slate-900 font-medium focus:outline-none focus:border-[#7D26C2] focus:ring-2 focus:ring-[#7D26C2]/20 transition-all shadow-sm" placeholder="Enter current password" required autofocus>
                    <button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-4 text-slate-400 hover:text-slate-600 transition-colors" data-target="current_password">
                        <svg class="w-5 h-5 eye-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </button>
                </div>
                @error('current_password')
                    <p class="text-rose-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- New Password -->
            <div class="space-y-2">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block px-1">New Password</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <input type="password" name="new_password" id="new_password" class="w-full bg-white border border-slate-200 rounded-2xl py-4 pl-12 pr-12 text-slate-900 font-medium focus:outline-none focus:border-[#7D26C2] focus:ring-2 focus:ring-[#7D26C2]/20 transition-all shadow-sm" placeholder="Enter new password" required>
                    <button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-4 text-slate-400 hover:text-slate-600 transition-colors" data-target="new_password">
                        <svg class="w-5 h-5 eye-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </button>
                </div>
                @error('new_password')
                    <p class="text-rose-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Confirm New Password -->
            <div class="space-y-2">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block px-1">Confirm New Password</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="w-full bg-white border border-slate-200 rounded-2xl py-4 pl-12 pr-12 text-slate-900 font-medium focus:outline-none focus:border-[#7D26C2] focus:ring-2 focus:ring-[#7D26C2]/20 transition-all shadow-sm" placeholder="Confirm new password" required>
                    <button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-4 text-slate-400 hover:text-slate-600 transition-colors" data-target="new_password_confirmation">
                        <svg class="w-5 h-5 eye-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Password Requirements -->
            <div class="bg-slate-50 rounded-xl p-4 border border-slate-100">
                <h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">Password Requirements:</h4>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-center gap-2 text-slate-600">
                        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span>At least 8 characters long</span>
                    </li>
                    <li class="flex items-center gap-2 text-slate-600">
                        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span>Include at least one uppercase letter</span>
                    </li>
                    <li class="flex items-center gap-2 text-slate-600">
                        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span>Include at least one number</span>
                    </li>
                    <li class="flex items-center gap-2 text-slate-600">
                        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <span>Include at least one special character</span>
                    </li>
                </ul>
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 h-14 rounded-full font-bold text-lg transition-all shadow-lg flex items-center justify-center bg-slate-900 text-white hover:bg-[#7D26C2] active:scale-[0.98]">
                    Update Password
                </button>
                <a href="{{ route('user.account') }}" class="px-6 h-14 rounded-full font-bold text-lg transition-all flex items-center justify-center bg-white text-slate-600 border border-slate-200 hover:bg-slate-50">
                    Cancel
                </a>
            </div>
        </form>
    </div>

    <!-- Security Tips -->
    <div class="bg-emerald-50 rounded-2xl p-5 border border-emerald-100 mb-8">
        <div class="flex gap-3">
            <div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
                <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div>
                <h4 class="font-bold text-emerald-800 text-sm mb-1">Security Tip</h4>
                <p class="text-sm text-emerald-700 leading-relaxed">
                    Never share your password with anyone. AlephoraX communication will never ask for your password via email or phone.
                </p>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="bg-white rounded-[1.5rem] border border-slate-100 shadow-sm overflow-hidden mb-8">
        <div class="p-4 border-b border-slate-100 bg-slate-50/50">
            <h4 class="font-bold text-slate-900">Recent Password Changes</h4>
        </div>
        <div class="divide-y divide-slate-50">
            <div class="p-4 flex items-center gap-3">
                <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center">
                    <svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-slate-800">Password last changed</p>
                    <p class="text-xs text-slate-500">{{ now()->subDays(15)->format('F j, Y') }}</p>
                </div>
                <span class="text-xs bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full">Secure</span>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for Password Toggle -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle password visibility
        document.querySelectorAll('.toggle-password').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.dataset.target;
                const input = document.getElementById(targetId);
                const icon = this.querySelector('.eye-icon');
                
                if (input.type === 'password') {
                    input.type = 'text';
                    icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7 1.274-4.057 5.064-7 9.542-7 1.286 0 2.51.237 3.64.665M15 12a3 3 0 11-6 0 3 3 0 016 0z M3 3l18 18"/>';
                } else {
                    input.type = 'password';
                    icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
                }
            });
        });

        // Password strength indicator (optional)
        const newPassword = document.getElementById('new_password');
        if (newPassword) {
            newPassword.addEventListener('input', function() {
                const password = this.value;
                const strength = checkPasswordStrength(password);
                updateStrengthIndicator(strength);
            });
        }
    });

    function checkPasswordStrength(password) {
        let score = 0;
        if (password.length >= 8) score++;
        if (password.match(/[A-Z]/)) score++;
        if (password.match(/[0-9]/)) score++;
        if (password.match(/[^A-Za-z0-9]/)) score++;
        return score;
    }

    function updateStrengthIndicator(score) {
        // You can implement this if you want a visual strength indicator
        console.log('Password strength:', score);
    }
</script>

<!-- Add animation style if not already in layout -->
<style>
    .animate-fade-in {
        animation: fadeIn 0.3s ease-out forwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endsection