@extends('layouts.app')

@section('title', 'Profil Saya')

@section('content')
<div class="bg-gray-50/50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 text-center">
                    @if(Auth::user()->avatar)
                        <img src="{{ Storage::url(Auth::user()->avatar) }}" class="w-24 h-24 rounded-full mx-auto mb-3 object-cover border-4 border-primary/20">
                    @else
                        <div class="w-24 h-24 rounded-full bg-gradient-to-r from-primary to-primary-dark flex items-center justify-center mx-auto mb-3">
                            <span class="text-2xl text-white font-bold">{{ strtoupper(substr(Auth::user()->name, 0, 1)) }}</span>
                        </div>
                    @endif
                    
                    <h3 class="font-bold text-lg text-gray-800">{{ Auth::user()->name }}</h3>
                    <p class="text-gray-500 text-xs">{{ Auth::user()->email }}</p>
                    <p class="text-gray-400 text-xs">@ {{ Auth::user()->username }}</p>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-xs text-gray-600">Buku Didownload</span>
                            <span class="font-bold text-base text-primary">{{ $totalDownloads ?? 0 }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-gray-600">Buku Dibaca</span>
                            <span class="font-bold text-base text-success">{{ $totalReadingProgress ?? 0 }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 mt-5">
                    <h4 class="font-semibold text-gray-800 text-sm mb-3">Menu</h4>
                    <nav class="space-y-1">
                        <a href="{{ route('user.profile') }}" class="flex items-center gap-3 px-3 py-2 bg-primary/10 text-primary rounded-lg text-sm font-medium">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                            Profil Saya
                        </a>
                        <a href="{{ route('user.my-library') }}" class="flex items-center gap-3 px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-lg text-sm transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                            </svg>
                            Pustakaku
                        </a>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="flex items-center gap-3 w-full px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg text-sm transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                                </svg>
                                Logout
                            </button>
                        </form>
                    </nav>
                </div>
            </div>
            
            <!-- Form Edit Profile -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                    <h2 class="text-lg font-bold text-gray-800 mb-5">Edit Profil</h2>
                    
                    @if(session('success'))
                        <div class="bg-success/10 border border-success/20 text-success px-4 py-2 rounded-lg text-sm mb-4">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if(session('error'))
                        <div class="bg-danger/10 border border-danger/20 text-danger px-4 py-2 rounded-lg text-sm mb-4">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    <form action="{{ route('user.profile.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Nama Lengkap</label>
                                <input type="text" name="name" value="{{ old('name', Auth::user()->name) }}" class="input-modern text-sm py-2">
                                @error('name') <span class="text-danger text-xs mt-1">{{ $message }}</span> @enderror
                            </div>
                            
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Username</label>
                                <input type="text" name="username" value="{{ old('username', Auth::user()->username) }}" class="input-modern text-sm py-2">
                                @error('username') <span class="text-danger text-xs mt-1">{{ $message }}</span> @enderror
                            </div>
                            
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Email</label>
                                <input type="email" name="email" value="{{ old('email', Auth::user()->email) }}" class="input-modern text-sm py-2">
                                @error('email') <span class="text-danger text-xs mt-1">{{ $message }}</span> @enderror
                            </div>
                            
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Avatar</label>
                                <input type="file" name="avatar" accept="image/*" class="input-modern text-sm py-2">
                                <p class="text-xs text-gray-400 mt-1">Maksimal 2MB (JPG, PNG)</p>
                                @error('avatar') <span class="text-danger text-xs mt-1">{{ $message }}</span> @enderror
                            </div>
                            
                            <div class="md:col-span-2">
                                <label class="block text-xs font-medium text-gray-700 mb-1">Bio</label>
                                <textarea name="bio" rows="3" class="input-modern text-sm py-2" placeholder="Ceritakan tentang diri Anda...">{{ old('bio', Auth::user()->bio) }}</textarea>
                            </div>
                        </div>
                        
                        <div class="mt-5">
                            <button type="submit" class="btn-primary inline-flex items-center gap-2 text-sm py-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- Ganti Password -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 mt-5">
                    <h2 class="text-lg font-bold text-gray-800 mb-5">Ganti Password</h2>
                    
                    <form action="{{ route('user.profile.update-password') }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="space-y-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Password Saat Ini</label>
                                <input type="password" name="current_password" class="input-modern text-sm py-2">
                                @error('current_password') <span class="text-danger text-xs mt-1">{{ $message }}</span> @enderror
                            </div>
                            
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Password Baru</label>
                                <input type="password" name="password" class="input-modern text-sm py-2">
                                @error('password') <span class="text-danger text-xs mt-1">{{ $message }}</span> @enderror
                            </div>
                            
                            <div>
                                <label class="block text-xs font-medium text-gray-700 mb-1">Konfirmasi Password Baru</label>
                                <input type="password" name="password_confirmation" class="input-modern text-sm py-2">
                            </div>
                        </div>
                        
                        <div class="mt-5">
                            <button type="submit" class="bg-warning text-white px-5 py-2 rounded-lg font-medium text-sm hover:bg-warning/90 transition">
                                Ganti Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection