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,
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    ),
                  ],
                ),
              ),
            ),

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

            //Menu Rekap Presensi
            Padding(
              padding: EdgeInsets.only(
                right:Constant.getActualXPhone(context: context, x: 27),
                left: Constant.getActualXPhone(context: context, x: 33),
              ),
              child: SizedBox(
                width: Constant.getActualXPhone(context: context, x: 330),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Rekap Presensi Bulan Ini',
                      style: Constant.titleH1_500_18(context: context).copyWith(
                          color: Constant.textTrueBlack,
                      ),
                    ),

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

                    Container(
                      decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(16),
                      color: Colors.white, // Set background color to #FFF
                      boxShadow: [
                        BoxShadow(
                          color: Color.fromRGBO(145, 158, 171, 0.20),
                          blurRadius: 2,
                        ),
                      ],
                    ),
                      child: Padding(
                        padding: EdgeInsets.only(
                          top: Constant.getActualYPhone(context: context, y: 12),
                          bottom: Constant.getActualYPhone(context: context, y: 12),
                          left: Constant.getActualXPhone(context: context, x: 24),
                          right:Constant.getActualXPhone(context: context, x: 24),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(

                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '24 hari',
                                    style: Constant.subtitle_600_14(context: context).copyWith(
                                      color: Constant.textOrange,
                                    ),
                                  ),
                      
                                  SizedBox(
                                     height: Constant.getActualYPhone(context: context, y: 4),
                                  ),
                      
                                  SizedBox(
                                    child: Row(
                                      children: [
                                        Image(
                                          image:AssetImage('images/person_available_grey.png'),                              
                                        ),
                                                          
                                        SizedBox(
                                          width: Constant.getActualXPhone(context: context, x: 4),
                                        ),
                                                          
                                        Text(
                                          'Kehadiran',
                                          style: Constant.subtitle_500_12(context: context).copyWith(
                                            color: Constant.textDarkGrey,
                                          ),
                                        ),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),

                            Image(
                              image:AssetImage('images/divider.png'),                              
                            ),

                            //Tidak Hadir
                            Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '2 hari',
                                    style: Constant.subtitle_600_14(context: context).copyWith(
                                      color: Constant.textOrange,
                                    ),
                                  ),
                      
                                  SizedBox(
                                     height: Constant.getActualYPhone(context: context, y: 4),
                                  ),
                      
                                  SizedBox(
                                    child: Row(
                                      children: [
                                        Image(
                                          image:AssetImage('images/person_delete_grey.png'),                              
                                        ),
                                                          
                                        SizedBox(
                                          width: Constant.getActualXPhone(context: context, x: 4),
                                        ),
                                                          
                                        Text(
                                          'Tidak Hadir',
                                          style: Constant.subtitle_500_12(context: context).copyWith(
                                            color: Constant.textDarkGrey,
                                          ),
                                        ),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),

                            Image(
                              image:AssetImage('images/divider.png'),                              
                            ),

                            //Tidak Hadir
                            Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    '5 hari',
                                    style: Constant.subtitle_600_14(context: context).copyWith(
                                      color: Constant.textOrange,
                                    ),
                                  ),
                      
                                  SizedBox(
                                     height: Constant.getActualYPhone(context: context, y: 4),
                                  ),
                      
                                  SizedBox(
                                    child: Row(
                                      children: [
                                        Image(
                                          image:AssetImage('images/task_pending_grey.png'),                              
                                        ),
                                                          
                                        SizedBox(
                                          width: Constant.getActualXPhone(context: context, x: 4),
                                        ),
                                                          
                                        Text(
                                          'Lembur',
                                          style: Constant.subtitle_500_12(context: context).copyWith(
                                            color: Constant.textDarkGrey,
                                          ),
                                        ),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}