@extends('layouts.user')

@section('title', __('user_profile.edit_password_title'))
@section('page_title', __('user_profile.edit_password_title'))
@section('breadcrumb', __('user_profile.edit_password_breadcrumb'))

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-4">

    {{-- Header --}}
    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <div class="inline-flex items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-700">
                <span>🔐</span>
                <span>{{ __('user_profile.account_security') }}</span>
            </div>
            <h1 class="mt-3 text-base font-bold tracking-tight text-slate-900">
                {{ __('user_profile.edit_password_title') }}
            </h1>
            <p class="mt-1 text-xs text-slate-500">
                {{ __('user_profile.edit_password_subtitle') }}
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            <a href="{{ route('user.profile.show') }}"
               class="inline-flex items-center justify-center border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
                {{ __('user_profile.back_to_profile') }}
            </a>

            <a href="{{ route('user.profile.edit') }}"
               class="inline-flex items-center justify-center border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
                {{ __('user_profile.edit_profile') }}
            </a>
        </div>
    </div>

    {{-- Success --}}
    @if(session('success'))
        <div class="border border-emerald-200 bg-emerald-50 px-4 py-3 text-xs text-emerald-800 shadow-sm">
            <div class="flex items-start gap-3">
                <span class="text-sm">✅</span>
                <div>
                    <div class="font-semibold">{{ __('user_profile.success') }}</div>
                    <div class="mt-1">{{ session('success') }}</div>
                </div>
            </div>
        </div>
    @endif

    {{-- Errors --}}
    @if($errors->any())
        <div class="border border-rose-200 bg-rose-50 px-4 py-3 text-xs text-rose-800 shadow-sm">
            <div class="flex items-start gap-3">
                <span class="text-sm">⚠️</span>
                <div>
                    <div class="font-semibold">{{ __('user_profile.fix_following_issues') }}</div>
                    <ul class="mt-2 list-disc pl-5 space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <div class="grid gap-4 lg:grid-cols-3">

        {{-- Left Info Panel --}}
        <div class="lg:col-span-1">
            <div class="overflow-hidden border border-slate-200 bg-slate-900 text-white shadow-sm">
                <div class="p-4">
                    <div class="flex h-11 w-11 items-center justify-center border border-white/10 bg-white/5 text-lg">
                        🔒
                    </div>

                    <h2 class="mt-4 text-sm font-bold">{{ __('user_profile.security_center') }}</h2>
                    <p class="mt-1.5 text-xs leading-5 text-slate-300">
                        {{ __('user_profile.security_center_text') }}
                    </p>

                    <div class="mt-4 space-y-2">
                        <div class="border border-white/10 bg-white/5 p-3">
                            <div class="text-xs font-semibold">{{ __('user_profile.current_password_required') }}</div>
                            <div class="mt-1 text-[11px] leading-5 text-slate-300">
                                {{ __('user_profile.current_password_required_text') }}
                            </div>
                        </div>

                        <div class="border border-white/10 bg-white/5 p-3">
                            <div class="text-xs font-semibold">{{ __('user_profile.use_strong_passwords') }}</div>
                            <div class="mt-1 text-[11px] leading-5 text-slate-300">
                                {{ __('user_profile.use_strong_passwords_text') }}
                            </div>
                        </div>

                        <div class="border border-white/10 bg-white/5 p-3">
                            <div class="text-xs font-semibold">{{ __('user_profile.keep_it_private') }}</div>
                            <div class="mt-1 text-[11px] leading-5 text-slate-300">
                                {{ __('user_profile.keep_it_private_text') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Form Card --}}
        <div class="lg:col-span-2">
            <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-200 bg-slate-50 px-4 py-4">
                    <h2 class="text-sm font-bold text-slate-900">{{ __('user_profile.change_password') }}</h2>
                    <p class="mt-1 text-xs text-slate-500">
                        {{ __('user_profile.change_password_text') }}
                    </p>
                </div>

                <div class="p-4">
                    {{-- Account Preview --}}
                    <div class="mb-4 flex items-center gap-3 border border-slate-200 bg-slate-50 p-3">
                        <div class="flex h-12 w-12 items-center justify-center overflow-hidden border border-slate-200 bg-white">
                            @if(!empty($user->photo))
                                <img src="{{ asset($user->photo) }}"
                                     alt="{{ $user->name }}"
                                     class="h-full w-full object-cover">
                            @else
                                <span class="text-sm font-bold text-slate-700">
                                    {{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($user->name ?? 'U', 0, 1)) }}
                                </span>
                            @endif
                        </div>

                        <div class="min-w-0">
                            <div class="text-sm font-bold text-slate-900 truncate">{{ $user->name ?? __('user_profile.user') }}</div>
                            <div class="text-xs text-slate-500 truncate">{{ $user->email ?? __('user_profile.no_email') }}</div>
                        </div>
                    </div>

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

                        <div>
                            <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                                {{ __('user_profile.current_password') }}
                            </label>
                            <input type="password"
                                   name="current_password"
                                   class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                                   placeholder="{{ __('user_profile.enter_current_password') }}">
                            @error('current_password')
                                <div class="mt-1.5 text-[11px] font-medium text-rose-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                                {{ __('user_profile.new_password') }}
                            </label>
                            <input type="password"
                                   name="password"
                                   class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                                   placeholder="{{ __('user_profile.enter_new_password') }}">
                            @error('password')
                                <div class="mt-1.5 text-[11px] font-medium text-rose-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <label class="mb-1.5 block text-xs font-semibold text-slate-700">
                                {{ __('user_profile.confirm_new_password') }}
                            </label>
                            <input type="password"
                                   name="password_confirmation"
                                   class="w-full border border-slate-300 bg-white px-3 py-2.5 text-xs text-slate-800 shadow-sm outline-none transition hover:border-slate-400 focus:border-slate-900 focus:ring-0"
                                   placeholder="{{ __('user_profile.reenter_new_password') }}">
                            @error('password_confirmation')
                                <div class="mt-1.5 text-[11px] font-medium text-rose-600">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Tips --}}
                        <div class="border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800">
                            <div class="font-semibold">{{ __('user_profile.password_tips') }}</div>
                            <div class="mt-1 leading-5">
                                {{ __('user_profile.password_tips_text') }}
                            </div>
                        </div>

                        <div class="flex flex-col gap-2 pt-1 sm:flex-row">
                            <button type="submit"
                                    class="inline-flex items-center justify-center bg-emerald-600 px-5 py-2.5 text-xs font-semibold text-white shadow-sm transition hover:bg-emerald-500">
                                {{ __('user_profile.update_password') }}
                            </button>

                            <a href="{{ route('user.profile.show') }}"
                               class="inline-flex items-center justify-center border border-slate-300 bg-white px-5 py-2.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50">
                                {{ __('user_profile.cancel') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection