@extends(template().'layout.master2')


@section('content2')


<div x-data="{ loading: false, showOld: false, showNew: false }" class="min-h-screen bg-slate-50 dark:bg-[#08090d] flex flex-col items-center justify-center px-4 py-12 transition-colors duration-300">
    
    <div class="w-full max-w-2xl flex items-center justify-between mb-8">
        <div>
            <h5 class="text-3xl font-black text-slate-900 dark:text-white tracking-tight italic uppercase">{{ __('Security') }}</h5>
            <p class="text-slate-500 dark:text-gray-400 text-xs font-bold uppercase tracking-widest">{{ __('Manage your terminal access') }}</p>
        </div>
        <a href="{{ route('user.dashboard') }}" class="group flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 text-slate-600 dark:text-gray-300 rounded-xl text-xs font-black uppercase tracking-tighter border border-slate-200 dark:border-slate-700 shadow-sm transition-all hover:bg-slate-50 dark:hover:bg-slate-700">
            <i data-lucide="arrow-left" class="w-4 h-4 transition-transform group-hover:-translate-x-1"></i>
            {{ __('Back') }}
        </a>
    </div>

    <div class="w-full max-w-2xl bg-white dark:bg-[#0e0f13] border border-slate-200 dark:border-gray-800 rounded-[2.5rem] shadow-2xl shadow-slate-200 dark:shadow-none p-8 md:p-10 relative overflow-hidden">
        
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 blur-3xl rounded-full"></div>

        <div class="relative z-10">
            <div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-100 dark:border-gray-800/50">
                <div class="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center">
                    <i data-lucide="key-round" class="w-6 h-6 text-blue-600 dark:text-blue-500"></i>
                </div>
                <h5 class="text-xl font-black text-slate-800 dark:text-white italic uppercase">{{ __('Update Credentials') }}</h5>
            </div>

            <form action="{{ route('user.update.password') }}" method="POST" class="space-y-6" @submit="loading = true">
                @csrf

                <div class="relative">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-2 ml-1">{{ __('Current Password') }}</label>
                    <div class="group relative">
                        <input 
                            :type="showOld ? 'text' : 'password'" 
                            name="oldpassword"
                            placeholder="{{ __('••••••••') }}"
                            required
                            class="w-full pl-5 pr-12 py-4 rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-gray-800 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
                        >
                        <button type="button" @click="showOld = !showOld" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-blue-500 transition-colors">
                            <i :data-lucide="showOld ? 'eye-off' : 'eye'" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="relative">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-2 ml-1">{{ __('New Password') }}</label>
                        <div class="group relative">
                            <input 
                                :type="showNew ? 'text' : 'password'" 
                                name="password"
                                placeholder="{{ __('••••••••') }}"
                                required
                                class="w-full pl-5 pr-12 py-4 rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-gray-800 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
                            >
                            <button type="button" @click="showNew = !showNew" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-blue-500 transition-colors">
                                <i :data-lucide="showNew ? 'eye-off' : 'eye'" class="w-5 h-5"></i>
                            </button>
                        </div>
                    </div>

                    <div class="relative">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-gray-500 mb-2 ml-1">{{ __('Confirm New') }}</label>
                        <input 
                            type="password" 
                            name="password_confirmation"
                            placeholder="{{ __('••••••••') }}"
                            required
                            class="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-200 dark:border-gray-800 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
                        >
                    </div>
                </div>

                <div class="pt-4">
                    <button 
                        type="submit" 
                        class="w-full py-4 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-black uppercase italic tracking-wider shadow-lg shadow-blue-500/30 transition-all flex items-center justify-center disabled:opacity-70 group"
                        :disabled="loading"
                    >
                        <template x-if="!loading">
                            <span class="flex items-center gap-2">
                                {{ __('Secure Update') }}
                                <i data-lucide="shield-check" class="w-4 h-4 transition-transform group-hover:scale-110"></i>
                            </span>
                        </template>
                        <template x-if="loading">
                            <span class="flex items-center gap-2">
                                <svg class="animate-spin h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                {{ __('Encrypting...') }}
                            </span>
                        </template>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="mt-8 flex items-center gap-3 px-6 py-3 bg-blue-500/5 border border-blue-500/10 rounded-2xl max-w-2xl">
        <i data-lucide="info" class="w-4 h-4 text-blue-500"></i>
        <p class="text-[10px] font-bold text-slate-500 dark:text-gray-500 uppercase tracking-widest leading-tight">
            {{ __('For maximum security, use a combination of symbols, numbers, and uppercase letters.') }}
        </p>
    </div>
</div>

@endsection
