@extends('layouts.user')

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

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

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

        <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.profile_overview') }}</h2>
                    <p class="mt-1.5 text-xs leading-5 text-slate-300">
                        {{ __('user_profile.profile_overview_text') }}
                    </p>

                    <div class="mt-4 flex flex-col items-center border border-white/10 bg-white/5 p-4 text-center">
                        <div class="h-20 w-20 overflow-hidden border border-white/10 bg-white/10">
                            @if(!empty($user->photo))
                                <img src="{{ asset($user->photo) }}"
                                     alt="{{ $user->name }}"
                                     class="h-full w-full object-cover">
                            @else
                                <div class="flex h-full w-full items-center justify-center text-2xl font-bold text-white">
                                    {{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($user->name ?? 'U', 0, 1)) }}
                                </div>
                            @endif
                        </div>

                        <div class="mt-3 text-base font-bold">{{ $user->name }}</div>
                        <div class="mt-1 text-xs text-slate-300 break-all">{{ $user->email ?? __('user_profile.no_email') }}</div>

                        <div class="mt-3 flex flex-wrap items-center justify-center gap-2 text-xs">
                            <span class="text-slate-300">{{ __('user_profile.uid_label') }}</span>
                            <span class="inline-flex items-center border border-white/10 bg-white/10 px-2.5 py-1 font-semibold text-white">
                                {{ $user->uid ?? __('user_profile.na') }}
                            </span>
                            <button type="button"
                                    onclick="copyUid('{{ $user->uid ?? '' }}')"
                                    class="inline-flex items-center gap-2 border border-white/10 bg-white/10 px-2.5 py-1.5 text-xs text-white transition hover:bg-white/20">
                                <span>📋</span>
                                <span>{{ __('user_profile.copy') }}</span>
                            </button>
                        </div>
                    </div>

                    <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.username_locked') }}</div>
                            <div class="mt-1 text-[11px] leading-5 text-slate-300">
                                {{ __('user_profile.username_locked_text') }}
                            </div>
                        </div>

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

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

        <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">
                    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                        <div>
                            <h1 class="text-base font-bold tracking-tight text-slate-900">{{ __('user_profile.title') }}</h1>
                            <p class="mt-1 text-xs text-slate-500">
                                {{ __('user_profile.manage_settings_text') }}
                            </p>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('user.profile.edit') }}"
                               class="inline-flex items-center justify-center bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-800">
                                {{ __('user_profile.edit_profile') }}
                            </a>

                            <a href="{{ route('user.profile.password.edit') }}"
                               class="inline-flex items-center justify-center bg-emerald-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-emerald-500">
                                {{ __('user_profile.edit_password') }}
                            </a>
                        </div>
                    </div>
                </div>

                <div class="p-4">
                    <div class="grid gap-3 md:grid-cols-2">

                        <div class="border border-slate-200 bg-slate-50 p-4">
                            <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('user_profile.username') }}</div>
                            <div class="mt-1.5 text-base font-bold text-slate-900 break-all">
                                {{ $user->username ?? __('user_profile.na') }}
                            </div>
                        </div>

                        <div class="border border-slate-200 bg-slate-50 p-4">
                            <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('user_profile.phone_number') }}</div>
                            <div class="mt-1.5 text-base font-bold text-slate-900 break-all">
                                {{ $user->phone ?? __('user_profile.na') }}
                            </div>
                        </div>

                        <div class="border border-slate-200 bg-slate-50 p-4">
                            <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('user_profile.email_address') }}</div>
                            <div class="mt-1.5 text-sm font-bold text-slate-900 break-all">
                                {{ $user->email ?? __('user_profile.na') }}
                            </div>
                        </div>

                        <div class="border border-slate-200 bg-slate-50 p-4">
                            <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('user_profile.account_status') }}</div>
                            <div class="mt-1.5 text-base font-bold text-emerald-600">
                                {{ ($user->status ?? 'active') === 'active' ? __('user_profile.active') : ucfirst($user->status) }}
                            </div>
                        </div>

                        <div class="border border-slate-200 bg-slate-50 p-4">
                            <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('user_profile.user_id') }}</div>
                            <div class="mt-1.5 text-base font-bold text-slate-900">
                                {{ $user->uid ?? __('user_profile.na') }}
                            </div>
                        </div>

                        <div class="border border-slate-200 bg-slate-50 p-4">
                            <div class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">{{ __('user_profile.profile_photo') }}</div>
                            <div class="mt-2.5 flex items-center gap-3">
                                <div class="h-12 w-12 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
                                        <div class="flex h-full w-full items-center justify-center text-xs font-bold text-slate-600">
                                            {{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($user->name ?? 'U', 0, 1)) }}
                                        </div>
                                    @endif
                                </div>

                                <div class="text-xs text-slate-500">
                                    {{ __('user_profile.current_account_avatar') }}
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="mt-4 border border-blue-100 bg-blue-50 p-4">
                        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                            <div>
                                <div class="text-sm font-bold text-slate-900">{{ __('user_profile.need_update') }}</div>
                                <div class="mt-1 text-xs text-slate-600">
                                    {{ __('user_profile.update_info_or_password_text') }}
                                </div>
                            </div>

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

                                <a href="{{ route('user.profile.password.edit') }}"
                                   class="inline-flex items-center justify-center bg-emerald-600 px-3 py-2 text-xs font-semibold text-white hover:bg-emerald-500">
                                    {{ __('user_profile.change_password') }}
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

<script>
    function copyUid(uid) {
        if (!uid) return;

        navigator.clipboard.writeText(uid).then(() => {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    timer: 1800,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    icon: 'success',
                    title: '{{ __('user_profile.uid_copied') }}'
                });
            }
        });
    }
</script>
@endsection