@extends('layouts.main_dashboard.app')

@php
    $isArabic = app()->getLocale() === 'ar';
    $userName = trim(collect([$user->first_name, $user->middle_name, $user->last_name])->filter()->implode(' '));
    $userInitials = collect([$user->first_name, $user->last_name])
        ->filter()
        ->map(fn ($value) => mb_substr($value, 0, 1))
        ->implode('');
@endphp

@section('title', $isArabic ? 'البيانات الشخصية' : 'Personal Information')
@section('page_heading', $isArabic ? 'البيانات الشخصية' : 'Personal Information')
@section('skip_page_hero', true)

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ $homeRoute }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item">
        <span class="bullet bg-gray-500 w-5px h-2px"></span>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('profile.edit') }}" class="text-muted text-hover-primary">{{ $isArabic ? 'البيانات الشخصية' : 'Personal Information' }}</a>
    </li>
@endsection

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-fluid">
            <div class="space-y-6 pb-20">
                <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'البيانات الشخصية' : 'Personal Information' }}</h1>
                    <p class="mt-2 text-sm leading-7 text-zinc-500 dark:text-zinc-400">
                        {{ $isArabic ? 'حدّث بياناتك الأساسية ولغة الحساب من نفس الصفحة. لغة الحساب هي نفسها لغة اللوحة.' : 'Update your basic details and preferred account language from one page. Your account language is the same as your dashboard language.' }}
                    </p>
                </section>

                <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_18rem]">
                    <section class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                        <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6 p-6">
                            @csrf
                            @method('PUT')

                            <div class="flex flex-col gap-4 rounded-[1.5rem] border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-950 sm:flex-row sm:items-center">
                                <div class="shrink-0">
                                    @if ($user->avatar)
                                        <img src="{{ $user->avatar }}" alt="{{ $userName }}" class="h-20 w-20 rounded-[1.25rem] object-cover">
                                    @else
                                        <div class="flex h-20 w-20 items-center justify-center rounded-[1.25rem] bg-brand-600 text-xl font-black text-white">
                                            {{ $userInitials !== '' ? $userInitials : 'U' }}
                                        </div>
                                    @endif
                                </div>

                                <div class="flex-1">
                                    <div class="text-base font-black text-zinc-900 dark:text-white">{{ $userName ?: $user->email }}</div>
                                    <div class="mt-1 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $user->email }}</div>
                                </div>

                                <label class="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-zinc-950 px-4 py-3 text-sm font-black text-white transition hover:bg-zinc-800">
                                    <i class="fa-solid fa-image text-xs"></i>
                                    <span>{{ $isArabic ? 'تغيير الصورة' : 'Change Image' }}</span>
                                    <input type="file" name="avatar" accept=".png,.jpg,.jpeg,.gif,.webp" class="hidden">
                                </label>
                            </div>
                            @error('avatar')<div class="text-sm font-bold text-red-600">{{ $message }}</div>@enderror

                            <div class="grid gap-5 md:grid-cols-3">
                                <div>
                                    <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الاسم الأول' : 'First Name' }}</label>
                                    <input type="text" name="first_name" value="{{ old('first_name', $user->first_name) }}" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" required>
                                    @error('first_name')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                                </div>
                                <div>
                                    <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الاسم الأوسط' : 'Middle Name' }}</label>
                                    <input type="text" name="middle_name" value="{{ old('middle_name', $user->middle_name) }}" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100">
                                    @error('middle_name')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                                </div>
                                <div>
                                    <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'الاسم الأخير' : 'Last Name' }}</label>
                                    <input type="text" name="last_name" value="{{ old('last_name', $user->last_name) }}" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" required>
                                    @error('last_name')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div class="grid gap-5 md:grid-cols-2">
                                <div>
                                    <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'البريد الإلكتروني' : 'Email Address' }}</label>
                                    <input type="email" name="email" value="{{ old('email', $user->email) }}" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" required>
                                    @error('email')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                                </div>
                                <div>
                                    <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'اللغة المفضلة' : 'Preferred Language' }}</label>
                                    <select name="locale" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" required>
                                        <option value="ar" {{ old('locale', $user->locale) === 'ar' ? 'selected' : '' }}>العربية</option>
                                        <option value="en" {{ old('locale', $user->locale) === 'en' ? 'selected' : '' }}>English</option>
                                    </select>
                                    @error('locale')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">{{ $isArabic ? 'كلمة المرور الحالية' : 'Current Password' }}</label>
                                <input type="password" name="current_password" class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-3 text-sm font-bold outline-none transition focus:border-brand-400 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" placeholder="{{ $isArabic ? 'مطلوبة فقط عند تعديل البريد الإلكتروني' : 'Required only when changing the email address' }}">
                                @error('current_password')<div class="mt-2 text-sm font-bold text-red-600">{{ $message }}</div>@enderror
                            </div>

                            <div class="rounded-[1.5rem] border border-zinc-200 bg-zinc-50 px-5 py-4 text-sm leading-7 text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
                                {{ $isArabic ? 'عند تغيير اللغة المفضلة ستتغير لغة اللوحة مباشرة. وعند تغيير البريد الإلكتروني سيتم إرسال رسالة تحقق إلى العنوان الجديد.' : 'Changing the preferred language updates the dashboard immediately. Changing the email address sends a verification message to the new address.' }}
                            </div>

                            <div class="flex justify-end border-t border-zinc-100 pt-6 dark:border-zinc-800">
                                <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-zinc-950 px-5 py-3 text-sm font-black text-white transition hover:bg-zinc-800">
                                    <i class="fa-solid fa-floppy-disk text-xs"></i>
                                    <span>{{ $isArabic ? 'حفظ التعديلات' : 'Save Changes' }}</span>
                                </button>
                            </div>
                        </form>
                    </section>

                    <aside class="space-y-4">
                        <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-[10px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'حالة البريد' : 'Email Status' }}</div>
                            <div class="mt-3 text-sm font-black text-zinc-900 dark:text-white">
                                {{ $user->hasVerifiedEmail() ? ($isArabic ? 'موثق' : 'Verified') : ($isArabic ? 'بانتظار التحقق' : 'Pending') }}
                            </div>
                        </section>

                        <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-[10px] font-black uppercase tracking-[0.22em] text-zinc-400">{{ $isArabic ? 'لغة الحساب' : 'Account Language' }}</div>
                            <div class="mt-3 text-sm font-black text-zinc-900 dark:text-white">{{ $user->locale === 'en' ? 'English' : 'العربية' }}</div>
                        </section>

                        @unless ($user->hasVerifiedEmail())
                            <form method="POST" action="{{ route('verification.resend') }}">
                                @csrf
                                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-amber-500 px-4 py-3 text-sm font-black text-white transition hover:bg-amber-600">
                                    <i class="fa-solid fa-paper-plane text-xs"></i>
                                    <span>{{ $isArabic ? 'إعادة إرسال رابط التحقق' : 'Resend Verification Link' }}</span>
                                </button>
                            </form>
                        @endunless
                    </aside>
                </div>
            </div>
        </div>
    </div>
@endsection