I have 2 pages , one of the profile of the user where he is adding in his calendar the time available for people to book and the other page where I can view the profile and choose the available time slots and days. The only problem is that one is showing the data from firebase with the time slots added ( where the user insert the available dates https://imgur.com/a/j7KGVn0) and the other one where the data doesn’t fetch https://imgur.com/a/5fLKEln

class BookingCalendar extends StatefulWidget {
  @override
  _BookingCalendarState createState() => _BookingCalendarState();
}

class _BookingCalendarState extends State<BookingCalendar> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;
  Map<DateTime, List<TimeSlot>> _availableSlots = {};
  late String userId;
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    userId = FirebaseAuth.instance.currentUser!.uid;
    _fetchAvailableSlots();
  }

  void _fetchAvailableSlots() async {
    setState(() {
      _isLoading = true;
    });

    final slotsSnapshot = await FirebaseFirestore.instance
        .collection('users')
        .doc(userId)
        .collection('availableSlots')
        .get();

    setState(() {
      _availableSlots = {};
      for (var doc in slotsSnapshot.docs) {
        DateTime date = (doc['date'] as Timestamp).toDate();
        List<TimeSlot> slots = (doc['slots'] as List)
            .map((slot) => TimeSlot(
                  TimeOfDay.fromDateTime(
                      (slot['startTime'] as Timestamp).toDate()),
                  TimeOfDay.fromDateTime((slot['endTime'] as Timestamp).toDate()),
                ))
            .toList();
        _availableSlots[DateTime(date.year, date.month, date.day)] = slots;
      }
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Booking Calendar'),
        actions: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
            child: ElevatedButton(
              onPressed: _saveAllSlots,
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xFF1A237E), // Dark blue background (Indigo 900)
                foregroundColor: Colors.white, // White text
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20), // Rounded borders
                ),
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                elevation: 0, // No shadow
              ),
              child: Text(
                'Save',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : Column(
              children: [
                TableCalendar(
                  firstDay: DateTime.utc(2023, 1, 1),
                  lastDay: DateTime.utc(2024, 12, 31),
                  focusedDay: _focusedDay,
                  calendarFormat: _calendarFormat,
                  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
                  onDaySelected: _onDaySelected,
                  onFormatChanged: (format) {
                    if (_calendarFormat != format) {
                      setState(() {
                        _calendarFormat = format;
                      });
                    }
                  },
                ),
                SizedBox(height: 20),
                Expanded(
                  child: _selectedDay == null
                      ? Center(child: Text('Please select a day'))
                      : _buildTimeSlotsList(),
                ),
              ],
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showAddTimeSlotDialog,
        child: Icon(Icons.add),
      ),
    );
  }

  void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
    setState(() {
      _selectedDay = DateTime(selectedDay.year, selectedDay.month, selectedDay.day);
      _focusedDay = focusedDay;
    });
  }

  Widget _buildTimeSlotsList() {
    List<TimeSlot> slots = _availableSlots[_selectedDay!] ?? [];
    return slots.isEmpty
        ? Center(child: Text('No available slots for this day'))
        : ListView.builder(
            itemCount: slots.length,
            itemBuilder: (context, index) {
              TimeSlot slot = slots[index];
              return ListTile(
                title: Text('${slot.startTime.format(context)} - ${slot.endTime.format(context)}'),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () => _removeTimeSlot(slot),
                ),
              );
            },
          );
  }

  void _showAddTimeSlotDialog() {
    TimeOfDay startTime = TimeOfDay(hour: 9, minute: 0);
    TimeOfDay endTime = TimeOfDay(hour: 17, minute: 0);

    showDialog(
      context: context,
      builder: (context) => StatefulBuilder(
        builder: (context, setState) {
          return Dialog(
            backgroundColor: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    'Add Time Schedule',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 24),
                  Text('Start Time'),
                  TimeInputWidget(
                    initialTime: startTime,
                    onChanged: (time) => startTime = time,
                  ),
                  SizedBox(height: 16),
                  Text('End Time'),
                  TimeInputWidget(
                    initialTime: endTime,
                    onChanged: (time) => endTime = time,
                  ),
                  SizedBox(height: 24),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        child: Text('Cancel'),
                        onPressed: () => Navigator.of(context).pop(),
                      ),
                      SizedBox(width: 8),
                      ElevatedButton(
                        child: Text('Add'),
                        onPressed: () {
                          _addTimeSlot(startTime, endTime);
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  void _addTimeSlot(TimeOfDay startTime, TimeOfDay endTime) {
    if (_selectedDay == null) return;

    setState(() {
      _availableSlots.update(
        _selectedDay!,
        (value) => [...value, TimeSlot(startTime, endTime)],
        ifAbsent: () => [TimeSlot(startTime, endTime)],
      );
    });
  }

  void _removeTimeSlot(TimeSlot slot) {
    setState(() {
      _availableSlots[_selectedDay!]?.remove(slot);
    });
  }

  void _saveAllSlots() async {
    setState(() {
      _isLoading = true;
    });

    try {
      for (var entry in _availableSlots.entries) {
        final date = entry.key;
        final slots = entry.value;

        final docRef = FirebaseFirestore.instance
            .collection('users')
            .doc(userId)
            .collection('availableSlots')
            .doc(date.toIso8601String().split('T')[0]);

        if (slots.isEmpty) {
          await docRef.delete();
        } else {
          await docRef.set({
            'date': Timestamp.fromDate(date),
            'slots': slots.map((slot) => {
              'startTime': Timestamp.fromDate(DateTime(
                  date.year, date.month, date.day, slot.startTime.hour, slot.startTime.minute)),
              'endTime': Timestamp.fromDate(DateTime(
                  date.year, date.month, date.day, slot.endTime.hour, slot.endTime.minute)),
            }).toList(),
          });
        }
      }

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('All slots saved successfully')),
      );
    } catch (e) {
      print('Error saving slots: $e');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error saving slots')),
      );
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }
}

class TimeSlot {
  final TimeOfDay startTime;
  final TimeOfDay endTime;

  TimeSlot(this.startTime, this.endTime);
}

class TimeInputWidget extends StatefulWidget {
  final TimeOfDay initialTime;
  final ValueChanged<TimeOfDay> onChanged;

  TimeInputWidget({required this.initialTime, required this.onChanged});

  @override
  _TimeInputWidgetState createState() => _TimeInputWidgetState();
}

class _TimeInputWidgetState extends State<TimeInputWidget> {
  late TextEditingController _hourController;
  late TextEditingController _minuteController;

  @override
  void initState() {
    super.initState();
    _hourController = TextEditingController(text: widget.initialTime.hour.toString().padLeft(2, '0'));
    _minuteController = TextEditingController(text: widget.initialTime.minute.toString().padLeft(2, '0'));
  }

  @override
  void dispose() {
    _hourController.dispose();
    _minuteController.dispose();
    super.dispose();
  }

  void _updateTime() {
    int hour = int.tryParse(_hourController.text) ?? 0;
    int minute = int.tryParse(_minuteController.text) ?? 0;
    widget.onChanged(TimeOfDay(hour: hour.clamp(0, 23), minute: minute.clamp(0, 59)));
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: 50,
          child: TextField(
            controller: _hourController,
            keyboardType: TextInputType.number,
            textAlign: TextAlign.center,
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly,
              LengthLimitingTextInputFormatter(2),
            ],
            onChanged: (value) => _updateTime(),
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 4),
            ),
          ),
        ),
        Text(' : ', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        SizedBox(
          width: 50,
          child: TextField(
            controller: _minuteController,
            keyboardType: TextInputType.number,
            textAlign: TextAlign.center,
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly,
              LengthLimitingTextInputFormatter(2),
            ],
            onChanged: (value) => _updateTime(),
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 4),
            ),
          ),
        ),
      ],
    );
  }
}

