import 'package:car_provider_app/config/provider_routes.dart'; import 'package:car_provider_app/views/dashboard/widget/appointment_slider_widget.dart'; import 'package:mc_common_app/classes/app_state.dart'; import 'package:mc_common_app/config/dependencies.dart'; import 'package:mc_common_app/extensions/string_extensions.dart'; import 'package:mc_common_app/models/provider_branches_models/branch_detail_model.dart'; import 'package:mc_common_app/theme/colors.dart'; import 'package:mc_common_app/utils/date_helper.dart'; import 'package:mc_common_app/utils/enums.dart'; import 'package:mc_common_app/utils/navigator.dart'; import 'package:mc_common_app/utils/utils.dart'; import 'package:mc_common_app/view_models/appointments_view_model.dart'; import 'package:mc_common_app/widgets/common_widgets/categories_list.dart'; import 'package:mc_common_app/widgets/extensions/extensions_widget.dart'; import 'package:flutter/material.dart'; import 'package:mc_common_app/classes/consts.dart'; import 'package:mc_common_app/extensions/int_extensions.dart'; import 'package:mc_common_app/widgets/common_widgets/app_bar.dart'; import 'package:percent_indicator/percent_indicator.dart'; import 'package:provider/provider.dart'; class AppointmentPage extends StatelessWidget { BranchDetailModel branch; String date = ""; AppointmentPage({ required this.branch, Key? key, }) : super(key: key); GlobalKey refreshIndicatorKey = GlobalKey(); Future _pullRefresh(BuildContext context) async { await context.read().getAppointmentSlotsInfo( context: context, map: { "ProviderBranchID": branch.id.toString(), "FromDate": date, "ToDate": date }, isNeedToRebuild: true, ); await context.read().getProviderMyAppointments({ "ServiceProviderID": injector .get() .getUser .data ?.userInfo ?.providerId .toString() ?? "0", "ProviderBranchID": branch.id.toString(), "FromDate": date, "DateTo": date, }); } @override Widget build(BuildContext context) { date = DateHelper.formatAsYearMonthDay(DateTime.now()); context.read().setupProviderAppointmentFilter(); _pullRefresh(context); context.read().selectedBranch = branch.id ?? 0; return Scaffold( appBar: CustomAppBar( profileImageUrl: MyAssets.carBanner, title: branch.branchName, ), body: SizedBox( width: double.infinity, height: double.infinity, child: Consumer(builder: (BuildContext context, AppointmentsVM appointmentsVM, Widget? child) { if (appointmentsVM.state == ViewState.busy) { return const Center(child: CircularProgressIndicator()); } else { return RefreshIndicator( onRefresh: () => _pullRefresh(context), key: refreshIndicatorKey, child: SingleChildScrollView( physics: const AlwaysScrollableScrollPhysics(), child: Column( children: [ progressWidget(context, appointmentsVM), FiltersList( filterList: appointmentsVM.appointmentsFilterOptions, padding: const EdgeInsets.symmetric(horizontal: 18), onFilterTapped: (index, selectedFilterId) { appointmentsVM.applyFilterOnAppointmentsVM( appointmentStatusEnum: selectedFilterId.toAppointmentStatusEnum(), isNeedCustomerFilter: true, ); }, ), if (appointmentsVM.myFilteredAppointments2.isEmpty) Padding( padding: const EdgeInsets.symmetric(vertical: 12), child: "No Appointment Found".toText(), ), ListView.separated( itemBuilder: (context, index) { return AppointmentSliderWidget( appointmentListModel: appointmentsVM.myFilteredAppointments2[index], isNeedTotalPayment: false, onTap: () { context .read() .selectedAppointmentIndex = index; navigateWithName( context, ProviderAppRoutes.appointmentDetailList, // arguments: appointmentsVM // .myFilteredAppointments2[index] // .customerAppointmentList, ); }, ); }, separatorBuilder: (context, snapchat) { return 21.height; }, itemCount: appointmentsVM.myFilteredAppointments2.length, physics: const NeverScrollableScrollPhysics(), shrinkWrap: true, padding: const EdgeInsets.all(21), ), ], ), ), ); } }), ), ); } Widget progressWidget(BuildContext context, AppointmentsVM appointmentsVM) { double percent = (appointmentsVM.appointmentSlots?.occupiedSlots ?? 0.0 / (appointmentsVM.appointmentSlots?.totalSlots ?? 0.0)) .toDouble() * 100; return Column( children: [ Row( children: [ Expanded( child: "Slots Overview".toText( fontSize: 16, fontWeight: FontWeight.bold, ), ), Row( children: [ date.toText( fontWeight: FontWeight.bold, ), const Icon( Icons.keyboard_arrow_down_outlined, size: 16, ), ], ) .toContainer( backgroundColor: MyColors.lightGreyEAColor, borderRadius: 100, padding: const EdgeInsets.symmetric( horizontal: 12, vertical: 6, ), ) .onPress(() async { date = await Utils.pickDateFromDatePicker( context, firstDate: null, ); _pullRefresh(context); // context.read().notifyListeners(); }), ], ), 24.height, Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Container( width: 14, height: 14, color: MyColors.lightGreyEAColor, ), 4.width, "Empty: ".toText( fontSize: 8, color: Colors.white, ), (appointmentsVM.appointmentSlots?.emptySlots ?? 0) .toString() .toText( fontSize: 9, fontWeight: FontWeight.bold, color: Colors.white, ), ], ).toContainer( backgroundColor: MyColors.darkIconColor, ), 8.height, Row( children: [ Container( width: 14, height: 14, color: MyColors.darkPrimaryColor, ), 4.width, "Occupied: ".toText( fontSize: 8, color: Colors.white, ), (appointmentsVM.appointmentSlots?.occupiedSlots ?? 0) .toString() .toText( fontSize: 9, fontWeight: FontWeight.bold, color: Colors.white, ), ], ).toContainer( backgroundColor: MyColors.darkIconColor, ), ], ), CircularPercentIndicator( radius: 60.0, lineWidth: 12.0, percent: percent, circularStrokeCap: CircularStrokeCap.round, center: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ "Total Slots".toText( fontSize: 13, fontWeight: FontWeight.bold, ), (appointmentsVM.appointmentSlots?.totalSlots ?? 0) .toString() .toText( fontSize: 24, fontWeight: FontWeight.bold, ), ], ), backgroundColor: MyColors.lightGreyEAColor, progressColor: MyColors.darkPrimaryColor, ), ], ) ], ).toWhiteContainer( width: double.infinity, pading: const EdgeInsets.all(12), margin: const EdgeInsets.all(21), ); } }