@extends('layouts.app')

@section('content')
<div class="flex justify-center items-center min-h-screen bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 py-8">
    <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-10 border border-gray-100 dark:border-gray-700">
        <div class="flex flex-col items-center mb-8">
            <div class="w-16 h-16 rounded-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center mb-3">
                <svg class="w-8 h-8 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            </div>
            <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 tracking-tight">{{ __('general.profile_information') }}</h2>
            <p class="text-gray-500 dark:text-gray-400 text-center mt-2">{{ __('general.manage_your_account_settings') ?? 'Manage your account settings and preferences' }}</p>
        </div>

        @if(session('status') === 'profile-updated')
            <div class="mb-6 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-md" role="alert">
                <p class="font-medium">{{ __('general.profile_updated_successfully') ?? 'Profile updated successfully!' }}</p>
            </div>
        @endif

        @if(session('status') === 'password-updated')
            <div class="mb-6 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-md" role="alert">
                <p class="font-medium">{{ __('general.password_updated_successfully') ?? 'Password updated successfully!' }}</p>
            </div>
        @endif

        <div class="mb-10">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-6 border-b border-gray-200 dark:border-gray-700 pb-2">{{ __('general.personal_information') ?? 'Personal Information' }}</h3>
            <form method="POST" action="{{ route('profile.update', ['lang' => app()->getLocale()]) }}" class="space-y-5" id="profileForm">
                @csrf
                @method('PATCH')
                
                <div class="mb-2">
                    <label for="username" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.username') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-user"></i></span>
                        <input id="username" type="text" name="username" value="{{ old('username', $user->username) }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('username')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="first_name" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.first_name') }} *</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-user-tag"></i></span>
                            <input id="first_name" type="text" name="first_name" value="{{ old('first_name', $user->first_name) }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        @error('first_name')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label for="last_name" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.last_name') }} *</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-user-tag"></i></span>
                            <input id="last_name" type="text" name="last_name" value="{{ old('last_name', $user->last_name) }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        @error('last_name')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="mb-2">
                    <label for="email" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.email') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-envelope"></i></span>
                        <input id="email" type="email" name="email" value="{{ old('email', $user->email) }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('email')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>

                <div class="mb-2">
                    <label for="phone" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.mobile_number') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-phone"></i></span>
                        <input id="phone" type="text" name="phone" value="{{ old('phone', $user->phone) }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('phone')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="gender" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.gender') }} *</label>
                        <select id="gender" name="gender" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                            <option value="">{{ __('general.select_gender') }}</option>
                            <option value="male" {{ old('gender', $user->gender) == 'male' ? 'selected' : '' }}>{{ __('general.male') }}</option>
                            <option value="female" {{ old('gender', $user->gender) == 'female' ? 'selected' : '' }}>{{ __('general.female') }}</option>
                            <option value="other" {{ old('gender', $user->gender) == 'other' ? 'selected' : '' }}>{{ __('general.other') }}</option>
                        </select>
                        @error('gender')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label for="dob" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.date_of_birth') }} *</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-calendar-alt"></i></span>
                            <input id="dob" type="date" name="dob" value="{{ old('dob', $user->dob) }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        @error('dob')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="language" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.language') }}</label>
                        <select id="language" name="language" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                            <option value="">{{ __('general.select_language') }}</option>
                            <option value="az" {{ old('language', $user->language) == 'az' ? 'selected' : '' }}>Azərbaycan dili</option>
                            <option value="en" {{ old('language', $user->language) == 'en' ? 'selected' : '' }}>English</option>
                            <option value="ru" {{ old('language', $user->language) == 'ru' ? 'selected' : '' }}>Русский</option>
                        </select>
                        @error('language')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                    </div>
                    <div>
                        <label for="country" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.country') }} *</label>
                        <select id="country" name="country" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                            <option value="">{{ __('general.select_country') }}</option>
                            <option value="Azerbaijan" {{ old('country', $user->country) == 'Azerbaijan' ? 'selected' : '' }}>Azerbaijan</option>
                            <option value="Turkey" {{ old('country', $user->country) == 'Turkey' ? 'selected' : '' }}>Turkey</option>
                            <option value="Russia" {{ old('country', $user->country) == 'Russia' ? 'selected' : '' }}>Russia</option>
                            <option value="Other" {{ old('country', $user->country) == 'Other' ? 'selected' : '' }}>{{ __('general.other') }}</option>
                        </select>
                        @error('country')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="mb-2">
                    <label for="city" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.city') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-city"></i></span>
                        <input id="city" type="text" name="city" value="{{ old('city', $user->city) }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('city')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>

                <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105">{{ __('general.update_profile') ?? 'Update Profile' }}</button>
            </form>
        </div>

        <div class="mb-10">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-6 border-b border-gray-200 dark:border-gray-700 pb-2">{{ __('general.change_password') ?? 'Change Password' }}</h3>
            <form method="POST" action="{{ route('profile.password', ['lang' => app()->getLocale()]) }}" class="space-y-5">
            @csrf
            @method('PATCH')
                
                <div class="mb-2">
                    <label for="current_password" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.current_password') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-lock"></i></span>
                        <input id="current_password" type="password" name="current_password" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('current_password')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                        <label for="new_password" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.new_password') }} *</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-lock"></i></span>
                            <input id="new_password" type="password" name="password" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        @error('password')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
            </div>
            <div>
                        <label for="password_confirmation" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.confirm_new_password') }} *</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-lock"></i></span>
                            <input id="password_confirmation" type="password" name="password_confirmation" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>
            </div>

                <button type="submit" class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105">{{ __('general.change_password') ?? 'Change Password' }}</button>
        </form>
        </div>

        <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
            <h3 class="text-xl font-bold text-red-600 dark:text-red-400 mb-6">{{ __('general.danger_zone') ?? 'Danger Zone' }}</h3>
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
                <h4 class="text-lg font-semibold text-red-800 dark:text-red-200 mb-2">{{ __('general.delete_account') }}</h4>
                <p class="text-red-700 dark:text-red-300 mb-4">{{ __('general.delete_account_warning') ?? 'Once you delete your account, there is no going back. Please be certain.' }}</p>
                <form method="POST" action="{{ route('profile.destroy', ['lang' => app()->getLocale()]) }}" class="space-y-4" onsubmit="return confirm('{{ __('general.are_you_sure_delete_account') ?? 'Are you sure you want to delete your account? This action cannot be undone.' }}')">
            @csrf
            @method('DELETE')
            <div>
                        <label for="delete_password" class="block text-red-700 dark:text-red-300 mb-1">{{ __('general.password') }} *</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-red-500"><i class="fas fa-lock"></i></span>
                            <input id="delete_password" type="password" name="password" required class="w-full pl-10 pr-4 py-2 border border-red-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        @error('password')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                    </div>
                    <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition-all duration-200 transform hover:scale-105">{{ __('general.delete_account') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('profileForm');
    if (!form) return;
    
    const locale = '{{ app()->getLocale() }}';
    const messages = {
        az: 'Zəhmət olmasa bu sahəni doldurun.',
        en: 'Please fill out this field.',
        ru: 'Пожалуйста, заполните это поле.'
    };
    
    form.addEventListener('submit', function(e) {
        let valid = true;
        form.querySelectorAll('[required]').forEach(function(input) {
            if (!input.value) {
                valid = false;
                input.classList.add('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (!msg) {
                    msg = document.createElement('span');
                    msg.className = 'text-red-500 text-sm custom-required-msg';
                    input.parentNode.appendChild(msg);
                }
                msg.textContent = messages[locale] || messages['en'];
            } else {
                input.classList.remove('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (msg) msg.remove();
            }
        });
        if (!valid) e.preventDefault();
    });

    form.querySelectorAll('[required]').forEach(function(input) {
        input.addEventListener('input', function() {
            if (input.value) {
                input.classList.remove('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (msg) msg.remove();
            }
        });
        input.addEventListener('change', function() {
            if (input.value) {
                input.classList.remove('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (msg) msg.remove();
            }
        });
    });
});
</script>
@endpush