and here is the second one where user displays data

class BookingCalendarWidget extends StatefulWidget {
  final String serviceProviderId;
  final String serviceName;
  final String servicePrice;

  BookingCalendarWidget({
    required this.serviceProviderId,
    required this.serviceName,
    required this.servicePrice,
  });

  @override
  _BookingCalendarWidgetState createState() => _BookingCalendarWidgetState();
}

class _BookingCalendarWidgetState extends State<BookingCalendarWidget> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;
  Map<DateTime, List<TimeSlot>> _availableSlots = {};
  bool _isLoading = true;
  String _statusMessage = '';

  @override
  void initState() {
    super.initState();
    _fetchAvailableSlots();
  }

  void _fetchAvailableSlots() async {
    setState(() {
      _statusMessage = 'Fetching available slots...';
    });

    print("Fetching available slots for provider: ${widget.serviceProviderId}");
    try {
      final snapshot = await FirebaseFirestore.instance
          .collection("Users")
          .doc(widget.serviceProviderId)
          .collection("availableSlots")
          .get();

      print("Number of documents fetched: ${snapshot.docs.length}");

      Map<DateTime, List<TimeSlot>> slots = {};

      for (var doc in snapshot.docs) {
        print("Processing document: ${doc.id}");
        final data = doc.data();
        print("Document data: $data");
        
        final date = DateTime.parse(doc.id);
        print("Date: $date");

        final List<dynamic> slotsData = data['slots'] ?? [];
        print("Slots data: $slotsData");

        slots[date] = slotsData.map((slot) {
          final start = (slot['start'] as Timestamp).toDate();
          final end = (slot['end'] as Timestamp).toDate();
          return TimeSlot(
            start: start,
            end: end,
            serviceName: widget.serviceName,
            servicePrice: widget.servicePrice,
          );
        }).toList();

        print("Processed slots for $date: ${slots[date]}");
      }

      print("All processed slots: $slots");

      setState(() {
        _availableSlots = slots;
        _isLoading = false;
        if (_availableSlots.isEmpty) {
          _statusMessage = 'No available slots found for this service provider.';
        } else {
          _statusMessage = '';
        }
      });
    } catch (e) {
      print("Error fetching available slots: $e");
      setState(() {
        _isLoading = false;
        _statusMessage = 'Error fetching available slots: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    print("Building widget. isLoading: $_isLoading, statusMessage: $_statusMessage");
    return Scaffold(
      appBar: AppBar(
        title: Text('Book ${widget.serviceName}'),
      ),
      body: _isLoading
          ? Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircularProgressIndicator(),
                  SizedBox(height: 16),
                  Text(_statusMessage),
                ],
              ),
            )
          : Column(
              children: [
                TableCalendar(
                  firstDay: DateTime.now(),
                  lastDay: DateTime.now().add(Duration(days: 365)),
                  focusedDay: _focusedDay,
                  calendarFormat: _calendarFormat,
                  selectedDayPredicate: (day) {
                    return isSameDay(_selectedDay, day);
                  },
                  onDaySelected: (selectedDay, focusedDay) {
                    setState(() {
                      _selectedDay = selectedDay;
                      _focusedDay = focusedDay;
                    });
                  },
                  onFormatChanged: (format) {
                    setState(() {
                      _calendarFormat = format;
                    });
                  },
                  eventLoader: (day) {
                    return _availableSlots[day] ?? [];
                  },
                ),
                Expanded(
                  child: _selectedDay == null
                      ? Center(child: Text('Select a day to see available slots'))
                      : _buildTimeSlotList(),
                ),
              ],
            ),
    );
  }

  Widget _buildTimeSlotList() {
    print("Building time slot list for selected day: $_selectedDay");
    final slots = _availableSlots[_selectedDay!] ?? [];
    print("Slots for selected day: $slots");
    if (slots.isEmpty) {
      return Center(child: Text('No available slots for this day'));
    }
    return ListView.builder(
      itemCount: slots.length,
      itemBuilder: (context, index) {
        final slot = slots[index];
        print("Rendering slot: ${slot.start} - ${slot.end}");
        return ListTile(
          title: Text('${_formatTime(slot.start)} - ${_formatTime(slot.end)}'),
          subtitle: Text('${slot.serviceName} - ${slot.servicePrice}'),
          onTap: () => _confirmBooking(slot),
        );
      },
    );
  }

  String _formatTime(DateTime time) {
    return DateFormat('HH:mm').format(time);
  }

  void _confirmBooking(TimeSlot slot) {
    // ... (keep the existing _confirmBooking method)
  }
}

class TimeSlot {
  final DateTime start;
  final DateTime end;
  final String serviceName;
  final String servicePrice;

  TimeSlot({
    required this.start,
    required this.end,
    required this.serviceName,
    required this.servicePrice,
  });
}