@extends('layouts.app')
@section('title', 'تغيير كلمة السر')
@section('content')
<div class="max-w-lg mx-auto mt-6 mb-10">
    <div class="relative overflow-hidden rounded-[20px] bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-7 mb-6 shadow-xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-50"></div>
        <div class="relative text-center">
            <div class="w-14 h-14 rounded-full bg-white/15 border border-white/20 flex items-center justify-center mx-auto mb-3">
                <span class="text-2xl">🔒</span>
            </div>
            <span class="inline-block px-3 py-1 rounded-full bg-white/15 border border-white/20 text-[0.7rem] font-semibold tracking-wider mb-2">SECURITY</span>
            <h1 class="text-white text-[1.6rem] font-display font-extrabold">تغيير كلمة السر</h1>
            <p class="text-white/70 text-sm mt-1">أدخل كلمة السر الحالية والجديدة</p>
        </div>
    </div>

    @if (session('success'))
        <div class="mb-5 p-4 rounded-[14px] bg-success/10 border border-success/20 text-success text-sm font-semibold flex items-center gap-2">
            <span>✅</span> {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-5 p-4 rounded-[14px] bg-red-50 border border-red-200 text-red-700 text-sm">
            @foreach ($errors->all() as $error)
                <div class="flex items-center gap-2"><span>⚠️</span> {{ $error }}</div>
            @endforeach
        </div>
    @endif

    <div class="bg-white rounded-[20px] border border-gray-200 shadow-sm p-8">
        <form method="POST" action="{{ route('password.change') }}">
            @csrf
            <div class="mb-5">
                <label class="block text-xs font-semibold text-muted mb-1.5">كلمة السر الحالية</label>
                <div class="relative">
                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-muted text-sm">🔑</span>
                    <input type="password" name="current_password" required
                           class="w-full pr-9 pl-3 py-2.5 rounded-xl border border-gray-200 bg-surface text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                </div>
            </div>
            <div class="mb-5">
                <label class="block text-xs font-semibold text-muted mb-1.5">كلمة السر الجديدة</label>
                <div class="relative">
                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-muted text-sm">🛡️</span>
                    <input type="password" name="new_password" required
                           class="w-full pr-9 pl-3 py-2.5 rounded-xl border border-gray-200 bg-surface text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                </div>
            </div>
            <div class="mb-6">
                <label class="block text-xs font-semibold text-muted mb-1.5">تأكيد كلمة السر الجديدة</label>
                <div class="relative">
                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-muted text-sm">✓</span>
                    <input type="password" name="new_password_confirmation" required
                           class="w-full pr-9 pl-3 py-2.5 rounded-xl border border-gray-200 bg-surface text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                </div>
            </div>
            <button type="submit"
                    class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all shadow-sm shadow-accent-500/20 flex items-center justify-center gap-2 cursor-pointer">
                <span>💾</span> حفظ كلمة السر
            </button>
        </form>
    </div>
</div>
@endsection