<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>User Profile - {{ config('app.name', 'Laravel') }}</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script> 
    
    <style>
        :root {
            --bg: #f8fafc; --panel: #ffffff; --muted: #6b7280; --accent: #0b5ed7;
            --accent-600: #0b63d6; --danger: #dc2626; --card-border: #e2e8f0; --soft: #f8fafc;
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }
        * { box-sizing: border-box }
        
        body { 
            margin: 0; font-family: var(--font-main); 
            background: var(--bg); color: #111827; 
            -webkit-font-smoothing: antialiased;
        }
        
        .app { display: flex; min-height: 100vh; }
        
        .content { 
            flex: 1; 
            padding: 32px; 
            width: 100%;
            transition: all 0.3s ease;
        }

        @media (max-width: 1024px) {
            .app { display: block; }
            .content { padding: 20px; padding-top: 80px; }
        }
        
        @media (max-width: 640px) {
            .content { padding: 16px; padding-top: 80px; }
        }
    </style>
</head>
<body>
    <div class="app">
        @include('partials.sidebar')

        <main class="content">
            <div class="max-w-7xl mx-auto">
                
                @php
                    // Helper functions untuk Role
                    if (!function_exists('getRoleName')) {
                        function getRoleName($role) {
                            $roles = ['user' => 'User', 'staff_bidang' => 'Staff Bidang', 'kepala_bidang' => 'Kepala Bidang', 'sekretariat' => 'Sekretariat'];
                            return $roles[$role] ?? ucfirst(str_replace('_', ' ', $role));
                        }
                    }

                    if (!function_exists('getRoleColorClass')) {
                        function getRoleColorClass($role) {
                            $colors = [
                                'user' => 'bg-blue-100 text-blue-800 border-blue-200', 
                                'staff_bidang' => 'bg-green-100 text-green-800 border-green-200', 
                                'kepala_bidang' => 'bg-purple-100 text-purple-800 border-purple-200', 
                                'sekretariat' => 'bg-red-100 text-red-800 border-red-200'
                            ];
                            return $colors[$role] ?? 'bg-gray-100 text-gray-800 border-gray-200';
                        }
                    }

                    // Helper functions untuk Status Peminjaman
                    if (!function_exists('getStatusConfig')) {
                        function getStatusConfig($status) {
                            switch($status) {
                                case 'pending':
                                    return ['label' => 'Requested', 'class' => 'text-yellow-700 bg-yellow-50 border-yellow-200', 'icon_bg' => 'bg-yellow-100 text-yellow-600', 'icon' => 'clock'];
                                case 'staff_approved':
                                case 'kepala_approved':
                                    return ['label' => 'Proses', 'class' => 'text-blue-700 bg-blue-50 border-blue-200', 'icon_bg' => 'bg-blue-100 text-blue-600', 'icon' => 'loader'];
                                case 'final_approved':
                                case 'approved':
                                    return ['label' => 'Approved', 'class' => 'text-green-700 bg-green-50 border-green-200', 'icon_bg' => 'bg-green-100 text-green-600', 'icon' => 'check-circle'];
                                case 'returned':
                                    return ['label' => 'Returned', 'class' => 'text-indigo-700 bg-indigo-50 border-indigo-200', 'icon_bg' => 'bg-indigo-100 text-indigo-600', 'icon' => 'corner-down-left'];
                                case 'rejected':
                                    return ['label' => 'Rejected', 'class' => 'text-red-700 bg-red-50 border-red-200', 'icon_bg' => 'bg-red-100 text-red-600', 'icon' => 'x-circle'];
                                case 'return_pending':
                                    return ['label' => 'Verifikasi', 'class' => 'text-orange-700 bg-orange-50 border-orange-200', 'icon_bg' => 'bg-orange-100 text-orange-600', 'icon' => 'clipboard-check'];
                                default:
                                    return ['label' => ucfirst($status), 'class' => 'text-gray-700 bg-gray-50 border-gray-200', 'icon_bg' => 'bg-gray-100 text-gray-600', 'icon' => 'help-circle'];
                            }
                        }
                    }
                @endphp

                <!-- Header -->
                <div class="mb-8">
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">Profil Pengguna</h1>
                    <p class="text-sm text-gray-500 mt-1">Kelola informasi akun dan lihat aktivitas peminjaman Anda.</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
                    <!-- Kolom Kiri: Info Utama -->
                    <div class="lg:col-span-2 space-y-6 lg:space-y-8">
                        
                        {{-- Personal Information Card --}}
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
                                <h2 class="text-lg font-bold text-gray-800">Informasi Pribadi</h2>
                                <a href="{{ route('profile.edit') }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-gray-300 rounded-lg text-xs font-medium text-gray-700 hover:bg-gray-50 transition-colors shadow-sm">
                                    <i data-lucide="edit-2" class="w-3.5 h-3.5"></i>
                                    Edit Profil
                                </a>
                            </div>

                            <div class="p-6">
                                <div class="flex flex-col sm:flex-row items-center sm:items-start gap-6 mb-8">
                                    <div class="w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center text-white text-3xl font-bold shadow-md shrink-0 border-4 border-blue-50">
                                        {{ substr($user->name, 0, 1) }}
                                    </div>
                                    <div class="text-center sm:text-left space-y-2">
                                        <h3 class="text-2xl font-bold text-gray-900">{{ $user->name }}</h3>
                                        <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full border {{ getRoleColorClass($user->role) }}">
                                            {{ getRoleName($user->role) }}
                                        </span>
                                        <p class="text-sm text-gray-500 max-w-md">Akun terdaftar sejak {{ \Carbon\Carbon::parse($user->created_at)->format('d F Y') }}</p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8">
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Nama Lengkap</label>
                                        <div class="flex items-center gap-2 text-gray-900 font-medium p-3 bg-gray-50 rounded-lg border border-gray-100">
                                            <i data-lucide="user" class="w-4 h-4 text-gray-400"></i>
                                            {{ $user->name }}
                                        </div>
                                    </div>
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Alamat Email</label>
                                        <div class="flex items-center gap-2 text-gray-900 font-medium p-3 bg-gray-50 rounded-lg border border-gray-100">
                                            <i data-lucide="mail" class="w-4 h-4 text-gray-400"></i>
                                            {{ $user->email }}
                                        </div>
                                    </div>
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Nomor Telepon</label>
                                        <div class="flex items-center gap-2 text-gray-900 font-medium p-3 bg-gray-50 rounded-lg border border-gray-100">
                                            <i data-lucide="phone" class="w-4 h-4 text-gray-400"></i>
                                            {{ $user->phone ?? '-' }}
                                        </div>
                                    </div>
                                    <div class="space-y-1">
                                        <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Divisi</label>
                                        <div class="flex items-center gap-2 text-gray-900 font-medium p-3 bg-gray-50 rounded-lg border border-gray-100">
                                            <i data-lucide="building-2" class="w-4 h-4 text-gray-400"></i>
                                            {{ $user->divisi->nama ?? 'Belum ada divisi' }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Recent Activity Card --}}
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                                <h2 class="text-lg font-bold text-gray-800">Riwayat Peminjaman</h2>
                            </div>
                            
                            <div class="p-6">
                                {{-- 1. AKTIVITAS BARANG --}}
                                <div class="space-y-4 mb-8">
                                    <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wide border-b border-gray-100 pb-2 mb-3 flex items-center gap-2">
                                        <i data-lucide="package" class="w-4 h-4"></i> Barang
                                    </h3>

                                    @forelse($recentActivities as $activity)
                                        @php $config = getStatusConfig($activity->status); @endphp
                                        <div class="group flex flex-col sm:flex-row sm:items-center justify-between p-4 border border-gray-100 rounded-xl hover:bg-gray-50 transition-all duration-200 hover:shadow-sm gap-4">
                                            <div class="flex items-start gap-4">
                                                <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 {{ $config['icon_bg'] }}">
                                                    <i data-lucide="{{ $config['icon'] }}" class="w-5 h-5"></i>
                                                </div>
                                                <div>
                                                    <div class="flex items-center gap-2">
                                                        <h4 class="font-bold text-gray-900 text-sm md:text-base">
                                                            {{ $activity->item->nama ?? 'Item' }}
                                                        </h4>
                                                    </div>
                                                    <div class="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
                                                        <span class="flex items-center gap-1">
                                                            <i data-lucide="calendar" class="w-3 h-3"></i>
                                                            {{ \Carbon\Carbon::parse($activity->created_at)->format('d M Y') }}
                                                        </span>
                                                        <span>&bull;</span>
                                                        <span class="font-medium text-gray-700">{{ $activity->jumlah }} Unit</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="px-2.5 py-1 text-xs font-bold rounded-full border {{ $config['class'] }}">{{ $config['label'] }}</span>
                                        </div>
                                    @empty
                                        <p class="text-center py-4 text-gray-500 text-sm border border-dashed rounded-lg">Tidak ada riwayat barang.</p>
                                    @endforelse
                                </div>

                                {{-- 2. AKTIVITAS RUANGAN --}}
                                @if(isset($roomBookings) && $roomBookings->count() > 0)
                                <div class="space-y-4 mb-8">
                                    <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wide border-b border-gray-100 pb-2 mb-3 flex items-center gap-2">
                                        <i data-lucide="layout-grid" class="w-4 h-4"></i> Ruangan
                                    </h3>

                                    @foreach($roomBookings as $booking)
                                        @php $roomStatus = getStatusConfig($booking->status); @endphp
                                        <div class="group flex flex-col sm:flex-row sm:items-center justify-between p-4 border border-gray-100 rounded-xl hover:bg-gray-50 transition-all duration-200 hover:shadow-sm gap-4">
                                            <div class="flex items-start gap-4">
                                                <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-indigo-100 text-indigo-600">
                                                    <i data-lucide="map-pin" class="w-5 h-5"></i>
                                                </div>
                                                <div>
                                                    <h4 class="font-bold text-gray-900 text-sm md:text-base">{{ $booking->title }}</h4>
                                                    <p class="text-xs text-gray-500 mt-1">{{ $booking->room->name ?? 'Aula' }} | {{ \Carbon\Carbon::parse($booking->start_time)->format('d M, H:i') }}</p>
                                                </div>
                                            </div>
                                            <span class="px-2.5 py-1 text-xs font-bold rounded-full border {{ $roomStatus['class'] }}">{{ $roomStatus['label'] }}</span>
                                        </div>
                                    @endforeach
                                </div>
                                @endif

                                {{-- 3. AKTIVITAS KENDARAAN (TAMBAHAN BARU) --}}
                                <div class="space-y-4">
                                    <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wide border-b border-gray-100 pb-2 mb-3 flex items-center gap-2">
                                        <i data-lucide="car" class="w-4 h-4"></i> Kendaraan Dinas
                                    </h3>

                                    @if(isset($vehicleBookings) && $vehicleBookings->count() > 0)
                                        @foreach($vehicleBookings as $vBooking)
                                            @php $vStatus = getStatusConfig($vBooking->status); @endphp
                                            <div class="group flex flex-col sm:flex-row sm:items-center justify-between p-4 border border-gray-100 rounded-xl hover:bg-gray-50 transition-all duration-200 hover:shadow-sm gap-4">
                                                <div class="flex items-start gap-4">
                                                    <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-blue-100 text-blue-600">
                                                        <i data-lucide="{{ $vBooking->vehicle->type === 'mobil' ? 'car' : 'bike' }}" class="w-5 h-5"></i>
                                                    </div>
                                                    <div>
                                                        <div class="flex items-center gap-2">
                                                            <h4 class="font-bold text-gray-900 text-sm md:text-base">
                                                                {{ $vBooking->vehicle->name ?? 'Kendaraan' }}
                                                            </h4>
                                                            <span class="text-[10px] font-bold bg-gray-900 text-white px-1.5 py-0.5 rounded">
                                                                {{ $vBooking->vehicle->plate_number ?? 'L XXXX XX' }}
                                                            </span>
                                                        </div>
                                                        <div class="flex flex-wrap items-center gap-3 mt-1.5 text-xs text-gray-500">
                                                            <span class="flex items-center gap-1">
                                                                <i data-lucide="calendar" class="w-3 h-3"></i>
                                                                {{ \Carbon\Carbon::parse($vBooking->start_date)->format('d M') }} - {{ \Carbon\Carbon::parse($vBooking->end_date)->format('d M Y') }}
                                                            </span>
                                                            <span class="hidden sm:inline">&bull;</span>
                                                            <span class="italic text-gray-400 truncate max-w-[150px]">"{{ $vBooking->purpose }}"</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <span class="px-2.5 py-1 text-xs font-bold rounded-full border whitespace-nowrap {{ $vStatus['class'] }}">
                                                        {{ $vStatus['label'] }}
                                                    </span>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="text-center py-6 border border-dashed border-gray-200 rounded-lg">
                                            <p class="text-gray-500 text-sm">Belum ada riwayat peminjaman kendaraan.</p>
                                        </div>
                                    @endif
                                </div>

                                <div class="mt-8 text-center pt-4 border-t border-gray-100 flex flex-wrap justify-center gap-4">
                                    <a href="{{ route('borrow.index') }}" class="text-sm font-medium text-blue-600 hover:underline">Semua Barang &rarr;</a>
                                    <a href="{{ route('rooms.index') }}" class="text-sm font-medium text-indigo-600 hover:underline">Semua Ruangan &rarr;</a>
                                    <a href="{{ route('vehicles.index') }}" class="text-sm font-medium text-emerald-600 hover:underline">Semua Kendaraan &rarr;</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Kolom Kanan: Statistik & Security -->
                    <div class="space-y-6 lg:space-y-8">
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                                <h2 class="text-lg font-bold text-gray-800">Statistik Aktivitas</h2>
                            </div>
                            <div class="p-6">
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="text-center p-4 bg-blue-50 rounded-xl border border-blue-100">
                                        <div class="text-2xl font-bold text-blue-600">{{ $activityStats->totalRequests ?? '0' }}</div>
                                        <div class="text-[10px] font-bold text-blue-600 uppercase mt-1 tracking-wide">Total Pinjam</div>
                                    </div>
                                    <div class="text-center p-4 bg-green-50 rounded-xl border border-green-100">
                                        <div class="text-2xl font-bold text-green-600">{{ $activityStats->activeBorrowings ?? '0' }}</div>
                                        <div class="text-[10px] font-bold text-green-600 uppercase mt-1 tracking-wide">Sedang Aktif</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                                <h2 class="text-lg font-bold text-gray-800">Keamanan</h2>
                            </div>
                            <div class="p-6">
                                <a href="{{ route('profile.password') }}" class="group flex items-center justify-between p-4 border border-gray-200 rounded-xl hover:bg-blue-50 transition-all">
                                    <div class="flex items-center gap-3">
                                        <div class="p-2 bg-gray-100 rounded-lg group-hover:bg-white text-gray-600 group-hover:text-blue-600">
                                            <i data-lucide="lock" class="w-5 h-5"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-sm text-gray-900">Ubah Password</h4>
                                            <p class="text-[10px] text-gray-500">Amankan akun Anda</p>
                                        </div>
                                    </div>
                                    <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        lucide.createIcons();
    </script>
</body>
</html>
