@extends('layouts.main')

@section('title')
    {{ __('common.profile') }}
@endsection

@section('page_title')
    {{ __('common.profile') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => '', 'label' => __('common.profile')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-user text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('common.profile_settings') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('common.manage_account_information') }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-2 text-sm text-gray-600">
                    <i class="fas fa-user-circle text-primary"></i>
                    <span>{{ __('common.personal_settings') }}</span>
                </div>
            </div>
        </div>

        <!-- Success Message -->
        @if (Session::has('message'))
            <div class="bg-green-50/80 backdrop-blur-sm p-4 rounded-24 border border-white/50 shadow-front-box-shadow-glow flex items-center space-x-3">
                <i class="fas fa-check-circle text-green-600"></i>
                <span class="text-green-700">{{ Session::get('message') }}</span>
            </div>
        @endif

        <!-- Profile Details Card -->
        <div class="border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
            <div class="flex items-center space-x-3 mb-6">
                <div class="min-w-10 h-10 bg-primary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                    <i class="fas fa-user text-primary"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-700">{{ __('common.profile_details') }}</h3>
                    <p class="text-sm text-gray-600">{{ __('common.manage_account_info') }}</p>
                </div>
            </div>

            <form method="post" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="form-label" for="accountName">
                            <i class="fas fa-user mr-2"></i>
                            {{ __('common.full_name') }}
                        </label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                               id="accountName" name="name" placeholder="{{ __('common.enter_full_name') }}"
                               value="{{ old('name', $user->name) }}" />
                        @error('name')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="space-y-2">
                        <label class="form-label" for="accountEmail">
                            <i class="fas fa-envelope mr-2"></i>
                            {{ __('common.email_address') }}
                        </label>
                        <input type="email" class="form-control bg-gray-50" id="accountEmail"
                               name="email" placeholder="{{ __('common.enter_email') }}"
                               value="{{ old('email', $user->email) }}" readonly />
                        <p class="text-xs text-gray-500 mt-1 flex items-center">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ __('common.email_cannot_be_changed') }}
                        </p>
                    </div>
                </div>
                <div class="flex justify-end border-t border-white/30 pt-4">
                    <button type="submit" class="btn btn-primary rounded-24">
                        <i class="fas fa-save mr-2"></i>
                        {{ __('common.save_changes') }}
                    </button>
                </div>
            </form>
        </div>

        <!-- Change Password Card -->
        <div class="border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
            <div class="flex items-center space-x-3 mb-6">
                <div class="min-w-10 h-10 bg-secondary/10 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                    <i class="fas fa-lock text-secondary"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-700">{{ __('common.change_password') }}</h3>
                    <p class="text-sm text-gray-600">{{ __('common.update_account_password') }}</p>
                </div>
            </div>

            <form method="post" action="{{ route('profile.update.password') }}" class="space-y-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="space-y-2">
                        <label class="form-label" for="current_password">
                            <i class="fas fa-key mr-2"></i>
                            {{ __('common.current_password') }}
                        </label>
                        <div class="relative">
                            <input type="password" class="form-control @error('current_password') is-invalid @enderror"
                                   id="current_password" name="current_password" placeholder="{{ __('common.enter_current_password') }}" />
                            <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600" onclick="togglePassword('current_password')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        @error('current_password')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="space-y-2">
                        <label class="form-label" for="password">
                            <i class="fas fa-shield-alt mr-2"></i>
                            {{ __('common.new_password') }}
                        </label>
                        <div class="relative">
                            <input type="password" id="password" name="password"
                                   class="form-control @error('password') is-invalid @enderror"
                                   placeholder="{{ __('common.enter_new_password') }}" />
                            <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600" onclick="togglePassword('password')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        @error('password')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="space-y-2">
                        <label class="form-label" for="password_confirmation">
                            <i class="fas fa-check-circle mr-2"></i>
                            {{ __('common.confirm_password') }}
                        </label>
                        <div class="relative">
                            <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                                   id="password_confirmation" name="password_confirmation"
                                   placeholder="{{ __('common.confirm_new_password') }}" />
                            <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600" onclick="togglePassword('password_confirmation')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        @error('password_confirmation')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <!-- Password Requirements -->
                <div class="bg-gradient-to-r from-blue-50/80 to-indigo-50/80 border border-white/40 backdrop-blur-sm rounded-24 md:p-6 p-4 shadow-front-box-shadow-glow">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-9 h-9 bg-blue-100 rounded-xl flex items-center justify-center border border-white/60">
                            <i class="fas fa-info-circle text-blue-600"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-blue-900 mb-1">{{ __('common.password_requirements') }}</h4>
                            <p class="text-xs text-blue-700">{{ __('common.follow_guidelines_secure_password') }}</p>
                        </div>
                    </div>
                    <ul class="space-y-3 text-sm text-blue-800">
                        <li class="flex items-center password-requirement">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('common.password_min_8_chars') }}
                        </li>
                        <li class="flex items-center password-requirement">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('common.password_lowercase') }}
                        </li>
                        <li class="flex items-center password-requirement">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('common.password_number_symbol') }}
                        </li>
                    </ul>
                </div>

                <div class="flex justify-end border-t border-white/30 pt-4">
                    <button type="submit" class="btn btn-primary rounded-24">
                        <i class="fas fa-save mr-2"></i>
                        {{ __('common.update_password') }}
                    </button>
                </div>
            </form>
        </div>

        <!-- Security Tips Card -->
        <div class="bg-blue-50/80 border border-white/50 backdrop-blur-sm rounded-24 p-6 shadow-front-box-shadow-glow">
            <div class="flex items-start space-x-4">
                <div class="min-w-12 h-12 bg-green-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center flex-shrink-0 border border-white/50">
                    <i class="fas fa-shield-alt text-green-600"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">{{ __('common.security_tips') }}</h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('common.use_unique_password') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('common.consider_password_manager') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('common.enable_two_factor') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('common.regularly_update_password') }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_scripts')
<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const button = field.nextElementSibling;
    const icon = button.querySelector('i');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.className = 'fas fa-eye-slash';
    } else {
        field.type = 'password';
        icon.className = 'fas fa-eye';
    }
}

// Form validation and feedback
document.addEventListener('DOMContentLoaded', function() {
    // Add loading states to forms
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>' + @json(__('common.saving'));
            submitBtn.disabled = true;
            
            // Re-enable after 5 seconds (in case of slow response)
            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 5000);
        });
    });
    
    // Password strength indicator
    const passwordField = document.getElementById('password');
    if (passwordField) {
        passwordField.addEventListener('input', function() {
            const password = this.value;
            const requirements = document.querySelectorAll('.password-requirement');
            
            // Check minimum length
            if (password.length >= 8) {
                requirements[0].classList.add('text-green-600');
                requirements[0].classList.remove('text-gray-500');
            } else {
                requirements[0].classList.remove('text-green-600');
                requirements[0].classList.add('text-gray-500');
            }
            
            // Check lowercase
            if (/[a-z]/.test(password)) {
                requirements[1].classList.add('text-green-600');
                requirements[1].classList.remove('text-gray-500');
            } else {
                requirements[1].classList.remove('text-green-600');
                requirements[1].classList.add('text-gray-500');
            }
            
            // Check numbers/symbols
            if (/[0-9!@#$%^&*(),.?":{}|<>]/.test(password)) {
                requirements[2].classList.add('text-green-600');
                requirements[2].classList.remove('text-gray-500');
            } else {
                requirements[2].classList.remove('text-green-600');
                requirements[2].classList.add('text-gray-500');
            }
        });
    }
});
</script>
@endpush