{{-- resources/views/profile/edit.blade.php --}}
@extends('layouts.app')

@section('title', 'Profile - LearnMood')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 pb-20 md:pb-0">
    
    <!-- Header -->
    <div class="mb-6">
        <h2 class="text-xl md:text-2xl font-bold text-gray-800">👤 Profile</h2>
        <p class="text-sm md:text-base text-gray-500">Kelola informasi akun Anda</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Avatar & Info -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6">
                <div class="flex flex-col items-center">
                    <!-- Avatar -->
<div class="relative group">
    <div class="w-24 h-24 md:w-32 md:h-32 rounded-full overflow-hidden border-4 border-purple-100 shadow-lg">
        @if($user->avatar && file_exists(public_path('avatars/' . $user->avatar)))
            <img src="{{ asset('avatars/' . $user->avatar) }}" 
                 alt="{{ $user->name }}" 
                 class="w-full h-full object-cover">
        @else
            <div class="w-full h-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-3xl md:text-4xl font-bold">
                {{ substr($user->name, 0, 1) }}
            </div>
        @endif
    </div>
    
    <!-- Upload button -->
    <label for="avatarInput" 
           class="absolute bottom-0 right-0 bg-purple-600 text-white p-2 rounded-full shadow-lg hover:bg-purple-700 transition cursor-pointer">
        <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
    </label>
    
    <form id="avatarForm" action="{{ route('profile.avatar') }}" method="POST" enctype="multipart/form-data" class="hidden">
        @csrf
        <input type="file" id="avatarInput" name="avatar" accept="image/*" onchange="document.getElementById('avatarForm').submit()">
    </form>
