@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'الملف الشخصي' : 'Profile')

@section('content')
@php($isArabic = app()->getLocale() === 'ar')
<div class="space-y-6 pb-20" x-data="{ primaryEmailModal: false, selectedEmailId: null, selectedEmail: '' }">
    <section class="student-card p-6 text-start">
        <h1 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الملف الشخصي' : 'Profile' }}</h1>
        <p class="mt-2 text-sm font-semibold leading-7 text-zinc-500 dark:text-zinc-400">
            {{ $isArabic ? 'حدّث البريد الإلكتروني واللغة المفضلة من نفس الصفحة. لغة الحساب هي نفسها لغة لوحة الطالب.' : 'Update your email and preferred language from the same page. Your account language is the same as your student dashboard language.' }}
        </p>
    </section>

    <section class="student-card p-8">
        <div class="mb-8 text-start">
            <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'معلومات الحساب' : 'Account Information' }}</h2>
            <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'هذه البيانات تؤثر على التواصل واللغة وتجربة الاستخدام داخل النظام.' : 'These fields affect communication, language, and your experience inside the system.' }}</p>
        </div>

        <form action="{{ route('student.profile.update') }}" method="POST" class="space-y-6 text-start">
            @csrf
            <div class="rounded-[1.75rem] border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-950">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
                    <img src="{{ $student->avatar ?: asset('assets/media/svg/files/blank-image.svg') }}" alt="{{ $student->name }}" class="h-20 w-20 rounded-[1.25rem] object-cover">
                    <div class="flex-1">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">{{ $student->name }}</div>
                        <div class="mt-1 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $student->email }}</div>
                    </div>
                    <div class="inline-flex rounded-full bg-primary/10 px-3 py-1 text-[10px] font-black text-primary dark:text-primary-container uppercase tracking-widest">
                        {{ $student->schoolClass->first()?->name ?: ($isArabic ? 'طالب' : 'Student') }}
                    </div>
                </div>
            </div>

            <div class="grid gap-6 md:grid-cols-2">
                <div class="space-y-2">
                    <label class="px-1 text-xs font-black uppercase tracking-widest text-zinc-500 dark:text-zinc-400">{{ __('dashboard.Full Name') }}</label>
                    <div class="relative group">
                        <i class="fa-solid fa-user absolute start-4 top-1/2 -translate-y-1/2 text-zinc-300"></i>
                        <input type="text" value="{{ $student->name }}" class="w-full rounded-2xl border border-zinc-200 bg-zinc-50 ps-11 pe-4 py-4 font-bold text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400 cursor-not-allowed" readonly title="{{ $isArabic ? 'الاسم لا يمكن تعديله' : 'Name cannot be changed' }}">
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="px-1 text-xs font-black uppercase tracking-widest text-zinc-500 dark:text-zinc-400">{{ __('dashboard.Email') }}</label>
                    <div class="relative group">
                        <i class="fa-solid fa-envelope absolute start-4 top-1/2 -translate-y-1/2 text-zinc-300 group-focus-within:text-primary transition-colors"></i>
                        <input type="email" name="email" value="{{ old('email', $student->email ?? '') }}" class="w-full rounded-2xl border border-zinc-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-zinc-900 outline-none focus:border-primary focus:ring-4 focus:ring-primary/5 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white transition-all @error('email') border-red-300 @enderror" required>
                    </div>
                    <div class="px-1">
                        @if ($student->hasVerifiedEmail())
                            <span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-[10px] font-black uppercase tracking-widest text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
                                <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
                                {{ $isArabic ? 'تم التحقق من البريد' : 'Email verified' }}
                            </span>
                        @else
                            <span class="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-[10px] font-black uppercase tracking-widest text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">
                                <span class="h-2 w-2 rounded-full bg-amber-500"></span>
                                {{ $isArabic ? 'البريد بانتظار التحقق' : 'Email pending verification' }}
                            </span>
                        @endif
                    </div>
                    @error('email')<div class="px-1 mt-2 text-xs font-bold text-red-600">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="grid gap-6 md:grid-cols-1">
                <div class="space-y-2">
                    <label class="px-1 text-xs font-black uppercase tracking-widest text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'اللغة المفضلة' : 'Preferred Language' }}</label>
                    <div class="relative group">
                        <i class="fa-solid fa-language absolute start-4 top-1/2 -translate-y-1/2 text-zinc-300 group-focus-within:text-primary transition-colors"></i>
                        <select name="locale" class="w-full rounded-2xl border border-zinc-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-zinc-900 outline-none focus:border-primary focus:ring-4 focus:ring-primary/5 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white appearance-none transition-all @error('locale') border-red-300 @enderror">
                            <option value="ar" {{ old('locale', $student->locale) === 'ar' ? 'selected' : '' }}>العربية</option>
                            <option value="en" {{ old('locale', $student->locale) === 'en' ? 'selected' : '' }}>English</option>
                        </select>
                        <i class="fa-solid fa-chevron-down absolute end-4 top-1/2 -translate-y-1/2 text-zinc-300 pointer-events-none text-[10px]"></i>
                    </div>
                    @error('locale')<div class="px-1 mt-2 text-xs font-bold text-red-600">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-4 text-[13px] font-semibold leading-7 text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400">
                {{ $isArabic ? 'عند تغيير اللغة المفضلة ستتغير لغة لوحة الطالب مباشرة، وستظل محفوظة مع الحساب في كل مرة تسجل فيها الدخول.' : 'When you change the preferred language, the student dashboard language updates immediately and stays saved with your account for future sign-ins.' }}
            </div>

            <button type="submit" class="inline-flex items-center gap-3 rounded-2xl bg-primary px-10 py-4 font-black text-white hover:scale-105 active:scale-95 transition-all shadow-xl shadow-primary/20">
                <i class="fa-solid fa-floppy-disk"></i>
                <span>{{ __('dashboard.Save Changes') }}</span>
            </button>
        </form>
    </section>

    <section class="grid gap-8 xl:grid-cols-[minmax(0,1.1fr)_minmax(24rem,0.9fr)] text-start">
        <div class="student-card p-8">
            <div class="mb-8">
                <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'البريدات الإضافية' : 'Additional Emails' }}</h2>
                <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أضف أكثر من بريد إلكتروني للحساب، ثم فعّل أو عطّل استقبال الإشعارات لكل بريد بعد التحقق منه.' : 'Add multiple email addresses to your account, then enable or disable notifications for each verified email.' }}</p>
            </div>

            @error('additional_email_notifications')
                <div class="mb-6 rounded-2xl border border-red-200 bg-red-50 px-6 py-4 text-sm font-bold text-red-700">{{ $message }}</div>
            @enderror
            @error('set_primary_email')
                <div class="mb-6 rounded-2xl border border-red-200 bg-red-50 px-6 py-4 text-sm font-bold text-red-700">{{ $message }}</div>
            @enderror

            <div class="space-y-6">
                <!-- Current Primary -->
                <div class="relative overflow-hidden rounded-[2rem] border border-emerald-100 bg-emerald-50/30 p-6 dark:border-emerald-500/20 dark:bg-emerald-500/5">
                    <div class="absolute end-0 top-0 p-4 opacity-5">
                        <i class="fa-solid fa-envelope-circle-check text-6xl"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 px-3 py-1 text-[10px] font-black text-emerald-700 uppercase tracking-widest">
                                <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
                                {{ $isArabic ? 'البريد الأساسي' : 'Primary Email' }}
                            </span>
                        </div>
                        <div class="text-lg font-black text-zinc-900 dark:text-white">{{ $student->email }}</div>
                        <p class="text-xs font-bold text-zinc-400 mt-1 uppercase tracking-wider">{{ $isArabic ? 'بريد الحساب الرئيسي - يستلم كافة التنبيهات' : 'Main account email - receives all notifications' }}</p>
                    </div>
                </div>

                <!-- Additional Ones -->
                @foreach($student->additionalEmails as $additionalEmail)
                    <div class="group rounded-[2rem] border border-zinc-100 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-950/40 transition-all hover:border-primary/20">
                        <div class="flex flex-wrap items-start justify-between gap-4 mb-6">
                            <div class="text-start">
                                <div class="text-lg font-black text-zinc-900 dark:text-white">{{ $additionalEmail->email }}</div>
                                <div class="mt-3 flex flex-wrap gap-2">
                                    <span class="rounded-lg px-2.5 py-1 text-[9px] font-black uppercase tracking-wider {{ $additionalEmail->isVerified() ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                        {{ $additionalEmail->isVerified() ? ($isArabic ? 'متحقق' : 'Verified') : ($isArabic ? 'بانتظار التحقق' : 'Pending verification') }}
                                    </span>
                                    <span class="rounded-lg px-2.5 py-1 text-[9px] font-black uppercase tracking-wider {{ $additionalEmail->receives_notifications ? 'bg-blue-100 text-blue-700' : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300' }}">
                                        {{ $additionalEmail->receives_notifications ? ($isArabic ? 'التنبيهات مفعلة' : 'Alerts enabled') : ($isArabic ? 'التنبيهات متوقفة' : 'Alerts disabled') }}
                                    </span>
                                </div>
                            </div>

                            <div class="flex items-center gap-2">
                                @if ($additionalEmail->isVerified())
                                    <button @click="primaryEmailModal = true; selectedEmailId = '{{ $additionalEmail->id }}'; selectedEmail = '{{ $additionalEmail->email }}'" 
                                            class="h-10 px-4 rounded-xl border border-zinc-200 bg-white text-xs font-black text-zinc-700 hover:border-primary hover:text-primary transition-all dark:bg-zinc-900 dark:border-zinc-800 dark:text-zinc-300">
                                        {{ $isArabic ? 'تعيين كأساسي' : 'Set as Primary' }}
                                    </button>
                                @else
                                    <form method="POST" action="{{ route('student.profile.additional-emails.resend', $additionalEmail) }}">
                                        @csrf
                                        <button type="submit" class="h-10 px-4 rounded-xl border border-zinc-200 bg-white text-xs font-black text-zinc-700 hover:border-amber-500 hover:text-amber-600 transition-all dark:bg-zinc-900 dark:border-zinc-800 dark:text-zinc-300">
                                            {{ $isArabic ? 'إعادة التحقق' : 'Resend' }}
                                        </button>
                                    </form>
                                @endif

                                <form method="POST" action="{{ route('student.profile.additional-emails.delete', $additionalEmail) }}" onsubmit="return confirm('{{ $isArabic ? 'هل تريد حذف هذا البريد؟' : 'Do you want to remove this email?' }}');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="h-10 w-10 flex items-center justify-center rounded-xl border border-rose-100 text-rose-500 hover:bg-rose-50 transition-all dark:border-rose-900/30 dark:hover:bg-rose-900/10">
                                        <i class="fa-solid fa-trash-can text-sm"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center justify-between gap-4 p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-900/50">
                            <div>
                                <div class="text-sm font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'استقبال التنبيهات' : 'Receive Alerts' }}</div>
                                <p class="text-[10px] font-bold text-zinc-400 mt-0.5">{{ $isArabic ? 'إرسال نسخ من الإعلانات والمهام لهذا البريد' : 'Forward copies of announcements and tasks' }}</p>
                            </div>

                            @if ($additionalEmail->isVerified())
                                <form method="POST" action="{{ route('student.profile.additional-emails.notifications', $additionalEmail) }}">
                                    @csrf
                                    <input type="hidden" name="receives_notifications" value="{{ $additionalEmail->receives_notifications ? 0 : 1 }}">
                                    <button type="submit" class="rounded-xl px-5 py-2.5 text-xs font-black text-white shadow-lg transition-all {{ $additionalEmail->receives_notifications ? 'bg-zinc-800 hover:bg-zinc-700 shadow-zinc-900/10' : 'bg-primary hover:bg-primary-dark shadow-primary/20' }}">
                                        {{ $additionalEmail->receives_notifications ? ($isArabic ? 'تعطيل' : 'Disable') : ($isArabic ? 'تفعيل' : 'Enable') }}
                                    </button>
                                </form>
                            @else
                                <div class="px-4 py-2.5 rounded-xl bg-zinc-200 text-[10px] font-black text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 uppercase tracking-widest cursor-not-allowed">
                                    {{ $isArabic ? 'بانتظار التأكيد' : 'Waiting' }}
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
@if(count($student->additionalEmails) === 0)
                    <div class="p-16 text-center border-2 border-dashed border-zinc-100 rounded-[2.5rem] dark:border-zinc-800">
                        <div class="w-16 h-16 rounded-3xl bg-zinc-50 dark:bg-zinc-900 flex items-center justify-center mx-auto mb-4 text-zinc-300">
                            <i class="fa-solid fa-envelope-open text-2xl"></i>
                        </div>
                        <h4 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'لا توجد بريدات إضافية' : 'No additional emails' }}</h4>
                        <p class="text-xs font-bold text-zinc-400 mt-2">{{ $isArabic ? 'أضف بريداً جديداً لاستخدامه كنسخة احتياطية أو لتلقي الإشعارات.' : 'Add a new email to use as backup or for notifications.' }}</p>
                    </div>
                @endif
            </div>
        </div>

        <div class="student-card p-8">
            <div class="mb-8">
                <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'إضافة بريد جديد' : 'Add New Email' }}</h2>
                <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'لأمان الحساب، إضافة أي بريد جديد تتطلب كلمة المرور الحالية.' : 'For account security, adding a new email requires your current password.' }}</p>
            </div>

            <form action="{{ route('student.profile.additional-emails.store') }}" method="POST" class="space-y-6">
                @csrf
                <div class="space-y-2 text-start">
                    <label class="px-1 text-xs font-black uppercase tracking-widest text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'البريد الإلكتروني الجديد' : 'New Email Address' }}</label>
                    <div class="relative group">
                        <i class="fa-solid fa-at absolute start-4 top-1/2 -translate-y-1/2 text-zinc-300 group-focus-within:text-primary transition-colors"></i>
                        <input type="email" name="additional_email" value="{{ old('additional_email') }}" class="w-full rounded-2xl border border-zinc-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-zinc-900 outline-none focus:border-primary focus:ring-4 focus:ring-primary/5 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white transition-all @error('additional_email') border-red-300 @enderror" placeholder="email@example.com" required>
                    </div>
                    @error('additional_email')<div class="px-1 mt-2 text-xs font-bold text-red-600">{{ $message }}</div>@enderror
                </div>

                <div class="space-y-2 text-start">
                    <label class="px-1 text-xs font-black uppercase tracking-widest text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'كلمة المرور الحالية' : 'Current Password' }}</label>
                    <div class="relative group">
                        <i class="fa-solid fa-lock absolute start-4 top-1/2 -translate-y-1/2 text-zinc-300 group-focus-within:text-primary transition-colors"></i>
                        <input type="password" name="current_password" class="w-full rounded-2xl border border-zinc-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-zinc-900 outline-none focus:border-primary focus:ring-4 focus:ring-primary/5 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white transition-all @error('current_password') border-red-300 @enderror" placeholder="••••••••" required>
                    </div>
                    @error('current_password')<div class="px-1 mt-2 text-xs font-bold text-red-600">{{ $message }}</div>@enderror
                </div>

                <div class="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950/50 text-[11px] font-bold leading-relaxed text-zinc-500 dark:text-zinc-400 border border-zinc-100 dark:border-zinc-800">
                    <i class="fa-solid fa-circle-info text-primary me-1"></i>
                    {{ $isArabic ? 'سيتم إرسال رابط تحقق إلى البريد الجديد، يجب تأكيده أولاً.' : 'A verification link will be sent to the new email, it must be confirmed first.' }}
                </div>

                <button type="submit" class="w-full inline-flex items-center justify-center gap-3 rounded-2xl bg-zinc-900 dark:bg-white px-10 py-4 font-black text-white dark:text-zinc-900 hover:scale-[1.02] active:scale-[0.98] transition-all shadow-xl shadow-zinc-900/20">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                    <span>{{ $isArabic ? 'إضافة البريد وإرسال التحقق' : 'Add and Verify' }}</span>
                </button>
            </form>
        </div>
    </section>

    <!-- Set Primary Confirmation Modal -->
    <div x-show="primaryEmailModal" 
         x-cloak 
         class="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
        
        <div class="absolute inset-0 bg-zinc-950/60 backdrop-blur-sm" @click="primaryEmailModal = false"></div>
        
        <div class="relative w-full max-w-lg rounded-[2.5rem] bg-white p-8 shadow-2xl dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800"
             x-transition:enter="transition ease-out duration-300 delay-100"
             x-transition:enter-start="opacity-0 scale-95 translate-y-4"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0">
            
            <div class="text-center">
                <div class="h-16 w-16 rounded-3xl bg-primary/10 text-primary flex items-center justify-center text-3xl mx-auto mb-6">
                    <i class="fa-solid fa-shield-keyhole"></i>
                </div>
                <h3 class="text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'تأكيد تغيير البريد الأساسي' : 'Confirm Primary Email Change' }}</h3>
                <p class="mt-3 text-sm font-semibold text-zinc-500 leading-relaxed">
                    {{ $isArabic ? 'أنت على وشك جعل' : 'You are about to set' }} <span class="text-primary font-black" x-text="selectedEmail"></span> {{ $isArabic ? 'هو البريد الأساسي لحسابك. يرجى تأكيد العملية بكلمة المرور.' : 'as your primary account email. Please confirm with your password.' }}
                </p>
            </div>

            <form :action="`/student/profile/additional-emails/${selectedEmailId}/set-primary`" method="POST" class="mt-8 space-y-6">
                @csrf
                <div class="space-y-2 text-start">
                    <label class="px-1 text-xs font-black uppercase tracking-widest text-zinc-500">{{ $isArabic ? 'كلمة المرور' : 'Password' }}</label>
                    <div class="relative group">
                        <i class="fa-solid fa-lock absolute start-4 top-1/2 -translate-y-1/2 text-zinc-300 group-focus-within:text-primary transition-colors"></i>
                        <input type="password" name="current_password" class="w-full rounded-2xl border border-zinc-200 bg-white ps-11 pe-4 py-4 text-sm font-bold text-zinc-900 outline-none focus:border-primary focus:ring-4 focus:ring-primary/5 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white transition-all" placeholder="••••••••" required>
                    </div>
                </div>

                <div class="flex gap-3">
                    <button type="button" @click="primaryEmailModal = false" class="flex-1 px-6 py-4 rounded-2xl text-sm font-black text-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors">
                        {{ $isArabic ? 'إلغاء' : 'Cancel' }}
                    </button>
                    <button type="submit" class="flex-[2] rounded-2xl bg-zinc-900 dark:bg-white px-6 py-4 font-black text-white dark:text-zinc-900 shadow-xl shadow-zinc-900/20 hover:scale-[1.02] active:scale-[0.98] transition-all">
                        {{ $isArabic ? 'تأكيد التغيير' : 'Confirm Change' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection