2025-09-05 02:53:03 +07:00

720 lines
23 KiB
Dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import '../../../common/theme/theme.dart';
import '../../components/image/image.dart';
import '../../router/app_router.gr.dart';
// Models (simplified)
class DrawEvent {
final String id;
final String name;
final String description;
final int entryPoints;
final String icon;
final String imageUrl;
final Color primaryColor;
final String prize;
final String prizeValue;
final DateTime drawDate;
final int totalParticipants;
final int hadiah;
final String status; // 'active', 'ended'
final int minSpending;
DrawEvent({
required this.id,
required this.name,
required this.description,
required this.entryPoints,
required this.icon,
required this.imageUrl,
required this.primaryColor,
required this.prize,
required this.prizeValue,
required this.drawDate,
required this.totalParticipants,
required this.hadiah,
required this.status,
required this.minSpending,
});
bool get isActive => status == 'active';
}
class UserEntry {
final String drawId;
final DateTime entryDate;
UserEntry({required this.drawId, required this.entryDate});
}
class CarouselBanner {
final String id;
final String imageUrl;
final String title;
final String subtitle;
final Color backgroundColor;
CarouselBanner({
required this.id,
required this.imageUrl,
required this.title,
required this.subtitle,
required this.backgroundColor,
});
}
@RoutePage()
class DrawPage extends StatefulWidget {
const DrawPage({super.key});
@override
State<DrawPage> createState() => _DrawPageState();
}
class _DrawPageState extends State<DrawPage> {
final TextEditingController _dateFilterController = TextEditingController();
final CarouselSliderController _carouselController =
CarouselSliderController();
final ScrollController _scrollController = ScrollController();
int _currentBannerIndex = 0;
DateTime? _selectedFilterDate;
bool _isCollapsed = false;
final List<UserEntry> userEntries = [
UserEntry(
drawId: "1",
entryDate: DateTime.now().subtract(Duration(hours: 3)),
),
];
final List<CarouselBanner> banners = [
CarouselBanner(
id: "1",
imageUrl:
"https://images.unsplash.com/photo-1610375461246-83df859d849d?w=800&h=400&fit=crop&crop=center",
title: "Gebyar Undian Emas",
subtitle: "Menangkan hadiah emas 3 gram!",
backgroundColor: Color(0xFFFF6B6B),
),
CarouselBanner(
id: "2",
imageUrl:
"https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=800&h=400&fit=crop&crop=center",
title: "Undian iPhone 15 Pro",
subtitle: "Smartphone premium menanti Anda!",
backgroundColor: Color(0xFF4ECDC4),
),
CarouselBanner(
id: "3",
imageUrl:
"https://images.unsplash.com/photo-1593640408182-31c70c8268f5?w=800&h=400&fit=crop&crop=center",
title: "Undian Laptop Gaming",
subtitle: "Laptop gaming terbaru untuk gamers!",
backgroundColor: Color(0xFF45B7D1),
),
CarouselBanner(
id: "4",
imageUrl:
"https://images.unsplash.com/photo-1549298916-b41d501d3772?w=800&h=400&fit=crop&crop=center",
title: "Undian Sneakers Limited",
subtitle: "Sepatu branded edition terbatas!",
backgroundColor: Color(0xFF96CEB4),
),
CarouselBanner(
id: "5",
imageUrl:
"https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&h=400&fit=crop&crop=center",
title: "Undian Camera DSLR",
subtitle: "Kamera profesional untuk fotografer!",
backgroundColor: Color(0xFFFECEA8),
),
CarouselBanner(
id: "6",
imageUrl:
"https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=800&h=400&fit=crop&crop=center",
title: "Undian Gaming Console",
subtitle: "PlayStation 5 siap dimainkan!",
backgroundColor: Color(0xFFFF9AA2),
),
CarouselBanner(
id: "7",
imageUrl:
"https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?w=800&h=400&fit=crop&crop=center",
title: "Undian Motor Sport",
subtitle: "Motor sport impian Anda!",
backgroundColor: Color(0xFFB5EAD7),
),
CarouselBanner(
id: "8",
imageUrl:
"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=800&h=400&fit=crop&crop=center",
title: "Undian Home Theater",
subtitle: "Sistem audio premium untuk rumah!",
backgroundColor: Color(0xFFC7CEDB),
),
CarouselBanner(
id: "9",
imageUrl:
"https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?w=800&h=400&fit=crop&crop=center",
title: "Undian Luxury Watch",
subtitle: "Jam tangan mewah Swiss Made!",
backgroundColor: Color(0xFFFFB7B2),
),
CarouselBanner(
id: "10",
imageUrl:
"https://images.unsplash.com/photo-1558618666-fbd1c326d4a4?w=800&h=400&fit=crop&crop=center",
title: "Undian Travel Voucher",
subtitle: "Liburan gratis ke destinasi impian!",
backgroundColor: Color(0xFFE2F0CB),
),
];
final List<DrawEvent> drawEvents = [
DrawEvent(
id: "1",
name: "Emas 3 Gram",
description: "Gebyar Undian Enaklo\nMenangkan hadiah emas batangan",
entryPoints: 0,
icon: "👑",
imageUrl:
"https://images.unsplash.com/photo-1610375461246-83df859d849d?w=400&h=200&fit=crop&crop=center",
primaryColor: AppColor.primary,
prize: "Emas 3 Gram",
prizeValue: "Rp 2.500.000",
drawDate: DateTime.now().add(Duration(hours: 1, minutes: 20)),
totalParticipants: 245,
hadiah: 2,
status: 'active',
minSpending: 50000,
),
DrawEvent(
id: "2",
name: "iPhone 15 Pro",
description: "Undian Smartphone Premium\nDapatkan iPhone terbaru",
entryPoints: 0,
icon: "📱",
imageUrl:
"https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFF007AFF),
prize: "iPhone 15 Pro",
prizeValue: "Rp 18.000.000",
drawDate: DateTime.now().add(Duration(days: 2)),
totalParticipants: 1456,
hadiah: 1,
status: 'active',
minSpending: 100000,
),
DrawEvent(
id: "3",
name: "Laptop Gaming",
description: "Undian Laptop Gaming ROG\nPerforma tinggi untuk gaming",
entryPoints: 0,
icon: "💻",
imageUrl:
"https://images.unsplash.com/photo-1593640408182-31c70c8268f5?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFFFF4444),
prize: "ROG Strix G15",
prizeValue: "Rp 15.000.000",
drawDate: DateTime.now().add(Duration(days: 5)),
totalParticipants: 892,
hadiah: 1,
status: 'active',
minSpending: 75000,
),
DrawEvent(
id: "4",
name: "Sneakers Limited",
description: "Undian Sepatu Nike Air Jordan\nEdition terbatas collectors",
entryPoints: 0,
icon: "👟",
imageUrl:
"https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFF32CD32),
prize: "Nike Air Jordan",
prizeValue: "Rp 3.500.000",
drawDate: DateTime.now().add(Duration(days: 3)),
totalParticipants: 567,
hadiah: 3,
status: 'active',
minSpending: 30000,
),
DrawEvent(
id: "5",
name: "Camera DSLR",
description:
"Undian Kamera Canon EOS\nKamera profesional untuk fotografer",
entryPoints: 0,
icon: "📷",
imageUrl:
"https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFF8B4513),
prize: "Canon EOS R5",
prizeValue: "Rp 25.000.000",
drawDate: DateTime.now().add(Duration(days: 7)),
totalParticipants: 334,
hadiah: 1,
status: 'active',
minSpending: 150000,
),
DrawEvent(
id: "6",
name: "PlayStation 5",
description: "Undian Gaming Console\nPS5 bundle dengan 3 games",
entryPoints: 0,
icon: "🎮",
imageUrl:
"https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFF0070D1),
prize: "PlayStation 5",
prizeValue: "Rp 8.500.000",
drawDate: DateTime.now().add(Duration(days: 4)),
totalParticipants: 1789,
hadiah: 2,
status: 'active',
minSpending: 60000,
),
DrawEvent(
id: "7",
name: "Motor Yamaha R15",
description: "Undian Motor Sport\nYamaha R15 V4 warna special edition",
entryPoints: 0,
icon: "🏍️",
imageUrl:
"https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFFDC143C),
prize: "Yamaha R15 V4",
prizeValue: "Rp 35.000.000",
drawDate: DateTime.now().add(Duration(days: 10)),
totalParticipants: 456,
hadiah: 1,
status: 'active',
minSpending: 200000,
),
DrawEvent(
id: "8",
name: "Home Theater",
description: "Undian Sound System\nSony Home Theater 7.1 surround",
entryPoints: 0,
icon: "🔊",
imageUrl:
"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFF4B0082),
prize: "Sony HT-A7000",
prizeValue: "Rp 12.000.000",
drawDate: DateTime.now().add(Duration(days: 6)),
totalParticipants: 298,
hadiah: 1,
status: 'active',
minSpending: 80000,
),
DrawEvent(
id: "9",
name: "Luxury Watch",
description: "Undian Jam Tangan Mewah\nRolex Submariner Swiss Made",
entryPoints: 0,
icon: "",
imageUrl:
"https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFFB8860B),
prize: "Rolex Submariner",
prizeValue: "Rp 150.000.000",
drawDate: DateTime.now().add(Duration(days: 14)),
totalParticipants: 123,
hadiah: 1,
status: 'active',
minSpending: 500000,
),
DrawEvent(
id: "10",
name: "Travel Voucher Bali",
description: "Undian Liburan Gratis\nPaket tour Bali 4D3N all inclusive",
entryPoints: 0,
icon: "✈️",
imageUrl:
"https://images.unsplash.com/photo-1558618666-fbd1c326d4a4?w=400&h=200&fit=crop&crop=center",
primaryColor: Color(0xFF20B2AA),
prize: "Bali Tour Package",
prizeValue: "Rp 10.000.000",
drawDate: DateTime.now().subtract(Duration(days: 2)),
totalParticipants: 2156,
hadiah: 5,
status: 'ended',
minSpending: 40000,
),
];
@override
void initState() {
super.initState();
_scrollController.addListener(_onScroll);
}
@override
void dispose() {
_dateFilterController.dispose();
_scrollController.dispose();
super.dispose();
}
void _onScroll() {
final bool isCollapsed =
_scrollController.hasClients &&
_scrollController.offset > (280 - kToolbarHeight);
if (_isCollapsed != isCollapsed) {
setState(() {
_isCollapsed = isCollapsed;
});
}
}
List<DrawEvent> get filteredDraws {
List<DrawEvent> filtered = drawEvents;
if (_selectedFilterDate != null) {
filtered = filtered.where((draw) {
return draw.drawDate.year == _selectedFilterDate!.year &&
draw.drawDate.month == _selectedFilterDate!.month &&
draw.drawDate.day == _selectedFilterDate!.day;
}).toList();
}
return filtered;
}
String _getTimeRemaining(DateTime targetDate) {
final now = DateTime.now();
final difference = targetDate.difference(now);
if (difference.isNegative) return "Berakhir";
if (difference.inHours > 0) {
return "${difference.inHours}h ${difference.inMinutes % 60}m";
} else if (difference.inMinutes > 0) {
return "${difference.inMinutes}m";
} else {
return "Sekarang!";
}
}
Future<void> _selectDate() async {
final DateTime? picked = await showDatePicker(
context: context,
initialDate: _selectedFilterDate ?? DateTime.now(),
firstDate: DateTime.now().subtract(Duration(days: 365)),
lastDate: DateTime.now().add(Duration(days: 365)),
);
if (picked != null) {
setState(() {
_selectedFilterDate = picked;
_dateFilterController.text =
"${picked.day}/${picked.month}/${picked.year}";
});
}
}
void _clearDateFilter() {
setState(() {
_selectedFilterDate = null;
_dateFilterController.clear();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.background,
body: CustomScrollView(
controller: _scrollController,
slivers: [
// SliverAppBar with Carousel Background
SliverAppBar(
expandedHeight: 280,
floating: false,
pinned: true,
backgroundColor: AppColor.surface,
leading: Container(
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
borderRadius: BorderRadius.circular(20),
),
child: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
),
flexibleSpace: FlexibleSpaceBar(
title: AnimatedOpacity(
opacity: _isCollapsed ? 1.0 : 0.0,
duration: Duration(milliseconds: 200),
child: Text(
"Undian",
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
),
titlePadding: EdgeInsets.only(left: 72, bottom: 16),
collapseMode: CollapseMode.parallax,
background: Stack(
children: [
// Carousel Slider
Positioned.fill(
child: CarouselSlider.builder(
carouselController: _carouselController,
itemCount: banners.length,
options: CarouselOptions(
height: double.infinity,
viewportFraction: 1.0,
autoPlay: true,
autoPlayInterval: Duration(seconds: 4),
autoPlayAnimationDuration: Duration(milliseconds: 800),
onPageChanged: (index, reason) {
setState(() => _currentBannerIndex = index);
},
),
itemBuilder: (context, index, realIndex) {
final banner = banners[index];
return GestureDetector(
onTap: () {
context.router.push(DrawDetailRoute());
},
child: AppNetworkImage(url: banner.imageUrl),
);
},
),
),
// Page indicators
Positioned(
bottom: 20,
left: 0,
right: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: banners.asMap().entries.map((entry) {
return GestureDetector(
onTap: () =>
_carouselController.animateToPage(entry.key),
child: Container(
width: _currentBannerIndex == entry.key ? 24 : 8,
height: 8,
margin: EdgeInsets.symmetric(horizontal: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: _currentBannerIndex == entry.key
? Colors.white
: Colors.white.withOpacity(0.4),
),
),
);
}).toList(),
),
),
],
),
),
),
// Date Filter
SliverToBoxAdapter(
child: Container(
margin: EdgeInsets.all(16),
child: TextFormField(
controller: _dateFilterController,
readOnly: true,
onTap: _selectDate,
decoration: InputDecoration(
hintText: "Filter berdasarkan tanggal",
hintStyle: AppStyle.md.copyWith(
color: AppColor.textSecondary,
),
prefixIcon: Icon(
Icons.calendar_today,
color: AppColor.textSecondary,
),
suffixIcon: _selectedFilterDate != null
? IconButton(
icon: Icon(
Icons.clear,
color: AppColor.textSecondary,
),
onPressed: _clearDateFilter,
)
: null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: AppColor.border),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: AppColor.border),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: AppColor.primary, width: 2),
),
filled: true,
fillColor: AppColor.surface,
contentPadding: EdgeInsets.symmetric(
horizontal: 16,
vertical: 14,
),
),
style: AppStyle.md.copyWith(color: AppColor.textPrimary),
),
),
),
// Draw List Header
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
"Daftar Undian (${filteredDraws.length})",
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
),
),
),
),
// Draw List
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
final draw = filteredDraws[index];
return Container(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: _buildSimpleDrawCard(draw),
);
}, childCount: filteredDraws.length),
),
// Bottom padding
SliverToBoxAdapter(child: SizedBox(height: 100)),
],
),
);
}
Widget _buildSimpleDrawCard(DrawEvent draw) {
final timeRemaining = _getTimeRemaining(draw.drawDate);
return GestureDetector(
onTap: () => context.router.push(DrawDetailRoute()),
child: Container(
margin: EdgeInsets.only(bottom: 8),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [draw.primaryColor, draw.primaryColor.withOpacity(0.8)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColor.black.withOpacity(0.08),
blurRadius: 8,
offset: Offset(0, 2),
),
],
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Name
Text(
draw.name,
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textWhite,
),
),
SizedBox(height: 6),
// Description
Text(
draw.description,
style: AppStyle.sm.copyWith(
color: AppColor.textWhite.withOpacity(0.9),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 8),
// Date and participants
Row(
children: [
Icon(
Icons.access_time,
size: 16,
color: AppColor.textWhite.withOpacity(0.8),
),
SizedBox(width: 4),
Text(
draw.isActive ? "Berakhir: $timeRemaining" : "Selesai",
style: AppStyle.xs.copyWith(
color: AppColor.textWhite.withOpacity(0.8),
fontWeight: FontWeight.w500,
),
),
SizedBox(width: 16),
Icon(
Icons.people,
size: 16,
color: AppColor.textWhite.withOpacity(0.8),
),
SizedBox(width: 4),
Text(
"${draw.totalParticipants}",
style: AppStyle.xs.copyWith(
color: AppColor.textWhite.withOpacity(0.8),
fontWeight: FontWeight.w500,
),
),
],
),
],
),
),
// Prize info
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(draw.icon, style: TextStyle(fontSize: 28)),
SizedBox(height: 4),
Text(
draw.prize,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textWhite,
),
),
Text(
draw.prizeValue,
style: AppStyle.xs.copyWith(
color: AppColor.textWhite.withOpacity(0.8),
fontWeight: FontWeight.w500,
),
),
],
),
],
),
),
);
}
}