sc-android-app/lib/screens/calendar_screen.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import '../widgets/common_app_bar.dart'; // Custom AppBar widget
import '../widgets/common_background.dart'; // Custom background widget
import '../widgets/common_drawer.dart'; // Custom drawer widget

// Global variables to track the focused and selected dates in the calendar
DateTime _focusedDay = DateTime.now();
DateTime? _selectedDay = DateTime.now();

// Main Calendar screen
class CalendarScreen extends StatelessWidget {
  const CalendarScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return CommonBackground( // Wrapper for common background styling
      child: Scaffold(
        appBar: CommonAppBar( // Custom AppBar
          actions: [
            IconButton(
              onPressed: () {
                Navigator.pop(context); // Go back to the previous screen
              },
              icon: Image.asset('assets/Back_attendance.png'),
              padding: const EdgeInsets.only(right: 20),
            ),
          ],
          title: const Text('Calendar'), // Title of the AppBar
          backgroundColor: Colors.transparent, // Transparent background for the AppBar
          elevation: 0,
        ),
        backgroundColor: Colors.transparent, // Transparent background for the Scaffold
        drawer: const CommonDrawer(), // Custom drawer widget
        body: const SingleChildScrollView( // Scrollable view to accommodate the calendar and events list
          child: Column(
            children: [
              CalendarWidget(), // Calendar widget to show calendar dates
              EventsList(), // List of events associated with the selected date
            ],
          ),
        ),
      ),
    );
  }
}

// Calendar widget that shows the calendar dates
class CalendarWidget extends StatefulWidget {
  const CalendarWidget({super.key});

  @override
  State<CalendarWidget> createState() => _CalendarWidgetState();
}

class _CalendarWidgetState extends State<CalendarWidget> {
  @override
  Widget build(BuildContext context) {
    return Card( // Card UI to display the calendar inside
      margin: const EdgeInsets.all(16), // Margin around the card
      child: Padding(
        padding: const EdgeInsets.all(16), // Padding inside the card
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // Align items to the left
          children: [
            const Text(
              'Calendar',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), // Calendar heading
            ),
            const Text(
              'Month/Year',
              style: TextStyle(fontSize: 14, color: Colors.grey), // Display current month and year
            ),
            const SizedBox(height: 10),
            TableCalendar( // TableCalendar widget to show date selection
              firstDay: DateTime.utc(1900, 5, 1), // Earliest selectable date
              lastDay: DateTime.utc(2900, 5, 1), // Latest selectable date
              focusedDay: _focusedDay, // Currently focused day
              selectedDayPredicate: (day) {
                return isSameDay(_selectedDay, day); // Highlight selected day
              },
              onDaySelected: (selectedDay, focusedDay) {
                setState(() { // Update selected and focused days
                  _selectedDay = selectedDay;
                  _focusedDay = focusedDay;
                });
              },
              onPageChanged: (focusedDay) {
                _focusedDay = focusedDay; // Change focused day when calendar page changes
              },
            ),
          ],
        ),
      ),
    );
  }
}

// Widget to display a list of events
class EventsList extends StatelessWidget {
  const EventsList({super.key});

  @override
  Widget build(BuildContext context) {
    return const Card( // Card UI for the event list
      margin: EdgeInsets.all(16), // Margin around the card
      child: Padding(
        padding: EdgeInsets.all(16), // Padding inside the card
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // Align items to the left
          children: [
            Text(
              'Events List', // Heading for the events list
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            // Display individual event items
            EventItem(
              date: '10-06-2024',
              event: 'Meeting with Territory Manager',
            ),
            SizedBox(height: 10),
            EventItem(
              date: '10-06-2024',
              event: 'Sales Data Review',
            ),
          ],
        ),
      ),
    );
  }
}

// Widget for displaying individual event items
class EventItem extends StatelessWidget {
  final String date; // Event date
  final String event; // Event description

  const EventItem({super.key, required this.date, required this.event});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12), // Padding inside the event container
      decoration: BoxDecoration(
        color: Colors.blue[50], // Light blue background for the event item
        borderRadius: BorderRadius.circular(8), // Rounded corners for the container
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start, // Align items to the left
        children: [
          Text('Date: $date'), // Display event date
          Text(
            'Event: $event', // Display event description
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          ElevatedButton( // Button to view event details
            onPressed: () {
              // Add view details functionality here
            },
            style: ElevatedButton.styleFrom(
              foregroundColor: Colors.white, // Text color
              backgroundColor: Colors.blue[800], // Button background color
            ),
            child: const Text('VIEW DETAILS'), // Button label
          ),
        ],
      ),
    );
  }
}