import 'package:absensi_sas_flutter/app/constant.dart';
import 'package:absensi_sas_flutter/screen/widget/real_date.dart';
import 'package:absensi_sas_flutter/screen/widget/real_time.dart';
import 'package:flutter/material.dart';

class HomepageScreen extends StatelessWidget {
  const HomepageScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [

            SizedBox(
              height: Constant.getActualYPhone(context: context, y: 44),
            ),

            //Card Time
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualXPhone(context: context, x: 33),
                right:Constant.getActualXPhone(context: context, x: 27),
              ),
              child: Container(
                child: Card(
                  elevation: 16,
                  child: Container(
                    width: Constant.getActualXPhone(context: context, x: 330),
                    height: Constant.getActualYPhone(context: context, y: 200),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(40),
                      image: DecorationImage(
                        image: AssetImage('images/card_bg_1.png'), // Ganti dengan path gambar Anda
                        fit: BoxFit.cover, // Sesuaikan cara gambar ditampilkan
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        // Date
                        Padding(
                          padding: EdgeInsets.only(
                            top: Constant.getActualYPhone(context: context, y: 16),
                            left: Constant.getActualXPhone(context: context, x: 83.5),
                            right:Constant.getActualXPhone(context: context, x: 83.5),
                          ),
                          child: RealTimeFormattedDate(),
                        ),
                        SizedBox(height: Constant.getActualYPhone(context: context, y: 8),),
              
                        //Time
                        RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock
                        
                        SizedBox(height: Constant.getActualYPhone(context: context, y: 20),),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center, // Menengahkan secara horizontal
                          children: [
                            Spacer(), // Spasi di sebelah kiri "Check In"
                            Column(
                              children: [
                                Image.asset(
                                  'images/finger_tap.png', // Path gambar untuk "Check In"
                                  width: Constant.getActualXPhone(context: context, x:22),
                                  height: Constant.getActualYPhone(context: context, y: 22),
                                ),
                              
                                SizedBox(
                                  height: Constant.getActualYPhone(context: context, y: 8),
                                ),
                                
                                Text(
                                  '--:--',
                                  style: TextStyle(
                                    // Atur gaya teks '--:--' sesuai kebutuhan
                                  ),
                                ),
                                Text(
                                  'Clock In',
                                  style: Constant.titleH2_700(context: context).copyWith(
                                      color: Constant.textLightGrey,
                                  ),
                                ),
                              ],
                            ),
                            
                            SizedBox(width: Constant.getActualXPhone(context: context, x: 96),), // Jarak antara "Check In" dan "Check Out"
              
                            Column(
                              children: [
                                Image.asset(
                                  'images/finger_tap.png', // Path gambar untuk "Check Out"
                                  width: Constant.getActualXPhone(context: context, x:22),
                                  height: Constant.getActualYPhone(context: context, y: 22),
                                ),
                                SizedBox(
                                  height: Constant.getActualYPhone(context: context, y: 8),
                                ),
                                Text(
                                  '--:--',
                                  style: TextStyle(
                                    // Atur gaya teks '--:--' sesuai kebutuhan
                                  ),
                                ),
                                Text(
                                  'Clock Out',
                                  style: Constant.titleH2_700(context: context).copyWith(
                                      color: Constant.textLightGrey,
                                  ),
                                ),
                              ],
                            ),
                            Spacer(), // Spasi di sebelah kanan "Check Out"
                          ],
                        ),

                        SizedBox(
                          height: Constant.getActualYPhone(context: context, y: 16),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),

            SizedBox(
              height: Constant.getActualYPhone(context: context, y: 56),
            ),

            //Menu Cuti Lembur
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualXPhone(context: context, x: 33),
                right:Constant.getActualXPhone(context: context, x: 27),
              ),
              child: Container(
                child: Row(
                  children: [
                    //Menu Cuti
                    SizedBox(
                      width:Constant.getActualXPhone(context: context, x: 98),
                      child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateColor.resolveWith(
                            (st) => Colors.white,
                          ),
                          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(16.0),
                            ),
                          ),
                          elevation: MaterialStatePropertyAll(4),
                          shadowColor: MaterialStateProperty.all<Color>(Color.fromRGBO(145, 158, 171, 0.16)),
                        ),
                        onPressed: () { },
                        child: Padding(
                          padding: EdgeInsets.only(
                            top: Constant.getActualYPhone(context: context, y: 8),
                            bottom: Constant.getActualYPhone(context: context, y: 8),
                            left: Constant.getActualXPhone(context: context, x: 12),
                            right:Constant.getActualXPhone(context: context, x: 12),
                          ),
                          child: Column(
                            children: [
                              Container(
                                width:Constant.getActualXPhone(context: context, x: 50),
                                height:Constant.getActualYPhone(context: context, y: 50),
                                decoration: BoxDecoration(
                                  // color: Colors.green,
                                image: DecorationImage(
                                  // fit: BoxFit.contain,
                                image: AssetImage('images/person.png'),
                                ),
                              ),
                            ),
                            
                            SizedBox(
                              height: Constant.getActualYPhone(context: context, y: 8),
                            ),
                              Text(
                                'Cuti',
                                style: Constant.titleH2_600_14(context: context).copyWith(
                                    color: Constant.textDarkGrey,
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    ),

                    SizedBox(
                      width: Constant.getActualXPhone(context: context, x: 18),
                    ),

                    //Menu Lembur
                    SizedBox(
                      width:Constant.getActualXPhone(context: context, x: 98),
                      child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateColor.resolveWith(
                            (st) => Colors.white,
                          ),
                          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(16.0),
                            ),
                          ),
                          elevation: MaterialStatePropertyAll(4),
                          shadowColor: MaterialStateProperty.all<Color>(Color.fromRGBO(145, 158, 171, 0.16)),
                        ),
                        onPressed: () { },
                        child: Padding(
                          padding: EdgeInsets.only(
                            top: Constant.getActualYPhone(context: context, y: 8),
                            bottom: Constant.getActualYPhone(context: context, y: 8),
                            left: Constant.getActualXPhone(context: context, x: 12),
                            right:Constant.getActualXPhone(context: context, x: 12),
                          ),
                          child: Column(
                            children: [
                              Container(
                                width:Constant.getActualXPhone(context: context, x: 50),
                                height:Constant.getActualYPhone(context: context, y: 50),
                                decoration: BoxDecoration(
                                  // color: Colors.green,
                                  image: DecorationImage(
                                  // fit: BoxFit.contain,
                                  image: AssetImage('images/task.png'),
                                  ),
                                ),
                              ),
                              
                              SizedBox(
                                height: Constant.getActualYPhone(context: context, y: 8),
                              ),

                              Text(
                                'Lembur',
                                style: Constant.titleH2_600_14(context: context).copyWith(
                                    color: Constant.textDarkGrey,
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    ),
                    
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}