import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:google_fonts/google_fonts.dart'; import '../controllers/home_controller.dart'; class HomeView extends StatelessWidget { const HomeView({super.key}); @override Widget build(BuildContext context) { final HomeController controller = Get.put(HomeController()); return Scaffold( backgroundColor: const Color(0xFFF5FAF2), body: SafeArea( child: SingleChildScrollView( padding: const EdgeInsets.all(16), child: Column( children: [ // Greeting Box + Logout Obx( () => Container( width: double.infinity, padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(18), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.1), blurRadius: 6, spreadRadius: 3, ), ], ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Flexible( child: Text( "Halo, ${controller.username.value.split(' ').first}!", style: GoogleFonts.poppins( fontSize: 16, fontWeight: FontWeight.w600, ), overflow: TextOverflow.ellipsis, ), ), IconButton( icon: const Icon(Icons.logout, color: Colors.black87), onPressed: controller.showLogoutDialog, ), ], ), ), ), const SizedBox(height: 20), // Menu card Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded(child: _menuItem("Daftar Kartu", Icons.credit_card, () => controller.navigateTo("Daftar Kartu"))), const SizedBox(width: 8), Expanded(child: _menuItem("Cek Kartu", Icons.qr_code_scanner, () => controller.navigateTo("Cek Kartu"))), const SizedBox(width: 8), Expanded(child: _menuItem("Notifikasi", Icons.notifications, () => controller.navigateTo("Notifikasi"))), ], ), const SizedBox(height: 24), Obx(() { final slot = controller.slot.value; final jumlahMotor = controller.jumlahMotor.value; return Container( width: double.infinity, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(18), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.1), blurRadius: 6, spreadRadius: 3, ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(12), ), child: Text( "Ketersediaan Slot Parkir Motor", style: GoogleFonts.poppins( fontSize: 14, fontWeight: FontWeight.bold, color: Colors.white, ), ), ), const SizedBox(height: 12), Row( children: [ _slotItemCard("$slot", "Sisa Slot"), _slotItemCard("$jumlahMotor", "Jumlah Motor"), ], ), ], ), ); }), const SizedBox(height: 24), // News section Obx(() { if (controller.isLoadingNews.value) { return const Center(child: CircularProgressIndicator()); } if (controller.newsList.isEmpty) { return const Center(child: Text("Tidak ada berita tersedia")); } return Container( width: double.infinity, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(18), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.1), blurRadius: 6, spreadRadius: 3, ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Berita terkini", style: GoogleFonts.poppins( fontSize: 15, fontWeight: FontWeight.w600, ), ), const SizedBox(height: 12), SizedBox( height: 180, child: ListView.separated( scrollDirection: Axis.horizontal, itemCount: controller.newsList.length, separatorBuilder: (_, __) => const SizedBox(width: 12), itemBuilder: (context, index) { final news = controller.newsList[index]; return Container( width: 160, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(12), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.1), blurRadius: 4, spreadRadius: 2, ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ ClipRRect( borderRadius: const BorderRadius.only( topLeft: Radius.circular(12), topRight: Radius.circular(12), ), child: Image.network( news['thumbnail'] ?? '', height: 90, width: double.infinity, fit: BoxFit.cover, errorBuilder: (context, error, stackTrace) => Container( height: 90, color: Colors.grey[300], child: const Icon(Icons.broken_image), ), ), ), Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( news['title'] ?? 'Judul tidak tersedia', maxLines: 2, overflow: TextOverflow.ellipsis, style: GoogleFonts.poppins( fontSize: 13, fontWeight: FontWeight.w500, ), ), const SizedBox(height: 4), Text( news['pubDate'] ?? '', style: GoogleFonts.poppins( fontSize: 11, color: Colors.grey[600], ), ), ], ), ), ], ), ); }, ), ), ], ), ); }), ], ), ), ), ); } Widget _menuItem(String label, IconData icon, VoidCallback onTap) { return GestureDetector( onTap: onTap, child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( padding: const EdgeInsets.all(18), decoration: BoxDecoration( border: Border.all(color: Colors.black12), borderRadius: BorderRadius.circular(14), color: Colors.white, boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.05), blurRadius: 4, ), ], ), child: Icon(icon, size: 28, color: Colors.black87), ), const SizedBox(height: 6), Text( label, style: GoogleFonts.poppins(fontSize: 13), ), ], ), ); } Widget _slotItemCard(String value, String label) { return Expanded( child: Container( margin: const EdgeInsets.symmetric(horizontal: 4), padding: const EdgeInsets.symmetric(vertical: 16), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(16), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.1), blurRadius: 6, spreadRadius: 3, ), ], ), child: Column( children: [ Text( value, style: GoogleFonts.poppins( fontSize: 24, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 4), Text( label, style: GoogleFonts.poppins( fontSize: 12, fontWeight: FontWeight.w500, ), ), ], ), ), ); } }