</div>
                    
                    <!-- User Info -->
                    <h3 class="text-lg md:text-xl font-bold text-gray-800 mt-4">{{ $user->name }}</h3>
                    <p class="text-sm text-gray-500">{{ $user->email }}</p>
                    
                    <!-- Role Badge -->
                    <span class="mt-2 px-3 py-1 text-xs font-medium rounded-full 
                        @if($user->isSiswa()) bg-green-100 text-green-700
                        @else bg-purple-100 text-purple-700 @endif">
                        {{ $user->isSiswa() ? 'Siswa' : 'Orang Tua' }}
                    </span>
                    
                    <!-- Joined Date -->
                    <div class="mt-4 text-center text-xs text-gray-400">
                        <i class="far fa-calendar-alt mr-1"></i>
                        Member since {{ $user->created_at->format('d M Y') }}
                    </div>
                </div>
                
                <!-- Quick Stats untuk Siswa -->
                @if($user->isSiswa() && isset($stats))
                <div class="mt-6 pt-4 border-t border-gray-100">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3">📊 Statistik Cepat</h4>
                    <div class="grid grid-cols-2 gap-2">
                        <div class="bg-gray-50 p-2 rounded-lg text-center">
                            <span class="text-xs text-gray-500">Total Aktivitas</span>
                            <p class="text-lg font-bold text-blue-600">{{ $stats['total_aktivitas'] }}</p>
                        </div>
                        <div class="bg-gray-50 p-2 rounded-lg text-center">
                            <span class="text-xs text-gray-500">Total Durasi</span>
                            <p class="text-lg font-bold text-green-600">{{ $stats['total_durasi'] }} mnt</p>
                        </div>
                        <div class="bg-gray-50 p-2 rounded-lg text-center col-span-2">
                            <span class="text-xs text-gray-500">Konsistensi</span>
                            <div class="flex items-center justify-center gap-2">
                                <p class="text-lg font-bold text-purple-600">{{ $stats['konsistensi'] }}%</p>
                                <div class="w-20 bg-gray-200 rounded-full h-1.5">
                                    <div class="bg-purple-600 h-1.5 rounded-full" style="width: {{ $stats['konsistensi'] }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                
                <!-- Quick Stats untuk Orang Tua -->
                @if($user->isOrangTua() && isset($stats))
                <div class="mt-6 pt-4 border-t border-gray-100">
                    <h4 class="text-sm font-semibold text-gray-700 mb-3">📊 Statistik Cepat</h4>
                    <div class="bg-gray-50 p-3 rounded-lg text-center">
                        <span class="text-xs text-gray-500">Total Anak Terhubung</span>
                        <p class="text-2xl font-bold text-purple-600">{{ $stats['total_anak'] }}</p>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Right Column - Edit Forms -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Edit Profile Form -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                <div class="px-4 md:px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100/50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-user-edit text-blue-600"></i>
                        Edit Profile
                    </h3>
                </div>
                
                <div class="p-4 md:p-6">
                    <form method="POST" action="{{ route('profile.update') }}" class="space-y-4">
                        @csrf
                        @method('PATCH')
                        
                        <!-- Name -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Nama Lengkap
                            </label>
                            <input type="text" 
                                   name="name" 
                                   value="{{ old('name', $user->name) }}" 
                                   class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                   required>
                            @error('name')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <!-- Email -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Email
                            </label>
                            <input type="email" 
                                   name="email" 
                                   value="{{ old('email', $user->email) }}" 
                                   class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                                   required>
                            @error('email')
                                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div class="flex justify-end">
                            <button type="submit" 
                                    class="px-4 md:px-6 py-2 md:py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm">
                                <i class="fas fa-save mr-2"></i> Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Change Password Form -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
                <div class="px-4 md:px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100/50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="fas fa-lock text-green-600"></i>
                        Ubah Password
                    </h3>
                </div>
                
                <div class="p-4 md:p-6">
                    <form method="POST" action="{{ route('profile.password') }}" class="space-y-4">
                        @csrf
                        
                        <!-- Current Password -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Password Saat Ini
                            </label>
                            <input type="password" 
                                   name="current_password" 
                                   class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                   required>
                        </div>
                        
                        <!-- New Password -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Password Baru
                            </label>
                            <input type="password" 
                                   name="new_password" 
                                   class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                   required>
                            <p class="text-xs text-gray-500 mt-1">Minimal 8 karakter</p>
                        </div>
                        
                        <!-- Confirm New Password -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Konfirmasi Password Baru
                            </label>
                            <input type="password" 
                                   name="new_password_confirmation" 
                                   class="w-full px-3 md:px-4 py-2 md:py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                   required>
                        </div>
                        
                        <div class="flex justify-end">
                            <button type="submit" 
                                    class="px-4 md:px-6 py-2 md:py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                                <i class="fas fa-key mr-2"></i> Ubah Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Danger Zone - Delete Account -->
            <div class="bg-white rounded-xl border border-red-100 shadow-sm overflow-hidden">
                <div class="px-4 md:px-6 py-4 border-b border-red-100 bg-gradient-to-r from-red-50 to-red-100/50">
                    <h3 class="font-semibold text-red-800 flex items-center gap-2">
                        <i class="fas fa-exclamation-triangle text-red-600"></i>
                        Danger Zone
                    </h3>
                </div>
                
                <div class="p-4 md:p-6">
                    <p class="text-sm text-gray-600 mb-4">
                        Setelah menghapus akun, semua data Anda akan hilang permanen. 
                        Tindakan ini tidak dapat dibatalkan.
                    </p>
                    
                    <button onclick="showDeleteModal()" 
                            class="px-4 md:px-6 py-2 md:py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm">
                        <i class="fas fa-trash-alt mr-2"></i> Hapus Akun
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Account Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 px-4">
    <div class="bg-white rounded-xl max-w-md w-full p-6 shadow-xl">
        <div class="text-center mb-4">
            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-800">Hapus Akun?</h3>
            <p class="text-sm text-gray-500 mt-2">
                Tindakan ini akan menghapus semua data Anda secara permanen. 
                Masukkan password Anda untuk konfirmasi.
            </p>
        </div>
        
        <form method="POST" action="{{ route('profile.destroy') }}" class="space-y-4">
            @csrf
            @method('DELETE')
            
            <div>
                <input type="password" 
                       name="password" 
                       placeholder="Masukkan password Anda" 
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm"
                       required>
            </div>
            
            <div class="flex gap-3">
                <button type="button" 
                        onclick="hideDeleteModal()"
                        class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition text-sm">
                    Batal
                </button>
                <button type="submit" 
                        class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm">
                    Ya, Hapus Akun
                </button>
            </div>
        </form>
    </div>
</div>

<script>
// Modal functions
function showDeleteModal() {
    document.getElementById('deleteModal').classList.remove('hidden');
    document.getElementById('deleteModal').classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function hideDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    document.getElementById('deleteModal').classList.remove('flex');
    document.body.style.overflow = '';
}

// Close modal when clicking outside
document.getElementById('deleteModal').addEventListener('click', function(e) {
    if (e.target === this) {
        hideDeleteModal();
    }
});

// Close modal with ESC key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        hideDeleteModal();
    }
});

// Preview avatar before upload
document.getElementById('avatarInput').addEventListener('change', function(e) {
    if (this.files && this.files[0]) {
        // Optional: preview before upload
        // You can add image preview here if needed
    }
});
</script>

<style>
/* Mobile optimizations */
@media (max-width: 640px) {
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}
</style>
@endsection